diff --git a/README.md b/README.md index 34b15af..0afd09b 100755 --- a/README.md +++ b/README.md @@ -14,23 +14,23 @@ npm install leaflet-svg-shape-markers **Step 1.** Include the required js in your document ``` - # With requirejs - require('leaflet-svg-shape-markers') +# With requirejs +require('leaflet-svg-shape-markers') - # Using ES6 - import 'leaflet-svg-shape-markers' +# Using ES6 +import 'leaflet-svg-shape-markers' - # Via a html script - +# 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); +var square = L.shapeMarker([51.505, -0.09], { + shape: "square", + radius: 20 +}).addTo(map); ``` **Step 3.** @@ -45,12 +45,12 @@ You can pass a number of options to the plugin to control various settings. 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); +var diamond = L.shapeMarker([51.505, -0.09], { + fillColor: "#cccccc", + color: "black", + shape: "diamond", + radius: 200 +}).addTo(map); ``` ### Available shapes @@ -64,6 +64,7 @@ L.shapeMarker also extends the [path class](http://leafletjs.com/reference.html# * arrowhead-up * arrowhead-down * circle +* polygon-{number-points} * star-{number-points} * x @@ -80,7 +81,7 @@ L.shapeMarker also extends the [path class](http://leafletjs.com/reference.html# | setRotation | this | Sets the rotation of a marker.| ``` js - diamond.setRadius(10); +diamond.setRadius(10); ``` ### Acknowledgements diff --git a/example/index.html b/example/index.html index b08750f..8fb6bec 100755 --- a/example/index.html +++ b/example/index.html @@ -12,25 +12,24 @@ padding: 40px 200px; font-family: 'Arial'; } - h2,p { + h2, p { color: white; } .changeRadiusButton{ - padding:15px 30px; + padding: 15px 30px; background-color: #47a230; text-decoration: none; font-weight: 900; color: white; - text-transform:uppercase; + text-transform: uppercase; transition: background-color .5s; - border:none; + border: none; } .changeRadiusButton:hover { background-color: #1d7806; cursor: pointer; } -

Leaflet.SvgShapeMarkers

@@ -51,16 +50,16 @@

Leaflet.SvgShapeMarkers

}).addTo(map); function randomIntFromInterval(min, max) { - return Math.floor(Math.random() * (max - min + 1) + min) + return Math.floor(Math.random() * (max - min + 1) + min); } var myLayer = L.geoJson(sampleGeoJSON, { pointToLayer: function (feature, latlng) { - const r = randomIntFromInterval(0, 360) + const r = randomIntFromInterval(0, 360); return L.shapeMarker(latlng, { shape: "square", rotation: r - }) + }); } }). addTo(map); @@ -71,7 +70,6 @@

Leaflet.SvgShapeMarkers

radius: 20 }).addTo(map); - var triangle = L.shapeMarker([51.51, -100], { fillColor: "red", fillOpacity: 0.9, @@ -86,10 +84,18 @@

Leaflet.SvgShapeMarkers

shape: "x", radius: 100 }).addTo(map); + + var pentagon = L.shapeMarker([-6, -62], { + fillColor: "green", + fillOpacity: 0.9, + color: "gold", + shape: "polygon-5", + radius: 20 + }).addto(map); function changeXRadius(){ - x.setRadius(Math.floor(Math.random() * 100) + 1 ) + x.setRadius(Math.floor(Math.random() * 100) + 1); } - \ No newline at end of file + diff --git a/src/SVG.js b/src/SVG.js index 68e0c84..e37a9c5 100755 --- a/src/SVG.js +++ b/src/SVG.js @@ -69,5 +69,27 @@ L.SVG.include({ 'L' + (p.x + s) + ',' + (p.y - s); this._setPath(layer, d); } + if (shape.startsWith("polygon")) { + var shapesplit = shape.split(/[^0-9a-z]/gi, 2); + var shapeint = parseInt(shapesplit[1]); + if (shapesplit[0] === "polygon" && !isNaN(shapeint) && shapeint > 2) { + var v = shapeint; + } else { + var v = 5; + } + var angle = Math.PI; // Starting angle, top apex + var c = []; + for (var i = 0; i < v; i++) { + c.push([ + (p.x + s * Math.sin(angle)) + + ',' + + (p.y + s * Math.cos(angle)) + ]); + angle += (2 * Math.PI / v); + } + var d = 'M' + c.join('L') + 'Z'; + + this._setPath(layer, d); + } } });