Database Reference
In-Depth Information
Consuming WMS services with Leaflet
In the previous recipe, you have seen how to create a web page with a map using
theOpenLayersJavaScriptAPIandthenaddedtothemaptheWMSPostGISlayers
implemented with MapServer and GeoServer in the first two recipes of this chapter.
A new, lighter alternative to the widespread, venerable OpenLayers JavaScript API
has emerged in the last couple of years, named
Leaflet
. In this recipe, you will see
how to use this JavaScript API to create a map in a web page, add a MapServer
WMS layer from PostGIS to this map, and implement an identify tool sending a
GetFeatureInfo
requesttotheMapServerWMS(unlikeOpenLayer,Leafletdoes
not come with a
WMSGetFeatureInfo
control).
How to do it...
Carry out the following steps:
1. Create a new HTML file and name it
leaflet.html
. Open it and add the
<head>
and
<body>
tags.Inthe
<head>
section,importtheLeafletCSSand
JavaScript libraries and the jQuery JavaScript library (you will use jQuery to
send an AJAX request to the
GetFeatureInfo
MapServer WMS):
<html>
<head>
<title>Leaflet Example</title>
<link rel="stylesheet"
href="http://leafletjs.com/dist/
leaflet.css" />
<script src="http://leafletjs.com/dist/
leaflet.js"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>
