In this post, I will show how various components are made in both LeafletJS and Python Folium.
First map: Initialize a map with center, zoom and openstreetmap background
LeafletJS
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.2.3/leaflet.draw.css" rel="stylesheet" />
<meta charset="utf-8">
<title>Web map....</title>
</head>
<style type="text/css">
html, body, #map { margin: 0; height: 100%; width: 100%; }
</style>
<body>
<div id='map'></div>
<script>
// center of the map
var center = [8.242, 7.671];
// Create the map
var map = L.map('map').setView(center, 7);
// Set up the OSM layer
L.tileLayer(
'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Data © <a href="http://osm.org/copyright">OpenStreetMap</a>',
maxZoom: 18
}).addTo(map);
</script>
</body>
</html>Folium
import folium
# initialize a map with center, zoom and openstreetmap background...
mapObj = folium.Map(location=[8.242, 7.671],
zoom_start=7, tiles='openstreetmap')
mapObjDraw point
LeafletJS
lFolium
fpoint
Draw line
LeafletJS
lFolium
fpoint
Draw polygon
LeafletJS
lFolium
fpoint
Plot geojson data
LeafletJS
lFolium
fpoint
Add layer control
LeafletJS
lFolium
fpoint
Add HTML
LeafletJS
lFolium
f
No comments:
Post a Comment