leaflet-svg-shape-markers v1.4.0

Leaflet.SvgShapeMarkers

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.

Installing

Either downloading this repo or install from npm

npm install leaflet-svg-shape-markers

Usage

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.

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);

Available shapes

• diamond
• square
• triangle (= triangle-up)
• triangle-up
• triangle-down
• arrowhead (= arrowhead-up)
• arrowhead-up
• arrowhead-down
• circle
• star-{number-points}
• x

Additional methods

	diamond.setRadius(10);

Acknowledgements

Huge hats off go to mourner and all the contributors to the leaflet.js project, it's an amazing piece of open source software!