CODEWITHSUNDEEP
javascripticonsmapboxlayermapbox-gl-js
woshitom
woshitom

Reputation: 5129

Mapbox GL js, effectively represent a geojson source by a variable icon

I have a mapbox source composed by a list of geojson point, each element of this source has a key icon referring to an icon URL:

var featureCollection = {
    "type": "FeatureCollection",
    "features": [
        {
            "geometry":{
                "type": "Point",
                "coordinates": [1,1]
            },
            "properties": {
                "id": 1,
                "name": "name1",
                "address": "address1",
                "icon": "icon1"
            }
        },
        {
            "geometry":{
                "type": "Point",
                "coordinates": [2,2]
            },
            "properties": {
                "id": 2,
                "name": "name2",
                "address": "address2",
                "icon": "icon2"
            }
        },
        {
            "geometry":{
                "type": "Point",
                "coordinates": [3,3]
            },
            "properties": {
                "id": 3,
                "name": "name3",
                "address": "address3",
                "icon": "icon3"
            }
        },
        {
            "geometry":{
                "type": "Point",
                "coordinates": [4,4]
            },
            "properties": {
                "id": 4,
                "name": "name4",
                "address": "address4",
                "icon": "icon1"
            }
        }
    ]
}

map.addSource("shops", {
    type: "geojson",
    data: featureCollection,
    cluster: true,
    clusterMaxZoom: 14,
    clusterRadius: 50
});

I'd like to plot my features by representing them by their icon variable, a way to do so would be to add as many layers as I have different icons:

map.addLayer({
    id: currentLayer,
    type: "symbol",
    source: "featureCollection",
    filter: ["!has", "point_count"],
    "layout": {
        "icon-image": currentIcon,
        "icon-size":1.5
    }
});

The thing is I have more than 200 different icons (out of 800 observations), and I really doubt creating 200 different layers is the most effective way to plot my observations. Especially when I'm triggering a function when the user clicks on an layer, so I would also have to define such function as many times as I have different icons.

Upvotes: 1

Views: 448

Answers (1)

AndrewHarvey
AndrewHarvey

Reputation: 3047

You can and should create just one layer. icon-image supports data driven styles so you can use "icon-image": "{icon}".

http://jsbin.com/yofiwizuca/1/edit?html,output

This of course assumes you have icons in your Style named icon1, icon2',icon3based on the values of theicon` properties in your GeoJSON.

You could also use https://www.mapbox.com/mapbox-gl-js/style-spec#expressions if you need to manipulate the values.

Upvotes: 3

Related Questions