Additional SVG marker types for leaflet.js such as triangle, diamond and square. Check out the demo.
Note: Currently only works when preferCanvas isn’t set to true.
Either downloading this repo or install from npm
npm install leaflet-svg-shape-markers
Step 1. Include the required js in your document
# With requirejs
require('leaflet-svg-shape-markers')
# Using ES6
import 'leaflet-svg-shape-markers'
# Via a html script
<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, see list below |
| radius | number | 20 | The size of the svg marker in pixels |
| rotation | number | 0 | The rotation of the svg marker, between 0 and 360 |
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);
| 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 | number | Returns the current radius of the marker.| | setRadius | this | Sets the radius of a marker. Units are in pixels.| | getRotation | number | Returns the current rotation of the marker.| | setRotation | this | Sets the rotation of a marker.|
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!