Add Leaflet-Ruler plugin

[MahmoudArafaaat]

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]

Do you have a code example?

[MahmoudArafaaat]

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

[MahmoudArafaaat]

this one i reformed of the link

[MahmoudArafaaat]

<title>Leaflet Map with Ruler</title> <style> #map { height: 600px; } </style>

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> <script src="https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js" ></script> <script> // Create a map centered around Cairo, Egypt var map = L.map('map').setView([30.0444, 31.2357], 8);

    // Add Esri Satellite tile layer
    L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Esri',
        maxZoom: 18
    }).addTo(map);

    // Add ruler control to the map
    L.control.ruler().addTo(map);
    var options = {
        position: 'topleft',
        lengthUnit: {
            factor: 0.539956803, //  from km to nm
            display: 'Nm',
            decimal: 2,
            label: 'Distance:'
        },
    };
    L.control.ruler(options).addTo(map);
</script>

[MahmoudArafaaat]

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]

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]

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]

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

[MahmoudArafaaat]

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]

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