SlideShare a Scribd company logo
1 of 67
Download to read offline
The Earth is Flat Still
                              Cartography on the Web
                             Adam Nemeth - @aadaam




Monday, June 11, 2012
Today

                    • Introduction to Web Cartography
                    • Do-Your-Own Map Engine - Why you
                        should, why you shouldn’t, why I did and
                        how to do it
                    • What can we learn by building our own
                        map engine?



Monday, June 11, 2012
Why I am here today?

                    • In 2010-2011 I did a project
                    • I learned some things there
                    • That may be useful to you as well


Monday, June 11, 2012
What I won’t talk about

                    • My newest startup, or anything close
                    • jQuery, CoffeeScript or any technology
                    • bugs


Monday, June 11, 2012
Part I: Cartography
Monday, June 11, 2012
Why do we need maps?
                    • To find our place
                    • Wasn’t an issue in the Middle Ages
                    • Medieval people didn’t believe the Earth
                        was flat - they just didn’t care!
                    • Then we learned how to build ships which
                        don’t sink


Monday, June 11, 2012
Problem: the Earth is not Flat
Monday, June 11, 2012
First Solution: Globe
Monday, June 11, 2012
Practical problems

                    • A globe effective in use to navigate
                        between Győr and Budapest on Motorway
                        -⌀9m

                    • A globe usable to navigate in Budapest - ⌀
                        299.57 m
                    • Length of Titanic: 269 m

Monday, June 11, 2012
How to flatten the Earth?
Monday, June 11, 2012
Mercator Projection
                         (mug projection)
Monday, June 11, 2012
Mercator Projection
                         (mug projection)
Monday, June 11, 2012
Problem: distortion
                    • The poles move “slower” than the equator
                    • Therefore: they look wider
                    • The map would be 3.14 longer than its
                        height
                    • Solution: compensate the distortion by
                        using a logarithmic “lens”, making the wide
                        parts tall as well


Monday, June 11, 2012
The Mercator Map
Monday, June 11, 2012
Distortion Part II.
               Because top parts are both
               wider and taller:

               •        Gronland seems as large
                        as Africa (14 times
                        smaller)

               •        Finland is as wide as India

               •        Result: twice the
                        resolution of Helsinki than
                        that of Kuala Lumpur


Monday, June 11, 2012
What are the benefits?
                    •   It is universally applicable

                    •   Directions remain the
                        same (what’s North, is
                        displayed North)

                    •   On small distances, the
                        distortion is balanced

                    •   It’s square-shaped,
                        square is nice



Monday, June 11, 2012
Every single webmap is
                    mercator-based on
                     every zoomlevel

                        Don’t rely on them when planning your trip from
                                    Helsinki to Kuala Lumpur



Monday, June 11, 2012
Part II: Computer Maps
Monday, June 11, 2012
Size problems

                    • Apple Macintosh, 1984
                    • 128 K RAM, black-and-white screen
                    • Black-and-white map of Budapest: 10.24
                        megabytes
                    • Likely won’t fit into memory...

Monday, June 11, 2012
Divide and Conquer
                        We are computer people, we think in binary...




Monday, June 11, 2012
Monday, June 11, 2012
Monday, June 11, 2012
(0,0)   (0,1)




                        (1,0)   (1,1)




Monday, June 11, 2012
(0,0)   (0,1)




                        (1,0)   (1,1)




Monday, June 11, 2012
(00,00)   (00,01)   (00,I0)   (00,I1)

                              (0,0)              (0,1)

                        (0I,00)   (0I,01)   (01,10) (01,11)


                        (10,00)   (10,01)   (10,10) (10, 11)

                             (1,0)               (1,1)

                        (11,00)   (11,01)   (11,10) (11, 11)


Monday, June 11, 2012
(0,0)   (0,1)   (0,2)   (0,3)



                        (1,0)   (1,1)   (1,2)   (1,3)


                        (2,0)   (2,2)   (2,3)   (2,4)



                        (3,0)   (3,1)   (3,2)   (3,3)


Monday, June 11, 2012
The Tile Pyramid
Monday, June 11, 2012
How many tiles will we
                        have?



Monday, June 11, 2012
How many tiles will we
                        have?
                    • If we don’t zoom at all: 1 x 1
                    • If we zoom once: 2 x 2
                    • If we zoom twice: 4 x 4
                    • If we zoom 15 times?
                    • If we zoom n times?

Monday, June 11, 2012
How many tiles will we
                        have?
                    • If we don’t zoom at all: 1 x 1
                    • If we zoom once: 2 x 2
                    • If we zoom twice: 4 x 4
                    • If we zoom 15 times: 2 x 215       15


                    • If we zoom n times: 2 x 2
                                            n        n




Monday, June 11, 2012
WMTS Coordinate of a tile
                        http://host.name/path/n/row/column




Monday, June 11, 2012
A tile is usually
                        256x256 pixels
                           Convention, practical




