Ability to add a marker in MapBoxGL JS, using a Geojson datasource?

Question

I was able to follow along the example here for clustering. The issue is that I want my unclustered point to be an Icon and not a circle.

https://docs.mapbox.com/mapbox-gl-js/example/cluster/

That goes into detail on how to create a cluster. Im aware that to create a marker you use

let marker = new mapboxgl.Marker({})

But using this block of code for the unclustered point (notice the filter section)

map.addLayer({
id: "unclustered-point",
type: "circle",
source: "earthquakes",
filter: ["!", ["has", "point_count"]],
paint: {
"circle-color": "#11b4da",
"circle-radius": 4,
"circle-stroke-width": 1,
"circle-stroke-color": "#fff"
}
});

Now the options for they type include symbol, raster, fill, line, circle, fill-extrusion, background, heatmap, hillshade, custom.

I'm assuming I have to either use the custom or symbol type but i'm unsure. Custom doesn't allow me to add the filter so that is out of the equation.

The documentation for symbol type is here:

https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers-symbol

I'm just not too sure that is the correct direction to head down? Any ideas or help would be appreciated.

Edit: Okay I see them mention to use the symbol property a few scrolls down here. I guess that means I would have to get my own marker images...

https://docs.mapbox.com/help/troubleshooting/working-with-large-geojson-data/

Petey Petey · Accepted Answer · 2019-10-04T18:36:43

What I ended up doing

this.map.loadImage(
            '../../../../../../assets/img/BlueMarker.png',
            (error, image) => {
                this.map.addImage('blue-icon', image);
                this.map.addLayer({
                    id: 'comps-unclustered',
                    type: 'symbol',
                    filter: ['!', ['has', 'point_count']],
                    layout: {
                        'icon-allow-overlap': true,
                        'icon-image': 'blue-icon',
                        'icon-size': 0.5,
                    },
                    source: 'comps',
                });
            },
        );

I am using Angular so that explains the this.map

Apparently they have some icons available to use inside of the icon-image. These can be found here. marker-15 didn't work with my streets-v11.

Here are the link to those

https://github.com/mapbox/mapbox-gl-styles/tree/master/sprites

As far as why I chose a png, apparently you can't use a svg. It was throwing an error during the load. Only options I believe were png or jpeg. My png is 50 x 65 I think. with the .5 size it seems to be good enough for now. I won't accept this answer in case anyone else comes across a better alternative.

Ability to add a marker in MapBoxGL JS, using a Geojson datasource?

1 Answers