Where 2.0: Fast Map Interaction Without Flash

nteraction

ifSfnlaEM

Tom MacWright @tmcw from MapBox @mapbox

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Flash is a dead end

Hopefully this goes without saying

Maps are especially mobile

We don't tolerate closed-source
components

Wednesday, April 20, 201 1

Internet Explorer still owns 45% of the
market

Polymaps is working on IE9

Even bleeding-edge browsers are still in
early stages of optimization

Passable for points, but rendering
OpenStreetMap in-browser?

Wednesday, April 20, 201 1

GeoJSON is nifty but bandwidth-inefficient

Browser APIs are weak (VML?)

Calculating polygon collisions is code-heavy
and slow

Simplifying polygons to speed up browsers
doesn't cut it

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Feature Info Example

Semonstrates sending a GetFeaturelnfo query lo an OWS. Returns information about a map feature In the side D1V.
'ermalink

The (}age at openlayers.org! says:

Unhand led request return Unexpected Error

C o< )

CtA Fact book

Click a country to see stati
Loading... piease wa

Wednesday, April 20, 201 1

Not cacheable: requires a running web

server

Hover interaction near-impossible
Just as friendly and great as WMS itself

Wednesday, April 20, 201 1

Zooming out makes points disappear?
Clustering for performance reasons?
Restricting panning?

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Maps News Sliopping Gmail more--

aps food

Search Maps

«

' t^ Snan'

:a Clara, CA

[S S W - more info s
i99 fsabella Street, Santa Clara, CA
|0S) 247-0745
itegory: Fo&d

■^^ 544 reviews
^mazing naan chicken til<l<a"

a - more info w
'90 Ei Camlno Reai, Santa Clara, CA
|[>fl)26[>-0210
itegoryi Food
['*'+ 99 reviews

jwent to this restaurant on June 2,
pm and this was ..."

' more info a
|45 Ei Camlno Reai, Santa Clara, CA
|08) 243-6053
itegory: Food

r-*-** iS reviews
[his location is proud of their

service and loyal ..."

'ant R 1^ - rrwre info j?
J55 El Camlno Real, Santa Clara, CA
|D&) 247-9998
itegory: Food

152 reviews
ts called Mehran now and the their
ire gone. ..."

lUrant t^ - more info »

JB El Camlno ReaL Santa Clara, CA

IDS) 964-0414

M&an Migu&l

, .-• - vE-Duane

Stewart Or

•PfM^Vrf'.''

7"

Central Expy ^ l,"''*n _ ^ "^^^^ei^tS

T

<i|'i

t^ Calvert '>■

"^ -q/ ■■■:\ I ' I v^ll^

o

*^'i E"

-JunJpE

^'

f;^^ '^ -Jurdo 5^ '111 Bultank BflenaVLsta

ijj-

•■^^

.o

Biiena Vfeta q O

Wednesday, April 20, 201 1

«

? , "«W.*4liit'

Tr

99

Ira, CA

< f ? >

lara, CA

ViewSs

C* Q I garh

GolfCoTidP

I. ". k^ _

S3n

•H

Q^ San Mi^l

cPo

=^

K^

o

^.n*^ ^'^^ ®

9

o

o

T"r^l«m_^ '%

South rt

J-an-a m-a

Scripts ^r Timeline g^ Profiles lyJ Ajdits |- J Console

JCl

http : / / mtO.goQ g I e .co m / maps lt?l yrs = I m q :
1001:fQDdsicc:US|h:h|s:
115968771 5 1035 1694523,m
%4C>15I093479&:< =E61&y=l590&z= lZ&w=2
56&h=256&gl=us&lit=en&slyle = lS,2S

i^ Villa Mon^.

^« ^"

pcJ*

3 Q

O

SditSj^

-t^^Seven Tree-s,

Oo«d

wwv^int

1?

VV VoP.e'^

^^¥.^^^^^^^^^^:^w.

.^&»!

6LQB£

Cresr if.
South

^AA^ ^AAAAAAAAAAA^

Wednesday, April 20, 201 1

