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...
minimalist + web
map=leaflet joel bump – igic board member – state agencies
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..
we were amazed by what we could do
until we had to customize
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…
Some code
became more
complex.
The amount
of code
produced
contributed
to…
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
leaflet
28k
Fast loading
Small footprint
Great for lower bandwidth (mobile)
Only load what you need when you need it
www.leafletjs.com
leaflet
Power behind the size
HTML5
CSS3
JavaScript
http://ie.microsoft.com/testdrive - samples
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
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+
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…)
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
demonstration
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/
resources
JavaScript - http://www.w3schools.com/js/
Leaflet – http://www.leafletjs.com
Tile building - http://wiki.openstreetmap.org/wiki/Slippy_Map
Leaflet – web mapping made fun again