Hey folks!
Today I am going to show you a tutorial for a minimalist and stylish Leaflet map. I call it minimalist because:
- zooming, panning, dragging is disabled
- I don’t use any basemap,
- no tilelayer, just a simple white background
Sounds boring? I don’t think so, but have a look yourself! I will first talk about the data I used and then talk you through the steps needed to create such an application.
Data
I got the data for this webmap from the Socioeconomic Data and Applications Center (sedac):
SEDAC focuses on human interactions in the environment. Its mission is to develop and operate applications that support the integration of socioeconomic and Earth science data and to serve as an “Information Gateway” between the Earth and social sciences.
I will be using data from poverty mapping in Mozambique, which you can get here.
Simplify shapefile and convert to geoJson
Before I converted the downloaded shapefile into a geoJson, I decided to slightly edit the borders of the shapefile. This was done by using QGIS via the function “Vector-> Geometry Tools –> Simplify Geometries”. You should be very careful and start with small tolerance parameters. For my application 0.1 was enough. You can see the result below:
Simplify Shape via QGIS
Simplified Shape
After simplifying the shapefile, we have to convert it to a geoJson so we can use it in Leaflet, this can be done online via this website.
Create Map using LeafletJS
It’s time to create our map with Leaflet. Add the LeafletJS and CSS file to your path and create an empty div for the map:
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
</head>
<body>
<div id="map"></div>
<style>
#map { height: 800px;
width: 800px;}
</style>
</body>
</html>
Now some Leaflet Code: Create a map, disable all map interactions like zooming, panning and dragging and add the geoJson layer to the map:
#Include geoJson
var mozambique = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Country":"Mozambique","ADMName":"Cidade de Beira"....
#Create Map
var map = L.map('map',{
zoomControl: false
}).setView([-19.00, 34.00], 6);
#disable zooming, panning and dragging
map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
#add geojson to map
geojson = L.geoJson(mozambique).addTo(map);
By default the background without any basemap/tilelayer is grey, this however can be changed with a single line of CSS:
.leaflet-container { background: white; }
Style Map
To style the map I used the basic code from the Choropleth Tutorial on the LeafletJS website with some minor changes. The code is too long to show it on the blog in detail, however you can get the entire code including the geoJson here. You can have a look the final map below or simply use the interactive online version.
I hope you like the final product, please leave me a comment if you have further question regarding the code or the data. I would also like to mention Moritz Klack who inspired me with his tutorial. Please go check out his website as well.
Cheers
Post A Reply