Monday, June 11, 2012
Trivia
                    •   How large is the area
                        covered by a single pixel
                        on zoomlevel 15 in
                        Budapest?

                    •   How large is the area of
                        a single pixel in Rome?

                    •   How large is the area of
                        a single pixel in Helsinki?




Monday, June 11, 2012
Trivia
                    •   What is the area            •   Budapest is on 47.5°
                        covered by a single pixel       (approx)
                        on zoomlevel 15 in
                        Budapest?                   •   Earth’s circumference is
                                                        40 075 017 meters
                    •   What is the area of a
                        single pixel in Rome?       •   Every longitudinal line is
                                                        of equal length with
                    •   What is the area of a           mercator projection
                        single pixel in Helsinki?
                                                    •   Their real length is
                                                        cos(degree)*equator



Monday, June 11, 2012
Trivia
                    •   What is the area            •   On zoomlevel 15 a
                        covered by a single pixel       longitudinal line is
                        on zoomlevel 15 in              8388608 pixels long
                        Budapest?                       (215*256 = 223)

                    •   What is the area of a       •   40 075 017 * cos(47.5°)/
                        single pixel in Rome?           8 388 608 ≈ 3.23
                                                        meters / pixel horizontal
                    •   What is the area of a
                        single pixel in Helsinki?   •   Vertical made the same
                                                        by the logarithm




Monday, June 11, 2012
Trivia
                    •   What is the area            •   Budapest: 3.23 m - 10
                        covered by a single pixel       m2/pixel
                        on zoomlevel 15 in
                        Budapest?                   •   Rome: 3.56 m - 12.64 m2/
                                                        pixel
                    •   What is the area of a
                        single pixel in Rome?       •   Helsinki: 2.38 m - 5.64
                                                        m2/pixel
                    •   What is the area of a
                        single pixel in Helsinki?   •   Kuala Lumpur: 4.77 m -
                                                        22 m2/pixel




Monday, June 11, 2012
Trivia
                    •   What is the area            •   Budapest: 10 cm - 100
                        covered by a single pixel       cm2/pixel
                        on max (20) Google /
                        Nokia zoomlevel?            •   Rome: 11.11 cm - 123
                                                        cm2/pixel

                                                    •   Helsinki: 7.4 cm - 55 cm2/
                                                        pixel

                                                    •   Kuala Lumpur: 14 cm -
                                                        222 cm2/pixel




Monday, June 11, 2012
http://jsfiddle.net/aadaam/Lm9Ex/ 0-10 /

           Part III: Build your own map
Monday, June 11, 2012
Basic considerations
                    • Display a map at any given coordinate and
                        zoomlevel
                    • Be able to pan around and zoom in&out
                    • Make it generic so knowledge could be
                        used with other technologies as well
                    • Don’t deal with bugs

Monday, June 11, 2012
Basic considerations
                    • Display a map at any given coordinate and
                        zoomlevel
                    • Be able to pan around and zoom in&out
                    • Make it generic so knowledge could be
                        used with other technologies as well -
                        canvas
                    • Don’t deal with bugs - single browser...
Monday, June 11, 2012
Step 1: display a single
                                  tile



                 http://jsfiddle.net/aadaam/Lm9Ex/ 0   /



Monday, June 11, 2012
Step 2: Calculate your
                               position

                    • Normalized spherical Mercator function:
                        converts (latitude, longitude) to (x,y)
                        between ((0..1),(0..1))
                    • Doesn’t cover the poles well
                    • It’s a real number - we prefer integers

Monday, June 11, 2012
Step 2: Calculate your
                               position
                    • We will convert to Mercator once and
                        don’t deal with it afterwards

                    • JS uses double: precision up until   2 53

                        PHP int   precision: 2 31


                    •   Theoretical resolution on 231 for Budapest:
                        1.38 cm / pixel - good enough
                    •   We will use 228 now, as our last zoomlevel
                        is 20, tile is 256 wide
Monday, June 11, 2012
Step 3: Calculate your
                            position’s tile
                    • Where are we standing right now on
                        zoomlevel 15?
                    • This office is at 47.49658, 19.057811   1
                        according to Google
                    • That at (55.293836388888884%,
                        44.605757935735435%) of the map
                    • Which is at (148428262, 119737670) of our
                        28-bit representation
Monday, June 11, 2012
Step 3: Calculate your
                            position’s tile

                    • Which is at (148428262, 119737670) of our
                        28-bit representation
                    • What does it take to go from a 28-element
                        representation to a 15-element
                        representation?



Monday, June 11, 2012
Step 3: Calculate your
                            position’s tile
                    • Which is at (148428262, 119737670) of our
                        28-bit representation
                    • What does it take to go from a 28-element
                        representation to a 15-element
                        representation?
                    •x    >> (28 - 15)               2
                        y >> (28 - 15)

Monday, June 11, 2012
Zooming in

                    • Store your current zoomlevel into a
                        variable
                    • Re-calculate tile coordinates based on this
                        variable after each movement (panning,
                        zooming)
                    • Allow this variable to be overwritten
                                                                 3

