Adding markers to map (Mapbox)

Question

I using mapbox on my View and need to add multiple markers from JSON

Here is my JSON

  [
   {
      "name":"Thistle London Heathrow Termin",
      "address1":"Bath Road",
      "rating":3.0,
      "lng":-0.4836,
      "lat":51.4805
   },
   {
      "name":"Ibis London Heathrow Airport",
      "address1":"112  Bath Road Hayes",
      "rating":3.0,
      "lng":-0.430683,
      "lat":51.48079
   },
   {
      "name":"Britannia Inn",
      "address1":"54 Mansfield Road",
      "rating":2.0,
      "lng":0.066,
      "lat":51.563
   },
   {
      "name":"Cranbrook Hotel",
      "address1":"22 24 Coventry Road",
      "rating":2.0,
      "lng":0.069,
      "lat":51.563
   },
   {
      "name":"Park Hotel",
      "address1":"327 Cranbrook Road",
      "rating":2.0,
      "lng":0.065,
      "lat":51.568
   },
   {
      "name":"Rest Up London",
      "address1":"Driscoll House",
      "rating":2.0,
      "lng":-0.096403,
      "lat":51.494554
   },
   {
      "name":"Ascot Hyde Park",
      "address1":"11 Craven Road",
      "rating":3.0,
      "lng":-0.176815,
      "lat":51.514745
   },
   {
      "name":"Fairways Bayswater",
      "address1":"186 Sussex Gardens",
      "rating":2.0,
      "lng":-0.1748,
      "lat":51.5144
   },
   {
      "name":"Four Stars",
      "address1":"26 28 Sussex Gardens",
      "rating":3.0,
      "lng":-0.1685,
      "lat":51.5179
   },
   {
      "name":"King Solomon",
      "address1":"155 159 Golders Green Road",
      "rating":3.0,
      "lng":-0.21045388,
      "lat":51.58082156
   },
   {
      "name":"Somerset.",
      "address1":"6  Dorset Square",
      "rating":2.0,
      "lng":-0.1607,
      "lat":51.5229
   },
   {
      "name":"Trinity House",
      "address1":"26 Blackhorse Raod",
      "rating":2.0,
      "lng":-0.0356,
      "lat":51.5832
   },
   {
      "name":"Viking",
      "address1":"162 Romford Road",
      "rating":2.0,
      "lng":0.01299262,
      "lat":51.54324077
   },
   {
      "name":"Wedgewood",
      "address1":"49 51 Leinster  Square",
      "rating":2.0,
      "lng":-0.1928,
      "lat":51.51365
   },
   {
      "name":"Kensington Suite",
      "address1":"128 130 Holland Road",
      "rating":3.0,
      "lng":-0.2121,
      "lat":51.5015
   }
]

And here is how I run script to add map to View

let centerLatlng = new mapboxgl.LngLat(gon.destination_city.lng,gon.destination_city.lat);
  mapboxgl.accessToken = token;
  let map = new mapboxgl.Map({
        container: 'map-canvas',
        style: 'mapbox://styles/mapbox/streets-v9',
        center:centerLatlng,
        zoom: 9
  });
  map.addControl(new mapboxgl.NavigationControl());
  });

But I wondering , how I need to add markers to map (for every element in json I need to get lat and lon) to map. Because according to docs I need to have json like this

var geojson = { type: 'FeatureCollection', features: [{ type: 'Feature', geometry: { type: 'Point', coordinates: [-77.032, 38.913] }, properties: { title: 'Mapbox', description: 'Washington, D.C.' } }, { type: 'Feature', geometry: { type: 'Point', coordinates: [-122.414, 37.776] }, properties: { title: 'Mapbox', description: 'San Francisco, California' } }] };

Can I make markers with my json

Balance · Accepted Answer · 2018-05-22 12:38:10Z

0

I found solution how to this

It's simple

like this

 for(var i = 0; i < json.length; i++) {
    var obj = json[i];
    let myLatlng = new mapboxgl.LngLat(obj.lng, obj.lat);
    let marker = new mapboxgl.Marker()
    .setLngLat(myLatlng)
    .setPopup(new mapboxgl.Popup({ offset: 25 })
    .setHTML('<h3>' + obj.name + '</h3><p>' + obj.address1 + '</p>'))
    .addTo(map);
  }

Or using jQuery

$.each(json, function(i, item) {
    let myLatlng = new mapboxgl.LngLat(json[i].lng, json[i].lat);
    let marker = new mapboxgl.Marker()
    .setLngLat(myLatlng)
    .setPopup(new mapboxgl.Popup({ offset: 25 })
    .setHTML('<h3>' + json[i].name + '</h3><p>' + json[i].address1 + '</p>'))
    .addTo(map);
  });

edited May 22, 2018 at 12:38

answered May 22, 2018 at 12:22

Balance

1411 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JahStation · Accepted Answer · 2021-01-11 12:03:17Z

there is other approach that works faster imo, like adding the source via layer, geoJson must be in the format you linked from docs:

map.on('load', function () {
                            // Add an image to use as a custom marker
                            map.loadImage(
                             'img',
                              function (error, image) {
                                if (error) throw error;
                                map.addImage('custom-marker', image);
                                // Add a GeoJSON source with 2 points
                                map.addSource('points',geoJson);
                    
                                map.addLayer(
                                {
                                    'id': 'points',
                                    'type': 'symbol',
                                    'source': 'points',
                                    'layout': 
                                    {
                                        'icon-image': 'custom-marker',
                                        // get the title name from the source's "title" property
                                        'text-field': ['get', 'title'],
                                        'text-font': ['Open Sans Semibold','Arial Unicode MS Bold'],
                                        'text-offset': [0, 1.25],
                                        'text-anchor': 'top'
                                    }
                                });
                        });

this example can be seen at https://docs.mapbox.com/mapbox-gl-js/example/geojson-markers/

Collectives™ on Stack Overflow

Adding markers to map (Mapbox)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related