Skip to content

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

License

Notifications You must be signed in to change notification settings

SourceCipher/mapbox-gl-js-with-shapes

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

THIS IS A FORKED BRANCH FROM THE ORIGINAL MAPBOX

This branch will have everything what the mapbox has but extended to show some shapes within the markers like in the image below:

image

USAGE

Just add the shape and shapeColor properties for each of your marker and you are ready to rock.

For example:

{
  type: 'Feature',
  properties: {
    shape: 'triangle', 
    shapeColor: '#fff',
    color: '#ddd' // Color of the circle
  },
  geometry: {
    type: 'Point',
    coordinates: []
}

Available shapes are: circle, diamond, triangle, square, star, invTriangle

Also important that the color of the circle is read from the properties like this (otherwise the shapes will not work):

map.addLayer({
  id: "layerId",
  type: "circle",
  source: "layerSource",
  paint: {
      'circle-color': ['get', 'color']
  },
});

About

Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 90.8%
  • HTML 6.0%
  • GLSL 2.6%
  • Other 0.6%