python-visualization / folium

Python Data. Leaflet.js Maps.

Home Page:https://python-visualization.github.io/folium/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Create Scale control class

berrfred opened this issue · comments

Is your feature request related to a problem? Please describe.
It looks like L.control.scale() now has several useful options (e.g. position. metric, imperial), wouldn't it make sense to have it as a separate plugin as initially suggested by @BibMartin ? #270

Describe the solution you'd like
I am interested in showing only the metric scale at bottomrigth ... and maybe trick the css to integrate it in the attributions but this is another story. Today without a plugin it would require some dirty css and js to achieve it.

Describe alternatives you've considered
This is where I got with my usual script approach, moving control-scale to bottomright before attribution and assuming imperial is the second child, then delete it:

map_script_scale_control = '<script>document.addEventListener("DOMContentLoaded", function() {\
	var leafletControlScale = document.querySelector("div.leaflet-control-scale");\
	document.querySelector("div.leaflet-bottom.leaflet-right").insertBefore(\
		leafletControlScale, document.querySelector("div.leaflet-control-attribution")\
	);\
	leafletControlScale.removeChild(leafletControlScale.children[1]);\
});</script>'

map.get_root().html.add_child(folium.Element(map_script_scale_control))

image

Additional context
Also adding the following css I've been able to display attribution and scale on the same row ... not sure if this could also become a parameter to handle in the plugin.

map_style_scale_inline = '<style>\
	.leaflet-control-scale { margin-bottom: 0 !important; }\
	.leaflet-control-attribution { clear: none !important; }\
</style>'

map.get_root().header.add_child(folium.Element(map_style_scale_inline))

image

Implementation
Definitely missing experience on making a PR but taking inspiration from existing plugins I am willing to learn and might be able to achieve it ...

Also not sure how to best handle backward compatibility with current control_scale map parameter that should probably be removed ...

@Conengmo Any interest for a control scale plugin ??? The alternative would be to extend the control_scale variable to also handle position (same as zoom_control) but we still miss the ability to set a single unit (metric or imperial), maxWidth or updateWhenIdle.

@berrfred I think it would be a useful addition. If you are still interested in making it please checkout our contribution guidelines: https://github.com/python-visualization/folium/blob/main/.github/CONTRIBUTING.md

I would not worry about removing control_scale for now, since users can always set control_scale to False when they add the Plugin.

Thanks @hansthen for chiming in on this one! I'll share my 2 cents as well:

Since Scale is part of core Leaflet, this shouldn't be a plugin, but be part of core Folium.

I can imagine we add a new class Scale that wraps L.control.scale.

Then in Map we can handle it flexibly, with backwards compatibility. We keep the control_scale argument as True by default, and when True internally add a new Scale instance to the map. We can also extend the control_scale argument to also allow a Scale instance to be passed.