Symposium Königslutter 2013

1. Visualization using the
Google Maps API

2. kleppe@ubilabs.net
Symposium Königslutter 2013
Martin Kleppe

5. Selected Clients

8. Maps API

9. > 150 Features> 150 Features

10. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

11. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

12. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle
ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Ani
mation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circ
le GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder G
eocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent Geocode
rGeometry GeocoderLocationType DirectionsRenderer DirectionsService Direction
sRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus Directions
Result DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time Tr
ansitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationSe
rvice LocationElevationRequest PathElevationRequest ElevationResult Elevation
Status MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService Dista
nceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMat
rixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map Types
MapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle Ma
pTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingL
ayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatma
p FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerS
tatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer Street
View StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData S
treetViewLocation StreetViewTileData StreetViewService StreetViewStatus Event
s MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCO
bject MVCArray Geometry Library encoding spherical poly AdSense Library AdUni
t AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEv
ent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest Pla
ceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesService
PlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager O
verlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer Tempe
ratureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherC
onditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation

13. New Features

26. http://www.googleapis.com/geolocation/v1/geolocate?
{
homeMobileCountryCode: 310,
homeMobileNetworkCode: 260,
radioType: "gsm",
carrier: "T-Mobile",
cellTowers: [{ cellId: …, signalStrength: … }],
wifiAccessPoints: [{ macAddress: …, signalStrength: 8, … }]
}

27. http://www.googleapis.com/geolocation/v1/geolocate?
{
location: {
lat: 51.098765,
lng: 10.123456
},
accuracy: 1200.4
}

28. Icons & Symbols

30. new google.maps.Marker({
icon: 'path/to/image.png'
});

31. new google.maps.Marker({
icon: google.maps.SymbolPath.CIRCLE
});

32. new google.maps.Marker({
icon: {
path: 'M 125,5 155,90 245,90 175,145 200,230 ... z',
fillColor: 'yellow',
strokeColor: 'gold',
scale: 1
}
});

35. Vector

36. Keyhole Markup Language

38. <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Simple placemark</name>
<description>Additional information</description>
<Point>
<coordinates>
122.0822035425683,
37.42228990140251,
0
</coordinates>
</Point>
</Placemark>
</kml>

39. <?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Placemark>
<name>Simple placemark</name>
<description>Additional information</description>
<Point>
<coordinates>
122.0822035425683,
37.42228990140251,
0
</coordinates>
</Point>
</Placemark>
</kml>

40. GeoJSON

41. {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: ...
},
properties: {
...
}
}
]
}

42. {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Polygon",
coordinates: [
[
[100.0, 0.0], [101.0, 0.0], [101.0, 1.0],
[100.0, 1.0], [100.0, 0.0]
]
]
},
properties: {
...
}
}
]
}

43. TopoJSON

