Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... ·...

65
Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service Providers Emmanuel Stefanakis Dept. of Geodesy & Geomatics Engineering University of New Brunswick [email protected] Annual Conference – 2017 – Ottawa May 31- June 2, 2017

Transcript of Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... ·...

Page 1: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Web Mercator Projection & Raster Tile Maps

Two cornerstones of Online Map Service Providers

Emmanuel Stefanakis Dept. of Geodesy & Geomatics Engineering

University of New Brunswick

[email protected]

Annual Conference – 2017 – Ottawa May 31- June 2, 2017

Page 2: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Online Map Service Providers

O Available for ~12 years

O Well established (difficult to remember how

life was without them)

2

Page 3: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Online Map Service Providers

3

Page 4: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

4

Online Map Service Providers

Challenges ?

• Technological

• Cartographical

Page 5: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Online Map Service Providers Framework

CLIENT

HTTP

Request (where/what/resolution)

Map Product

SERVER

End-users

Map Repository (Data+Images)

Map Service

5

Page 6: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Technological Challenges

O High and steadily increasing demand

O Voluminous data (vectors and images)

O Bandwidth limitations

O Concurrent access

O Security issues

O Data protection

6

Page 7: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Cartographical Challenges

O Visualize the map on Web browser

O flat/rectangular monitor

O Multi-resolution representation

O various zoom levels

O Multi-theme mapping

O various themes (layers)

O Multi-language mapping

O various languages

7

Page 8: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

8

Online Map Service Providers

Web Mercator

Projection

Raster Tile

Maps

Page 9: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Map Product Flat Monitor

CLIENT

HTTP

Request (where/what/resolution)

Map Product

SERVER

Map Repository (Data+Images)

Map Service

9

Page 10: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Map Projection

X

Y

φ

λ(Χ,Υ) ƒ(φ, λ)

X

Y

X

Y

φ

λ

φ

λ(Χ,Υ) ƒ(φ, λ)

O A function f ...

10

Page 11: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Choose a Map Projection

11

Page 12: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Choose a Cylindrical

O Best fit

O Rectangular grid

12

Page 13: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Conical Projection ?

13

Page 14: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Conical Projection ?

14

Page 15: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Cylindrical Projection ?

15

Page 16: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Cylindrical Projection

O Simulation of a cylindrical projection

16

Page 17: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Cylindrical Projection

O Simulation of a cylindrical projection

17

Page 18: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Which Cylindrical?

Miller’s

Plate Carree

Mercator

18

Page 19: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

O Most popular

O Conformal

O Easy math (low complexity)

O …to serve high demand

19

Page 20: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

X

Y

X

Y

X

Y

φ

λ

2πR

2πRcos(φ) < 2πR

2πR

2πR

20

1512-1594

O Conformal

O Support navigation in Seas

Page 21: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

2πR

2πR

21

Page 22: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

Scale factor on horizontal (along parallels at φ): 2πRcos(φ) 2πR

Mercator’s goal preserve

shapes/directions

22

Page 23: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

Scale factor on horizontal (along parallels at φ): 2πRcos(φ) 2πR

Mercator applied… Scale factor on vertical (along meridians at φ): 2πRcos(φ) 2πR

23

Page 24: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

All parallels have the same length = equator (2πR)

At latitude φ the scale factor on the parallel is equal to:

secφRcosφ2π

R2π

φ

24

Page 25: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

Mercator applied the same factor on the parallels… The actual distance between two parallels at latitude φ is equal to: He made it equal to:

dN = R secφ dφ

dN = R dφ

φ2

φ1

dN

25

Page 26: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection

By integrating the last formula we get: (sphere)

2

φ45RlntandφsecφRN o

φ

0

equator

North pole

South pole

φ

N

2π R

φ

2π R

26

Page 27: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection O Spherical Formulas

Easting

Northing

Sphere

P(φs , λs)

Spherical Formulas

P(Es , Ns)

27

