Skip to content

rowanwins/Leaflet.SvgShapeMarkers

Repository files navigation

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!