# leaflet-svg-shape-markers

> Additional SVG markers for use in leaflet.js

Latest version **1.4.0** (published 2022-08-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install leaflet-svg-shape-markers
pnpm add leaflet-svg-shape-markers
yarn add leaflet-svg-shape-markers
bun add leaflet-svg-shape-markers
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.0 |
| Published | 2022-08-19 |
| First published | 2017-02-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rowan Winsemius |
| Maintainers | rowanwins |

## Links

- npm: https://www.npmjs.com/package/leaflet-svg-shape-markers
- npm.io page: https://npm.io/package/leaflet-svg-shape-markers

## Recent versions

- 1.4.0 (latest) — 2022-08-19
- 1.3.0 — 2020-08-17
- 1.2.0 — 2019-12-20
- 1.1.1 — 2019-04-21
- 1.1.0 — 2019-02-27
- 1.0.0 — 2017-02-01

## README

# Leaflet.SvgShapeMarkers
Additional SVG marker types for leaflet.js such as triangle, diamond and square. Check out the [demo](http://rowanwins.github.io/Leaflet.SvgShapeMarkers/example/).

*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

``` js
	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](http://leafletjs.com/reference.html#path) so any options that you can pass (such as color or fillOpacity) are also valid.

``` js
	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.|

``` js
	diamond.setRadius(10);
```

### Acknowledgements
Huge hats off go to [mourner](https://github.com/mourner) and all the [contributors](https://github.com/Leaflet/Leaflet/graphs/contributors) to the leaflet.js project, it's an amazing piece of open source software!

---
_Source: https://npm.io/package/leaflet-svg-shape-markers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._