Page 28: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection O Ellipsoidal Formulas

Easting

Northing

P(φe , λe)

WGS’84

Ellipsoidal Formulas

P(Ee , Ne)

28

Page 29: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Mercator Projection O Spherical Formulas

O Ellipsoidal Formulas

Easting

Northing

Easting

Northing

29

Page 30: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Adopt Mercator Projection

CLIENT

HTTP

Request (where/what/resolution)

Map Product

SERVER

Map Repository (Data+Images)

Map Service

30

O Ellipsoid Coordinates

O Mercator Projection

Page 31: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Web Mercator O Make it even less computational expensive

O Ellipsoid Coordinates – Spherical Formulas

P(φe , λe)

WGS’84

Sphere

P(φs , λs)

Web Mercator

Spherical Formulas

P(E, N)

31

Page 32: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

32

Online Map Service Providers

Web Mercator

Projection

Page 33: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Web Mercator (vs) Mercator

O Mercator basic properties are lost

O Non-Conformal

O Loxodromes Not straight lines

O Rationale (Google)

O Simpler calculations

O Map to be projected on a computer monitor

O No body can notice the differences

33

Page 34: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

34

Page 35: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Criticism

O Geodesy Subcommittee of the Oil and Gas

Producers (aka EPSG) rejected it in 2008 as

“technically flawed” & “an inappropriate geodesy

and cartography”

O National Geospatial-Intelligence Agency of the

US Department of Defense declared it as

“unacceptable for any official use, because a

general lack of understanding of its properties

has caused considerable confusion and misuse”

35

Page 36: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

A Code for Web Mercator

O An unofficial code “900913” (GOOGLE

spelled with numbers) was initially assigned

O Later, EPSG introduced an official identifier:

EPSG:3857 -- WGS84 Web Mercator

(Auxiliary Sphere)

36

Page 37: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Web Mercator Map of the World

O Absolute square…

O Very convenient in

panning, tiling, and

indexing

37

40,075,017.25

40,0

75,0

17.2

5

85.051129 South

85.051129 North

Page 38: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

38

Online Map Service Providers

Challenges ?

• Technological

• Cartographical

Page 39: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

How to deliver the map product?

CLIENT

HTTP

Request (where/what/resolution)

Map Product

SERVER

Map Repository (Data+Images)

Map Service

39

Page 40: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

How to deliver the map product?

40

SERVER

Map Repository(Data+Images)

Map Service

Web Mercator

One map?

Page 41: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

How to deliver the map product?

41

SERVER

Map Repository(Data+Images)

Map Service

Web Mercator

One map?

Map product:

Various areas

Page 42: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

How to deliver the map product?

42

SERVER

Map Repository(Data+Images)

Map Service

Web Mercator

One map?

Map product:

Various resolution

Page 43: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

How to deliver the map product?

43

SERVER

Map Repository(Data+Images)

Map Service

Web Mercator

One map?

Map product:

Various theme

Various language

Page 44: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

44

One map ?

Multiple themes

Multiple Languages

SERVER

Map Repository(Data+Images)

Map Service

On-the-fly rendering ?

Page 45: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

45

On-the-fly generalization ?

Page 46: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Use of Map Tiles

CLIENT

HTTP

Request (where/what/resolution)

Map Product

SERVER

Map Repository (Data+Images)

Map Service

46

Preprocessing generation of map tiles

One map not an option

Page 47: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

47

Online Map Service Providers

Raster Tile

Maps

Page 48: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Use of Map Tiles

CLIENT

HTTP

Request (where/what/resolution)

Map Product

SERVER

Map Repository (Data+Images)

Map Service

48

Preprocessing generation of tiles

Page 49: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Tiled maps

O A series of precompiled maps…

O for… various areas

O in… various resolutions

49

Map Repository (Data+Images)

Page 50: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Tiled maps – An old practice

O Old practice…

O Sheet Division and Organization of

Topographic maps

50

