Did you know that you can view Express Server imagery with Leaflet via WMS? Leaflet is an open-source JavaScript library for creating rich, interactive web maps.

In the example below, we’ve used Leaflet to display a raster layer of Washington state, a raster basemap layer, and a marker icon that identifies the location of the LizardTech office. The raster layers are stored in the MrSID format on the LizardTech demo Express Server and displayed via WMS. Note that out of the box, Leaflet includes keyboard controls, smooth zoom, support for mobile interactions, and many other features. Additionally, because Leaflet is styled with CSS3, it’s easy to customize pop-ups, controls, and even transitions.

To create the above map, complete the following steps:

1. Download Leaflet and extract the files.
2. Create an html file in the same directory where you extracted the Leaflet files.
3. Link to the Leaflet stylesheet and JavaScript file in the document head.
4. Paste the following code in the document body:

<div id="div_map" style="width: 800px; height: 600px;">
</div>
	
<script>
						
var washington = new L.tileLayer.wms(
'http://demo.lizardtech.com/lizardtech/iserv/ows', {
    layers: 'Washington',
    maxZoom: 18,
    format: 'image/png',
    transparent: true
});		
		
var modis = new L.tileLayer.wms(
'http://demo.lizardtech.com/lizardtech/iserv/ows', {
    layers: 'MODIS',
    maxZoom: 18,
    format: 'image/png',
    transparent: true
});
		
var map = new L.map('div_map', {
    center: new L.LatLng(47.60489, -122.33695), 
    zoom: 12,
    layers: [modis,washington],
    zoomControl: true
});
		
var marker_LT_office = new L.marker(
[47.60489, -122.33695]).addTo(map);
marker_LT_office.bindPopup("The LizardTech office!");
		
</script>