CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-jsmapbox-marker
nishchalpro
nishchalpro

Reputation: 93

Drawing polygons like triangles and squares on layers instead of circles in MapBox GL JS

I am using "mapbox-gl": "^1.3.0"

So, in mapbox GL JS, I would like to know if there is a way to draw polygons such as triangles and squares like circles on layers.

But the problem is I have to do this in a coordinate that is of the geoJson type: Point not Polygons.

{"type":"Point","coordinates":[307170.943,6679032.568]}

There was an example in the documentation to do this when with "type": "Polygon". https://docs.mapbox.com/mapbox-gl-js/example/fill-pattern/

But I want to do it with Points just like how we are able to draw circles using

{
'type': 'circle'
}

in the place of points.

Note: I tried adding a sprite and plotted an icon using "icon-image" like this:

"layout": {
        "icon-image":"airport-15" ,
        "icon-size": 1
        }

But the problem is I have more than 100 k points like this. So, rendering so many images is causing the map to lag too much. This doesn't happen when i use circles as i believe drawing is smoother than using images. Any help would be appreciated.

Upvotes: 0

Views: 1217

Answers (1)

AndrewHarvey
AndrewHarvey

Reputation: 3065

Using a symbol is probably best. The lag could be if you're avoiding overlaps. Check out the style spec and change the property to allow overlaps should speed it up. Make sure you only have one source and one layer.

Upvotes: 1

Related Questions