Map Repository (Data+Images)

Page 51: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Sheet Division & Organization

O Topographic Maps

51

Page 52: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Sheet Division & Organization

O NRCan: National Topographic Map Index

52

Page 53: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Web Mapping Tiled Maps

O Web mapping

O rapid growth of map data availability

O rapid growth of demand

O Use of map tiles (slippy maps)

O pre-computation and caching of map image tiles

O map servers use far fewer resources than maps rendered on demand

O delivery only limited by the bandwidth of the connection with the map server

53

Page 54: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Tiled Maps

O Google…

O was the first major mapping provider to adopt

the tiled web maps

O Others followed…

O Bing and OpenStreetMap, Esri and Oracle

O provide functionality for map tiling and caching

of vector layers and/or raster images

54

Page 55: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Google Maps

O Conventions…

O All map tiles

O Square-shaped and equal-sized

O 256x256 pixels

O World rendered in a single tile at the outer

most zoom level: 0

O Projection: Web Mercator

O latitude values [-85.0511, +85.0511] degrees

55

Page 56: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Google Maps

56

x

y0,0

0,0 1,0

0,1 1,1

0,0 1,0

0,1 1,1

0,2 1,2

0,3 1,3

2,0 3,0

2,1 3,1

2,2 3,2

2,3 3,3

Zoom Level: 0Number of Tiles: 1

Zoom Level: 1Number of Tiles: 4

Zoom Level: 2Number of Tiles: 16

column

row

Page 57: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Bing Maps

O Quadtree encoding: Quadkeys

57

Page 58: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

Google Maps – Zoom Level [0-24]

58

Page 59: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

59

Page 61: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

#Tiles & Pixel size / Zoom Level

61

Each tile: 256x256 pixels

LEVEL TILES/LEVEL Pixel Size (m)0 1 156,543.034

1 4 78,271.517

2 16 39,135.758

3 64 19,567.879

4 256 9,783.940

5 1,024 4,891.970

6 4,096 2,445.985

7 16,384 1,222.992

8 65,536 611.496

9 262,144 305.748

10 1,048,576 152.874

11 4,194,304 76.437

12 16,777,216 38.219

13 67,108,864 19.109

14 268,435,456 9.555

15 1,073,741,824 4.777

16 4,294,967,296 2.389

17 17,179,869,184 1.194

18 68,719,476,736 0.597

19 274,877,906,944 0.299

20 1,099,511,627,776 0.149

21 4,398,046,511,104 0.075

22 17,592,186,044,416 0.037

23 70,368,744,177,664 0.019

24 281,474,976,710,656 0.009

4 ^ LEVEL 2πR/(256*2^LEVEL)

GRS80 (eq) 6,378,137.00 m

Circumference (2πR) 40,075,016.69 m

Page 62: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

62

Kotsollaris, M., 2017. A Scalable Web Tiled Map Management System. MScE Thesis. University of New Brunswick.

Map Tile Management

Page 64: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

64

Online Map Service Providers

Web Mercator

Projection

Raster Tile

Maps

Page 65: Web Mercator Projection and Raster Tile Mapsestef/talks/CCA2017_Technical_Session... · 2017-06-06 · Web Mercator Projection & Raster Tile Maps Two cornerstones of Online Map Service

References

O Stefanakis, E., 2015. Web Mercator: the de facto standard, the

controversy, and the opportunity. GoGeomatics. Magazine of

GoGeomatics Canada. October 2015.

O Stefanakis, E., 2015. Map Tiles and Cached Map Services.

GoGeomatics. Magazine of GoGeomatics Canada. December

2015.

O MapTiler. Tiles à la Google Maps: Coordinates, Tile Bounds and

Projection. http://www.maptiler.org/google-maps-coordinates-tile-

bounds-projection/

O Tilesets: Google Maps Structure – MicroImages.

http://www.microimages.com/documentation/TechGuides/78goo

gleMapsStruc.pdf

65