Skip to content

Instantly share code, notes, and snippets.

@peace899
Last active April 19, 2019 15:39
Show Gist options
  • Save peace899/27a7994a44dd787afc736657f2aa756e to your computer and use it in GitHub Desktop.
Save peace899/27a7994a44dd787afc736657f2aa756e to your computer and use it in GitHub Desktop.
Draggable circlemarker in folium with custom JS
import folium
from branca.element import Element
start_coords = (27.815318747058587, -26.607971936214536)
folium_map = folium.Map(location=start_coords, zoom_start=3)
map_id = 'map_' + folium_map._id
circlemove_js = """\nfunction circlemove(e) {{
var clickedCircle = e.target;
clickedCircle;
{0}.dragging.disable()
{0}.on('mousemove', function (e) {{
clickedCircle.setLatLng(e.latlng);
}});
}};
{0}.on('mouseup', function(e) {{
{0}.dragging.enable()
{0}.removeEventListener('mousemove');
}});""".format(map_id)
marker_options_js = """\n\nvar geojsonMarkerOptions = {
radius:6,
fillColor:'#172591',
color:'#172591',
weight:1,
opacity:1,
fillOpacity:0.9 };\n\n"""
cm_name = 'mycirclemarker'
lat = start_coords[0]
lon = start_coords[1]
label = 'CM 1'
popup = 'Draggable circle marker'
cm_js = """\nvar {0} = L.circleMarker([{1}, {2}], \
geojsonMarkerOptions).bindPopup('{4}').bindTooltip('{3}').on('mousedown', \
circlemove).addTo({5})""".format(cm_name, lat, lon, label, popup, map_id)
e1 = Element(marker_options_js)
e2 = Element(circlemove_js)
cm_element = Element(cm_js)
html = folium_map.get_root()
html.script.get_root().render()
html.script._children[e1.get_name()] = e1
html.script._children[e2.get_name()] = e2
html.script._children[cm_element.get_name()] = cm_element
folium_map.save('cm_drag_test.html')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment