Visualization Using the Google Maps API
Upcoming SlideShare
Loading in...5
×
 

Visualization Using the Google Maps API

on

  • 3,619 views

Symposium Königslutter 2013

Symposium Königslutter 2013

Statistics

Views

Total Views
3,619
Views on SlideShare
3,591
Embed Views
28

Actions

Likes
6
Downloads
38
Comments
0

2 Embeds 28

http://lanyrd.com 24
https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Visualization Using the Google Maps API Visualization Using the Google Maps API Presentation Transcript

    • Visualization using theGoogle Maps API
    • kleppe@ubilabs.netSymposium Königslutter 2013Martin Kleppe
    • Selected Clients
    • Maps API
    • > 150 Features> 150 Features
    • 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
    • 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
    • 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
    • New Features
    • http://www.googleapis.com/geolocation/v1/geolocate?{homeMobileCountryCode: 310,homeMobileNetworkCode: 260,radioType: "gsm",carrier: "T-Mobile",cellTowers: [{ cellId: …, signalStrength: … }],wifiAccessPoints: [{ macAddress: …, signalStrength: 8, … }]}
    • 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: 1}});
    • 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><description>Additional information</description><Point><coordinates>122.0822035425683,37.42228990140251,0</coordinates></Point></Placemark></kml>
    • <?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>
    • 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], [101.0, 1.0],[100.0, 1.0], [100.0, 0.0]]]},properties: {...}}]}
    • TopoJSON
    • {"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],[ ...
    • {"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],[ ...
    • {"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],[ ...
    • 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> google.maps.visualization.DemographicsLayer> google.maps.visualization.HeatmapLayer> google.maps.visualization.WeightedLocation
    • 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
    • new google.maps.visualization.MapsEngineLayer({mapId: 10446176163891957399-13516001307527776624-4,layerKey: layer_00001,map: map});
    • 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
    • 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
    • Heatmap Layer
    • 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});
    • How to Animate> 10 Million Features?
    • Canvas Layer
    • // 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);
    • WebGL
    • // 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);});
    • Heatmap ToolDEMO
    • D3.js - Data Driven Documents
    • D3 Crossfilterhttp://square.github.io/crossfilter/
    • DEBS Grand Challange 2013
    • Q&A
    • Martin Kleppekleppe@ubilabs.net