Saudia XYZ logo Code: Saving maps as a html file
Main Source: leafmap
Edited by: Saudia.xyz

Uncomment the following line to install leafmap if needed.

In [7]:
# !pip install leafmap
In [8]:
import leafmap.foliumap as leafmap

Create an interactive map.

In [9]:
m = leafmap.Map(center=(24, 45), zoom=5)
m.add_basemap("HYBRID")
m
Out[9]:
Make this Notebook Trusted to load map: File -> Trust Notebook

Specify the output HTML file name to save the map as a web page.

In [10]:
m.to_html("mymap.html")

If the output HTML file name is not provided, the function will return a string containing contain the source code of the HTML file.

In [11]:
html = m.to_html()
In [12]:
print(html)
<!DOCTYPE html>
<head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    
        <script>
            L_NO_TOUCH = false;
            L_DISABLE_3D = false;
        </script>
    
    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
    
            <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <style>
                #map_a57ee0c9f03142b587143cf989491dc9 {
                    position: relative;
                    width: 100.0%;
                    height: 100.0%;
                    left: 0.0%;
                    top: 0.0%;
                }
            </style>
        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.fullscreen/1.4.2/Control.FullScreen.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.2/leaflet.draw.css"/>
    <script src="https://cdn.jsdelivr.net/gh/ljagis/[email protected]/dist/leaflet-measure.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ljagis/[email protected]/dist/leaflet-measure.min.css"/>
</head>
<body>    
    
            <div class="folium-map" id="map_a57ee0c9f03142b587143cf989491dc9" ></div>
        
</body>
<script>    
    
            var map_a57ee0c9f03142b587143cf989491dc9 = L.map(
                "map_a57ee0c9f03142b587143cf989491dc9",
                {
                    center: [24.0, 45.0],
                    crs: L.CRS.EPSG3857,
                    zoom: 5,
                    zoomControl: true,
                    preferCanvas: false,
                    drawExport: false,
                    layersControl: true,
                }
            );
            L.control.scale().addTo(map_a57ee0c9f03142b587143cf989491dc9);

            

        
    
            var tile_layer_65a9be4f839a4cc3881febcc4171e777 = L.tileLayer(
                "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
                {"attribution": "Data by \u0026copy; \u003ca href=\"http://openstreetmap.org\"\u003eOpenStreetMap\u003c/a\u003e, under \u003ca href=\"http://www.openstreetmap.org/copyright\"\u003eODbL\u003c/a\u003e.", "detectRetina": false, "maxNativeZoom": 22, "maxZoom": 22, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_a57ee0c9f03142b587143cf989491dc9);
        
    
            L.control.fullscreen(
                {"forceSeparateButton": false, "position": "topleft", "title": "Full Screen", "titleCancel": "Exit Full Screen"}
            ).addTo(map_a57ee0c9f03142b587143cf989491dc9);
        
    
            var options = {
              position: "topleft",
              draw: {},
              edit: {},
            }
            // FeatureGroup is to store editable layers.
            var drawnItems = new L.featureGroup().addTo(
                map_a57ee0c9f03142b587143cf989491dc9
            );
            options.edit.featureGroup = drawnItems;
            var draw_control_5b422c3d83e34390a373dc9e7ada633a = new L.Control.Draw(
                options
            ).addTo( map_a57ee0c9f03142b587143cf989491dc9 );
            map_a57ee0c9f03142b587143cf989491dc9.on(L.Draw.Event.CREATED, function(e) {
                var layer = e.layer,
                    type = e.layerType;
                var coords = JSON.stringify(layer.toGeoJSON());
                layer.on('click', function() {
                    alert(coords);
                    console.log(coords);
                });
                drawnItems.addLayer(layer);
             });
            map_a57ee0c9f03142b587143cf989491dc9.on('draw:created', function(e) {
                drawnItems.addLayer(e.layer);
            });
            
        
    
            var measure_control_e0114ce05d57411295ab4a1046823cde = new L.Control.Measure(
                {"position": "bottomleft", "primaryAreaUnit": "sqmeters", "primaryLengthUnit": "meters", "secondaryAreaUnit": "acres", "secondaryLengthUnit": "miles"});
            map_a57ee0c9f03142b587143cf989491dc9.addControl(measure_control_e0114ce05d57411295ab4a1046823cde);

        
    
                var lat_lng_popup_f256bce89bfc41078b47d30f10c21ea5 = L.popup();
                function latLngPop(e) {
                    lat_lng_popup_f256bce89bfc41078b47d30f10c21ea5
                        .setLatLng(e.latlng)
                        .setContent("Latitude: " + e.latlng.lat.toFixed(4) +
                                    "<br>Longitude: " + e.latlng.lng.toFixed(4))
                        .openOn(map_a57ee0c9f03142b587143cf989491dc9);
                    }
                map_a57ee0c9f03142b587143cf989491dc9.on('click', latLngPop);
            
    
            map_a57ee0c9f03142b587143cf989491dc9.fitBounds(
                [[24, 45], [24, 45]],
                {"maxZoom": 5}
            );
        
    
            var tile_layer_628de483428b464fa068cf2500bdfa07 = L.tileLayer(
                "https://mt1.google.com/vt/lyrs=y\u0026x={x}\u0026y={y}\u0026z={z}",
                {"attribution": "Google", "detectRetina": false, "maxNativeZoom": 22, "maxZoom": 22, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
            ).addTo(map_a57ee0c9f03142b587143cf989491dc9);
        
    
            var layer_control_321ebb216fa94ee18b290d3eaa4a1b60 = {
                base_layers : {
                    "openstreetmap" : tile_layer_65a9be4f839a4cc3881febcc4171e777,
                },
                overlays :  {
                    "Google Satellite" : tile_layer_628de483428b464fa068cf2500bdfa07,
                },
            };
            L.control.layers(
                layer_control_321ebb216fa94ee18b290d3eaa4a1b60.base_layers,
                layer_control_321ebb216fa94ee18b290d3eaa4a1b60.overlays,
                {"autoZIndex": true, "collapsed": true, "position": "topright"}
            ).addTo(map_a57ee0c9f03142b587143cf989491dc9);
        
</script>