Web Maps With Leaflet. Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff, AZ

Transcription

1 Web Maps With Leaflet Presented at the Annual Meeting of the Organization of Fish and Wildlife Information Managers September 30, 2014 Flagstaff, AZ

2 What is Leaflet? A JavaScript library for building interactive maps

3 Advantages of Leaflet Free, open source Public, private, commercial use Use with any background map Active developer community for support and plug-in features

4 TPWD Leaflet Maps State Parks Lake Finder ShareLunker Locations

5 Find Base Map ArcGIS Online NCRS imagery Mapbox In-house cartography

6 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

7 Basic Setup Leaflet stylesheet in page header <link rel="stylesheet" href=" 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=" </script>

8 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(' ).addto(map);

9 L.marker([lat, long]).addto(map).bindpopup( content');

10 Texas Travel Regions Panhandle Plains Prairies & Lakes Piney Woods Gulf Coast South Texas Plains Hill Country Big Bend Country

11 Lakes of the South Texas Plains Custom point marker Mouseover tooltip! Customize popup window Image overlay

12 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([ , ], {icon: lakeicon}).addto(map);

13 Tooltip & Popup Add Tooltip L.marker([ , ], {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([ , ], {icon: lakeicon, title: 'Averhoff'}).addTo(map).bindPopup("<b>Averhoff Reservoir</b><br /> <a href=\"/fishboat/fish/recreational/lakes/averhoff\">fishing Information<a>");

14 Add Overlay

15 Image Overlay Specify image and placement var imageurl = '/fishboat/fish/recreational/lakes/images/statemaps/stregion.gif', imagebounds = [[ , ], [ , ]]; Put on map, adjust transparency L.imageOverlay(imageUrl, imagebounds, {opacity: 0.3}).addTo(map);

16 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

17 GeoJSON Objects Geometry Point, MultiPoint LineString, MultiLineString Polygon, MultiPolygon, GeometryCollection Feature A geometry + properties

18 Sources of GeoJSON Data Download from public repositories GIS shape files convert with QGIS, ArcGIS, GeoMedia Query database and express results in GeoJSON format

19 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

20 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

21 JSON Statement var cfls = {"type":"featurecollection","features":[ {"type":"feature","properties":{ "ID":"1974", "name":"brackenridge Park", "county":"bexar","size":"10.00"}, "geometry":{ "type":"point","coordinates":[ , ]}}, {"type":"feature","properties":{ "ID":"0232", "name":"espada", "county":"bexar","size":"19.00"}, "geometry":{ "type":"point","coordinates":[ , ]}} ]}

22 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); }

23 Create Markers L.geoJson(cfls, { oneachfeature: oneachfeature, pointtolayer: function (feature, latlng) { return L.marker(latlng, {icon: lakeicon, title: feature.properties.name}); } }).addto(map);

24 ShareLunker Locations

25

26 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";

27 JSON Statement var lunkerlakes = {"type":"featurecollection","features":[ {"type":"feature","properties":{ "ID":"0006", "name":"alan Henry", "fishcount":"25"}, "geometry":{ "type":"point","coordinates":[ , ]}}, {"type":"feature","properties":{ "ID":"0781", "name":"white River Reservoir", "fishcount":"1"}, "geometry":{ "type":"point","coordinates":[ , ]}} ]}

28 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>)"; }

29 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);

30 TPWD Leaflet Maps State Parks - Statewide Lake Finder South Texas Lakes (demo) thtex_demo.phtml Small Lakes (demo) all_lakes_demo.phtml ShareLunker Locations er/lunkerlocations.phtml

31 Helpful Links Leaflet API - leafletjs.com GeoJSON tutorial leafletjs.com/examples/geojson.html GeoJSON Format Specification OpenStreetMaps tile usage ge_policy and st#mapquest-hosted_map_tiles

32 More Information Dyanne Fry Cortez Web Coordinator Inland Fisheries Division Texas Parks and Wildlife Department

33