Can't add markers to mapbox map with mapbox-gl.js

0
votes

I am desperately trying to add some markers to a mapbox map by using the mapbox-gl-js with typescript and I follwed several tutorials from the mapbox site, but it doesn't work for me.

    mapboxgl.accessToken = 'mykey';

    this.map = new mapboxgl.Map({
      container: 'map',
      style: this.style,
      zoom: 13,
      center: [12, 12]
    });

    this.map.on('load', (event) => {

      this.map.addSource('testSrc', {
        type: 'geojson',
        data: {
          type: 'FeatureCollection',
          features: [{
            type: 'Feature',
            geometry: {
              type: 'Point',
              coordinates: [ 12, 12]
            },
            properties: {
              title: 'Mapbox',
              description: 'Washington, D.C.'
            }
          },
            {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: [-122.414, 37.776]
              },
              properties: {
                title: 'Mapbox',
                description: 'San Francisco, California'
              }
            }]
        }
  });

      this.map.addLayer({
        id: 'testSrc',
        source: 'testSrc',
        type: 'circle',
        layout: {
          'text-field': '{message}',
          'text-size': 24,
          'text-transform': 'uppercase',
          'icon-image': 'rocket-15',
          'text-offset': [0, 1.5]
        },
        paint: {
          'text-color': '#f16624',
          'text-halo-color': '#fff',
          'text-halo-width': 2
        }
      });

      this.map.addControl(new mapboxgl.NavigationControl());

    });

I created a source with some static data and I set it to a layer of the mapboxgl map-object. The map is displaying without any problems, but I can't add some markers with the required geojson format.

My goal is to dynamically add markers, but here I stuck in adding some static ones.

Do you have any idea what's the problem in here?

Regards Marko

2
javascripttypescriptmapboxmapbox-gl-js

2 Answers

1
votes

You have two main ways to add "markers" to Mapbox GL JS,

  1. using Marker, example https://docs.mapbox.com/mapbox-gl-js/example/custom-marker-icons/ which will add the image a DOM Element.

  2. using Symbol, example https://docs.mapbox.com/mapbox-gl-js/example/center-on-symbol/ which will add the image as part of the WebGL canvas. You need to ensure the image you use is loaded, eg. https://docs.mapbox.com/mapbox-gl-js/example/add-image/

0
votes

Try this - this worked for me (delete the popup bit if you don't want it)

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
    <title> My Map </title>
    <!--This where you put all your dependencies-->
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
        <title> My Map </title>
        <!--This where you put all your dependencies-->
        <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
        <script src='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js'></script>
        <link href='https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css' rel='stylesheet' />
        <style>
        /*this CSS section is where you style your page*/
        /*this is how you comment in CSS*/
             body { margin: 0; padding: 0; }
             #map { position: absolute; top: 0; bottom: 0; width: 100%; }
           .marker {
             background-image: url('mapbox-icon.png');
             background-size: cover;
             width: 50px;
             height: 50px;
             border-radius: 50%;
             cursor: pointer;
           }
           .mapboxgl-popup {
             max-width: 200px;
           }

           .mapboxgl-popup-content {
             text-align: center;
             font-family: 'Open Sans', sans-serif;
           }
          </style>
      </head>
      <body>
        <div id='map'></div>
        <!--The below script section is a javascript section in your html file-->
          <script>
          //This is where you put your Javascript for interaction
            mapboxgl.accessToken = 'pk.eyJ1IjoiY3dpbG1vdHQiLCJhIjoiY2s2bWRjb2tiMG1xMjNqcDZkbGNjcjVraiJ9.2nNOYL23A1cfZSE4hdC9ew'; //Put your own mapbox token

            var map = new mapboxgl.Map({
              container: 'map', // container id specified in the HTML
              style: 'mapbox://styles/cwilmott/ckbowmfzd3r761il84bnji13t' //change to your style
            });

            var geojson = {
              type: 'FeatureCollection',
                features: [{
      type: 'Feature',
      properties: {
        time: '2020-06-19T09:47:13Z',
        title: '10:47:13',
        description: '19 Jun 2020 at 10:47:13'
      },
      geometry: {
        type: 'Point',
        coordinates: [
          -2.219255366395865,
          53.457215089777584,
        ]
      }
    },
    {
      type: 'Feature',
      properties: {
        time: '2020-06-19T09:47:19Z',
        title: 'home',
        description: '19 Jun 2020 at 10:47:19'
      },
      geometry: {
        type: 'Point',
        coordinates: [
          -2.219227672420135,
          53.457351307993434
        ]
      }
    }]
            }

            // add markers to map
  geojson.features.forEach(function(marker) {

    // create a HTML element for each feature
    var el = document.createElement('div');
    el.className = 'marker';

    // make a marker for each feature and add to the map
    new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates)
      .setLngLat(marker.geometry.coordinates)
  .setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
      .addTo(map);
  });

          </script>
      </body>
    </html>

If you want to add an external GeoJson, delete the features in the var geojson section and instead put:

var geojson = {
      type: 'geojson',
      data: 'path-to-your-file.geojson'
                }

(I think that should work).