I'm Roy Hewitt, Web Developer for the Southeast Region of the U.S. Fish & Wildlife Service
Required disclaimer: All opinions are my own!
All demonstration code is available in this repository under the demo directory.
A brief code snipped of the most important bits of each demo will be included in the slides.
I've included some suggested reading if you want to dive deeper into some of the concepts from this talk.
Disclaimer: I don't work for Mapbox, but I think they're pretty cool plus they write excellent guides and documentation.
All of the examples in this talk use LeafletJS.
What components make up a web map?
Suggested Reading MaptimeHQ: Anatomy of a Web Map
Software that enables 'Slippy Maps'. The web mapping library handles all of the gnarly bits like loading only the tiles you need as the user pans and zooms and emitting events when the user clicks on map markers.
Provide a contextual background layer that inform the user where they are on the planet.
Rather than a single large file, web maps chop up huge images into bite-sized square images called tiles.
Suggested Reading: How do Web Maps Work by Mapbox
Each zoom layer can display different map data and labels.
You wouldn't, for example, display streets when you're zoomed out at to the Continental level.
var map = L.map('map').setView([33.775133, -84.381808], 9);
L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(map);
var map = L.map('map').setView([33.775133, -84.381808], 9);
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
subdomains: 'abcd',
minZoom: 1,
maxZoom: 16,
ext: 'png'
}).addTo(map);
My favorite resource for picking a basemap is the Leaflet Providers Demo.
The meat and potatoes of your web map. What information are you trying to show on top of your basemap?
Suggested Reading: Mastering Web Map Layers by Mapbox
Mapping libraries will handle most web services, and GeoJSON for you out of the box.
Often comes in the form of a flat file that you can store with your project.
$.getJSON('//rawgit.com/maptime/maptime.github.io/master/_data/chapters.json', function(chapters) {
var geojson = L.geoJson(chapters).addTo(map);
map.fitBounds(geojson.getBounds());
});
When you have lots of data you can make it available as a service, and have the map request only what it needs.
L.tileLayer.wms('//gis.srh.noaa.gov/arcgis/services/NDFDTemps/MapServer/WMSServer', {
format: 'img/png',
transparent: true,
layers: 16
}).addTo(map);
There is a huge amount of data produced and maintained by Government agencies large and small.
Open data is a good thing, plus for the Feds, it's a rule.
Use your search term + "Shapefile", or "WMS", and the hunt begins.
Collect data in the field or create it with your laptop.
Maybe you want to do the heavy lifting of data conversion up-front rather than leaving it to the browser.
brew install gdal
# Convert ESRI Shapefile to GeoJSON
ogr2ogr -f "GeoJSON" output.json input.shp
Leaflet is really good at maintaining it's diet.
Anything Leaflet core doesn't do has likely been implemented as a plugin already!
A plugin for leaflet that eats up data and puts it on a map
Atlanta Neighborhoods as KML
Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap
var map = L.map('map').setView([33.775133, -84.381808], 9);
var neighborhoods = omnivore.kml('../data/neighborhoods.kml')
.on('ready', function() {
map.fitBounds(neighborhoods.getBounds());
}).addTo(map);
Leaflet Shapefile: A plugin for converting an ESRI Shapefile to L.GeoJSON.
Download Shapefile
Map tiles by Stamen Design, CC BY 3.0 — Map data © OpenStreetMap
var map = L.map('map').setView([33.775133, -84.381808], 9);
var georgia = L.shapefile('../data/georgia.zip').addTo(map);
A plugin for accepting user input to create features.
Too much to show in one snippet. View the source.
Once you start displaying lots of markers it can be difficult to target a single marker for with your cursor (or finger).
Thousands of markers will eventually slow down user interaction.
Too much to show in one snippet. View the source.
Maps are great for showing geographic data, but they are great User Interface tools, too!
“Have you ever taken apart a map? Worked with a map as a critical part of your design?”
“Story maps use geography as a means of organizing and presenting information. They tell the story of a place, event, issue, trend, or pattern in a geographic context. They combine interactive maps with other rich content—text, photos, video, and audio—within user experiences that are basic and intuitive.”-ESRI
Questions?