Database Reference
In-Depth Information
2. Startaddinga
<div>
taginthe
<body>
elementtoincludetheLeafletmap
inyourfile,asshowninthefollowingcode;themapwillhaveawidthof800
pixels and a height of 500 pixels:
<div id="map" style="width:800px;
height:500px"></div>
3. Just after the
<div>
element containing the map, add the following
JavaScript code. Create a Leaflet
tileLayer
object using the
tile.osm.org
service based on
OpenStreetMap
data:
<script defer="defer" type="text/
javascript">
// osm layer
var osm =
L.tileLayer('http://{s}.tile.osm.org/{z}/
{x}/{y}.png', {
maxZoom: 18,
attribution: "Data by OpenStreetMap"
});
</script>
4. CreateasecondlayerthatwillusetheMapServerWMSyoucreatedafew
recipes ago in this chapter. You will need to set the
ms_url
variable differ-
ently if you're using Linux or Windows.
• For Linux, use the following code:
// mapserver layer
var ms_url =
"http://localhost/cgi-bin/
mapserv?map=/var/www/data/
countries.map&";
var countries =
L.tileLayer.wms(ms_url, {
layers: 'countries',
format: 'image/png',
transparent: true,
