Leaflet Popups
HTML
<script src="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.5/leaflet.css">
<div id="mymap" style="width:600px;height:430px;"></div>
CSS
html, body{ width:100%; height: 100%, margin:0; padding:0; }
#mymap{ width:100%; height:100%; }
JavaScript
// create a map
mapoptions = {
zoomControl: false,
dragging: false,
scrollWheelZoom: false,
doubleClickZoom: false,
boxZoom: false,
keyboard: false
}
map = new L.Map('mymap', mapoptions);
// create the Esri Gray layer
var grayMapUrl = 'http://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}';
var grayMapLayer = new L.TileLayer(grayMapUrl, { maxZoom: 19, attribution: 'Tiles: © Esri' });
map.addLayer(grayMapLayer);
// set the map's starting view
var center = [44.12308489306967, -120.684814453125];
map.setView( new L.LatLng(center[0], center[1]), 6 );
var fish = {"type":"FeatureCollection",
"features":[{"geometry":{"type":"Point",
"coordinates":[-122.679416,
45.516632]},
"type":"Feature",
"properties":{"fisher_id":"401",
"river":"Willamette",
"fishcaught":[{"type":"Salmon",
"count":5},
{"type":"Sturgen",
"count":1},
{"type":"Bass",
"count":2}]}},
{"geometry":{"type":"Point",
"coordinates":[-121.318584,
44.050165]},
"type":"Feature",
"properties":{"fisher_id":"401",
"river":"Deschutes",
"fishcaught":[{"type":"Trout",
"count":10},
{"type":"Whitefish",
"count":1}]}},
{"geometry":{"type":"Point",
"coordinates":[-124.102962,
43.983057]},
"type":"Feature",
"properties":{"fisher_id":"401",
"river":"Siuslaw",
"fishcaught":[{"type":"Steelhead",
"count":2},
{"type":"Salmon",
"count":6}]}},
{"geometry":{"type":"Point",
"coordinates":[-121.776289,
42.220382]},
"type":"Feature",
"properties":{"fisher_id":"401",
"river":"Klamath",
"fishcaught":[{"type":"Trout",
"count":3},
{"type":"Steelhead",
"count":2},
{"type":"Salmon",
"count":3}]}}]};
function onEachFeature(feature, layer) {
if (feature.properties.fishcaught) {
var popupcontent;
popupcontent = "<span style='font-weight:bold'>River: </span>"+feature.properties.river;
for (i=0;i<feature.properties.fishcaught.length;i=i+1){
var fishstring = "<br><span...