Monday, June 11, 2012
Panning

                    • Choose a reference point
                    • Usual practice is to choose the map center
                    • We’ll use topleft corner instead (easier to
                        calculate with)




Monday, June 11, 2012
The three coordinate
                              systems
               Reference                Tile coordinate   Screen
               coordinate system        system            coordinate-system

               •        28-bit          •   15-bit        •   Like tile
                                                              coordinate
               •        absolute        •   zoomlevel-        system
                                            dependent
               •        deals with                        •   15-bit + 8-bit
                        conversion
                        between globe                     •   zoomlevel-
                        and mercator                          dependent

                                                          •   has an offset

Monday, June 11, 2012
GeoCoordinate                            Coordinate
                         GeoCoordinate(lat,lng)                       precision
                         precision = MAX_ZOOMLEVEL                    x
                         -lat                                         y
                         -lng                                         /column
                         doTheMagic()                                 /row
                                                                      offset(Coordinate)




                                      TileCoordinate                       ScreenCoordinate
                         TileCoordinate(zoomlevel, column, row)   ScreenCoordinate(map, column, row)
                         TileCoordinate(zoomlevel, Coordinate)    ScreenCoordinate(map, Coordinate)
                                                                  map
                         getID()




                        The three coordinate
Monday, June 11, 2012
                              systems
ES 5 Magic
                    • Calculate coordinates from underlying
                        absolute coordinate dynamically through
                        getters and setters                     4

                    • Isn’t really needed as coordinates are
                        better if non-mutable and throw-away
                    • Another mathematical solution would be
                        to use Monads


Monday, June 11, 2012
GeoCoordinate                                  Coordinate
                           GeoCoordinate(lat,lng)                             precision
                           precision = MAX_ZOOMLEVEL                          x
                           -lat                                               y
                           -lng                                               /column
                           doTheMagic()                                       /row
                                                                              offset(Coordinate)




                                                                          reduced precision to
                               reduced precision to
                                                                             zoomlevel +8
                                    zoomlevel
                                                                                offset


                                        TileCoordinate                             ScreenCoordinate
                           TileCoordinate(zoomlevel, column, row)         ScreenCoordinate(map, column, row)
                           TileCoordinate(zoomlevel, Coordinate)          ScreenCoordinate(map, Coordinate)
                                                                          map
                           getID()



                                                   reduced precision to
                                                       zoomlevel+8


                                   ScreenOffsetCoordinate
                        ScreenOffsetCoordinate(map, offset_x, offset_y)
                        map




                 It’s worth introducing a
Monday, June 11, 2012
                     fourth one as well
How to display multiple
                        tiles
                    • We know the topleft coordinate - in any
                        coordinate system
                    • We know our width and height - in
                        ScreenOffset coordinate system
                    • We know what zoomlevel we are at

Monday, June 11, 2012
How to display multiple
                        tiles
                    1. Get the tile coordinate of the topleft pixel
                       (z, x1, y1)
                    2. Get the tile coordinate of the bottomright
                       pixel (z, x2, y2)
                    3. Request all the tiles on z between x1, x2
                       and y1, y2



Monday, June 11, 2012
How to display multiple
                        tiles
                    4. When the tile image arrives, send the tile
                       coordinate with it as well.
                    5. Get the screen coordinate of the topleft
                       corner of the tile by shifting it with tilesize
                       in bits (Why will this work?), minus topleft
                    6. Display the tile                              5
                    7. Make sure you don’t allow late callbacks
                       after zoom

Monday, June 11, 2012
Bringing simple
                               interaction
                    • On user testing, ~80% of people used
                        panning cursors instead of mouse gestures
                    • There’s a nice track on tileserver statistics
                        across the Atlantic
                    • Never scale down tiles for permanent
                        display!
                                   Cartographers are allergic to this!
                                   (sorry for the scaledowns explaining the pyramid...)

Monday, June 11, 2012
Bringing simple
                               interaction
                    • Let’s have some buttons (non-overlay)
                    • zoom in:
                        1. increase zoomlevel of map
                        2. re-render
                    •   pan north/south/top/down                  6

                        • add/substract 15 screenoffset coordinates
                          from the topleft corner respectively
                        • re-render
Monday, June 11, 2012
ES5 Magic #2
                    • Pattern: when panning or zoomlevel is
                        modified, we have to re-render
                                                              7
                    • re-render automatically
                    • Do this only if the map was already
                        rendered once
                    • Don’t forget to cancel current downloads
                        on zoomlevel change!


Monday, June 11, 2012
Pan on mouse drag                               8

                    •   Usually, there is kinetic movement after - we
                        don’t care about this
                    •   Only offset difference is needed - pageX will do
                    1. Remember offset at mousedown
                    2. Cancel drag mode on mouseout or mouseup
                    3. On mousemove, calculate offset difference,
                       pan, remember new offset


Monday, June 11, 2012
Zoom to location by
                              click                                 9

                    • You’ll have two ScreenCoordinate systems:
                        one at the old, one at the new zoomlevel.
                    • Aim: ScreenCoordinate(ev.offset) ==
                        ScreenCoordinate’(ev.offset)
                    • On zoom-in: topleft+=1/2 *
                      ScreenOffset(ev.offset)

                    • On zoom-out: topleft-= -1
                      ScreenOffset(ev.offset)
                                                       *



