web maps with leaflet - ofwim · web maps with leaflet presented at the annual meeting of the...

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

dyanne.cortez@tpwd.texas.gov