Minimalist Leaflet

Minimalistic Leaflet

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

Simplify Shape via QGIS

simplified shape

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.

mozambie_minimalistic

 

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

 

About This Author

Martin was born in Czech Republic and studied at the University of Natural Resources and Life Sciences, Vienna. He is currently working at an Earth Observation Company in Austria, specialised in Land Monitoring. His main interests are: Open-source applications like R, (geospatial) statistics and data-management, web-mapping and visualization. He loves travelling, geocaching, photography and TV series.

Post A Reply

*