Skip to content
Additional SVG shape marker types for leaflet.js
JavaScript HTML
Branch: gh-pages
Clone or download
rowanwins Merge pull request #8 from jonoyuan/gh-pages
Change the triangles to equilateral triangle based on a circle with given radius. Change size of diamonds to match area of square.
Latest commit 9013820 Dec 20, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Change diamonds to match size of squares Nov 19, 2019
example Minor updates getting ready for npm Feb 1, 2017
source update source for triangles and diamonds Nov 23, 2019
.gitignore Initial commit Apr 12, 2016
LICENSE Initial commit Apr 12, 2016 Add triangle-down/triangle-up marker shapes Mar 19, 2018
build.js Minor updates getting ready for npm Feb 1, 2017
index.js Fix usage as a module Mar 26, 2019
package-lock.json Update package Feb 27, 2019


Additional SVG marker types for leaflet.js such as triangle, diamond and square. Check out the demo.


Either downloading this repo or install from npm npm install leaflet-svg-shape-markers


Step 1. Include the required js in your document

   	<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

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, one of "triangle" or "square" or "diamond" or "x"
radius number 20 The size of the svg marker in pixels

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

Available shapes

  • diamond
  • square
  • triangle (= triangle-up)
  • triangle-up
  • triangle-down
  • circle
  • 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 this Returns the current radius of the marker.
setRadius this Sets the radius of a marker. Units are in pixels.


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

You can’t perform that action at this time.