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.

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

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

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

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!