Additional SVG marker types for leaflet.js such as triangle, diamond and square. Check out the demo.
Either downloading this repo or install from npm npm install leaflet-svg-shape-markers
Step 1. Include the required js in your document
<script src="leaflet-svg-shape-markers/dist/leaflet-svg-shape-markers.min.js"></script>Step 2. Add a point to your map using the shapeMarker function
var square = L.shapeMarker([51.505, -0.09], {
shape: "square",
radius: 20
}).addTo(map);Step 3. You can pass a number of options to the plugin to control various settings.
| Option | Type | Default | Description |
|---|---|---|---|
| shape | string | "triangle" | A valid shape, one of "triangle" or "square" or "diamond" or "x" |
| radius | number | 20 | The size of the svg marker in pixels |
L.shapeMarker also extends the path class so any options that you can pass (such as color or fillOpacity) are also valid.
var diamond = L.shapeMarker([51.505, -0.09], {
fillColor: "#cccccc",
color: "black",
shape: "diamond",
radius: 200
}).addTo(map);- diamond
- square
- triangle (= triangle-up)
- triangle-up
- triangle-down
- circle
- x
| Method | Returns | Description |
|---|---|---|
| toGeoJSON | Object | Returns a GeoJSON representation of the marker (as a GeoJSON Point Feature). |
| setLatLng | this | Sets the position of a marker to a new location. |
| getLatLng | LatLng | Returns the current geographical position of the marker. |
| setStyle | this | Changes the appearance of a Path based on the options in the Path options object. |
| getRadius | this | Returns the current radius of the marker. |
| setRadius | this | Sets the radius of a marker. Units are in pixels. |
diamond.setRadius(10);Huge hats off go to mourner and all the contributors to the leaflet.js project, it's an amazing piece of open source software!