Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rowanwins/leaflet.svgshapemarkers
Additional SVG shape marker types for leaflet.js
https://github.com/rowanwins/leaflet.svgshapemarkers
Last synced: 11 days ago
JSON representation
Additional SVG shape marker types for leaflet.js
- Host: GitHub
- URL: https://github.com/rowanwins/leaflet.svgshapemarkers
- Owner: rowanwins
- License: mit
- Created: 2016-04-12T11:12:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-06-01T19:45:31.000Z (over 1 year ago)
- Last Synced: 2024-10-12T04:17:36.608Z (27 days ago)
- Language: JavaScript
- Homepage: http://rowanwins.github.io/Leaflet.SvgShapeMarkers/example/
- Size: 39.1 KB
- Stars: 50
- Watchers: 6
- Forks: 24
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGES.md
- Funding: FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
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
```
**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!