*Code:* Saving maps as a html file
*Main Source:* leafmap
*Edited by:* Saudia.xyz
Uncomment the following line to install leafmap if needed.
# !pip install leafmap
import leafmap.foliumap as leafmap
Create an interactive map.
m = leafmap.Map(center=(24, 45), zoom=5)
m.add_basemap("HYBRID")
m
Specify the output HTML file name to save the map as a web page.
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.
html = m.to_html()
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/leaflet@1.6.0/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/leaflet@1.6.0/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/leaflet-measure@2.1.7/dist/leaflet-measure.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ljagis/leaflet-measure@2.1.7/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>