search

python-visualization / folium

Python Data. Leaflet.js Maps.
https://python-visualization.github.io/folium/
MIT License
6.93k stars 2.23k forks source link

Add Leaflet-Ruler plugin #1992

Open MahmoudArafaaat opened 2 months ago

MahmoudArafaaat commented 2 months ago

i used all possible functions to add leaflet ruler plugin but it gives me errors like : js: Uncaught ReferenceError: map is not defined

Add Leaflet-Ruler plugin

    m.get_root().header.add_child(folium.CssLink("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"))
    m.get_root().header.add_child(folium.CssLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.css"))
    m.get_root().html.add_child(folium.JavascriptLink("https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"))
    m.get_root().html.add_child(folium.JavascriptLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js"))
    my_js = '''
    L.control.ruler().addTo(map);
    '''
    m.get_root().script.add_child(folium.Element(my_js))

i got all links from here: https://github.com/gokertanrisever/leaflet-ruler

hansthen commented 2 months ago

Do you have a code example?

MahmoudArafaaat commented 2 months ago

this is html of the map with the plugin : https://jsfiddle.net/kvsgt9hu/

MahmoudArafaaat commented 2 months ago

this one i reformed of the link

MahmoudArafaaat commented 2 months ago

<!DOCTYPE html>

Leaflet Map with Ruler
MahmoudArafaaat commented 2 months ago

def initialize_map(self):

Create a base map

    m = folium.Map(location=[30.0444, 31.2357], zoom_start=8)
    folium.TileLayer(
        tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        attr='Esri',
        name='Esri Satellite',
        overlay=False,
        control=True
    ).add_to(m)

    m.get_root().header.add_child(folium.CssLink("https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"))
    m.get_root().header.add_child(folium.CssLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet- 
    ruler.css"))
    m.get_root().html.add_child(folium.JavascriptLink("https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"))
    m.get_root().html.add_child(folium.JavascriptLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet- 
    ruler.js"))
    my_js = '''
    L.control.ruler().addTo(map);
    '''
    m.get_root().script.add_child(folium.Element(my_js))

    # Save map data to data object
    data = io.BytesIO()
    m.save(data, close_file=False)
    html_content = data.getvalue().decode()

    self.map_view.setHtml(html_content)

this is my try in folium to add the plugin

hansthen commented 2 months ago

Best to create new plugin class yourself. In the Folium plugins directory you can find examples. A few simple plugins that you could easily follow and customize are the fullscreen and locate_control.

MahmoudArafaaat commented 2 months ago

thanks for guiding me , it was easier to add the plugin to my folium library than adding it directly to my code ruler.txt

hansthen commented 2 months ago

Great! If you are open to it, you can share the plugin back to Folium.

MahmoudArafaaat commented 2 months ago

I've already linked the code to this txt file and edited the init.py inside plugins folder https://github.com/user-attachments/files/16920265/ruler.txt

hansthen commented 2 months ago

If you want could you make it into a pull request on GitHub? It will be easier for the maintainers to include it. For details see: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request