Having difficulty placing markers on a Mapbox map using mapbox-gl.js

Question

Having difficulty placing markers on a Mapbox map using mapbox-gl.js

I've been working tirelessly to incorporate markers onto a mapbox map using mapbox-gl-js with typescript. Despite following various tutorials from the mapbox site, I haven't been able to get it to work.

    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 have successfully created a source with static data and applied it as a layer on the mapboxgl map object. The map displays without any issues, but my struggle lies in adding markers with the required geojson format.

While I aim to dynamically add markers, I'm currently stuck at incorporating static ones.

If you have any insights or solutions to the problem at hand, please share them with me.

Warm regards, Marko

javascript typescript mapbox mapbox-gl-js

Answer 1

Answer №1

There are two primary methods for adding "markers" to Mapbox GL JS:

One way is to use Marker, as shown in this example. This method adds the image as a DOM Element.
Another way is to use Symbol, demonstrated in this example. With this method, the image is added as part of the WebGL canvas. Make sure that the image you choose is properly loaded, as shown in this example.

Answer 2

There are two primary methods for adding "markers" to Mapbox GL JS:

One way is to use Marker, as shown in this example. This method adds the image as a DOM Element.
Another way is to use Symbol, demonstrated in this example. With this method, the image is added as part of the WebGL canvas. Make sure that the image you choose is properly loaded, as shown in this example.

Answer 3

Answer №2

Give this a try - it worked for me (you can remove the popup section if you don't need it)

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
    <title> My Map </title>
    <!--Include all your dependencies here-->
        <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>
             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>
        
          <script>
            mapboxgl.accessToken = 'pk.eyJ1IjoiY3dpbG1vdHQiLCJhIjoiY2s2bWRjb2tiMG1xMjNqcDZkbGNjcjVraiJ9.2nNOYL23A1cfZSE4hdC9ew'; //Replace with your own token

            var map = new mapboxgl.Map({
              container: 'map',
              style: 'mapbox://styles/cwilmott/ckbowmfzd3r761il84bnji13t' 
            });

            var geojson = {
              type: 'FeatureCollection',
                features: [] // Add your GeoJSON data here
            }

            geojson.features.forEach(function(marker) {

    var el = document.createElement('div');
    el.className = 'marker';

    new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates)
      .setLngLat(marker.geometry.coordinates)
  .setPopup(new mapboxgl.Popup({ offset: 25 }) 
    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
      .addTo(map);
  });

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

If you want to include an external GeoJson file, replace the features in the var geojson section with:

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

(That should do the trick).

Answer 4

Give this a try - it worked for me (you can remove the popup section if you don't need it)

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
    <title> My Map </title>
    <!--Include all your dependencies here-->
        <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>
             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>
        
          <script>
            mapboxgl.accessToken = 'pk.eyJ1IjoiY3dpbG1vdHQiLCJhIjoiY2s2bWRjb2tiMG1xMjNqcDZkbGNjcjVraiJ9.2nNOYL23A1cfZSE4hdC9ew'; //Replace with your own token

            var map = new mapboxgl.Map({
              container: 'map',
              style: 'mapbox://styles/cwilmott/ckbowmfzd3r761il84bnji13t' 
            });

            var geojson = {
              type: 'FeatureCollection',
                features: [] // Add your GeoJSON data here
            }

            geojson.features.forEach(function(marker) {

    var el = document.createElement('div');
    el.className = 'marker';

    new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates)
      .setLngLat(marker.geometry.coordinates)
  .setPopup(new mapboxgl.Popup({ offset: 25 }) 
    .setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
      .addTo(map);
  });

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

If you want to include an external GeoJson file, replace the features in the var geojson section with:

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

(That should do the trick).

Having difficulty placing markers on a Mapbox map using mapbox-gl.js

Answer №1

Answer №2

Similar questions

Modify the value of mat-slide-toggle from TypeScript code

The current object is not being referenced by this specific keyword

Nav Bar Toggle Button - Refuses to display the dropdown menus

The property of undefined map cannot be read

Exploring the possibilities of incorporating Bootstrap 4 or ng-bootstrap elements into Angular 4 development

Differences between JavaScript closures and traditional functions

Error: The promise was not caught due to a network issue, resulting in a creation error

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

The jspdf tool tries to cram my extensive data into a single page, resulting in an overcrowded and barely visible PDF document

An alternative method to confirm the checkbox selection without physically clicking on it

Adjust the cell text overflow based on the width of the table

Revealing and concealing adjacent elements within a specified class

In Javascript, the function sets a Boolean value to true but unexpectedly returns false

Require Google Chrome to show a blank page upon refresh

Unexpected behavior when trying to catch errors in Node.js await block

How can I modify my for loop with if else statements so that it doesn't just return the result of the last iteration in

How can I attach an event listener to an element that is added dynamically with jQuery?

Show pictures directly from multipart/form-data parsers without the need to save them

Arrange divs adjacent to each other without any gaps in between

Ways to manually trigger a reevaluation of Vuelidate validation