Leaflet and WMS

Web Map Service (WMS) is a way of publishing local geodata as map tiles, but more opetational. It can be published by GeoServer or other softwares e.g. QGIS.
Leaflet.js is a open source JS library, which is made for interacitve maps. With Mapbox, more maps can be designed, personalised and added to web applications via Leaflet.js.

Insert js libraries

Download the libs in your local folder, and include them in your HTML file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!-- Leaflet-->
<link rel="stylesheet" href="libs/leaflet.css"/>
<script src="libs/leaflet.js"></script>

<!-- GeoCoder-->
<link rel="stylesheet" href="libs/Control.OSMGeocoder.css"/>
<script src="libs/Control.OSMGeocoder.js"></script>

<!-- Overview-->
<link rel="stylesheet" href="libs/overview/MiniMap.css" />
<script src="libs/overview/MiniMap.js"></script>

<!-- Location-->
<link rel="stylesheet" href="libs/L.Control.Locate.min.css" />
<script src="libs/L.Control.Locate.js"></script>

<!-- Mouse position display-->
<link rel="stylesheet" href="libs/L.Control.MousePosition.css" />
<script src="libs/L.Control.MousePosition.js"></script>

<!-- Navigation Bar-->
<link rel="stylesheet" href="libs/NavBar/NavBar.css"/>
<script src="libs/NavBar/NavBar.js"></script>

<!-- Font-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">

<!-- jquery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

Diaplay OSM as base map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<head>
	<!-- down load Leaflet lib from internet -->
	<link rel="stylesheet" href="libs/leaflet.css"/>
	<script src="libs/leaflet.js"></script>
</head>
<div id="map"></div>
<script>

//OSM as base map
var OpenStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

//map configuration	
var map = L.map('map', {
		layers: [OpenStreetMap], 
		center: [31.2, 121.4],    // default center coordinate, here is Shanghai
		zoom: 3	                  // default zoom level
	});
</script>

Screenshot of OSM base map

WMS Layer

1
2
3
4
// add WMS to map
var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/first/wms?', {
	    layers: 'first:railways_cn',
	}).addTo(map);

Screenshot of WMS Layer

WMS is loaded as tailed photos, the default format is .jepg, so that the layer can not have transparent band. The upper layers will cover the base map. Change the tailed photo’s format and set transparency:

1
2
3
4
5
var wmsLayer = L.tileLayer.wms('http://localhost:8080/geoserver/first/wms?', {
    layers: 'first:railways_cn',
    format: 'image/png',
    transparent: true,
}).addTo(map);

Screenshot of transparent WMS Layer

Projection

Leaflet supports very few coordinate systems: CRS:3857, CRS:3395 and CRS:4326. If your WMS service doesn’t serve images in those coordinate systems, you might need to use Proj4Leaflet to use a different coordinate system in Leaflet.

Or set the layer’s coordinates in GeoServer.

Railway WMS Layer

Layer control

Base map

1
2
3
4
5
6
7
8
9
10
11
// base map server url
var OpenStreetMap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var WorldImagery = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');

//add layer to a attribute		
var baseLayers = {
	"Open Street Map": OpenStreetMap,
	"World Imagery": WorldImagery
};

L.control.layers(baseLayers).addTo(map);

Base maps

Overlays

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// layers from Geoserver (format WMS)
var points = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:points_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var railways = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:railways_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var buildings = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:buildings_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var landuse = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:landuse_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});
var boundary = L.tileLayer.wms("http://localhost:8080/geoserver/first/wms", {
	layers: 'fitst:boundary_cn',
	format: 'image/png',
	transparent: true,
	version: '1.1.0',
	attribution: "myattribution"
});


// Group layers
var overlays = {
	"points": points,
	"railways": railways,
	"buildings": buildings,
	"landuse": landuse,
	"boundary": boundary,
};

// add base maps and overlays together to the map
L.control.layers(baseLayers,overlays).addTo(map);

Layers

Widgets

Search function

1
2
var osmGeocoder = new L.Control.OSMGeocoder();
map.addControl(osmGeocoder);

Search function

Overview Map

1
2
var osm2 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var miniMap = new L.Control.MiniMap(osm2, { toggleDisplay: true }).addTo(map);

The overview map in the right bottom corner

1
L.control.navbar({position: 'topleft'}).addTo(map);

Navigator in the left top corner

Scale bar

1
L.control.scale().addTo(map);

Scale bar in the left bottom corner

Mouse hover position

1
L.control.mousePosition().addTo(map);

Coordinate at right bottom

Reference

Leaflet Tutorial
stackoverflow | How to make transparent WMS vector background in QGIS?