leaflet wms USA

by abubelinha

HTML

<div id="map" style="width: 600px; height: 400px"></div>
<div><span id="zoomlevel"></span>

</div>
<script src="http://leafletjs.com/dist/leaflet.js"></script>

CSS

</style> <!-- access to the HEAD element --> <link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.css" /> <!--[if lte IE 8]><link rel="stylesheet" href="http://leafletjs.com/dist/leaflet.ie.css" /><![endif]--> <style>

JavaScript

var map = L.map('map').setView([30.5, -90.0], 5);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'OSM [any zoom]'
}).addTo(map);

L.tileLayer.wms('http://gis.srh.noaa.gov/arcgis/services/NDFDTemps/MapServer/WMSServer', {
    format: 'img/png',
    transparent: true,
    layers: 16,
    minZoom: 4,
    maxZoom: 5,
    attribution: 'GREEN temperature [zooms 4 to 5]'
}).addTo(map);

L.tileLayer.wms('http://nowcoast.noaa.gov/wms/com.esri.wms.Esrimap/obs', {
    format: 'image/png',
    transparent: true,
    layers: 'RAS_RIDGE_NEXRAD',
    minZoom: 6,
    maxZoom: 20,
    attribution: 'MULTICOLOUR rain [zooms 6 to 20]'
}).addTo(map);

map.addEventListener('zoomend', onMapZoom);

function onMapZoom(e) {
    var z = map.getZoom();
    z = ' zoom ' + z + ' (' + (z < 4 ? 'Open Street Maps' : (z < 6 ? '<b>GREEN</b> temperature' : '<b>MULTICOLOUR</b> precipitation')) + ' layer)';
    $("#zoomlevel").html(z);
}

onMapZoom();