Monday, June 11, 2012
Add caching

                    • We shouldn’t create Image objects on
                        every render
                    • Also, we should cancel current downloads
                        if user has zoomed away
                    • We shouldn’t download while panning
                        either
                                                   10


Monday, June 11, 2012
Wrap-up
Monday, June 11, 2012
Remember
                    •   Store GeoCoords on high-precision grid systems
                        instead of floats (it’s nasty when they’re serialized into
                        strings back-and-forth...), but beware of the dateline!
                    •   Zooming equals shifting
                    •   You can calculate short distances on quasi-equal
                        longitudinal spots with cos(latitude), don’t do it for
                        large distances
                    •   All maps are flat! While WebGL is changing this,
                        satellite will stay as such for a while



Monday, June 11, 2012
URLs
                    • http://jo-hely.hu/~aadaam/minimap/ - original
                        implementation
                    • http://api.maps.nokia.com http://
                        m.maps.nokia.com
                    • Leaflet, in case you need an Open Source one
                    • Slides: http://www.slideshare.net/aadaam1
                    • GitHub: @aadaam
Monday, June 11, 2012
Thanks to
                    • Astrid Fasold, Nokia Maps Map Design
                    • Andrea Giammarchi, Nokia Maps HTML5
                        Mobile Maps
                    • Thomas Fischer, Jörg Hösel, Nokia Maps
                        (Web) API
                    • Aniko Szalay (mug projection shot)

Monday, June 11, 2012
Acknowledgements
                    •   Maps used in examples are from Nokia Maps - http://
                        maps.nokia.com
                    •   Mercator’s map and globe are from Atlas Obscura - support
                        them! http://atlasobscura.com/place/mercator-museum
                    •   Tile pyramid was made by Michael Potmesil at Bell Labs-
                        http://www.geckil.com/~harvest/www6/Technical/Paper130/
                        Paper130.html
                    •   The Tissot Indicatrix illustration about Mercator projection
                        is from Wikipedia
                    •   Project made tremendous use of JSFiddle



Monday, June 11, 2012
Any Questions?



Monday, June 11, 2012

More Related Content

Viewers also liked

Earths shape
Earths shapeEarths shape
Earths shapedwinter1
 
The World Is Flat Chapter 14 Summary
The World Is Flat  Chapter 14 SummaryThe World Is Flat  Chapter 14 Summary
The World Is Flat Chapter 14 Summary11hh
 
The world is flat thomas friedman
The world is flat thomas friedmanThe world is flat thomas friedman
The world is flat thomas friedmanAriff Samsudin
 
CA 3.01 Ancient Cosmology
CA 3.01 Ancient CosmologyCA 3.01 Ancient Cosmology
CA 3.01 Ancient CosmologyStephen Kwong
 
CA 3.02 Flat Earth to Sphere
CA 3.02 Flat Earth to SphereCA 3.02 Flat Earth to Sphere
CA 3.02 Flat Earth to SphereStephen Kwong
 
Defending the Flat Earth Theory
Defending the Flat Earth TheoryDefending the Flat Earth Theory
Defending the Flat Earth TheoryEmilie Bevers
 
World is flat presentation
World is flat presentationWorld is flat presentation
World is flat presentationoccam98
 
Under ground cables presention
Under ground cables presentionUnder ground cables presention
Under ground cables presentionRazu Khan
 

Viewers also liked (11)

Earths shape
Earths shapeEarths shape
Earths shape
 
The World Is Flat Chapter 14 Summary
The World Is Flat  Chapter 14 SummaryThe World Is Flat  Chapter 14 Summary
The World Is Flat Chapter 14 Summary
 
Nome, Alaska
Nome, AlaskaNome, Alaska
Nome, Alaska
 
The world is flat thomas friedman
The world is flat thomas friedmanThe world is flat thomas friedman
The world is flat thomas friedman
 
CA 3.01 Ancient Cosmology
CA 3.01 Ancient CosmologyCA 3.01 Ancient Cosmology
CA 3.01 Ancient Cosmology
 
CA 3.02 Flat Earth to Sphere
CA 3.02 Flat Earth to SphereCA 3.02 Flat Earth to Sphere
CA 3.02 Flat Earth to Sphere
 
The World is Flat
The World is FlatThe World is Flat
The World is Flat
 
Defending the Flat Earth Theory
Defending the Flat Earth TheoryDefending the Flat Earth Theory
Defending the Flat Earth Theory
 
World is flat presentation
World is flat presentationWorld is flat presentation
World is flat presentation
 
The World Is Flat
The World Is FlatThe World Is Flat
The World Is Flat
 
Under ground cables presention
Under ground cables presentionUnder ground cables presention
Under ground cables presention
 

More from Adam Nemeth

Servcice Design Principles of OneTicket
Servcice Design Principles of OneTicketServcice Design Principles of OneTicket
Servcice Design Principles of OneTicketAdam Nemeth
 
