Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the...
Transcript of Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the...
![Page 1: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/1.jpg)
Web Maps With Leaflet Presented at the Annual Meeting of the
Organization of Fish and Wildlife Information Managers September 30, 2014
Flagstaff, AZ
![Page 2: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/2.jpg)
What is Leaflet?
A JavaScript library for building interactive maps
![Page 3: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/3.jpg)
Free, open source Public, private, commercial use Use with any background map Active developer community for
support and plug-in features
Advantages of Leaflet
![Page 4: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/4.jpg)
TPWD Leaflet Maps
State Parks Lake Finder ShareLunker Locations
![Page 5: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/5.jpg)
Find Base Map
ArcGIS Online NCRS imagery Mapbox In-house cartography
![Page 6: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/6.jpg)
OpenStreetMaps
Crowd-sourced map of world Unrestricted use, but don’t link
to OSM server Download and store locally Use another host service
MapQuest Open
![Page 7: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/7.jpg)
Basic Setup Leaflet stylesheet in page header
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
Map div in page body <div id="map" style="width: 700px; height: 700px; border: 1px solid black;"> </div>
Call Leaflet software <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"> </script>
![Page 8: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/8.jpg)
Build Your Map Open JavaScript tag
<script></script>
Create map variable, Set center point and zoom level var map = L.map('map').setView([31,-100], 6);
Add base map L.tileLayer('http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png’).addTo(map);
![Page 9: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/9.jpg)
L.marker([lat, long]) .addTo(map) .bindPopup(‘content');
![Page 10: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/10.jpg)
Texas Travel Regions
Panhandle Plains Prairies & Lakes Piney Woods Gulf Coast South Texas Plains Hill Country Big Bend Country
![Page 11: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/11.jpg)
Lakes of the South Texas Plains
• Custom point marker
• Mouseover tooltip! • Customize
popup window • Image overlay
![Page 12: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/12.jpg)
Point Marker
Define icon var lakeIcon = L.icon({ iconUrl: 'images/icons/leaflet_marker_grey.png', iconSize: [20, 32], iconAnchor: [10, 31], popupAnchor: [0, -35] });
Put marker on map L.marker([28.7789, -99.8281], {icon: lakeIcon}).addTo(map);
![Page 13: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/13.jpg)
Tooltip & Popup
Add Tooltip L.marker([28.7789, -99.8281], {icon: lakeIcon, title: 'Averhoff'}) .addTo(map);
Format popup window .bindPopup("<b>Averhoff Reservoir</b><br /> <a href=\"/fishboat/fish/recreational/lakes/averhoff\">Fishing Information</a>");
Code for one placemark 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>");
![Page 14: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/14.jpg)
Add Overlay
![Page 15: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/15.jpg)
Image Overlay
Specify image and placement var imageUrl = '/fishboat/fish/recreational/lakes/images/statemaps/stregion.gif', imageBounds = [[25.90123692658776, -100.7645521644355], [29.86978299705952, -97.13094330328251]];
Put on map, adjust transparency L.imageOverlay(imageUrl, imageBounds, {opacity: 0.3}).addTo(map);
![Page 16: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/16.jpg)
Bulk Loading with GeoJSON
GeoJSON - geospatial data interchange format based on JavaScript Object Notation (JSON)
Works well with Leaflet Store multiple map features in
GeoJSON object
![Page 17: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/17.jpg)
GeoJSON Objects
Geometry Point, MultiPoint LineString, MultiLineString Polygon, MultiPolygon, GeometryCollection
Feature A geometry + properties
![Page 18: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/18.jpg)
Sources of GeoJSON Data
Download from public repositories GIS shape files – convert with QGIS,
ArcGIS, GeoMedia Query database and express results
in GeoJSON format
![Page 19: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/19.jpg)
South Texas CFLs
20+ small lakes Select from
MySQL database PHP script converts
result to GeoJSON feature collection
Save output to file.js Call file from Leaflet
![Page 20: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/20.jpg)
Query Database
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
![Page 21: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/21.jpg)
JSON Statement 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":"0232", "name":"Espada", "county":"Bexar","size":"19.00"}, "geometry":{ "type":"Point","coordinates":[-98.4663,29.3463]}}
]}
![Page 22: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/22.jpg)
Put Data on Map Call JSON file
<script type="text/javascript" src="/fishboat/fish/recreational/lakes/media/cfl5.js"> </script>
Put properties in popup 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); }
![Page 23: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/23.jpg)
Create Markers
L.geoJson(cfls, { onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: lakeIcon, title: feature.properties.name}); } }).addTo(map);
![Page 24: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/24.jpg)
ShareLunker Locations
![Page 25: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/25.jpg)
![Page 26: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/26.jpg)
ShareLunker 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";
![Page 27: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/27.jpg)
JSON Statement 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":"0781", "name":"White River Reservoir", "fishcount":"1"}, "geometry":{ "type":"Point","coordinates":[-101.084,33.4577]}}
]}
![Page 28: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/28.jpg)
Popup Content
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>)"; }
![Page 29: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/29.jpg)
Create Markers
L.geoJson(lunkerlakes, { onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: lunkerIcon, title: feature.properties.name + " (" + feature.properties.fishcount + ")"}); } }).addTo(map);
![Page 30: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/30.jpg)
TPWD Leaflet Maps State Parks - www.tpwd.texas.gov/state-parks/
Statewide Lake Finder www.tpwd.texas.gov/fishboat/fish/recreational/lakes/
South Texas Lakes (demo) www.tpwd.texas.gov/fishboat/fish/recreational/lakes/southtex_demo.phtml
Small Lakes (demo) www.tpwd.texas.gov/fishboat/fish/recreational/lakes/small_lakes_demo.phtml
ShareLunker Locations www.tpwd.texas.gov/spdest/visitorcenters/tffc/sharelunker/lunkerlocations.phtml
![Page 31: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/31.jpg)
Helpful Links Leaflet API - leafletjs.com GeoJSON tutorial
leafletjs.com/examples/geojson.html GeoJSON Format Specification
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
![Page 32: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/32.jpg)
More Information
Dyanne Fry Cortez Web Coordinator
Inland Fisheries Division Texas Parks and Wildlife Department
![Page 33: Web Maps With Leaflet - OFWIM · Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff,](https://reader030.fdocuments.us/reader030/viewer/2022040715/5e1d78a97853a62bb961f643/html5/thumbnails/33.jpg)