Taken from
http://esri.github.io/esri-leaflet/examples/customizing-popups.html
<html> | |
<head> | |
<meta charset=utf-8 /> | |
<title>Custom Popup with Dynamic Map Layer</title> | |
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
<!-- Load Leaflet from CDN--> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" /> | |
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> | |
<!-- Load Esri Leaflet from CDN --> | |
<script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/0.0.1-beta.5/esri-leaflet.js"></script> | |
<style> | |
body {margin:0;padding:0;} | |
#map {position: absolute;top:0;bottom:0;right:0;left:0;} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script> | |
var map = L.map('map').setView([37.930, -106.52], 2); | |
L.esri.basemapLayer('Gray').addTo(map); | |
var Hurricane = L.esri.dynamicMapLayer('http://tmservices1.esri.com/arcgis/rest/services/LiveFeeds/Hurricane_Recent/MapServer', { | |
layers:[0,1] | |
}).addTo(map); | |
Hurricane.bindPopup(function (error, featureCollection) { | |
var storm; | |
// user click on track layer | |
if (featureCollection.features.length === 1){ | |
storm= featureCollection.features[0].properties; | |
console.log('1: '+featureCollection.features.length) | |
popupText = "<center><b>" + | |
storm.STORMNAME + "</b><br>" + | |
storm.STORMTYPE + "</center>"; | |
} | |
// user click on storm position | |
else { | |
console.log('2: '+featureCollection.features.length) | |
storm= featureCollection.features[1].properties; | |
popupText = "<center><b>" + | |
storm.STORMNAME + "</b><br>" + | |
storm.STORMTYPE + "<br>" + | |
"Intensity:"+storm.INTENSITY+"<br>"+ | |
storm.YEAR+" "+storm.MONTH+" "+ storm.DAY+"<br>"+ | |
storm.DTG + | |
"<br>sea level pressure: "+storm.MSLP+"mb"+ | |
"</center>"; | |
} | |
if(error || featureCollection.features.length === 0) { | |
return false; | |
} else { | |
return popupText; | |
} | |
}); | |
</script> | |
</body> | |
</html> |