Leaflet: a quick intro for webmapping

      Comments Off on Leaflet: a quick intro for webmapping

Leaflet  is currently one of the most important javascript open source libraries for interactive webmapping. An updated version  1.2.0 has been released  because the old one provided several troubles with different plugins and library’s extensions.

leaflet.PNG

On following the official tutorial , here it is  quick way to publish a map on the web by analyzing the code step by step.

Preparation

First, we should prepare links which redirect to the leaflet javascript library and CSS style content. Notice that Leaflet encourages the use of CDN (Content Delivery Networks) through a Subresource Integrity that is a string which permits to the browsers on verifying the proper file’s content is not manipulated. So,  insert the following code:

<!-- Leaflet's CSS --> 
 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

 <!-- Make sure you put this AFTER Leaflet's CSS --> 
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

In <head> section insert the map object’s style.

<style type="text/css">
      html, body,#map {
            height: 100%;
            width: 100%
            }
</style>

We declare the map <div>  in <body> section as below:

<div id="map"></div>

In the same <body> section we shall insert also the heart of the code where javascript commands will be executed in order to recall back the leaflet’s libraries.

var map = L.map('map').setView([48.854716, 2.349014], 14);

mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; ' + mapLink + ' Contributors',
    maxZoom: 18
}).addTo(map); 

When analyzing the script, we note the setView method in which it is possible to set the coordinates of map’s centre. At same time we insert an url though tileLayer method for extracting a simple map from OpenStreetMap tiles as well as the zoom at 18 value. Finally, the object map will be the argument of addTo method which adds the basemap layer in order to display it and pass it to the map <div> in html page.

Here it is a good overlook on Paris as result!

Marker on map

A further step forward is to introduce a marker on map. We only need insert the following code:

var marker = L.marker([48.854716, 2.349014 ]).addTo(mymap);

The output is below:

And if we want to insert a popup as well? Well, we associate the function bindPopup to the marker object as below::

marker.bindPopup("<b>Qui c'è Notre Dame de Paris</b>").openPopup();

Obviously we cannot forgot polygon or polyline to insert in a map. So we add into the code:

var circle = L.circle([48.86096, 2.36077], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map);
var polygon = L.polygon([
    [48.85095, 2.33506],
    [48.84591, 2.34232],
    [48.84472, 2.33852]
]).addTo(map);
var polyline = L.polyline([
    [48.86095, 2.34506],
    [48.85591, 2.3

Definitely we end up here with this short overview about this last library version. The potentialities of this instrument are several and they may be used in so many different ways in order to return your webgis as adaptable as much possible.

Check out also >> SearchRoad: between Leaflet Mobile and Plugins