CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jsmapbox-glmapbox-marker
abhi singh
abhi singh

Reputation: 21

How to add dynamic markers in mapbox?

i want to show dynamic markers in mapbox js. i created the dynamic markers in the dataset. Now. i am confused how to display them. i want result like this. https://screenshots.firefox.com/yW9nHlICwVAbDLeF/api.mapbox.com

My current result is. https://screenshots.firefox.com/K1a5WVQHlxtFSIZY/null

Thanks in advance

Upvotes: 0

Views: 5262

Answers (1)

RedCrusador
RedCrusador

Reputation: 715

This is very easy to accomplish. I have produced a code sample for you.

I suggest taking each concept do a little reading arond it to understand how it works.

Mapbox JS has some excellent documentation to help you. https://www.mapbox.com/help/markers-js/#getting-started

L.mapbox.accessToken = 'pk.eyJ1IjoiZGF2aWRiYXR0eSIsImEiOiJjajBqc2hqZ3YwMDN5MndvbDUxaDhoMDV6In0.w7sfrB5JeCH92sY-l0TQSg';
var mapLeaflet = L.mapbox.map('map-leaflet', 'mapbox.light')
  .setView([53.801277, -1.548567],10);

L.marker([53.801277, -1.54856]).addTo(mapLeaflet);
L.marker([53.901277, -1.54856]).addTo(mapLeaflet);

mapLeaflet.scrollWheelZoom.disable();
 body {
      margin: 0;
      padding :0;
    }
    .map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
<link href="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css" rel="stylesheet"/>
<script src="https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js"></script>
<div id='map-leaflet' class='map'> </div>

Upvotes: 1

Related Questions