t8 && _xdc_._ogmnqoU8([{id:"tuwtvtuwtwtuu",base:[346286080, 833464320], zrange:[l2j2],layer:"lmq:1002:food|cc:US|h:b|s:lli9D8//lbl03^
64%a:[0,0J,bb:[-4,-4,4,4],c:"{1:{title:\"Maggiano&Jf39;s Little Italy\%star_rating:3. 1383321, snippet:\"\\\'Thicken was dry, pasta to mushy (not a
sauce ...\\\"\\snippet_attribution:\'^google.com\\review_count:1335}}^^},{id:"1575l33338008420%a: [-186368, 151552], bb: [-4,-4
tar_fating:4. 0028906, snippet:\"\\\"Food really is excellent* Liked the honey wine and the combo platter. **A\\"\"^snippet_attribution:\"google.co
:"ie2613S0680824954751\a: [-4096, -51200], bb: [-4,-4,4,4], cf^{1:{title:\'^New Krung Thai Restaurant\\star_rating:3. 5148005, snippet:\'A\\'^Delicious N
ippet_attribution:\'^google.com\v review_count:794}}"},{fd:^^5619771407724064208\a: [-137216, 8192], bb: [-4,-4,4,4], c:"{1i{title:\'le Papillon\^sta^_
W'Tantastic food, every bite was amazing. Impeccable service and a great ambiance. \\\"\",snippet_attribution:\''google,com\",review_count:398}}"},
[-149504,12288],bb:[-4,-4,4,4],c:"{1:{title:\'lion Food Center\\star_rating:3. 1049383, snippet:\"\\\"Love it This place is located very close to t
t ..A\\'^%snippet_attribution:\'^insiderpages,com\\review_count:83}}"},{id:'^9980106452373l63859\a: [-245760, -16384], bb: [-4,-4,4,4], c:"{1:{tit
. 5813701, snippet:\"\\\'Tonsistent in their inconsistency. Half the dishes are average to decent, ...\\\"\",snippet_attribution:\"google.com\",revi
I3220790l83697\a: [-169984, 43008], bb: [-4,-4,4, 4], c:"{1:{title:\^^Hitsuwa Harketplace\%star_rating:4.14634l3,snippeti\"\\\'large selection of Japan
pened up a little ...\\\"\",snippet_attribution:\''google.com\\review_count:172}}l,{id:'^86039l64535S6024821\a: [4096, 10240], bb: [-4,-4,4,4], c:"{1:
ant\",star_rating:3. 9508183, snippet:\"\\\"The prices are a little high, and yes the spices Just a bit toned down ,,.\\\"\",snippet_attribution:\''g
4}}"}, {idf ^10615799977816741129", a: [-4096, 38912], bb: [-4,-4, 4, 4], c:"{1-{title:\'^Krung Thai Restaurant\",star_rating:3. 5291004, snippet:\'A\\'^My hubb
\\\'A%snippet_attribution:\'^google,com\%review_count:586}}l,{id:"5508465026937244037\a: [-118784,-12288], bb: [-4,-4,4,4], c:'^{1:{title:\"^Super Bu
snippet:\"\\\"Just been to this Chinese buffet. Only about 10 people were eating on a ...\\\''\",snippet_attribution:\"google,com\",review_count:10
297%a:[-178l76,l24928],bb;[-4,-4,4,4],c:"{1:{title:\'7as Restaurant\\star_rating:3. 9757693, snippet:\"\\\"E)(cellent service. Vummy food. Great ar
Yas Special. \\\^'\\snippet_attribution:\"google.com\\review_count:;136}}l, {id: n2827269l632l9466549\a; [-8192, -10240], bb: [-4,-4,4,4], c:"{1:{title
rant\",star_rating:3, 5040817, snippet:\''\\\"Khanh&#39;s is an upscale Vietnamese restaurant located just across the ...\\\''\",snippet_attribution:\
nt:254}}'^},{id:n6l6l4404243338l3745\a;[6l44,6l44],bb;[-4,-4,4,4],c:"{1:{title:\"Sino Restaurant\\star_rating:3. 0518708, snippet:\"\\\^kip the f
is\\\"\",snippet_attribution:\"google.com\\feview_count:l2l6}}'^},{id:"2256759042483078l56\a:[8l92,-8l92],bb:[-4,-4,4,4],c:"{1:{title:\"Straits R
11927, snippet:\"\\\"Fun Place and Amazing FoodA\\'A\snippet_attribution:\'^google.com\\review_count:l267}}l,{id: '^9820839878706677351", a: [-14336
:{title:\"Sela(n\",star_rating:3. 0434783, snippet:\"\\\"The restaurant needs more light and service was also somewhat slow . ..\\\"\",snippet_attribu
ount:26}}'^}, {id: '^6497882342628758811", a: [0,45056], bb: [-4,-4,4, 4], c:"{1:{title:\"Isabella&#39;s Restaurant\'^sta^_^ating:3. 9941177, snippet:\"\\\"Fo
could&tt39;ve been better the weiter was rude and . . .^^^"^",snippet_att^ibution;^"google.com\'^review_count:173}}'^},{id:'1215656807704432434'^a:[-
],c:"{1;{title:\"Golden Crown Restaurant\",star_rating:3.414,snippet:\"\\\"Hate this place. The man who owns is a very rude person, service really
on :\'^google.com\\review_count:29}}'^},{id:'74043980l8632728l25'^a: [-169984, 112640], bb: [-4,-4,4,4], c:"{1:{title:\"Hayflower Chinese Restaurant\'^st
\"\\\"Great Taiwanese breakfast — yuo tiao, do Jiang, dan bing. ...\\\"\",snippet_attribution:\"google.co[n\",review_count:103}}"},{id:"1180960126
],bb:[-4,-4,4,4],c:"{1:{title:\"El Amigo Burrito\\star_rating:4. 0550957, snippet:\"\\\'^Good food, reasonable prices. \\\"\'^snippet_att^ibution:\"g
}}"},{id:"54l9452695486S27^00'^a: [2048, 2048], bb: [-4,-4,4,4], c:"{1:{title:\"Roux Kitchen\\star_rating:3. 0045044, snippet:\"\\\"|40 meal posing as a
-as amateurish. ... \\\'^\'^snippet_attribution:\'^opentable. com\ '^review_count:671}}"}, {id:"10527137824499l23465", a; [-79872, -67584], bb: [-4,-4,4,4], c:
hinese Restaurant\",star_rating:3. 5824742, snippet:\"\\\"Best Chinese Food in the South Bay! Ten minute pick up for practically ...\\\"\",snippet_a
view_count:98}}'^}, {id: '^17503874109l38871184\a: [-196608, -16384], bb: [-4,-4,4,4], c:"{l:{title:\"Lock Chun Restaurant\\star_rating:4.0140843, snippet
prices are reasonable. The people are friendly. . . A\\"\",snippet_attribution:\"yahoo.com\",review_count:73}}"},{id:"l6793995729142666700",a:[-204
"{1:{title:\"A^by&ff39;s\^star_^ating;3,snippet:\"\\\"\^\"\^snippet_att^ibution:\"google.com\^^eview_count;35}}"},{id:'^2274036256lg926578l'^a:[-

Wednesday, April 20, 201 1

Awesome idea!

Undocumented

Only supports points

A single type of data

Wednesday, April 20, 201 1

http://bit.ly/utfg rid

UTFGrid

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Rasterized Tiles

Pixel-Driven Interaction

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

JSON, in the nick of time!

Wednesday, April 20, 201 1

where am I, in this tile?

Wednesday, April 20, 201 1

grid [60] [80]

jjjjjjjjjjjjjjjj:

jjjjjjj:

jjjjjjji

JJJJJJJ.

jjjjjjj_l

jjjjjjj_

JJJJJJJ.

jjjjjjj_l

JJJJJJJ.

jjjjjjj_

jjjjjjj_

jjjjjjj_

jjjjjjj_
jjjjjjj_

JJJJJJJJJJJJJJJJ. v=r
J J J J J J J J J J J J J. I J I
jjjjjjjjjjjjj.
JJJJJJJJJJJJJJJJ J.
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_

ivJJJJJ-

jj_
jjjjj_
jjjjj.

Wednesday, April 20, 201 1

grid [60] [80]

46 /h 99

j;

jjjjjjjjjjjjjjjj:

jjjjjjj:

jjjjjjji

JJJJJJJ.

jjjjjjj_l

jjjjjjj_

JJJJJJJ.

jjjjjjj_l

JJJJJJJ.

jjjjjjj_

jjjjjjj_

jjjjjjj_

jjjjjjj_
jjjjjjj_

JJJJJJJJJJJJJJJJ. v=r
J J J J J J J J J J J J J. I J I
jjjjjjjjjjjjj.
JJJJJJJJJJJJJJJJ J.
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_
JJJJJJJJJJJJJ jjjjjjjjjjjjjjjjjj_

ivJJJJJ-

jj_
jjjjj_
jjjjj.

Wednesday, April 20, 201 1

letters are numbers after all

Wednesday, April 20, 201 1

data[50]
{ type: 'ship'

, name:

, loa: 40 }

jj.
jj.

JJ.
JJ.
jj_
jj_
JJ.
JJ.
jj_
JJ.
JJ.
jj_
JJ.
JJ.
I J.

jjjjjjj_i

jjjjjjj:
jjjjjjj.

jjjjjjj:
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.
JJJJJJJ.

jjjjjjj:
JJJJJJJ.

jjjj
jjjj
JJJJ
JJJJ
JJJJ
JJJJ
JJJJ
JJJJ
JJJJ

JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ

JJJJ

JJJJ

JJ

JJ

JJJJ

JJJJ

JJJJ

JJJJ

JJJJ

ivJJJJJ-

JJ.
jjjjj.
jjj-s-^rs-s^^-^-^jjjjj.
jjjjjjjjjjjjjjjj.
jjjjjjjjjjjjjjjj.
JJJJJJJJJJJJJJJJ.
JJJJJJJJJJJJJJJJ.

Wednesday, April 20, 201 1

application-specific formatting

format((lata[50])

jjjjjjjjjj.
jjjjjjjjjj.

JJJJJJJJJJ.

UJJJJ JJ.

jjjj
jjjj
JJJJ
JJJJ
JJJJ
JJJJ
JJJJ
JJJJ
JJJJ

jjjjjjj
jjjjjjj
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ
JJJJJJJ

JJJJ

JJJJ

jj

jj

JJJJ

JJJJ

JJJJ

JJJJ

JJJJ

JJJJJJJ.
JJJJJJJ.

ivJJJJj;

JJ.
JJJJJ.

JJJ-s-^rS-s^^-^-^JJJJJ.

JJJJJJJJJJJJJJJJ.
JJJJJJJJJJJJJJJJ.
JJJJJJJJJJJJJJJJ.
JJJJJJJJJJJJJJJJ.

Wednesday, April 20, 201 1

Hooray!

Wednesday, April 20, 201 1

One UTF-8 character per feature

256px / 256px tiles

2x2 pixel grid (users aren't pixel-precise)

gzip

Wednesday, April 20, 201 1

Lower bound

10246

Upper bound

10246

Wednesday, April 20, 201 1

non-scientific survey of observed file size

(aka, thanks, gz/p)

2.25

#req

0.75

I

10 M 12 13 14 IS 16 17 18

in kb

Wednesday, April 20, 201 1

Federal Education Budget Project

K-12

Home KthroLjgfi12

Maryland

Compajative analysis of fundirLg, student

demogiaphits and achievement data.
Maryland is comprised of 24 school districts that
seive 2,537,100 students.

Find your state or school

Wednesday, April 20, 201 1

Grid size is limited by the number of pixel
blocks, so zooming out to the US actually
can work

The grid also works for points, and

lines too

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Once you have the grid, the mouse
coordinate, and the tile coordinate, there
are no loops required to find the grid
feature, if any.

Grid computations are typically outweighed
by the time taken to display tooltips

Once a grid is generated, it doesn't need to
change. It could be a file sitting on S3.

Wednesday, April 20, 201 1

. about that 'application specific formatting'

Designed to be usable outside of a browser

And much more than just tooltips

You get 'just data* from the server, not
HTML

Wednesday, April 20, 201 1

// Bring your own JavaScript
function (options, data) {

• • •

return formatted_output;

Wednesday, April 20, 201 1

function (options, data) {

if (options. format == 'teaser') {

return '<hl>' + data. NAME + '</hl>';
} else if (options. format == 'full') {

return '<hl>' + data. NAME + '</hl>' + data. AREA;

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Mapnik is everyone's favorite world-beating
open source map renderer

Initially we rendered the map, and then
queried a 64^ grid. It was slow.

Dane Springmeyer has been writing a grid
renderer deep in AGG which is way faster.

Wednesday, April 20, 201 1

httD://eithub.com/maDbox/wax

• Modest Maps

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Grids reduce the role of mapping APIs:
their parsing tasl< is reduced to <200 lines

Do one thing, and do it well: provide a tiling
interface

Thus, for our usage.

Modest Maps > OpenLayers.

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

L.1..^ ^^

K Z«ajn \tvi^\ 5

TIUP>A£

1

NvdbqnBdv

ShirnKtauiaRflBtrtfTi
/
/'
bbiHuW

-IE—

Export

K\

/

B*

thtvu^Svf

Bg Bea^trhiaiJbt Ai(wfi?p|i^i4|

Laim£

- r

nidviHe

■ CMLnkn
HaULiika

1

RAAIItU^l

Mn^vKd

V"

MllBUM

Hirfcjnm

^^H.^, . .

I >Mitf«t«n,

Pun-Uanbr

Ot

[h!t»nu

hi»

■/ ^ , _i_ IJBft ClMHSlli

■J rtttrtjl^n^r _ --^

l-_. Pk^i? Broit(*ifltFirib*iH. taplnnn ^*T"^"^™"^ 1i.™'(«i Wtornpcivr EarHartiof

Flfr»jafci H

kr J Hii ^ I i h Li Hif 1

WfTkSK

J

msifiig.FaM3 ubcB. ivt^ichi^iaf

-Toi^iJo

Bkitfiu^Dnt

rrfHIEKTBkl

Ncrt

^^^^

n<Li^itldit

PiiniriK

DUVD

1.

I!

r^$nih

PMajfMMtl '

-AjCJifc- ^K!"*^

^t^3 ftjif'^rT*TO™tiMiiSiT_f*"'* f^'.

Layers

* S«xjnrtr¥jalB:i|

y ttroad

/ thai

y 3cfiijn1ry_bftrif6f

/" ■Ui:(y.irliy_tKjiddt_in.irhwf

Colors Fonts

Btyle.msB

roade.mas

label'B.in&B

a m

2
3

5

7
8
9
IQ
LL
12
IJ
14
15
IG
17
LB
19
£ •-■
21

21
24
25
2&
?7

ik**t«iA**Jtit***Jkc*A**«lbjlA**«*it*fe1t*A*'ft1ckA****«***tl(«ikaiir

: ad T 1 1 p '

■••^■1 by the inipossible-to-fold maps in your

gidCiJ: +rFF6ECi:
(?WDtcr: t COED "3;
3 w a t er L i ne : * 8 CE ;

Map ^

\

frccurtricc : : DutliiiE |

line-color : gwaterline;

line-width :!,(>,
}
^.-niintri C5 ^ ; f ill (

polygon-fill: Qland;

pelygfirt-gaaufia : . 75;

\

^.::c:uintrie3! t f iIl[QBJECTrD=240| {

rolvqcci-f ill : (lland*l .1 r

Wednesday, April 20, 201 1

*J

l^,^^^^^

1

II Projects

Experts

UEi

CCW"LETE

-J rMd trlEi^pnfl 1 irwzaec

^ Exports

iittPA. 1^^^^^

Q

[}«9wiibe)d

IV¥*> ^^^^^^

p*»cewii«i

road trlp.mbtll£& 1 nunlSiec

^gi Local data

26H •

.

PHDC^SSIH^

"^

control_room_&n3i224.mbtlEa« i^si&c

Vlk

1

+ Add itBrary

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

Grid implementation in Mapnik core - with
bindings to nodejs and Python (LGPL &
BSD licensed)

Grid reader implementations in Wax,
supporting Google Maps, OpenLayers, and
Modest Maps (BSD licensed)

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1

http://mbtiles.org/ (read the full spec)
httD://tilemill.conn/

httD://github.com/maDbox/

Wednesday, April 20, 201 1

Can't highlight features yet

More APIs! (except Bing, because ofTOS)

Formatter spec needs security spec -
currently relies on trust

Contributions welcome!

Wednesday, April 20, 201 1

Wednesday, April 20, 201 1