Leaflet v1.03: Make CircleMarker draggable? -
does leaflet guru has idea, what's easiest way make circlemarker draggable in leaflet v1.0.3?
it's easy "standard" markers using "draggable"-option. such option doesn't exist circlemarker. tried using several events, problem is, not marker being moved underlying map.
another possibility use of "stoppropagation"-function (but domevents). or use of "removeeventparent"... if "parent" of circlemarker map , events? regarding documentation there domutility/draggable-class. need?
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>draggable markers</title> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> <style> body {padding: 0; margin: 0;} html, body, #map {height: 100%;} </style> </head> <body> <div id="map"></div> <script> var layerosm = new l.tilelayer('https://{s}.api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}.png?access_token=pk.eyj1ijoichbldguilcjhijoiy2lsdme2zmq2mda4ohzxbtzpcmx1emtqbsj9.two7spsaizysqgotrrlkrg', { subdomains: 'ab', maxzoom: 20, nowrap:true, attribution:'<a href="http://www.mapbox.com">mapbox</a> | <a href="http://www.openstreetmap.org/copyright/">openstreetmap</a>' }); var map = new l.map('map').addlayer(layerosm).setview(new l.latlng(47.8, 13.0), 14); l.marker([47.8, 13.0], {draggable:true}).addto(map); var circle = l.circlemarker([47.81, 13.01], {radius:30}).addto(map); circle.on('mousedown', function () { map.on('mousemove', function (e) { circle.setlatlng(e.latlng); }); }); map.on('mouseup', function(){ map.removeeventlistener('mousemove'); }) </script> </body> </html>
found it, try this.
var mymarker = l.circlemarker([41.91847, -74.62634]).addto(map); mymarker.on({ mousedown: function () { map.dragging.disable(); map.on('mousemove', function (e) { mymarker.setlatlng(e.latlng); }); } }); map.on('mouseup',function(e){ map.dragging.enable(); map.removeeventlistener('mousemove'); }) here hints: http://jsfiddle.net/akshay_agrawal/76wwqrvh/ , http://codepen.io/kad3nce/pen/bedwoe
Comments
Post a Comment