Interactive Visualizationsin the Browser@whereberlin
@aemkeiMartin Kleppe
Selected Clients
Maps API
> 150 Features> 150 Features
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition Overlays Marker MarkerImage M...
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition Overlays Marker MarkerImage M...
Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition Overlays Marker MarkerImage M...
New Features
http://www.googleapis.com/geolocation/v1/geolocate?{homeMobileCountryCode: 310,homeMobileNetworkCode: 260,radioType: "gsm"...
http://www.googleapis.com/geolocation/v1/geolocate?{location: {lat: 51.098765,lng: 10.123456},accuracy: 1200.4}
Icons & Symbols
new google.maps.Marker({icon: path/to/image.png});
new google.maps.Marker({icon: google.maps.SymbolPath.CIRCLE});
new google.maps.Marker({icon: {path: M 125,5 155,90 245,90 175,145 200,230 ... z,fillColor: yellow,strokeColor: gold,scale...
Vector
Keyhole Markup Language
<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Placemark><name>Simple placemark</name>...
<?xml version="1.0" encoding="UTF-8"?><kml xmlns="http://www.opengis.net/kml/2.2"><Placemark><name>Simple placemark</name>...
GeoJSON
{type: "FeatureCollection",features: [{type: "Feature",geometry: {type: ...},properties: {...}}]}
{type: "FeatureCollection",features: [{type: "Feature",geometry: {type: "Polygon",coordinates: [[[100.0, 0.0], [101.0, 0.0...
TopoJSON
{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[6...
{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[6...
{"type":"MultiPolygon","arcs":[[[618,619]],[[620]],[[621]],[[622]],[[623,624,-618,-217,-486,625,626,-229,627,628,629]],[[6...
topojson Command Line.json, .shp, .csv
How to Display> 1 Million Features?
Clusterer
Fusion Tables
Google Maps Engine
Visualization Library
http://maps.googleapis.com/maps/api/js?sensor=false> google.maps.*
http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization> google.maps.visualization.*
http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization> google.maps.visualization.MapsEngineLayer> go...
http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization> google.maps.visualization.MapsEngineLayer> go...
new google.maps.visualization.MapsEngineLayer({mapId: 10446176163891957399-13516001307527776624-4,layerKey: layer_00001,ma...
http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization> google.maps.visualization.MapsEngineLayer> go...
Heatmap Layer
var data = [new google.maps.LatLng(37.782551, -122.445367),new google.maps.LatLng(37.782745, -122.444586),new google.maps....
How to Animate> 10 Million Features?
Canvas Layer
// http://google-maps-utility-library-v3.googlecode.com/// svn/trunk/canvaslayer/src/CanvasLayer.jsvar canvasLayer = new C...
WebGL
// https://github.com/ubilabs/google-maps-api-threejs-layernew ThreejsLayer({ map: map }, function(layer){var geometry = n...
Heatmap ToolDEMO
D3.js - Data Driven Documents
D3 Crossfilterhttp://square.github.io/crossfilter/
Q&A
Martin Kleppe @aemkeikleppe@ubilabs.net
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
WhereBerlin – Interactive Visualizations in the Browser
Upcoming SlideShare
Loading in …5
×

WhereBerlin – Interactive Visualizations in the Browser

1,216 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,216
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

WhereBerlin – Interactive Visualizations in the Browser

  1. 1. Interactive Visualizationsin the Browser@whereberlin
  2. 2. @aemkeiMartin Kleppe
  3. 3. Selected Clients
  4. 4. Maps API
  5. 5. > 150 Features> 150 Features
  6. 6. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition 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
  7. 7. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition 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
  8. 8. Map MapTypeId Controls MapTypeControlStyle ScaleControlStyle ZoomControlStyleControlPosition 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
  9. 9. New Features
  10. 10. http://www.googleapis.com/geolocation/v1/geolocate?{homeMobileCountryCode: 310,homeMobileNetworkCode: 260,radioType: "gsm",carrier: "T-Mobile",cellTowers: [{ cellId: …, signalStrength: … }],wifiAccessPoints: [{ macAddress: …, signalStrength: 8, … }]}
  11. 11. http://www.googleapis.com/geolocation/v1/geolocate?{location: {lat: 51.098765,lng: 10.123456},accuracy: 1200.4}
  12. 12. Icons & Symbols
  13. 13. new google.maps.Marker({icon: path/to/image.png});
  14. 14. new google.maps.Marker({icon: google.maps.SymbolPath.CIRCLE});
  15. 15. new google.maps.Marker({icon: {path: M 125,5 155,90 245,90 175,145 200,230 ... z,fillColor: yellow,strokeColor: gold,scale: 1}});
  16. 16. Vector
  17. 17. Keyhole Markup Language
  18. 18. <?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>
  19. 19. <?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>
  20. 20. GeoJSON
  21. 21. {type: "FeatureCollection",features: [{type: "Feature",geometry: {type: ...},properties: {...}}]}
  22. 22. {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: {...}}]}
  23. 23. TopoJSON
  24. 24. {"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],[ ...
  25. 25. {"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],[ ...
  26. 26. {"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],[ ...
  27. 27. topojson Command Line.json, .shp, .csv
  28. 28. How to Display> 1 Million Features?
  29. 29. Clusterer
  30. 30. Fusion Tables
  31. 31. Google Maps Engine
  32. 32. Visualization Library
  33. 33. http://maps.googleapis.com/maps/api/js?sensor=false> google.maps.*
  34. 34. http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization> google.maps.visualization.*
  35. 35. 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
  36. 36. 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
  37. 37. new google.maps.visualization.MapsEngineLayer({mapId: 10446176163891957399-13516001307527776624-4,layerKey: layer_00001,map: map});
  38. 38. 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
  39. 39. Heatmap Layer
  40. 40. 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});
  41. 41. How to Animate> 10 Million Features?
  42. 42. Canvas Layer
  43. 43. // http://google-maps-utility-library-v3.googlecode.com/// svn/trunk/canvaslayer/src/CanvasLayer.jsvar canvasLayer = new CanvasLayer({map: map,resizeHandler: resize,animate: false,updateHandler: update});var context = canvasLayer.canvas.getContext(2d);
  44. 44. WebGL
  45. 45. // https://github.com/ubilabs/google-maps-api-threejs-layernew 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);});
  46. 46. Heatmap ToolDEMO
  47. 47. D3.js - Data Driven Documents
  48. 48. D3 Crossfilterhttp://square.github.io/crossfilter/
  49. 49. Q&A
  50. 50. Martin Kleppe @aemkeikleppe@ubilabs.net

×