45. {"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,
624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"nam
e":"Germany","iso_a2":"DE","id":"DEU","continent":"Europe"}}[58,-27],[-10
,-56],[-22,-35],[-3,-42],[-33,-19],[-6,-13]],[[32791,14932],[-26,-2],[7,3
1],[23,21],[38,14],[-24,-35],[-7,-16],[-11,-13]],[[33931,14945],[11,-8],[
9,4],[9,8],[9,19],[33,27],[31,3],[-10,-28],[74,-50],[-6,-39],[14,-32],[-3
0,-10],[-24,-33],[21,-13],[12,-28],[-25,-7],[-54,16],[-28,-3],[3,26],[-9,
10],[-33,-5],[-14,-57],[-10,-5],[-12,9],[9,37],[-14,6],[-14,-1],[-42,-27]
,[-12,-1],[-25,32],[79,42],[-33,21],[-7,26],[5,36],[-29,-5],[-28,-14],[-1
3,-2],[-11,12],[4,26],[23,43],[18,45],[36,22],[21,17],[28,8],[12,16],[26,
1],[15,-37],[-1,-22],[-12,-24],[-6,-61]],[[34062,15087],[4,-10],[56,5],[1
5,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[331
52,15053],[-35,-20],[-21,6],[-33,24],[45,7],[4,70],[22,27],[43,-16],[-26,
-36],[-9,-28],[9,-24],[1,-10]],[[34480,15244],[-24,-26],[-61,39],[-16,25]
,[7,19],[98,17],[26,-9],[12,-40],[-42,-25]],[[34161,15338],[26,-77],[40,-
38],[-15,-34],[-38,4],[-41,-8],[-9,38],[15,28],[-15,25],[-37,-6],[-49,-13
],[-33,-19],[-43,-41],[-34,-23],[-113,-61],[-74,-88],[-53,-93],[-32,-63],
[-47,-5],[-11,-23],[19,-18],[15,-8],[35,-7],[-6,-27],[-24,-8],[3,-21],[25
,-32],[5,-46],[-29,-7],[-44,49],[-50,5],[-39,23],[-25,33],[-24,-7],[-18,-
47],[11,-52],[-21,-31],[-24,14],[-9,62],[-23,11],[-32,1],[-77,-67],[-28,-
2],[-14,-34],[-45,-38],[-29,-31],[-71,-102],[-40,-43],[-76,-24],[-30,3],[
-18,10],[-27,7],[-28,1],[-9,-27],[44,-88],[-24,-30],[-53,2],[-26,25],[-21
,-24],[-17,-23],[-17,-34],[26,-72],[41,-33],[30,-5],[11,-27],[-65,-11],[-
44,-63],[-20,-44],[-23,-38],[3,-44],[34,-66],[46,-47],[46,-4],[60,15],[14
,13],[59,7],[26,46],[19,3],[17,-8],[27,-2],[15,30],[20,11],[28,-8],[54,1]
,[15,-27],[-17,-30],[-33,-42],[-31,23],[-27,-4],[-15,-22],[29,-47],[ ...

46. {"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,
624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"nam
e":"Germany","iso_a2":"DE","id":"DEU","continent":"Europe"}}[58,-27],[-10
,-56],[-22,-35],[-3,-42],[-33,-19],[-6,-13]],[[32791,14932],[-26,-2],[7,3
1],[23,21],[38,14],[-24,-35],[-7,-16],[-11,-13]],[[33931,14945],[11,-8],[
9,4],[9,8],[9,19],[33,27],[31,3],[-10,-28],[74,-50],[-6,-39],[14,-32],[-3
0,-10],[-24,-33],[21,-13],[12,-28],[-25,-7],[-54,16],[-28,-3],[3,26],[-9,
10],[-33,-5],[-14,-57],[-10,-5],[-12,9],[9,37],[-14,6],[-14,-1],[-42,-27]
,[-12,-1],[-25,32],[79,42],[-33,21],[-7,26],[5,36],[-29,-5],[-28,-14],[-1
3,-2],[-11,12],[4,26],[23,43],[18,45],[36,22],[21,17],[28,8],[12,16],[26,
1],[15,-37],[-1,-22],[-12,-24],[-6,-61]],[[34062,15087],[4,-10],[56,5],[1
5,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[331
52,15053],[-35,-20],[-21,6],[-33,24],[45,7],[4,70],[22,27],[43,-16],[-26,
-36],[-9,-28],[9,-24],[1,-10]],[[34480,15244],[-24,-26],[-61,39],[-16,25]
,[7,19],[98,17],[26,-9],[12,-40],[-42,-25]],[[34161,15338],[26,-77],[40,-
38],[-15,-34],[-38,4],[-41,-8],[-9,38],[15,28],[-15,25],[-37,-6],[-49,-13
],[-33,-19],[-43,-41],[-34,-23],[-113,-61],[-74,-88],[-53,-93],[-32,-63],
[-47,-5],[-11,-23],[19,-18],[15,-8],[35,-7],[-6,-27],[-24,-8],[3,-21],[25
,-32],[5,-46],[-29,-7],[-44,49],[-50,5],[-39,23],[-25,33],[-24,-7],[-18,-
47],[11,-52],[-21,-31],[-24,14],[-9,62],[-23,11],[-32,1],[-77,-67],[-28,-
2],[-14,-34],[-45,-38],[-29,-31],[-71,-102],[-40,-43],[-76,-24],[-30,3],[
-18,10],[-27,7],[-28,1],[-9,-27],[44,-88],[-24,-30],[-53,2],[-26,25],[-21
,-24],[-17,-23],[-17,-34],[26,-72],[41,-33],[30,-5],[11,-27],[-65,-11],[-
44,-63],[-20,-44],[-23,-38],[3,-44],[34,-66],[46,-47],[46,-4],[60,15],[14
,13],[59,7],[26,46],[19,3],[17,-8],[27,-2],[15,30],[20,11],[28,-8],[54,1]
,[15,-27],[-17,-30],[-33,-42],[-31,23],[-27,-4],[-15,-22],[29,-47],[ ...

47. {"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,
624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"nam
e":"Germany","iso_a2":"DE","id":"DEU","continent":"Europe"}}[58,-27],[-10
,-56],[-22,-35],[-3,-42],[-33,-19],[-6,-13]],[[32791,14932],[-26,-2],[7,3
1],[23,21],[38,14],[-24,-35],[-7,-16],[-11,-13]],[[33931,14945],[11,-8],[
9,4],[9,8],[9,19],[33,27],[31,3],[-10,-28],[74,-50],[-6,-39],[14,-32],[-3
0,-10],[-24,-33],[21,-13],[12,-28],[-25,-7],[-54,16],[-28,-3],[3,26],[-9,
10],[-33,-5],[-14,-57],[-10,-5],[-12,9],[9,37],[-14,6],[-14,-1],[-42,-27]
,[-12,-1],[-25,32],[79,42],[-33,21],[-7,26],[5,36],[-29,-5],[-28,-14],[-1
3,-2],[-11,12],[4,26],[23,43],[18,45],[36,22],[21,17],[28,8],[12,16],[26,
1],[15,-37],[-1,-22],[-12,-24],[-6,-61]],[[34062,15087],[4,-10],[56,5],[1
5,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[331
52,15053],[-35,-20],[-21,6],[-33,24],[45,7],[4,70],[22,27],[43,-16],[-26,
-36],[-9,-28],[9,-24],[1,-10]],[[34480,15244],[-24,-26],[-61,39],[-16,25]
,[7,19],[98,17],[26,-9],[12,-40],[-42,-25]],[[34161,15338],[26,-77],[40,-
38],[-15,-34],[-38,4],[-41,-8],[-9,38],[15,28],[-15,25],[-37,-6],[-49,-13
],[-33,-19],[-43,-41],[-34,-23],[-113,-61],[-74,-88],[-53,-93],[-32,-63],
[-47,-5],[-11,-23],[19,-18],[15,-8],[35,-7],[-6,-27],[-24,-8],[3,-21],[25
,-32],[5,-46],[-29,-7],[-44,49],[-50,5],[-39,23],[-25,33],[-24,-7],[-18,-
47],[11,-52],[-21,-31],[-24,14],[-9,62],[-23,11],[-32,1],[-77,-67],[-28,-
2],[-14,-34],[-45,-38],[-29,-31],[-71,-102],[-40,-43],[-76,-24],[-30,3],[
-18,10],[-27,7],[-28,1],[-9,-27],[44,-88],[-24,-30],[-53,2],[-26,25],[-21
,-24],[-17,-23],[-17,-34],[26,-72],[41,-33],[30,-5],[11,-27],[-65,-11],[-
44,-63],[-20,-44],[-23,-38],[3,-44],[34,-66],[46,-47],[46,-4],[60,15],[14
,13],[59,7],[26,46],[19,3],[17,-8],[27,-2],[15,30],[20,11],[28,-8],[54,1]
,[15,-27],[-17,-30],[-33,-42],[-31,23],[-27,-4],[-15,-22],[29,-47],[ ...

48. topojson Command Line
.json, .shp, .csv

50. How to Display
> 1 Million Features?

51. Clusterer

53. Fusion Tables

56. Google Maps Engine

61. Visualization Library

62. http://maps.googleapis.com/maps/api/js?
sensor=false
> google.maps.*

63. http://maps.googleapis.com/maps/api/js?
sensor=false&
libraries=visualization
> google.maps.visualization.*

64. http://maps.googleapis.com/maps/api/js?
sensor=false&
libraries=visualization
> google.maps.visualization.MapsEngineLayer
> google.maps.visualization.DemographicsLayer
> google.maps.visualization.HeatmapLayer
> google.maps.visualization.WeightedLocation

65. http://maps.googleapis.com/maps/api/js?
sensor=false&
libraries=visualization
> google.maps.visualization.MapsEngineLayer
> google.maps.visualization.DemographicsLayer
> google.maps.visualization.HeatmapLayer
> google.maps.visualization.WeightedLocation

66. new google.maps.visualization.MapsEngineLayer({
mapId: '10446176163891957399-13516001307527776624-4',
layerKey: 'layer_00001',
map: map
});

67. http://maps.googleapis.com/maps/api/js?
sensor=false&
libraries=visualization
> google.maps.visualization.MapsEngineLayer
> google.maps.visualization.DemographicsLayer
> google.maps.visualization.HeatmapLayer
> google.maps.visualization.WeightedLocation

68. http://maps.googleapis.com/maps/api/js?
sensor=false&
libraries=visualization
> google.maps.visualization.MapsEngineLayer
> google.maps.visualization.DemographicsLayer
> google.maps.visualization.HeatmapLayer
> google.maps.visualization.WeightedLocation

69. Heatmap Layer

72. var data = [
new google.maps.LatLng(37.782551, -122.445367),
new google.maps.LatLng(37.782745, -122.444586),
new google.maps.LatLng(37.782842, -122.443688),
...
];
new google.maps.visualization.HeatmapLayer({
data: data
});

73. How to Animate
> 10 Million Features?

74. Canvas Layer

75. // http://google-maps-utility-library-v3.googlecode.com/
// svn/trunk/canvaslayer/src/CanvasLayer.js
var canvasLayer = new CanvasLayer({
map: map,
resizeHandler: resize,
animate: false,
updateHandler: update
});
var context = canvasLayer.canvas.getContext('2d');

78. WebGL

80. // https://github.com/ubilabs/google-maps-api-threejs-layer
new ThreejsLayer({ map: map }, function(layer){
var geometry = new THREE.Geometry(),
location = new google.maps.LatLng(lat, lng),
vertex = layer.fromLatLngToVertex(location);
geometry.vertices.push( vertex );
var particles = new THREE.ParticleSystem(geometry, material);
layer.add(particles);
});

82. Heatmap Tool
DEMO

84. D3.js - Data Driven Documents

85. D3 Crossfilter
http://square.github.io/crossfilter/

89. DEBS Grand Challange 2013

92. Q&A

93. Martin Kleppe
kleppe@ubilabs.net