Slide 1
Slide 1 text
Past, Present, Future
May 2013
Vladimir Agafonkin
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
February 2005
June 2006
June 2009
May 2011
Google Maps API
OpenLayers
Google Maps API v3
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
The Story
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
April 2008
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
we need to build
a full-featured API
quickly „
Slide 12
Slide 12 text
lets build on top
of OpenLayers„
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
basic map API requirements
•tiles (xyz mercator)
•markers
•popups
•polylines and polygons
Slide 18
Slide 18 text
mourner: hey guys, I was thinking of
building a really simple, lightweight
OpenLayers alternative for our API...
#osmdev
angry_guy: nobody gives a crap
about your alternative, YOU IDIOT,
just build a wrapper around OL like
all others or FAIL miserably
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
Web Maps Lite
Slide 22
Slide 22 text
OK, lets see our new
awesome OL-based API...
„
OMG why is it SO FAST?!
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
one-man effort
closed source
other projects
two years later...
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
hey Vlad, I reverse-engineered
your API to fix this nasty bug,
here's the patch...„
Slide 27
Slide 27 text
open source
lets do it!
September 2010
Slide 28
Slide 28 text
Web Maps Lite
Slide 29
Slide 29 text
bit.ly/leaflet-2yrs
Slide 30
Slide 30 text
The Present
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
• 2.5 years of development
• 6531 lines of code
• 2304 commits from 129 people
• 4656 followers, 835 forks
• issues: 117 open, 1583 closed
• pull requests: 24 open, 584 closed
Slide 41
Slide 41 text
leafletjs.com/plugins.html
63 plugins
Slide 42
Slide 42 text
Leaflet.markercluster
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Leaflet.draw
Slide 45
Slide 45 text
simplicity
Slide 46
Slide 46 text
number of features
Images
Markers
Popups
Vectors
XYZ tiles
GeoJSON
WMS
Layer groups
Inertial pan
Scroll zoom
Dblclick zoom
Box zoom
Keyboard nav
Pinch zoom
Dbltap zoom
Marker drag
Pan anim
Zoom anim
Zoom
buttons
Attribution
Layer
switcher
Scale
Map rotation
Fractional
zoom
WebGL
renderer
TMS
WMTS
TileCache
MapGuide
MapServer
KaMap
KaMapCache
MultiMap
Google
Yahoo
WorldWind
Virtual Earth
Bing
Zoomify
UTFGrid
OSM
ArcGIS
ArcIMS
GML
GeoRSS
KML
WFS
WFST
ArcXML
Atom
CQL
SLD
GPX
OSM XML
OWS
Context
WKT
XLS
XML
Drawing
Editing
Graticule
Measure
Pan control
Minimap
Permalink
Clustering
Slide 47
Slide 47 text
number of features
Images
Markers
Popups
Vectors
XYZ tiles
GeoJSON
WMS
Layer groups
Inertial pan
Scroll zoom
Dblclick zoom
Box zoom
Keyboard nav
Pinch zoom
Dbltap zoom
Marker drag
Pan anim
Zoom anim
Zoom
buttons
Attribution
Layer
switcher
Scale
Map rotation
Fractional
zoom
WebGL
renderer
TMS
WMTS
TileCache
MapGuide
MapServer
KaMap
KaMapCache
MultiMap
Google
Yahoo
WorldWind
Virtual Earth
Bing
Zoomify
UTFGrid
OSM
ArcGIS
ArcIMS
GML
GeoRSS
KML
WFS
WFST
ArcXML
Atom
CQL
SLD
GPX
OSM XML
OWS
Context
WKT
XLS
XML
Drawing
Editing
Graticule
Measure
Pan control
Minimap
Permalink
Clustering
Slide 48
Slide 48 text
quality of features
Images
Markers
Popups
Vectors
XYZ tiles
GeoJSON
WMS
Layer groups
Inertial pan
Scroll zoom
Dblclick zoom
Box zoom
Keyboard nav
Pinch zoom
Dbltap zoom
Marker drag
Pan anim
Zoom anim
Zoom buttons
Attribution
Layer switcher
Scale
+ third-party
plugins
Slide 49
Slide 49 text
var map = L.map('map')
.setView([51.505, -0.09], 13);
L.tileLayer(
'http://{s}.tile.osm.org/{z}/{x}/{y}.png')
.addTo(map);
L.marker([51.5, -0.09])
.addTo(map)
.bindPopup('Hello World!')
.openPopup();
API: as simple as possible
Slide 50
Slide 50 text
convention over
configuration
Slide 51
Slide 51 text
code:
simple outside,
simple inside
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
function interPathHelper(path1, path2, justCount) {
path1 = R._path2curve(path1);
path2 = R._path2curve(path2);
var x1, y1, x2, y2, x1m, y1m, x2m, y2m, bez1, bez2,
res = justCount ? 0 : [];
for (var i = 0, ii = path1.length; i < ii; i++) {
var pi = path1[i];
if (pi[0] == "M") {
x1 = x1m = pi[1];
y1 = y1m = pi[2];
} else {
if (pi[0] == "C") {
bez1 = [x1, y1].concat(pi.slice(1));
x1 = bez1[6];
y1 = bez1[7];
} else {
bez1 = [x1, y1, x1, y1, x1m, y1m, x1m, y1m];
x1 = x1m;
y1 = y1m;
}
for (var j = 0, jj = path2.length; j < jj; j++) {
var pj = path2[j];
if (pj[0] == "M") {
x2 = x2m = pj[1];
y2 = y2m = pj[2];
} else {
if (pj[0] == "C") {
bez2 = [x2, y2].concat(pj.slice(1));
x2 = bez2[6];
y2 = bez2[7];
} else {
bez2 = [x2, y2, x2, y2, x2m, y2m, x2m, y2m];
x2 = x2m;
y2 = y2m;
}
var intr = interHelper(bez1, bez2, justCount);
if (justCount) {
res += intr;
} else {
for (var k = 0, kk = intr.length; k < kk; k++) {
intr[k].segment1 = i;
intr[k].segment2 = j;
Slide 54
Slide 54 text
this code is so smart, I won't contribute
— others would laugh at my lousy JS
and I'd certainly break something
„
Slide 55
Slide 55 text
Open Source
Slide 56
Slide 56 text
No content
Slide 57
Slide 57 text
it's not enough to be open
you need to be transparent
Slide 58
Slide 58 text
the poetry of code
expressing deep meaning
through simple words
Slide 59
Slide 59 text
fast
responsive
lightweight
Slide 60
Slide 60 text
No content
Slide 61
Slide 61 text
The Future
Slide 62
Slide 62 text
upcoming features:
removing features!
Slide 63
Slide 63 text
simplicity
Slide 64
Slide 64 text
Leaflet plans for future
•making things simpler
•refactoring for flexibility
•improving performance
•improving usability
•improving plugin infrastructure
•better website, more tutorials
Slide 65
Slide 65 text
•get excited
•build cool stuff
•believe in yourself
•pursue your dreams
•push open source
•listen to my band
rain.in.ua/en.html
Recap
Slide 67
Slide 67 text
No content