web maps with leaflet - ofwim · web maps with leaflet presented at the annual meeting of the...
TRANSCRIPT
Web Maps With Leaflet Presented at the Annual Meeting of the
Organization of Fish and Wildlife Information Managers September 30, 2014
Flagstaff, AZ
What is Leaflet?
A JavaScript library for building interactive maps
Free, open source Public, private, commercial use Use with any background map Active developer community for
support and plug-in features
Advantages of Leaflet
TPWD Leaflet Maps
State Parks Lake Finder ShareLunker Locations
Find Base Map
ArcGIS Online NCRS imagery Mapbox In-house cartography
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
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>
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);
L.marker([lat, long]) .addTo(map) .bindPopup(‘content');
Texas Travel Regions
Panhandle Plains Prairies & Lakes Piney Woods Gulf Coast South Texas Plains Hill Country Big Bend Country
Lakes of the South Texas Plains
• Custom point marker
• Mouseover tooltip! • Customize
popup window • Image overlay
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);
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>");
Add Overlay
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);
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
GeoJSON Objects
Geometry Point, MultiPoint LineString, MultiLineString Polygon, MultiPolygon, GeometryCollection
Feature A geometry + properties
Sources of GeoJSON Data
Download from public repositories GIS shape files – convert with QGIS,
ArcGIS, GeoMedia Query database and express results
in GeoJSON format
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
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
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]}}
]}
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); }
Create Markers
L.geoJson(cfls, { onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.marker(latlng, {icon: lakeIcon, title: feature.properties.name}); } }).addTo(map);
ShareLunker Locations
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";
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]}}
]}
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>)"; }
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);
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
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
More Information
Dyanne Fry Cortez Web Coordinator
Inland Fisheries Division Texas Parks and Wildlife Department