Web Maps with Leaflet Presented at the Annual Conference of the Organization of Fish and Wildlife Information Managers September 30, 2014 • Flagstaff, Arizona Dyanne Fry Cortez • Texas Parks and Wildlife Department dyanne.cortez@tpwd.texas.gov Maps to Browse Texas State Parks - www.tpwd.texas.gov/state-parks/ Texas Lake Finder - www.tpwd.texas.gov/fishboat/fish/recreational/lakes/ Where ShareLunkers Come From www.tpwd.texas.gov/spdest/visitorcenters/tffc/sharelunker/lunkerlocations.phtml Demonstration map of Austin Public Libraries - www.sarasafavi.com/maps/libraries.html Loads GeoJSON layer made from shape file downloaded from a public data server Helpful Links Leaflet – leafletjs.com GeoJSON tutorial - leafletjs.com/examples/geojson.html GeoJSON specs - http://geojson.org/geojson-spec.html OpenStreetMaps tile usage http://wiki.openstreetmap.org/wiki/Tile_usage_policy and http://wiki.openstreetmap.org/wiki/Mapquest#MapQuest-hosted_map_tiles Sample Code from Demonstration Maps Lakes of the South Texas Plains www.tpwd.texas.gov/fishboat/fish/recreational/lakes/southtex_demo.phtml In HTML <head> section: <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" /> In <body>: <div id="map" style="width: 90%; height: 520px; border: 1px solid black;"> </div> <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> <script> var map = L.map('map').setView([28.0242,-98.769], 7); L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.'}).addTo(map); var lakeIcon = L.icon({ iconUrl: '/fishboat/fish/recreational/lakes/images/icons/leaflet_marker_grey.png', iconSize: [20, 32], // size of the icon iconAnchor: [10, 31], // point of the icon which will correspond to marker's location popupAnchor: [0, -35] // point from which the popup should open relative to the iconAnchor }); // add points L.marker([28.7789, -99.8281], {icon: lakeIcon, title: 'Averhoff'}).addTo(map) .bindPopup("<b>Averhoff Reservoir</b><br /><a href=\"/fishboat/fish/recreational/lakes/averhoff\">Fishing Information</a>"); L.marker([29.2425, -98.3752], {icon: lakeIcon, title: 'Braunig'}).addTo(map) .bindPopup("<b>Braunig Lake</b><br /><a href=\"/fishboat/fish/recreational/lakes/braunig\">Fishing Information</a>"); L.marker([29.2794, -98.3036], {icon: lakeIcon, title: 'Calaveras'}).addTo(map) .bindPopup("<b>Calaveras Lake</b><br /><a href=\"/fishboat/fish/recreational/lakes/calaveras\">Fishing Information</a>"); L.marker([27.534, -99.4469], {icon: lakeIcon, title: 'Casa Blanca'}).addTo(map) .bindPopup("<b>Casa Blanca International</b><br /><a href=\"/fishboat/fish/recreational/lakes/casa_blanca\">Fishing Information</a>"); L.marker([28.4825, -98.2435], {icon: lakeIcon, title: 'Choke Canyon'}).addTo(map) .bindPopup("<b>Choke Canyon Reservoir</b><br /><a href=\"/fishboat/fish/recreational/lakes/choke_canyon\">Fishing Information</a>"); L.marker([26.5579, -99.1598], {icon: lakeIcon, title: 'Falcon'}).addTo(map) .bindPopup("<b>Falcon Reservoir</b><br /><a href=\"/fishboat/fish/recreational/lakes/falcon\">Fishing Information"); L.marker([27.7907, -98.061], {icon: lakeIcon, title: 'Findley'}).addTo(map) .bindPopup("<b>Lake Findley</b><br /><a href=\"/fishboat/fish/recreational/lakes/findley\">Fishing Information</a>"); // Create overlay image var imageUrl = '/fishboat/fish/recreational/lakes/images/statemaps/stregion.gif', imageBounds = [[25.90123692658776, -100.7645521644355], [29.86978299705952, -97.13094330328251]]; L.imageOverlay(imageUrl, imageBounds, {opacity: 0.3}).addTo(map); </script> Community Fishing Lakes, South Texas Script to generate data file <?php [connect to database] // Function to convert odd characters function parseToJSON($htmlStr) { $myStr=str_replace('<','<',$htmlStr); $myStr=str_replace('>','>',$myStr); $myStr=str_replace('"','"',$myStr); $myStr=str_replace("'",''',$myStr); $myStr=str_replace("&",'&',$myStr); return $myStr; } // Select Community Fishing Lakes $query = "SELECT w.Lake_Code, c.County_Name, w.Water_Name, w.Area, w.Longitude, w.Latitude FROM waterbodies w, counties c WHERE w.County_Code = c.County_ID AND c.TRegion_ID = '5' AND w.CFL = 'Yes' AND w.Longitude IS NOT NULL AND w.Longitude != '0' ORDER BY County_Name, Water_Name"; $result = mysql_query($query); if (!$result) { die('Invalid query: ' . mysql_error()); } header("Content-type: text/javascript"); // Start file, echo parent node $myJSON = 'var cfls = {"type":"FeatureCollection","features":['; // Iterate through the rows, printing a line for each while ($row = @mysql_fetch_array($result)){ $myJSON .= '{"type":"Feature",'; $myJSON .= '"properties":'; $myJSON .= '{"ID":"'. $row[0] . '", '; $myJSON .= '"name":"' . parseToJSON($row[2]) . '", '; $myJSON .= '"county":"' . $row[1] . '",'; $myJSON .= '"size":"' . $row[3] . '"},'; $myJSON .= '"geometry":{"type":"Point","coordinates":[' . $row[4] . ',' . $row[5] . ']}'; $myJSON .= '},'; } // End file $myJSON .= ']}'; $myJSON = substr_replace($myJSON, "]}" ,-3); print $myJSON; ?> Run above script and save output to cfl5.js Here’s a snippet: var cfls = {"type":"FeatureCollection","features":[ {"type":"Feature","properties":{"ID":"1974", "name":"Brackenridge Park", "county":"Bexar","size":"10.00"}, "geometry":{"type":"Point","coordinates":[-98.4724,29.4617]}}, {"type":"Feature","properties":{"ID":"2602", "name":"Converse North Park City Lake", "county":"Bexar","size":"20.00"}, "geometry":{"type":"Point","coordinates":[-98.3129,29.5082]}}, {"type":"Feature","properties":{"ID":"1880", "name":"Earl Scott Pond", "county":"Bexar","size":"2.10"}, "geometry":{"type":"Point","coordinates":[-98.6289,29.5547]}}, {"type":"Feature","properties":{"ID":"0271", "name":"Elmendorf", "county":"Bexar","size":"30.00"}, "geometry":{"type":"Point","coordinates":[-98.5377,29.4252]}}, {"type":"Feature","properties":{"ID":"0232", "name":"Espada", "county":"Bexar","size":"19.00"}, "geometry":{"type":"Point","coordinates":[-98.4663,29.3463]}} ]} Page to display map www.tpwd.texas.gov/fishboat/fish/recreational/lakes/small_lakes_demo.phtml In HTML <head> section: <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" /> In <body>: <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> // load data file <script type="text/javascript" src="/fishboat/fish/recreational/lakes/media/cfl5.js"></script> // start map code <script> var map = L.map('map').setView([28.0242,-98.769], 7); L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', { attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.' }).addTo(map); var imageUrl = '/fishboat/fish/recreational/lakes/images/statemaps/stregion.gif', imageBounds = [[25.90123692658776, -100.7645521644355], [29.86978299705952, 97.13094330328251]]; L.imageOverlay(imageUrl, imageBounds, {opacity: 0.3}).addTo(map); var lakeIcon = L.icon({ iconUrl: '/fishboat/fish/recreational/lakes/images/icons/0access_marker.png', iconSize: [10, 10], // size of the icon iconAnchor: [0, 0], // point of the icon which will correspond to marker's location popupAnchor: [5, 5], // point from which the popup should open }); function onEachFeature(feature, layer) { var popupContent = "<p><b>" + feature.properties.name + "</b><br>" + feature.properties.county + " County<br>" + feature.properties.size + " acres</p>"; layer.bindPopup(popupContent); } L.geoJson(cfls, { onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: lakeIcon, title: feature.properties.name}); } }).addTo(map); </script> ShareLunker Locations www.tpwd.state.tx.us/spdest/visitorcenters/tffc/sharelunker/lunkerlocations.phtml Data generator script $query = "SELECT lunker_fish.WB_code, waterbodies.Water_Name, waterbodies.Longitude, waterbodies.Latitude, COUNT(lunker_fish.ID) FROM lunker_fish, waterbodies WHERE lunker_fish.WB_code = waterbodies.Lake_Code AND waterbodies.Longitude IS NOT NULL AND waterbodies.Longitude != '0' GROUP BY waterbodies.Water_Name"; $result = mysql_query($query); if (!$result) { die('Invalid query: ' . mysql_error()); } // Start JSON statement $myJSON = 'var lunkerlakes = {"type":"FeatureCollection","features":['; // Iterate through the rows, printing a line for each while ($row = mysql_fetch_array($result)){ $myJSON .= '{"type":"Feature",'; $myJSON .= '"properties":'; $myJSON .= '{"ID":"'. $row[0] . '", '; $myJSON .= '"name":"' . parseToJSON($row[1]) . '", '; $myJSON .= '"fishcount":"' . $row[4] . '"},'; $myJSON .= '"geometry":{"type":"Point","coordinates":[' . $row[2] . ',' . $row[3] . ']}'; $myJSON .= '},'; } // End file $myJSON .= ']}'; $myJSON = substr_replace($myJSON, "]}" ,-3); print $myJSON; ?> Snippet of code var lunkerlakes = {"type":"FeatureCollection","features":[ {"type":"Feature","properties":{"ID":"0006", "name":"Alan Henry", "fishcount":"25"}, "geometry":{"type":"Point","coordinates":[-101.042,33.0602]}}, {"type":"Feature","properties":{"ID":"0014", "name":"Amistad", "fishcount":"12"}, "geometry":{"type":"Point","coordinates":[-101.057,29.4503]}}, {"type":"Feature","properties":{"ID":"0015", "name":"Amon G. Carter", "fishcount":"2"}, "geometry":{"type":"Point","coordinates":[-97.8576,33.4587]}}, {"type":"Feature","properties":{"ID":"0023", "name":"Arlington", "fishcount":"1"}, "geometry":{"type":"Point","coordinates":[-97.1994,32.7211]}}, {"type":"Feature","properties":{"ID":"0763", "name":"Waco", "fishcount":"1"}, "geometry":{"type":"Point","coordinates":[-97.1995,31.5811]}}, {"type":"Feature","properties":{"ID":"0781", "name":"White River Reservoir", "fishcount":"1"} ,"geometry":{"type":"Point","coordinates":[-101.084,33.4577]}} ]} Page to display map <div id="map" style="width: 98%; height: 700px; border: 1px solid black;"> </div> <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script> <script type="text/javascript" src="/spdest/visitorcenters/tffc/sharelunker/include/sharelunkers.js"></script> <script> var map = L.map('map').setView([31,-100], 6); L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {attribution: 'Tiles Courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a>, © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors.' }).addTo(map); var lunkerIcon = L.icon({ iconUrl: '/fishboat/fish/recreational/lakes/images/icons/leaflet_marker.png', iconSize: [20, 32], // size of the icon iconAnchor: [10, 31], // point of the icon which will correspond to marker's location popupAnchor: [0, -35] // point from which the popup should open relative to the iconAnchor }); function onEachFeature(feature, layer) { // conditional statement for plural vs. singular fishcount if (feature.properties.fishcount > 1) { var popupContent = "<b>" + feature.properties.name + "</b><br>"+ feature.properties.fishcount + " ShareLunkers (<a href='archives/index.phtml?wcode=" + feature.properties.ID + "'>see list</a>)"; } else { var popupContent = "<b>" + feature.properties.name + "</b><br>" + feature.properties.fishcount + " ShareLunker (<a href='archives/index.phtml?wcode=" + feature.properties.ID + "'>details</a>)"; } layer.bindPopup(popupContent); } L.geoJson(lunkerlakes, { onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: lunkerIcon, title: feature.properties.name + " (" + feature.properties.fishcount + ")"}); } }).addTo(map); // Two river locations do not have lats and longs in the database and need to be added individually: L.marker([28.5442, -99.7891], {icon: lunkerIcon, title: 'Nueces River (1)'}).addTo(map) .bindPopup("<b>Nueces River</b><br />1 Sharelunker (<a href=\"archives/index.phtml?wcode=1422\">details</a>)"); L.marker([29.9335, -94.4827], {icon: lunkerIcon, title: 'Spindletop Bayou (1)'}).addTo(map) .bindPopup("<b>Spindletop Bayou</b><br />1 Sharelunker (<a href=\"archives/index.phtml?wcode=1563\">details</a>)"); </script>
© Copyright 2024 Paperzz