Leaflet editable Circle Marker

Combined marker with a circle below component plugin for Leaflet that behaves as a L.marker.

Usage

options.className = 'string' // for the divicon
options.draggable = boolean  // allow/dissallow draggable
options.popup = L.Popup      // set a popup that gets open on marker click
options.* = L.circle options // the rest of the options are for the L.circle
 
// creation
var ecm = L.editableCircleMarker(latlng, radius, options)
ecm.addTo(map)
 
// API
ecm.getBounds()
 
ecm.getRadius()
ecm.setRadius(number)
 
ecm.getLatLng()
ecm.setLatLng(latlng)
 
ecm.getCircleOptions()
ecm.setCircleStyle(style)
 
// events
ecm.on('movestart', function(e) { console.log(e) })
ecm.on('move',      function(e) { console.log(e) })  // event data = { oldLatLng: L.latlng, latlng: L.latlng }
ecm.on('moveend',   function(e) { console.log(e) })

Installation

• via NPM: npm install leaflet-editablecirclemarker
• via yarn: yarn add leaflet-editablecirclemarker

Include dist/editablecirclemarker.js on your page after Leaflet:

<script src="path/to/leaflet.js"></script>
<script src="path/to/editablecirclemarker.js"></script>

Or, if using via CommonJS (Browserify, Webpack, etc.):

var L = require('leaflet')
require('leaflet-editablecirclemarker')

Development

This project uses webpack to build the JavaScript and standard for code style linting.

• While developing, use npm run watch to automatically rebuild when files are saved
• Use npm test to run unit tests and code style linter
• Before committing dist/, use npm run build to optimize and minify for production use