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!