minimalist + web map=leaflet -...

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