CODEWITHSUNDEEP
mapboxmapbox-gl-js
don_Bigote
don_Bigote

Reputation: 947

What is the proper way to select and style markers on Mapbox GL JS?

I am working with a Mapbox map that has points. I would like to know the correct procedure for adding a marker-symbol. Here is my GeoJSON: 

  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          -89.12312324,
          13.686886
        ]
      },
      "properties": {
        "title": "Random Location",
        "description": "Individual"
      }
    }
]

Here is an example from the Mapbox docs:

map.addLayer({
        "id": "airport",
        "source": "airports",
        "source-layer": "ne_10m_airports",
        "type": "symbol",
        "layout": {
            "icon-image": "airport-15",
            "icon-padding": 0
        },
        "filter": ["in", "abbrev", ""]
    });

When I use this 

"layout": {
                "icon-image": "marker-11",
                "icon-allow-overlap": true,
            }

I get little brown dots instead of the classic marker. I am using 

<script src='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v0.18.0/mapbox-gl.css' rel='stylesheet' />

and I am using the 

style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location

My entire script looks like this:

mapboxgl.accessToken = 'pk.mylongAkey';

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/outdoors-v9', //stylesheet location
        center: [-88.866245, 13.770391], // starting position
        zoom: 6 // starting zoom
    });

    var url = '/maps/index.json';
        var source = new mapboxgl.GeoJSONSource({
        data: url
    });

    map.on('load', function () {
        map.addSource('location', source);
        map.addLayer({
            "id": "map",
            "type": "symbol",
            "source": "location",
            "source-layer": 'location',
            "layout": {
                "icon-image": "marker-11",
                "icon-allow-overlap": true,
            }
        });
    });

    map.on('click', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['map'] });

        if (!features.length) {
            return;
        }

        var feature = features[0];

        // Populate the popup and set its coordinates
        // based on the feature found.
        var popup = new mapboxgl.Popup()
            .setLngLat(feature.geometry.coordinates)
            .setHTML(feature.properties.title)
        .addTo(map);
    });

    // Use the same approach as above to indicate that the symbols are clickable
    // by changing the cursor style to 'pointer'.
    map.on('mousemove', function (e) {
        var features = map.queryRenderedFeatures(e.point, { layers: ['map'] });
        map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
    });

Am I missing something? Also, the popups don't popup above the points, they popup over top of the icon. You can't tell with this little brown dot, but with the rocket for example the popup is in the middle of the rocket. Thanks!

Here is a screenshot

enter image description here

Upvotes: 2

Views: 2191

Answers (2)

J.Keefe
J.Keefe

Reputation: 120

In the Mapbox Studio Editor, you need to make sure that you actually have an icon called "marker-11" in your icon library. If not, it doesn't know what you are referencing and will default to a dot.

Otherwise, everything else looks fine.

Upvotes: 1

Lucas Wojciechowski
Lucas Wojciechowski

Reputation: 3782

I am working with a Mapbox map that has points. I would like to know the correct procedure for adding a marker-symbol. Is it better to do it in the GeoJSON like:

...

Or is better to use layout like this:

...

Embedding style information in the GeoJSON (the former) is a specification called simplestyle, which is not supported in GL JS. Using layout (the latter) is the only way to style features in GL JS.

I get little brown dots instead of the classic marker.

Could you please provide a screenshot of this?

Upvotes: 2

Related Questions