minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board...
Transcript of minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board...
![Page 1: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/1.jpg)
minimalist + web
map=leaflet joel bump – igic board member – state agencies
![Page 2: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/2.jpg)
how did we get here?
We wanted maps and GIS on the web. So we created…
image maps, vectors, vml, svg, push pins, hovers, pop ups, query…
maps, tools, editing, geocoding, geoprocessing…
Plug-ins, java apps, activeX…
What we got..
![Page 3: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/3.jpg)
we were amazed by what we could do
![Page 4: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/4.jpg)
until we had to customize
![Page 5: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/5.jpg)
Times changed and things continued to evolve .NET, SOAP, Rest services, AJAX…
Still plug-ins – Flex, Flash, Silverlight, Custom plug-ins
However, one thing continued…
![Page 6: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/6.jpg)
Some code
became more
complex.
The amount
of code
produced
contributed
to…
![Page 7: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/7.jpg)
code bloat..
ESRI Flex viewer – 6 meg
ESRI JavaScript viewer – over a meg
GoogleMaps - over a meg
Bing – over a meg
MapQuest – yep you guessed it
![Page 8: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/8.jpg)
leaflet
28k
Fast loading
Small footprint
Great for lower bandwidth (mobile)
Only load what you need when you need it
www.leafletjs.com
![Page 9: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/9.jpg)
leaflet
Power behind the size
HTML5
CSS3
JavaScript
http://ie.microsoft.com/testdrive - samples
![Page 10: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/10.jpg)
features
Layers
Tiles, markers, popups, vectors, image, WMS, GeoJSON
Navigation
Pan/zoom – mouse wheel, zoom area, keyboard nav.
Touch zoom (ios, Android 4+, Win8)
Customization
CSS3 styled tools and popups
Interface for custom layers & controls
Custom projections (3 built in)
Powerful OOP model for extending existing base code
![Page 11: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/11.jpg)
features
Performance
Hardware acceleration on iOS and HTML5 supported browsers
Smart Polygon/Polyline Rendering
Dynamic clipping and simplifying
Modular Design
Plug-in library of custom add-ins
Load only what you need
Controls – Zoom, Attribution, Layers, Scale
Browsers:
Desktop: Chrome, Firefox, Safari 5+, Opera 11.11+, IE 7+
Mobile: Safari (iOS 3+), Android 2.2+, Chrome, Firefox (Android), IE 10 (Win8), WebOS, Blackberry 7+
![Page 12: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/12.jpg)
add-ins
Over 60 available now and list continues to grow
Point clustering and star cluster, spiderfier
Custom Labels, hovers
Drawing Tools (ad hoc draw or turn into edit functions)
Heat Mapping
Animation, tracking
Connections for other sources (AGS, OSM, GPX, WFS, CSV, CartoDB…)
Custom projections via Proj4
Controls (pan, zoom all, slider, full screen, search, geocode, measure…)
http://leafletjs.com/plugins.html
Works well with other JS libraries (dojo, jQuery, Node.js…)
![Page 13: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/13.jpg)
General Steps…
Inspiration
Determine resources
Cache – use others, use existing build new
ArcGIS, WMS, TileMill, OSM…
Operational layers
Services, WMS, GeoJSON, jQuery…
Functions
Plug-ins
Google/borrow
Spin your own
Build – Webstorm, VS 2012, Aptana, Sublime Text, Notepad++
Test
Enjoy
![Page 14: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/14.jpg)
demonstration
![Page 15: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/15.jpg)
demonstration
Heat Map http://www.patrick-wied.at/static/heatmapjs/example-heatmap-leaflet.html
Leaflet Examples http://leafletjs.com/examples.html
Label Plug in http://leaflet.github.io/Leaflet.label/
![Page 16: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/16.jpg)
resources
JavaScript - http://www.w3schools.com/js/
Leaflet – http://www.leafletjs.com
Tile building - http://wiki.openstreetmap.org/wiki/Slippy_Map
![Page 17: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/17.jpg)
Leaflet – web mapping made fun again
![Page 18: minimalist + web map=leaflet - igic.org · minimalist + web map=leaflet joel bump – igic board member – state agencies](https://reader031.fdocuments.net/reader031/viewer/2022020319/5d59991d88c993d3668bd25f/html5/thumbnails/18.jpg)