UX A MÁV-Startnál
UX A MÁV-StartnálUX A MÁV-Startnál
UX A MÁV-StartnálAdam Nemeth
 
Appmobil eloadas
Appmobil eloadasAppmobil eloadas
Appmobil eloadasAdam Nemeth
 
From undercover to official: introducing user research to your organisation
From undercover to official: introducing user research to your organisationFrom undercover to official: introducing user research to your organisation
From undercover to official: introducing user research to your organisationAdam Nemeth
 
Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...
Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...
Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...Adam Nemeth
 
Agilis UX - Frontend Meetup előadás
Agilis UX - Frontend Meetup előadásAgilis UX - Frontend Meetup előadás
Agilis UX - Frontend Meetup előadásAdam Nemeth
 
Indamail embed csatolmanyconcept
Indamail embed csatolmanyconceptIndamail embed csatolmanyconcept
Indamail embed csatolmanyconceptAdam Nemeth
 
Nearby Startup Pitch for SUU 2013 conference
Nearby Startup Pitch for SUU 2013 conferenceNearby Startup Pitch for SUU 2013 conference
Nearby Startup Pitch for SUU 2013 conferenceAdam Nemeth
 
Frontend First Design & Development
Frontend First Design & DevelopmentFrontend First Design & Development
Frontend First Design & DevelopmentAdam Nemeth
 
Kanban - út a rend felé
Kanban - út a rend feléKanban - út a rend felé
Kanban - út a rend feléAdam Nemeth
 
Nearby Story: Architectural Conference
Nearby Story: Architectural ConferenceNearby Story: Architectural Conference
Nearby Story: Architectural ConferenceAdam Nemeth
 
Webszolgáltatások elmélete és gyakorlata
Webszolgáltatások elmélete és gyakorlataWebszolgáltatások elmélete és gyakorlata
Webszolgáltatások elmélete és gyakorlataAdam Nemeth
 
Nearby Feeling: Urban Architecture
Nearby Feeling: Urban ArchitectureNearby Feeling: Urban Architecture
Nearby Feeling: Urban ArchitectureAdam Nemeth
 
Unified Instant messaging in Hungary?
Unified Instant messaging in Hungary?Unified Instant messaging in Hungary?
Unified Instant messaging in Hungary?Adam Nemeth
 
OptimalWorkshop az OnlineMarketingnél
OptimalWorkshop az OnlineMarketingnélOptimalWorkshop az OnlineMarketingnél
OptimalWorkshop az OnlineMarketingnélAdam Nemeth
 
What makes a good map?
What makes a good map?What makes a good map?
What makes a good map?Adam Nemeth
 
Creating web services
Creating web servicesCreating web services
Creating web servicesAdam Nemeth
 

More from Adam Nemeth (18)

Servcice Design Principles of OneTicket
Servcice Design Principles of OneTicketServcice Design Principles of OneTicket
Servcice Design Principles of OneTicket
 
UX A MÁV-Startnál
UX A MÁV-StartnálUX A MÁV-Startnál
UX A MÁV-Startnál
 
What is ux_dl
What is ux_dlWhat is ux_dl
What is ux_dl
 
Appmobil eloadas
Appmobil eloadasAppmobil eloadas
Appmobil eloadas
 
From undercover to official: introducing user research to your organisation
From undercover to official: introducing user research to your organisationFrom undercover to official: introducing user research to your organisation
From undercover to official: introducing user research to your organisation
 
Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...
Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...
Tömeges POI megjelenítés kereskedelmi térképeken - Displaying POIs en masse i...
 
Agilis UX - Frontend Meetup előadás
Agilis UX - Frontend Meetup előadásAgilis UX - Frontend Meetup előadás
Agilis UX - Frontend Meetup előadás
 
Indamail embed csatolmanyconcept
Indamail embed csatolmanyconceptIndamail embed csatolmanyconcept
Indamail embed csatolmanyconcept
 
Nearby Startup Pitch for SUU 2013 conference
Nearby Startup Pitch for SUU 2013 conferenceNearby Startup Pitch for SUU 2013 conference
Nearby Startup Pitch for SUU 2013 conference
 
Frontend First Design & Development
Frontend First Design & DevelopmentFrontend First Design & Development
Frontend First Design & Development
 
Kanban - út a rend felé
Kanban - út a rend feléKanban - út a rend felé
Kanban - út a rend felé
 
Nearby Story: Architectural Conference
Nearby Story: Architectural ConferenceNearby Story: Architectural Conference
Nearby Story: Architectural Conference
 
Webszolgáltatások elmélete és gyakorlata
Webszolgáltatások elmélete és gyakorlataWebszolgáltatások elmélete és gyakorlata
Webszolgáltatások elmélete és gyakorlata
 
Nearby Feeling: Urban Architecture
Nearby Feeling: Urban ArchitectureNearby Feeling: Urban Architecture
Nearby Feeling: Urban Architecture
 
