#geoshizzle (with notes)

9,918 views

Published on

Braintwists of a mapping aficionado

Published in: Technology
1 Comment
23 Likes
Statistics
Notes
  • can u sent me the presentation for teaching purpose to my student ?
    if so please attach it here hendra.sunarya@mail.ugm.ac.id
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
9,918
On SlideShare
0
From Embeds
0
Number of Embeds
1,264
Actions
Shares
0
Downloads
0
Comments
1
Likes
23
Embeds 0
No embeds

No notes for slide

#geoshizzle (with notes)

  1. 1. #GEOSHIZZLEFronteers 25/04/13 @ KaHo Sint-LievenBraintwists of a mapping aficionadoGeoshizzle, braintwists of a mapping aficionado
  2. 2. a·fi·ci·o·na·do/əˌfiSH(ē)əˈnädō/NounA person who is veryknowledgeable and enthusiasticabout an activity, subject, or pastime.Aficionado? Iemand die heel wat kennis en heel enthousiast is over een bepaald onderwerp
  3. 3. a·fi·ci·o·na·do/əˌfiSH(ē)əˈnädō/NounA person who is veryknowledgeable and enthusiasticabout an activity, subject, or pastime.In mijn geval eerder iemand die zeer enthousiast er over is. Ik heb wel wat kennis overmapping, maar ken zeker niet alles er over: de scope ervan is echt wel ruim om alles er overte kunnen weten.
  4. 4. #bootiniDat ik er heel enthousiast over ben kan je wel merken als je met me samenwerkt. Onlangsgingen we op bootini met onze studenten 1ICT richting “bachten de kuppe”. Op de planningstond o.a. een wandeltocht en al snel had ik m’n eigen kaart samengesteld en stond ik metm’n kompas temidden te velde ...
  5. 5. #scoutsM’n voorliefde is hoogstwschl te wijten aan het feit dat ik in de scouts gezeten heb (en nogsteeds zit) waar we vaak op stap gaan, al dan niet off-road.
  6. 6. GOOGLE MAPSMapping has become a commodityDISCLAIMER: ik ben fan van Google Maps. Dat ding is echt super me dunkt. Velen vloeken erop, maar ik ben laaiend enthousiast. De voorbeelden/implementaties die ik aanhaal zullendan ook op Google Maps gericht zijn.
  7. 7. Google Maps JS APIWaarom ik zo enthousiast er over ben?1) Het is JavaScript. Sterker nog: het is goede JavaScript: bijna alles wat er op weer te gevenvalt heeft event handlers, callback hooks, etc. — Mijn ogen beginnen al te fonkelen als ik ziewaar overal ik wat kan prutsen/tweaken.2) Je kan er zeer veel mee doen/op weergeven. De meesten kennen het standaard weergevenvan een kaar en het plotten van markers plotten, maar er is meer: lijnen (polyline) tekenen,shapes (polygons) weergeven, custom overlays op een map plaatsen, custom tiles gebruiken,etc.3) Dat ding wordt constant geupdatet, met toffe features. In de eerste versie mocht je er nietaan denken om te gaan routeren over het wegennet, nu gaat dat automatisch. Sinds kortzitten bvb. draggable shapes er in, mét
  8. 8. Google Maps APIsDe meesten denken aan de JavaScript Google Maps API wanneer we’t woord in de mondnemen. Echter bestaat er veel meer dan enkel die JS API. Zo is er bvb. ook een API waarmee jestatische afbeeldingen kan genereren (Static Maps API) en biedt Google enkele diensten aanwaar je berekeningen mee kan laten uitvoeren (Distances API, Geocoding API, etc.) —Opnieuw: laaiend enthousiast :-)
  9. 9. Google Maps Basicsvar map = new google.maps.Map(document.getElementById(map_canvas), { zoom: 5, center: new google.maps.LatLng(51.061142, 3.708851), mapTypeId: google.maps.MapTypeId.TERRAIN});Ik ga er van uit dat iedereen hier wel weet hoe je Google Maps implementeert en hoe jebasiszaken kan doen zoals markers op het ding zetten
  10. 10. Google Maps Basicsvar marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(51.061142, 3.708851)});google.maps.event.addListener(marker, click, toggleBounce);Ik ga er van uit dat iedereen hier wel weet hoe je Google Maps implementeert en hoe jebasiszaken kan doen zoals markers op het ding zetten
  11. 11. MAP PROJECTIONSMercator rickrolled us all!Een eerste iets wat ik jullie moet vertellen - en iets waar ik echt dolenthousiast over ben -zijn kaartprojecties. Blijkt ook dat de wereldkaart zoals we ze kennen totaal fout is quaproporties en zo, allemaal te danken een aan Vlaming Mercator genaamd ...
  12. 12. Map Projection“A map projection is a way torepresent the curved surface of theEarth on the flat surface of a map.”Een kaartprojectie is een manier om onze 3D wereldbol weer te geven op een 2D vlak.
  13. 13. Map ProjectionsAls je kijkt naar het maken van een wereldbol dan zie je dat die repen om een bol op tebouwen totaal geen rechthoekige vorm hebben.
  14. 14. Map ProjectionsAls je al die stukken naast elkaar zou leggen zou je op iets à la het bovenstaande uitkomen.Om de kaart te verkrijgen zoals we ze nu kennen is er blijkbaar hier en daar aan gesleuteld,gezien we op rechthoekige stroken uitkomen.Stom vergelijkbaar voorbeeld: de pel van een appelsien/mandarijn.
  15. 15. Projection Surfaces“One way of describing a projection is first toproject from the Earths surface to a developablesurface, and then to unroll the surface into a plane.”Als je wat onderzoek doet naar kaartprojecties zal je al gauw leren dat er drie couranteprojectievlakken zijn die gebruikt worden
  16. 16. Projection SurfacesCylinderConePlaneEen eerste is de cylinder: rol een blad papier rondom de bol, laat de lamp binnenin branden,teken alles over, knip de cylinder open, en rol ‘m uit — Klaar!De tweede is een cone/kegel er over zetten: opnieuw opensnijden en je bent er.Tenslotte is er nog het gewone vlak
  17. 17. Projection Distortions“Distortion (or warping) is the alteration of theoriginal shape (or other characteristic) of something.Distortion is usually unwanted, and often efforts areto lessen it. In some fields, however, distortion maybe desirable or acceptable.”In a mapping context:something = angles | size of an area | distanceElke projectie op één van de projection surfaces heeft last van vervormingen – Herinner udaarstraks met die repen die horizontaal uitgestrekt worden: hier en daar zal er watuitgerokken moeten worden.Elk verschillende vervorming duiken op bij kaartprojecties. Afhankelijk van het gebruik van dekaart kan deze vervorming eventueel getolereerd worden (merk op: je zal eerder en kaartkiezen op basis van wat het net niet-vervormt).Binnen de mapping context zijn er drie types van niet-vervormingen die van belang zijn: hetbehoud van hoeken, het behoud van verhoudingen tussen objecten, het behoud vanafstanden.
  18. 18. Projection DistortionsWat we concreet eens gaan doen is bollekes op de aarde zetten en kijken in hoeverre dezevervormen bij het omzetten naar een 2D beeld. Er zijn 3+1 belangrijke projectietypes dat wehier bij onderscheiden:
  19. 19. ProjectionTypes (1/2)Equivalent Projectionpreserves proportions in the sizes of areasConformal Projectionpreserves angle measurementsEen eerste type van projectie is de “conformal projection”. Deze bewaart het meten vanhoeken. Als je in het middelste cirkeltje een hoek van 45° afmeet, dan is dat in die anderecirkeltjes ook zo. Wat deze projectie echter niet bewaart zijn de proporties/afstanden: je zouhet niet zeggen maar op deze kaart beslaat elke cirkel een even groot aardoppervlak!Een projectie die wel de proporties/oppervlaktes bewaart is de “equivalent projection”. Hierzie je wel meteen dat de cirkels geen cirkels blijven: het afmeten van hoeken wordt vervormd:45° in de top van afrika is al eerder 60° in het midden en 30° in het noorden. Echter klopt deverhouding tussen de continenten onderling wel. Zie Groenland bvb: in de bovenste projectieis die bijna even groot zoals Afrika, hier niet.
  20. 20. ProjectionTypes (2/2)Equidistance Projectionpreserves distancesCompromise Projectionpreserves noneEen projectie die het meten van afstanden behoudt is een “equidistance projection”: waar jeook je lat legt, de afstand zal het zelfde zijn. Je ziet wel ook dat de hoeken hier niet meerdezelfde zijn (cirkels worden ovalen) en dat de verhodoudingen niet bewaard worden (zieGroenland).Compromise tenslotte behoudt geen enkele metric, maar probeert ze te minimaliseren omeen vrij realistisch beeld te krijgen.
  21. 21. Projection Implementationshttp://xkcd.com/977/Qua kaartprojecties weten we dus ondertussen dat er verschillende “projectievlakken” zijn, eneen projectie bepaalde eigenschapen (niet-)behoudt.Er bestaan heel veel kaartprojecties, en elk heeft zijn voor & nadelen. Welke je moet kiezenhangt af van het gebruik. Waar we echter allemaal blind in volgen is dat Mercator blijkbaar destandaard geworden is, terwijl de achterliggende reden volledig achterhaald is
  22. 22. Mercator World Map (1569)Mercator ProjectionEen zeer bekende en nog steeds vaak gebruikte kaartprojectie is de Mercator projectie,gemaakt door Gerardus Mercator (Vlaming) in 1569. Dit is ze hier, z’n eerste wereldkaart.
  23. 23. Mercator was ahead of his timeMercator Projection = Conformal = Handy if you’re a sailor (which you are, anno 1569)De map van Mercator werd zeer populair omdat deze “conformal” is. Komt heel goed van paswanneer je met een zeilschip op pad gaat (wat men vaak deed toen, naar het schijnt) omdatje dan gewoonweg één rechte lijn kan trekken om die koers aanhouden om er te geraken.Andere kaarten van die periode vereisten van een kapitein dat ie steeds z’n koers corrigeerdeen routes moest uitrekenen. Niet echt handig.
  24. 24. Mercator is still popularhttp://docs.openlayers.org/library/spherical_mercator.htmlSphericalMercator Projection (EPSG:900913)Google maps, Yahoo Maps, Microsoft Virtual Earth, etc. gebruiken de SphericalMercatorprojectie
  25. 25. Mercator is long overdueProportions are not preservedGreenland is not as big as South-America!Distances are not preservedStraight line != the shortest routeHet gebruik van Mercator is echter totaal achterhaald. We zitten opgezadeld met eenverouderd systeem dat we niet meer gebruiken: de koers mag dan wel rechtlijnig zijn, deafstanden en proporties zijn vervormd.- Ons beeld van Groenland is totaal verkeerd- Vliegtuigen vliegen hebben meer aan de kortste afstand ipv een rechtlijnige afstand (want:minder bezine = minder kilos = minder benzine)
  26. 26. Mercator Puzzlehttp://gmaps-samples.googlecode.com/svn/trunk/poly/puzzledrag.htmlHet laat ons wel toe om een quizje ineen te schieten: hier zie je enkele landen die verschovenzijn tov hun originele positie. Door de projectie worden ze allen vervormd. Dat grote ding inhet midden van de pagina bvb is Australië.
  27. 27. GEODETIC DATUMSThe earth ain’t flat. But it ain’t round either.Naast kaartprojecties is het werken met coördinaten/geodetische datums (jawel, datums –niet data!) een zeer belangrijk aspect binnen de geodesie (=de wetenschap die zich met devorm en afmetingen van de aarde bezig houdt).
  28. 28. Spherical Coordinatesφ = latitude (-90° – 90°) | λ = longitude (-180° – 180°)Om de positie van een punt op een perfecte bol weer te geven heb je twee dingen nodig:- de hoeken tov twee ortogonaalvlakken, hier aangeduid met X en Phi- de afstand tov het middelpunt, hier aangduid met RProbleem is echter dat je dit niet meteen kan toepassen op de aarde.
  29. 29. World Coordinates?φ = latitude (-90° – 90°) | λ = longitude (-180° – 180°)Je zou nu kunnen denken: “Aha! Heel simpel, we passen dit gewoon toe op de aarde enklaar!” – We kennen immers de termen waarschijnlijk al:- latitude (phi) ofte de hoek tov het equitoriale vlak (-90° tot 90°)- longitude (lambda) ofte de hoek tov de nulmeridiaan (-180° tot 180°)Helaas, het blijkt niet zo makkelijk te zijn ...
  30. 30. Enter Stage Left:The Geoid“The “mathematical figure of the Earth”, a smooth buthighly irregular surface that corresponds not to the actualsurface of the Earths crust, but to a surface which canonly be known through extensive gravitationalmeasurements and calculations.”Er bestaat blijkbaar iets dat de “geoide” genaamd is. Heel speciaal ding maar het heeft temaken met zwaartekracht, equipotentiaal, getijden, zeeniveau, etc. — Komt er op neer dathet “het mathematische model van de aarde” is, zoals Gauss (een wiskundige) het ooitbeschreven heeft.Blijkt het nog eens een ferm lelijk ding te zijn ook, dat zelfs van ver niet eens op een boltrekt.
  31. 31. Enter Stage Right:The Reference Ellipsoid“A mathematically-defined surface that approximates thegeoid, usually a flattened spheroid with two different axes:An equatorial radius (the semi-major axis a), and a polarradius (the semi-minor axis b)”Nu, wiskundigen blijven wiskundigen en hebben er iets op gevonden: Om berekeningen opde speciale vorm te kunnen toepassen wordt een referentie ellipsoide rondom de geoidegevormd. Met deze ellipsoide bij de hand kunnen we dan coördinaten gaan uitdrukken.De ellipsoide heeft twee parameters:- a = the semi-major axis = equitorial radius- b = the semi-minor axis = polar raidusMet deze twee parameters wordt ook nog f (flattening) berekend als zijnde (a-b)/a
  32. 32. World Coordinatesφ = latitude (-90° – 90°) | λ = longitude (-180° – 180°)Om coordinaten te bereken is deze afgeplatte bol dus de correcte figuur. Bemerk dat de rodelijn niet meer door het middelpunt gaat ... zie https://twitter.com/breynHouteborg/status/327520319457853440 & https://twitter.com/breynHouteborg/status/327526360794947587 (Thanks!)Mensen binnen de geodesie spreken hier over de geodetische latitude ipv de geocentrische(die vanuit het midden) latitude.
  33. 33. Global EllipsoidsWGS84a = 6378137.0mb = 6 356 752.314245mf = 298.257223563GRS80a = 6378137.0mb = 6356752.314140mf = 298.257222101http://spatialreference.org/ref/epsg/4326/http://spatialreference.org/ref/sr-org/7311/html/GRS80 & WGS84 zijn twee internationaal vaak gebruikte ellipsoïden om coordinaten weer tegeven. Ze zijn nagenoeg dezelfde doch wordt WGS84 als dé standaard aanzien: GPS bvb.gebruikt deze coördinatenZeer leuk om weten is dat Google Maps bvb. werkt hier mee: je geeft WGS84 coördinaten meeaan het systeem en die zal ze zelf omzetten naar SpericalMercator coördinaten (X/Y setuitgedrukt in meter)
  34. 34. WGS84Frontdoor KaHo Sint-Lieven51° 3’ 40.1106” N , 3° 42’ 31.8636”EEen voorbeeld is de voordeur van de KaHo: φ 51° 3’ 40.1106”, λ 3° 42’ 31.8636”
  35. 35. WGS84 Alternate NotationFrontdoor KaHo Sint-Lieven51.061142 N, 3.708851 EEen voorbeeld is de voordeur van de KaHo: φ 51.061142, λ 3.708851
  36. 36. WGS84 Notation Conversion// From degrees° minutes’ seconds” to decimal degreesvar degreesToDecimaldegrees = function(degrees, minutes, seconds) { return Math.round((degrees + (minutes/60) + (seconds/3600)) * 1000000) / 1000000;}// From decimal degrees to degrees° minutes’ seconds”var decimalDegreesToDegrees = function(decimaldegrees) { var degrees = Math.floor(decimaldegrees), minutes = Math.floor(((decimaldegrees) - Math.floor(decimaldegrees)) * 60), seconds = (Math.floor(((((decimaldegrees) - Math.floor(decimaldegrees)) * 60) - Math.floor(((decimaldegrees) - Math.floor(decimaldegrees)) * 60)) * 100000) * 60 / 100000); return degrees + ° + minutes + + seconds + ";}console.log(degreesToDecimaldegrees(51, 22, 2.100)); // 51.36725console.log(decimalDegreesToDegrees(51.36725)); // 51° 22 2.0994"Hier de JavaScript functies die de twee formaten kan omvormen naar elkaar.
  37. 37. Local EllipsoidsVoor er satellieten uitgevonden waren was het werken met globale ellipsoïden niet echthandig. Vele landen hebben daarom een eigen lokale ellipsoïde, en dus een eigencoordinatensysteem
  38. 38. Belgium: Lambert1972Lambert1972: http://spatialreference.org/ref/epsg/31370/html/Lambert2008: http://spatialreference.org/ref/epsg/3812/html/In België is Lambert1972 onze standaard, gebaseerd op de Hayford1924 ellipsoïde. In 2005en 2008 volgende er updates om over te stappen op de GRS80 ellipsoïde.De bijhorende projectie is een conische conformal projectie die beperkt wordt door eenbounding box (twee breedtegraden (“two standard parallel”) + de hoek waaronder op eenbepaalde afstand naar belgie gekeken wordt).Lambert coordinaten worden uitegedrukt in een X-Y paar.De waardes van die bounding box verschillen per revisie, let dus op als je een set lambertcoordinaten krijgen: kijk goed of het de versie van 1972, 2005 of 2008 is! Versie 2005 wordttrouwens niet vaak gebruikt: je zal meestal of de oude (1972) of de nieuwste (2008)tegenkomen.
  39. 39. Lambert1972Frontdoor KaHo Sint-Lievenx: 103848.409429, y: 194699.552339
  40. 40. Converting LB1972 to WGS84var lambert72toWGS84 = function(x, y) { var newLongitude, newLatitude, n = 0.77164219, F = 1.81329763, thetaFudge = 0.00014204, e = 0.08199189, a = 6378388, xDiff = 149910, yDiff = 5400150, theta0 = 0.07604294, xReal = xDiff - x, yReal = yDiff - y, rho = Math.sqrt(xReal * xReal + yReal * yReal), theta = Math.atan(xReal / -yReal); newLongitude = (theta0 + (theta + thetaFudge) / n) * 180 / Math.PI; newLatitude = 0; for (var i = 0; i < 5 ; ++i) { newLatitude = (2 * Math.atan(Math.pow(F * a / rho, 1 / n) * Math.pow((1 + e *Math.sin(newLatitude)) / (1 - e * Math.sin(newLatitude)), e / 2))) - Math.PI / 2; } newLatitude *= 180 / Math.PI; return [newLatitude, newLongitude];}
  41. 41. http://jpenet.blogspot.be/2012/08/transformation-between-datums-in.htmlhttp://jpenet.blogspot.be/2012/08/transformation-between-datums-in_14.htmlConverting LB1972 to WGS84If you can’t get enough:
  42. 42. GOOGLE MAPS COORDS &TILESFrom Coordinates to Pixels, and vice versa
  43. 43. GoogleTile Systemzoom: 2tiles: 4 x 4size: 1024px x 1024pxzoom: 1tiles: 2 x 2size: 512px x 512pxzoom: 0tiles: 1 x 1size: 256px x 256pxDe kaart die je op Google maps te zien krijgt is niet één grote afbeelding die je doorgestuurdwordt. Als je even gaat sniffen via de Network Tab van de Developer Tools dan zal je zien datde afbeelding steeds versneden is in tegels van 256 x 256 pixels.Per zoom level zijn er tegels opgemaakt. Je zal steeds met 2^(n*2) tegels zitten (n =zoomniveau).
  44. 44. GoogleTile System0,00,0 1,00,1 1,10,0 1,00,1 1,12,0 3,02,1 3,10,2 1,2 2,2 3,20,3 1,3 2,3 3,3De tegels zijn benoemd tov een X-Y as vanuit de top left corner.Google Maps tenslotte is dusdanig slim om jou enkel maar de tegels die je nodig hebt door testuren.
  45. 45. 3D → 2D → Pixelslat : 51.061142lng : 3.708851x: 412867.4046906519my: 6632116.16820788mJust feed Google Maps WGS84 (decimal degrees) and it’ll transform them automagicallyx: 130.63740515555554y: 85.63391060773934z: 1Qua coördinaten Google Maps gebruikt WGS84 coördinaten. Intern zet ie dat dan om naar decorrecte XY coordinaat om zaken op de map weer te geven.
  46. 46. WGS84 → Pixelszoom: 2tiles: 4 x 4size: 1024px x 1024pxzoom: 1tiles: 2 x 2size: 512px x 512pxzoom: 0tiles: 1 x 1size: 256px x 256pxSoms zal je effectief zelf willen weten op welke pixel een bepaalde coordinaat staat, dus zalje moeten gaan rekenen.Bemerk dat de XY waarde zal afhangen van het zoomlevel:Op zoomlevel 1 bestaat Google Maps uit 1 tegel, dus zal de X/Y waarde van 1 tot 265px gaanOp zoomlevel 2 bestaat Google Maps uit 2x2 tegels, dus zal de X/Y waarde van 1 tot 512gaanOp zoomlevel 3 ...
  47. 47. WGS84 → Pixelslat : 51.061142lng : 3.708851Just feed Google Maps WGS84 (decimal degrees) and it’ll transform them automagicallyx: 130.63740515555554y: 85.63391060773934z: 1Om het effectief om te zetten hoef je niet eerst de WGS84 coord om te zetten naar deprojectie (wat je iets in meters zal opleveren!) en dan naar pixels op het scherm. Je kan datmeteen doen.
  48. 48. WGS84 → PixelsThe formula will need to take the projection distortions into accountLet op! Je kan dit niet zomaar afmeten! Herinner u dat de Mercator projectie enkel hoekenrespecteert, afstanden tussen punten gemeten met de meetlat zijn niet dezelfde! Ziehier decirkels: deze beslaan allen een even groot oppervlak maar zien er niet gelijk uit qua grootte!
  49. 49. WGS84 → Pixels (Standalone)// Converts a lat/lng coordinate to an XY Point for the given zoom levelfunction fromLatLngToPixel(lat, lng, zoom) { var deg2rad = Math.PI / 180; var x = Math.floor((lng + 180) / 360 * (1 << zoom) * 256); var y = Math.floor((1 - Math.log(Math.tan(lat * deg2rad) + 1 / Math.cos(lat *deg2rad)) / Math.PI) / 2 * (1 << zoom) * 256); return [x, y];}// Converts an XY Point at the given zoom level to a lat/lng coordinatevar fromPixelToLatLng = function(x, y, zoom) {// ...};console.log(fromLatLngToPixel(51.061142, 3.708851, 0));// zoom 0: [ x: 130, y: 85 ]// zoom 1: [ x: 261, y: 171 ]// zoom 2: [ x: 522, y: 342 ]Je kan het manueel berekenen, zie hier. Handig voor standalone/serverside implementaties
  50. 50. WGS84 → Pixels// Converts a lat/lng coordinate to an XY Point for the given zoom levelvar latlngToPoint = function(map, latlng){ var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); var scale = Math.pow(2, map.getZoom()); var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale,normalizedPoint.y * scale); return pixelCoordinate;};// Converts an XY Point at the given zoom level to a lat/lng coordinatevar pointToLatlng = function(map, point){ var scale = Math.pow(2, map.getZoom()); var normalizedPoint = new google.maps.Point(point.x / scale, point.y / scale); var latlng = map.getProjection().fromPointToLatLng(normalizedPoint); return latlng;};console.log(latlngToPoint(map, new google.maps.LatLng(51.061142, 3.708851)));// zoom 0: [ x: 130.63740515555554, y: 85.63391060773934 ]// zoom 1: [ x: 261.2748103111111, y: 171.26782121547868 ]// zoom 2: [ x: 522.5496206222222, y: 342.53564243095735 ]Ondertussen voorziet Google ons met versie 3 ons ondertussen van een hulpmiddel`map.getProjection().fromLatLngToPixel() ` dat het rekenen voor zich neem. Best dit tegebruiken gezien dit mee met de projectie gaat (op Google Maps kan je van projectiewisselen – zie https://developers.google.com/maps/documentation/javascript/maptypes#Projections)We bereken de positie op zoomlevel 0, en scalen dan mee up met het zoomlevel.
  51. 51. WGS84 → EPSG:900913// Converts WGS84 coordinates (lat,lng) to EPSG:900913 coordinates (x,y)var WGS84toSphericalMercator = function(lat, lng) {var x = lng * 20037508.34 / 180;var y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);y = y * 20037508.34 / 180;return [x, y];}// Converts EPSG:900913 coordinates (x,y) to WGS84 coordinates (lat,lng)var SphericalMercatorToWGS84 = function(x, y) {var lat = (y / 20037508.34) * 180;var lng = (x / 20037508.34) * 180;lat = 180/Math.PI * (2 * Math.atan(Math.exp(lat * Math.PI / 180)) - Math.PI /2);return [lat, lng];}console.log(WGS84toSphericalMercator(51.061142, 3.708851));// -> [ x: 412867.4046906519, y: 6632116.16820788 ]console.log(SphericalMercatorToWGS84(412867.4046906519, 6632116.16820788));// -> [ lat: 51.06114199999999, lng: 3.708851 ]Voor zij die toch de SphericalMercator omvormstap ooit zouden nodig hebben, hier is’m.
  52. 52. 3D → Pixels →Tile// Converts an XY Point to a tile indexvar pointToTile = function(x, y) { var TILE_SIZE = 256; return [Math.floor(x / TILE_SIZE), Math.floor(y / TILE_SIZE)];}console.log(pointToTile(260, 125)); // [ 1, 0 ]Wat je vervolgens ook nog heel simpel kan doen is te weten komen op welk tegel eenbepaalde XY coordinaat staat. Niet meer dan een simpele math.floor een deling.
  53. 53. Pixeloffset inViewportSoms zal je willen weten wat de positie van een coordinaat tov de NW corner is.
  54. 54. Pixeloffset inViewport// Calculates the XY pixel offset of a Coordinate relative to the NW (top left)corner of the mapvar getCanvasPointOffset(latLng) { var scale = Math.pow(2, map.getZoom()); var nw = new google.maps.LatLng( map.getBounds().getNorthEast().lat(), map.getBounds().getSouthWest().lng() ); var worldCoordinateNW = map.getProjection().fromLatLngToPoint(nw); var worldCoordinate = map.getProjection().fromLatLngToPoint(latLng); var pixelOffset = new google.maps.Point( Math.floor((worldCoordinate.x - worldCoordinateNW.x) * scale), Math.floor((worldCoordinate.y - worldCoordinateNW.y) * scale) );}console.log(getCanvasPointOffset(marker.getPosition()));Daar bestaat uiteraard een formule voor: bereken twee XY paren en retourneer het verschil.
  55. 55. Pixeloffset inViewporthttp://bruxellesmdr.be/homePraktisch voorbeeld: deze overlays bij de markers. Ja, je kan het doen via de muispositie,maar via de map is net iets geekier.Let trouwens ook op het gebruik van de minimap op deze site, en het rode kader dat meegaat: concreet gezien neem je steeds de bounds (NW en SE corner) van de grote map en stelje deze in als NW en SE corner van de rechthoek. Bijkomend trigger je dan nog een click eventop de minimap om het kader (en de grote map ook) te herpositioneren.
  56. 56. CUSTOMTILESIt’s JavaScript, so it’s hackable/extendable!
  57. 57. CustomTileshttp://www.use-it.travel/cities/map/ghent/?zoomCustom Tiles is iets wat je kan gebruiken om eigen maps (of heel grote pano’s) te gaanserven. De mensen van USE-IT bvb maken tourist guides die ze ook digitaal verspreiden.
  58. 58. On DiskFormat: z_x_y.jpgOp disk ziet dat er zo uit: per zoom level zijn alle tiles gegenereerd.
  59. 59. Serving CustomTilesFull code at http://bramus.github.io/photoshop-google-maps-tile-cutter/example/var customMapType = new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { var nCoord = getNormalizedCoord(coord, zoom); return tiles/ + zoom + _ + nCoord.x + _ + nCoord.y + .jpg; }, tileSize: new google.maps.Size(256, 256), maxZoom: maxZoom, name: ...});var map = new google.maps.Map(document.getElementById(map), { center: new google.maps.LatLng(0, 0), zoom: 2, streetViewControl: false, mapTypeControl: false, mapTypeControlOptions: { mapTypeIds: ["custom"] }});map.mapTypes.set(custom, customMapType);map.setMapTypeId(custom);Deze kan je dan instellen om getoond te worden ter vervanging van de Google Maps Tiles. DegetTileUrl functie is de cruciale in het verhaal.
  60. 60. CutTiles using aTileCutterAutomatically with https://github.com/bramus/photoshop-google-maps-tile-cutterHet aanmaken van de tiles gebeurt met een TileCutter. Er bestaan er heel wat, maar ik hebm’n eigen TileCutter geschreven: een Photoshop Script dat een geopende (grote) afbeeldingzal aflopen en alle mogelijke tiles er van zal trekken.Dat script is trouwens geschreven in JavaScript: je kan Photoshop aansturen via JS ...#zottesfeer!
  61. 61. HEATMAPSVisualizing Data
  62. 62. GowallaHEAT (RIP)http://gowallaheat.bram.us/Heatmaps vind ik zelf supercool! Het laat je toe om zeer knappe visualisaties te maken. Hierene dat ik ooit gemaakt heb: GowallaHEAT die je Gowalla (RIP) checkins visualiseert.
  63. 63. GowallaHEAT Core (PHP)HeatmapRendering of pixel based canvasesCanvas dimensions passed into constructorPoints are added as X/Y coordinatesMercatorHeatmapTileRendering of Mercator based tilesCanvas is created as a specific tile of a certain zoom level (256px)Points are added as WGS84 and are converted to X/YOnly specific tile is renderedMercatorHeatmapRendering of Mercator based canvasesCanvas is created for a given zoom level (256px, 512px, 1024px, ...)Points are added as WGS84 and are converted to X/YHet ding is indertijd gemaakt in PHP en bestaat uit drie basisklasses die van elkaar overerven.
  64. 64. Generating HeatmapsHeatmaps renderen is echt niet moeilijk eens je’t weet:- plot per punt een dot die transparant wordt naar de buitenkant toe- overlap zorgt er voor dat de gebieden donkerder of lichter worden.- map dan de donkerheidsgraad aan een bepaalde gradient: transparent (of wit) wordt blauw,lichtgrijs groen, zwart wordt rood (of wit)
  65. 65. Overlaying Heatmaps// Gowallaheat was implemented with Google Maps v2, so alas no code to show ...// System is comparable to working with custom tiles though:// Store the tiles as `z_x_y.png` on the server and load ‘m inOm de transparante overlays nu te renderen op een Google Maps heb je heel wat JS nodig.Helaas dateert de implementatie van in de tijd van GMaps2 en is de code niet meer up-to-date.Principe is wel het zelfde als bij het werken met custom tiles: tiles worden genummerd &ingeladen via een custom functie.
  66. 66. Heatmaps in Google Maps v3var pointArray = new google.maps.MVCArray([ new google.maps.LatLng(37.782551, -122.445368), ... new google.maps.LatLng(37.783206, -122.440829)]);var heatmap = new google.maps.visualization.HeatmapLayer({ data: pointArray});heatmap.setMap(map);https://developers.google.com/maps/documentation/javascript/examples/layer-heatmapNu, de code van toen heb je niet nodig, gezien het nu vanzelf in Google Maps v3 zit – hoera!
  67. 67. SHAPEFILES & GEOJSONThe vectors of the mapping business
  68. 68. Shapefile“A shapefile is a digital vector storage formatfor storing geometric location and associatedattribute information.”Shapefiles zijn de svg’s van de mapping business. Je kan deze bekijken met een shapefileviewer.
  69. 69. Rendering Shapefileshttps://github.com/kig/shp.js/Shapefiles kan je niet renderen op Google Maps helaas, maar wel bvb. met D3.js en eenshp.js plugin.Met KartoGraph kan je ook aan de slag.
  70. 70. Shapefiles Oost-Vlaanderenhttp://www.gisoost.be/home/atlasbw.php?kies=alle_gemeentenVele van de gis diensten in België bieden shapefiles aan, maar je moet ze wel weten tevinden ;-)Let op, je zal ook moeten filteren — er zit heel veel cruft tussen
  71. 71. GeoJSON“GeoJSON allows geographic data to bestored in a human-readable way”{"type": "Feature","id": "OpenLayers.Feature.Vector_314","properties": {},"geometry": {"type": "Point","coordinates": [97.03125,39.7265625]}}Naast shapefiles heb je ook GeoJSON. Voor ons iets handiger om mee te werken want da’stekst die we kunnen lezen.In die GeoJSON kan je alles opslaan: Markers (punten), PolyLines (lijnen), PolyGons (vormen),etc. — echt wel vet!
  72. 72. GeoJSONhttps://github.com/JasonSanford/GeoJSON-to-Google-MapsHet gebruik van GeoJSON binnen Google Maps is simpel, mits een hulpmiddel.
  73. 73. Mercator Puzzle Reduxhttp://bramus.github.io/mercator-puzzle-redux/Herinner u de Mercator puzzel? Heb die wat aangepast zodat je niet steeds dezelfde 15landen krijgt.De landen dat is uit een GeoJSON file gehaald.Bijkomend is er nog wat geprutst om de shapes programmatorisch te verplaatsen: van elkland wordt het middelpunt van de shape genomen en per punt van de shape wordt vanuit hetmiddelpunt de richting en de afstand genoteerd. Vervolgens wordt de shape op een andereplaats (waar de afstanden anders zijn, maar de hoeken de zelfde) hertekend als zijnde: tekenmij nu eens alle punten op een bepaalde afstand en richting vanaf het nieuwe middelpunt.
  74. 74. http://www.bram.us/2013/02/16/google-maps-v3-move-polygon/Mercator Puzzle Redux SidenoteHerinner u de Mercator puzzel? Heb die wat aangepast zodat je niet steeds dezelfde 15landen krijgt.De landen dat is uit een GeoJSON file gehaald.Bijkomend is er nog wat geprutst om de shapes programmatorisch te verplaatsen: van elkland wordt het middelpunt van de shape genomen en per punt van de shape wordt vanuit hetmiddelpunt de richting en de afstand genoteerd. Vervolgens wordt de shape op een andereplaats (waar de afstanden anders zijn, maar de hoeken de zelfde) hertekend als zijnde: tekenmij nu eens alle punten op een bepaalde afstand en richting vanaf het nieuwe middelpunt.
  75. 75. Shapefile → GeoJSONhttp://www.bram.us/2012/03/14/convert-esri-shapefile-shp-to-geojson-json/$ /Library/Frameworks/GDAL.framework/Programs/ogr2ogr -f "GeoJSON"output.json input.shp$ /Library/Frameworks/GDAL.framework/Programs/ogr2ogr -f "GeoJSON"-s_srs "EPSG:31370" -t_srs "WGS84" output.json input.shpShapefile to GeoJSONShapefile to GeoJSON with coordinates conversionhttp://spatialreference.org/Shapefiles kan je naar GeoJSON omzetten.Let op met de shapefiles van GisOOST: deze zijn in Lambert1972 en zal je dus naar WGS84moeten omzetten. Gelukkig kan die ogr2ogr daar mee overweg. Wat je wel zal moeten teweten komen is de EPSG code. Die kan je vinden op http://spatialreference.org/
  76. 76. Shapefile Deelgemeenten DeinzeHier een voorbeeld van de deelgemeenten van Deinze: Shapefile van Gisoost, omgezet metogr2ogr naar WGS84 coordinaten, ingeladen in Google Maps met behulp van de GeoJSONplugin.En het blijkt nog te kloppen ook. Indien het niet klopt: coordinatenconversie nakijken!
  77. 77. Shapefile → SVG → Browserhttp://kartograph.org/Met Kartograph kan je een shapefile omzetten naar een SVG (met een bepaalde projectie) endeze dan via javascript embedden, stylen, en zelfs interactief maken.Bestaat uit een python script om een SVG te creëren, en een JS lib om de SVG vervolgens teembedden.
  78. 78. A FEW MORETHINGSVarious stuff
  79. 79. Ferraris Maps (1777)http://www.kbr.be/collections/cart_plan/ferraris/ferraris_nl.htmlDe Ferraris kaarten zijn echt prachtig en hi-res. Hier Gent bvb. Enige jammere is dat die siteniet echt wow is, en de viewer in Flash is.
  80. 80. Styled Mapshttps://developers.google.com/maps/documentation/javascript/stylinghttp://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.htmlGoogle Maps kan je perfect stylen naar hetgeen je wil. Per entitiet (straten, labels, landmassa,water, etc) kan je instellen of het zichtbaar moet zijn of niet, wat het kleur is, etc.Resultaat uit deze hulptool is JSON die je dan mee aan de config van je map instance geeft.
  81. 81. Distance Between Points// Manual: Haversine Formula: shortest route over a spherefunction distance(latlng1, latlng2) {var R = 6371, // Radius of the earth, in km. Need miles? change to 3961dLat = (latlng2.lat - latlng1.lat) * (Math.PI / 180),dLon = (latlng2.lng - latlng1.lng) * (Math.PI / 180),a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +Math.cos(latlng1.lat * (Math.PI / 180)) *Math.cos(latlng2.lat * (Math.PI / 180)) *Math.sin(dLon / 2) * Math.sin(dLon / 2),c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)),d = R * c; return d;}// Google Maps v3 with Geometry Library// @see https://developers.google.com/maps/documentation/javascript/geometrygoogle.maps.geometry.spherical.computeDistanceBetween (latLngA, latLngB);De kortste afstand op een mercator projectie is geen rechte lijn. Gebruik hiervoor dehaversine formule, die rekening houdt met de straal van de aarde.
  82. 82. Bearing/Heading// Manual calculation of the bearingvar y = Math.sin(dLon) * Math.cos(lat2);var x = Math.cos(lat1)*Math.sin(lat2) -Math.sin(lat1)*Math.cos(lat2) * Math.cos(dLon);var brng = Math.atan2(y, x).toDeg(// Google Maps v3 with Geometry Library// @see https://developers.google.com/maps/documentation/javascript/geometrygoogle.maps.geometry.spherical.computeHeading (latLngA, latLngB);Je kan ook de richting naar een bepaald punt (vanuit een ander punt) gaan bepalen.Is dus iets wat gebruikt werd bij die Mercator Puzzle Redux van daarstraks
  83. 83. Areal Photos of Belgiumhttp://ogc.beta.agiv.be/gdiviewer/Luchtfoto’s van België (veel beter dan die van Google of Bing) vind je op Agiv. Dataset werdonlangs vernieuwd.
  84. 84. Topograhpic Maps of Belgiumhttp://www.ngi.be/topomapviewer/public?lang=nl&Stafkaarten en zo staat dan weer op ngi.be.
  85. 85. Marker Clusteringhttp://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/examples.htmlVoor het weergeven van heel wat markers is een markerclusterer handig. Voor gebruik inGoogle Maps bestaat er een inplooibare plugin.
  86. 86. Marker Clustering (PHP)http://www.appelsiini.net/2008/11/introduction-to-marker-clustering-with-google-mapsVoor zij die in PHP markers willen clusteren ... je zal wel enkele formules herkennen :-)
  87. 87. Want Moar?GISD3LeafLetTileServerOpenStreetMapOpenLayersMapBoxTileMillMrSIDGeospatial SQL
  88. 88. #GEOSHIZZLEFronteers 25/04/13 @ KaHo Sint-LievenBraintwists of a mapping aficionado
  89. 89. SOURCES• http://www.nationalgeographic.com/features/2000/exploration/projections/• http://kartoweb.itc.nl/geometrics/map%20projections/mappro.html• http://www.1worldglobes.com/images/columbus_globes/globe_gores_assembly_lg.jpg• http://www.genekeyes.com/CAHILL-1909/fig.1-2-55.jpg• http://www-personal.umich.edu/~sarhaus/UnivChicago/tigdd27proj.html• http://earth.rice.edu/mtpe/geo/geosphere/topics/mapprojections.html• https://en.wikipedia.org/wiki/Map_projection• http://en.wikipedia.org/wiki/Distortion• https://www.e-education.psu.edu/natureofgeoinfo/c2_p29.html• http://upload.wikimedia.org/wikipedia/commons/8/88/Gerardus_Mercator.jpg• https://en.wikipedia.org/wiki/Tissot%27s_indicatrix• http://en.wikipedia.org/wiki/Mercator_1569_world_map• http://en.wikipedia.org/wiki/Mercator_projection• http://www.free-online-private-pilot-ground-school.com/navigation-basics.html• http://en.wikipedia.org/wiki/Datum_(geodesy)• http://en.wikipedia.org/wiki/World_Geodetic_System• http://en.wikipedia.org/wiki/Latitude• http://spatialreference.org/ref/epsg/4326/• http://spatialreference.org/ref/epsg/31300/• http://spatialreference.org/ref/epsg/31370/• http://nl.scoutwiki.org/Lambert_(Belgi%C3%AB)• http://www.ngi.be/NL/NL2-1-7.shtm• http://www.mathworks.com/help/symbolic/mupad_ug/spherical-coordinates.png• http://www.colorado.edu/geography/gcraft/notes/datum/datum.html• http://kartoweb.itc.nl/geometrics/Coordinate%20transformations/coordtrans.html• http://www.ngi.be/Common/Lambert2008/Schema_Lambert_1972_2008_nl.pdf• https://google-developers.appspot.com/maps/documentation/javascript/examples/map-coordinates• http://qfox.nl/notes/116• http://stackoverflow.com/questions/2674392/how-to-access-google-maps-api-v3-markers-div-and-its-pixel-position• http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection/• http://transition.fcc.gov/mb/audio/bickel/DDDMMSS-decimal.html• http://www.movable-type.co.uk/scripts/latlong.html• https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap• http://en.wikipedia.org/wiki/GeoJSON•

×