![Page 1: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/1.jpg)
Interactive Visualizations in the Browser
@whereberlin
![Page 2: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/2.jpg)
@aemkei
Martin Kleppe
![Page 4: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/4.jpg)
![Page 5: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/5.jpg)
Selected Clients
![Page 6: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/6.jpg)
![Page 7: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/7.jpg)
![Page 8: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/8.jpg)
Maps API
![Page 9: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/9.jpg)
> 150 Features> 150 Features
![Page 10: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/10.jpg)
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
![Page 11: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/11.jpg)
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
![Page 12: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/12.jpg)
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyle ControlPosition Overlays Marker MarkerImage MarkerShape Symbol SymbolPath Animation InfoWindow Polyline IconSequence Polygon PolyMouseEvent Rectangle Circle GroundOverlay OverlayView MapPanes MapCanvasProjection Services Geocoder GeocoderRequest GeocoderStatus GeocoderResult GeocoderAddressComponent GeocoderGeometry GeocoderLocationType DirectionsRenderer DirectionsService DirectionsRequest TravelMode UnitSystem DirectionsWaypoint DirectionsStatus DirectionsResult DirectionsRoute DirectionsLeg DirectionsStep Distance Duration Time TransitDetails TransitStop TransitLine TransitAgency TransitVehicle ElevationService LocationElevationRequest PathElevationRequest ElevationResult ElevationStatus MaxZoomService MaxZoomResult MaxZoomStatus DistanceMatrixService DistanceMatrixRequest DistanceMatrixResponse DistanceMatrixResponseRow DistanceMatrixResponseElement DistanceMatrixStatus DistanceMatrixElementStatus Map TypesMapType MapTypeRegistry Projection ImageMapType StyledMapType MapTypeStyle MapTypeStyleFeatureType MapTypeStyleElementType MapTypeStyler Layers BicyclingLayer FusionTablesLayer FusionTablesQuery FusionTablesStyle FusionTablesHeatmap FusionTablesMouseEvent FusionTablesCell KmlLayer KmlLayerMetadata KmlLayerStatus KmlMouseEvent KmlFeatureData KmlAuthor TrafficLayer TransitLayer StreetView StreetViewPanorama StreetViewLink StreetViewPov StreetViewPanoramaData StreetViewLocation StreetViewTileData StreetViewService StreetViewStatus Events MapsEventListener event MouseEvent Base LatLng LatLngBounds Point Size MVCObject MVCArray Geometry Library encoding spherical poly AdSense Library AdUnit AdFormat Panoramio Library PanoramioLayer PanoramioFeature PanoramioMouseEvent Places Library Autocomplete ComponentRestrictions PlaceDetailsRequest PlaceGeometry PlaceResult PlaceSearchRequest PlaceSearchPagination PlacesServicePlacesServiceStatus RankBy TextSearchRequest Drawing Library DrawingManager OverlayCompleteEvent OverlayType Weather Library CloudLayer WeatherLayer TemperatureUnit WindSpeedUnit LabelColor WeatherMouseEvent WeatherFeature WeatherConditions WeatherForecast Visualization Library HeatmapLayer WeightedLocation
![Page 13: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/13.jpg)
New Features
![Page 14: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/14.jpg)
![Page 15: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/15.jpg)
![Page 16: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/16.jpg)
![Page 17: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/17.jpg)
![Page 18: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/18.jpg)
![Page 19: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/19.jpg)
![Page 20: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/20.jpg)
![Page 21: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/21.jpg)
![Page 22: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/22.jpg)
![Page 23: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/23.jpg)
![Page 24: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/24.jpg)
![Page 25: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/25.jpg)
http://www.googleapis.com/geolocation/v1/geolocate?
{ homeMobileCountryCode: 310, homeMobileNetworkCode: 260, radioType: "gsm", carrier: "T-Mobile", cellTowers: [{ cellId: …, signalStrength: … }], wifiAccessPoints: [{ macAddress: …, signalStrength: 8, … }]}
![Page 26: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/26.jpg)
http://www.googleapis.com/geolocation/v1/geolocate?
{ location: { lat: 51.098765, lng: 10.123456 }, accuracy: 1200.4}
![Page 27: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/27.jpg)
Icons & Symbols
![Page 28: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/28.jpg)
![Page 29: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/29.jpg)
new google.maps.Marker({ icon: 'path/to/image.png'});
![Page 30: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/30.jpg)
new google.maps.Marker({ icon: google.maps.SymbolPath.CIRCLE});
![Page 31: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/31.jpg)
new google.maps.Marker({ icon: { path: 'M 125,5 155,90 245,90 175,145 200,230 ... z', fillColor: 'yellow', strokeColor: 'gold', scale: 1 }});
![Page 32: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/32.jpg)
![Page 33: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/33.jpg)
![Page 34: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/34.jpg)
Vector
![Page 35: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/35.jpg)
Keyhole Markup Language
![Page 36: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/36.jpg)
![Page 37: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/37.jpg)
<?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>
![Page 38: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/38.jpg)
<?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>
![Page 39: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/39.jpg)
GeoJSON
![Page 40: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/40.jpg)
{ type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: ...
}, properties: { ... } } ]}
![Page 41: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/41.jpg)
{ 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: { ... } } ]}
![Page 42: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/42.jpg)
TopoJSON
![Page 43: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/43.jpg)
![Page 44: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/44.jpg)
{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"name":"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,31],[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],[-30,-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],[-13,-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],[15,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[33152,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],[ ...
![Page 45: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/45.jpg)
{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"name":"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,31],[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],[-30,-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],[-13,-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],[15,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[33152,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],[ ...
![Page 46: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/46.jpg)
{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[630]]],"properties":{"name":"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,31],[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],[-30,-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],[-13,-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],[15,-14],[-31,-20],[-8,4],[-27,-6],[-76,15],[-18,23],[67,12],[18,-9]],[[33152,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],[ ...
![Page 47: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/47.jpg)
topojson Command Line .json, .shp, .csv
![Page 48: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/48.jpg)
![Page 49: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/49.jpg)
How to Display> 1 Million Features?
![Page 50: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/50.jpg)
Clusterer
![Page 51: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/51.jpg)
![Page 52: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/52.jpg)
Fusion Tables
![Page 53: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/53.jpg)
![Page 54: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/54.jpg)
![Page 55: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/55.jpg)
Google Maps Engine
![Page 56: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/56.jpg)
![Page 57: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/57.jpg)
![Page 58: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/58.jpg)
![Page 59: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/59.jpg)
![Page 60: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/60.jpg)
Visualization Library
![Page 61: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/61.jpg)
http://maps.googleapis.com/maps/api/js?sensor=false
> google.maps.*
![Page 62: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/62.jpg)
http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization
> google.maps.visualization.*
![Page 63: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/63.jpg)
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
![Page 64: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/64.jpg)
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
![Page 65: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/65.jpg)
new google.maps.visualization.MapsEngineLayer({ mapId: '10446176163891957399-13516001307527776624-4', layerKey: 'layer_00001', map: map});
![Page 66: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/66.jpg)
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
![Page 67: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/67.jpg)
Heatmap Layer
![Page 68: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/68.jpg)
![Page 69: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/69.jpg)
![Page 70: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/70.jpg)
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});
![Page 71: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/71.jpg)
How to Animate> 10 Million Features?
![Page 72: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/72.jpg)
Canvas Layer
![Page 73: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/73.jpg)
// 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');
![Page 74: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/74.jpg)
![Page 75: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/75.jpg)
![Page 76: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/76.jpg)
![Page 77: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/77.jpg)
![Page 78: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/78.jpg)
WebGL
![Page 79: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/79.jpg)
![Page 80: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/80.jpg)
// 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);});
![Page 81: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/81.jpg)
![Page 82: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/82.jpg)
Heatmap ToolDEMO
![Page 83: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/83.jpg)
![Page 84: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/84.jpg)
D3.js - Data Driven Documents
![Page 85: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/85.jpg)
D3 Crossfilterhttp://square.github.io/crossfilter/
![Page 86: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/86.jpg)
![Page 87: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/87.jpg)
![Page 88: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/88.jpg)
![Page 89: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/89.jpg)
Q&A
![Page 90: WhereBerlin – Interactive Visualizations in the Browser](https://reader035.vdocuments.mx/reader035/viewer/2022062513/554be4f9b4c9055a368b4867/html5/thumbnails/90.jpg)
Martin Kleppe @[email protected]