Unified Instant messaging in Hungary?
Unified Instant messaging in Hungary?Unified Instant messaging in Hungary?
Unified Instant messaging in Hungary?
 
OptimalWorkshop az OnlineMarketingnél
OptimalWorkshop az OnlineMarketingnélOptimalWorkshop az OnlineMarketingnél
OptimalWorkshop az OnlineMarketingnél
 
What makes a good map?
What makes a good map?What makes a good map?
What makes a good map?
 
Creating web services
Creating web servicesCreating web services
Creating web services
 

Recently uploaded

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 

Recently uploaded (20)

UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 

The Earth is Flat

  • 1. The Earth is Flat Still Cartography on the Web Adam Nemeth - @aadaam Monday, June 11, 2012
  • 2. Today • Introduction to Web Cartography • Do-Your-Own Map Engine - Why you should, why you shouldn’t, why I did and how to do it • What can we learn by building our own map engine? Monday, June 11, 2012
  • 3. Why I am here today? • In 2010-2011 I did a project • I learned some things there • That may be useful to you as well Monday, June 11, 2012
  • 4. What I won’t talk about • My newest startup, or anything close • jQuery, CoffeeScript or any technology • bugs Monday, June 11, 2012
  • 6. Why do we need maps? • To find our place • Wasn’t an issue in the Middle Ages • Medieval people didn’t believe the Earth was flat - they just didn’t care! • Then we learned how to build ships which don’t sink Monday, June 11, 2012
  • 7. Problem: the Earth is not Flat Monday, June 11, 2012
  • 9. Practical problems • A globe effective in use to navigate between Győr and Budapest on Motorway -⌀9m • A globe usable to navigate in Budapest - ⌀ 299.57 m • Length of Titanic: 269 m Monday, June 11, 2012
  • 10. How to flatten the Earth? Monday, June 11, 2012
  • 11. Mercator Projection (mug projection) Monday, June 11, 2012
  • 12. Mercator Projection (mug projection) Monday, June 11, 2012
  • 13. Problem: distortion • The poles move “slower” than the equator • Therefore: they look wider • The map would be 3.14 longer than its height • Solution: compensate the distortion by using a logarithmic “lens”, making the wide parts tall as well Monday, June 11, 2012
  • 14. The Mercator Map Monday, June 11, 2012
  • 15. Distortion Part II. Because top parts are both wider and taller: • Gronland seems as large as Africa (14 times smaller) • Finland is as wide as India • Result: twice the resolution of Helsinki than that of Kuala Lumpur Monday, June 11, 2012
  • 16. What are the benefits? • It is universally applicable • Directions remain the same (what’s North, is displayed North) • On small distances, the distortion is balanced • It’s square-shaped, square is nice Monday, June 11, 2012
  • 17. Every single webmap is mercator-based on every zoomlevel Don’t rely on them when planning your trip from Helsinki to Kuala Lumpur Monday, June 11, 2012
  • 18. Part II: Computer Maps Monday, June 11, 2012
  • 19. Size problems • Apple Macintosh, 1984 • 128 K RAM, black-and-white screen • Black-and-white map of Budapest: 10.24 megabytes • Likely won’t fit into memory... Monday, June 11, 2012
  • 20. Divide and Conquer We are computer people, we think in binary... Monday, June 11, 2012
  • 23. (0,0) (0,1) (1,0) (1,1) Monday, June 11, 2012
  • 24. (0,0) (0,1) (1,0) (1,1) Monday, June 11, 2012
  • 25. (00,00) (00,01) (00,I0) (00,I1) (0,0) (0,1) (0I,00) (0I,01) (01,10) (01,11) (10,00) (10,01) (10,10) (10, 11) (1,0) (1,1) (11,00) (11,01) (11,10) (11, 11) Monday, June 11, 2012
  • 26. (0,0) (0,1) (0,2) (0,3) (1,0) (1,1) (1,2) (1,3) (2,0) (2,2) (2,3) (2,4) (3,0) (3,1) (3,2) (3,3) Monday, June 11, 2012
  • 27. The Tile Pyramid Monday, June 11, 2012
  • 28. How many tiles will we have? Monday, June 11, 2012
  • 29. How many tiles will we have? • If we don’t zoom at all: 1 x 1 • If we zoom once: 2 x 2 • If we zoom twice: 4 x 4 • If we zoom 15 times? • If we zoom n times? Monday, June 11, 2012
  • 30. How many tiles will we have? • If we don’t zoom at all: 1 x 1 • If we zoom once: 2 x 2 • If we zoom twice: 4 x 4 • If we zoom 15 times: 2 x 215 15 • If we zoom n times: 2 x 2 n n Monday, June 11, 2012
  • 31. WMTS Coordinate of a tile http://host.name/path/n/row/column Monday, June 11, 2012
  • 32. A tile is usually 256x256 pixels Convention, practical Monday, June 11, 2012
  • 33. Trivia • How large is the area covered by a single pixel on zoomlevel 15 in Budapest? • How large is the area of a single pixel in Rome? • How large is the area of a single pixel in Helsinki? Monday, June 11, 2012
  • 34. Trivia • What is the area • Budapest is on 47.5° covered by a single pixel (approx) on zoomlevel 15 in Budapest? • Earth’s circumference is 40 075 017 meters • What is the area of a single pixel in Rome? • Every longitudinal line is of equal length with • What is the area of a mercator projection single pixel in Helsinki? • Their real length is cos(degree)*equator Monday, June 11, 2012
  • 35. Trivia • What is the area • On zoomlevel 15 a covered by a single pixel longitudinal line is on zoomlevel 15 in 8388608 pixels long Budapest? (215*256 = 223) • What is the area of a • 40 075 017 * cos(47.5°)/ single pixel in Rome? 8 388 608 ≈ 3.23 meters / pixel horizontal • What is the area of a single pixel in Helsinki? • Vertical made the same by the logarithm Monday, June 11, 2012
  • 36. Trivia • What is the area • Budapest: 3.23 m - 10 covered by a single pixel m2/pixel on zoomlevel 15 in Budapest? • Rome: 3.56 m - 12.64 m2/ pixel • What is the area of a single pixel in Rome? • Helsinki: 2.38 m - 5.64 m2/pixel • What is the area of a single pixel in Helsinki? • Kuala Lumpur: 4.77 m - 22 m2/pixel Monday, June 11, 2012
  • 37. Trivia • What is the area • Budapest: 10 cm - 100 covered by a single pixel cm2/pixel on max (20) Google / Nokia zoomlevel? • Rome: 11.11 cm - 123 cm2/pixel • Helsinki: 7.4 cm - 55 cm2/ pixel • Kuala Lumpur: 14 cm - 222 cm2/pixel Monday, June 11, 2012
  • 38. http://jsfiddle.net/aadaam/Lm9Ex/ 0-10 / Part III: Build your own map Monday, June 11, 2012
  • 39. Basic considerations • Display a map at any given coordinate and zoomlevel • Be able to pan around and zoom in&out • Make it generic so knowledge could be used with other technologies as well • Don’t deal with bugs Monday, June 11, 2012
  • 40. Basic considerations • Display a map at any given coordinate and zoomlevel • Be able to pan around and zoom in&out • Make it generic so knowledge could be used with other technologies as well - canvas • Don’t deal with bugs - single browser... Monday, June 11, 2012
  • 41. Step 1: display a single tile http://jsfiddle.net/aadaam/Lm9Ex/ 0 / Monday, June 11, 2012
  • 42. Step 2: Calculate your position • Normalized spherical Mercator function: converts (latitude, longitude) to (x,y) between ((0..1),(0..1)) • Doesn’t cover the poles well • It’s a real number - we prefer integers Monday, June 11, 2012
  • 43. Step 2: Calculate your position • We will convert to Mercator once and don’t deal with it afterwards • JS uses double: precision up until 2 53 PHP int precision: 2 31 • Theoretical resolution on 231 for Budapest: 1.38 cm / pixel - good enough • We will use 228 now, as our last zoomlevel is 20, tile is 256 wide Monday, June 11, 2012
  • 44. Step 3: Calculate your position’s tile • Where are we standing right now on zoomlevel 15? • This office is at 47.49658, 19.057811 1 according to Google • That at (55.293836388888884%, 44.605757935735435%) of the map • Which is at (148428262, 119737670) of our 28-bit representation Monday, June 11, 2012
  • 45. Step 3: Calculate your position’s tile • Which is at (148428262, 119737670) of our 28-bit representation • What does it take to go from a 28-element representation to a 15-element representation? Monday, June 11, 2012
  • 46. Step 3: Calculate your position’s tile • Which is at (148428262, 119737670) of our 28-bit representation • What does it take to go from a 28-element representation to a 15-element representation? •x >> (28 - 15) 2 y >> (28 - 15) Monday, June 11, 2012
  • 47. Zooming in • Store your current zoomlevel into a variable • Re-calculate tile coordinates based on this variable after each movement (panning, zooming) • Allow this variable to be overwritten 3 Monday, June 11, 2012
  • 48. Panning • Choose a reference point • Usual practice is to choose the map center • We’ll use topleft corner instead (easier to calculate with) Monday, June 11, 2012
  • 49. The three coordinate systems Reference Tile coordinate Screen coordinate system system coordinate-system • 28-bit • 15-bit • Like tile coordinate • absolute • zoomlevel- system dependent • deals with • 15-bit + 8-bit conversion between globe • zoomlevel- and mercator dependent • has an offset Monday, June 11, 2012
  • 50. GeoCoordinate Coordinate GeoCoordinate(lat,lng) precision precision = MAX_ZOOMLEVEL x -lat y -lng /column doTheMagic() /row offset(Coordinate) TileCoordinate ScreenCoordinate TileCoordinate(zoomlevel, column, row) ScreenCoordinate(map, column, row) TileCoordinate(zoomlevel, Coordinate) ScreenCoordinate(map, Coordinate) map getID() The three coordinate Monday, June 11, 2012 systems
  • 51. ES 5 Magic • Calculate coordinates from underlying absolute coordinate dynamically through getters and setters 4 • Isn’t really needed as coordinates are better if non-mutable and throw-away • Another mathematical solution would be to use Monads Monday, June 11, 2012
  • 52. GeoCoordinate Coordinate GeoCoordinate(lat,lng) precision precision = MAX_ZOOMLEVEL x -lat y -lng /column doTheMagic() /row offset(Coordinate) reduced precision to reduced precision to zoomlevel +8 zoomlevel offset TileCoordinate ScreenCoordinate TileCoordinate(zoomlevel, column, row) ScreenCoordinate(map, column, row) TileCoordinate(zoomlevel, Coordinate) ScreenCoordinate(map, Coordinate) map getID() reduced precision to zoomlevel+8 ScreenOffsetCoordinate ScreenOffsetCoordinate(map, offset_x, offset_y) map It’s worth introducing a Monday, June 11, 2012 fourth one as well
  • 53. How to display multiple tiles • We know the topleft coordinate - in any coordinate system • We know our width and height - in ScreenOffset coordinate system • We know what zoomlevel we are at Monday, June 11, 2012
  • 54. How to display multiple tiles 1. Get the tile coordinate of the topleft pixel (z, x1, y1) 2. Get the tile coordinate of the bottomright pixel (z, x2, y2) 3. Request all the tiles on z between x1, x2 and y1, y2 Monday, June 11, 2012
  • 55. How to display multiple tiles 4. When the tile image arrives, send the tile coordinate with it as well. 5. Get the screen coordinate of the topleft corner of the tile by shifting it with tilesize in bits (Why will this work?), minus topleft 6. Display the tile 5 7. Make sure you don’t allow late callbacks after zoom Monday, June 11, 2012
  • 56. Bringing simple interaction • On user testing, ~80% of people used panning cursors instead of mouse gestures • There’s a nice track on tileserver statistics across the Atlantic • Never scale down tiles for permanent display! Cartographers are allergic to this! (sorry for the scaledowns explaining the pyramid...) Monday, June 11, 2012
  • 57. Bringing simple interaction • Let’s have some buttons (non-overlay) • zoom in: 1. increase zoomlevel of map 2. re-render • pan north/south/top/down 6 • add/substract 15 screenoffset coordinates from the topleft corner respectively • re-render Monday, June 11, 2012
  • 58. ES5 Magic #2 • Pattern: when panning or zoomlevel is modified, we have to re-render 7 • re-render automatically • Do this only if the map was already rendered once • Don’t forget to cancel current downloads on zoomlevel change! Monday, June 11, 2012
  • 59. Pan on mouse drag 8 • Usually, there is kinetic movement after - we don’t care about this • Only offset difference is needed - pageX will do 1. Remember offset at mousedown 2. Cancel drag mode on mouseout or mouseup 3. On mousemove, calculate offset difference, pan, remember new offset Monday, June 11, 2012
  • 60. Zoom to location by click 9 • You’ll have two ScreenCoordinate systems: one at the old, one at the new zoomlevel. • Aim: ScreenCoordinate(ev.offset) == ScreenCoordinate’(ev.offset) • On zoom-in: topleft+=1/2 * ScreenOffset(ev.offset) • On zoom-out: topleft-= -1 ScreenOffset(ev.offset) * Monday, June 11, 2012
  • 61. Add caching • We shouldn’t create Image objects on every render • Also, we should cancel current downloads if user has zoomed away • We shouldn’t download while panning either 10 Monday, June 11, 2012
  • 63. Remember • Store GeoCoords on high-precision grid systems instead of floats (it’s nasty when they’re serialized into strings back-and-forth...), but beware of the dateline! • Zooming equals shifting • You can calculate short distances on quasi-equal longitudinal spots with cos(latitude), don’t do it for large distances • All maps are flat! While WebGL is changing this, satellite will stay as such for a while Monday, June 11, 2012
  • 64. URLs • http://jo-hely.hu/~aadaam/minimap/ - original implementation • http://api.maps.nokia.com http:// m.maps.nokia.com • Leaflet, in case you need an Open Source one • Slides: http://www.slideshare.net/aadaam1 • GitHub: @aadaam Monday, June 11, 2012
  • 65. Thanks to • Astrid Fasold, Nokia Maps Map Design • Andrea Giammarchi, Nokia Maps HTML5 Mobile Maps • Thomas Fischer, Jörg Hösel, Nokia Maps (Web) API • Aniko Szalay (mug projection shot) Monday, June 11, 2012
  • 66. Acknowledgements • Maps used in examples are from Nokia Maps - http:// maps.nokia.com • Mercator’s map and globe are from Atlas Obscura - support them! http://atlasobscura.com/place/mercator-museum • Tile pyramid was made by Michael Potmesil at Bell Labs- http://www.geckil.com/~harvest/www6/Technical/Paper130/ Paper130.html • The Tissot Indicatrix illustration about Mercator projection is from Wikipedia • Project made tremendous use of JSFiddle Monday, June 11, 2012