From 6aef5eed74db69089c0d1da635f05908373d7590 Mon Sep 17 00:00:00 2001 From: ahocevar Date: Fri, 20 Dec 2013 11:47:19 +0100 Subject: [PATCH 1/2] Example for obtaining a Google base map By simply defining the ol3 map as control on a GMaps map, we can have a Google base map with arbitrary ol3 content on top. This works with all ol3 renderers. --- examples/google-map.html | 52 +++++++++++++++++++++++++++++++++++ examples/google-map.js | 59 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 111 insertions(+) create mode 100644 examples/google-map.html create mode 100644 examples/google-map.js diff --git a/examples/google-map.html b/examples/google-map.html new file mode 100644 index 0000000000..31896f93cd --- /dev/null +++ b/examples/google-map.html @@ -0,0 +1,52 @@ + + + + + + + + + + + + Google Maps integration example + + + +
+
+
+ OpenLayers 3 Examples +
+
+
+ +
+ +
+
+
+
+
+ +
+ +
+

Google Maps integration example

+

Example of a GMaps map with an ol3 map as control, to give users a Google base map with ol3 content on top.

+
+

See the google-map.js source to see how this is done.

+
+
google
+
+ +
+ +
+ + + + + + + diff --git a/examples/google-map.js b/examples/google-map.js new file mode 100644 index 0000000000..7207961a0d --- /dev/null +++ b/examples/google-map.js @@ -0,0 +1,59 @@ +goog.require('ol.Map'); +goog.require('ol.RendererHint'); +goog.require('ol.View2D'); +goog.require('ol.interaction'); +goog.require('ol.interaction.DragPan'); +goog.require('ol.layer.Vector'); +goog.require('ol.parser.GeoJSON'); +goog.require('ol.proj'); +goog.require('ol.source.Vector'); + + +var gmap = new google.maps.Map(document.getElementById('map'), { + center: new google.maps.LatLng(0, 0), + zoom: 1, + disableDefaultUI: true, + keyboardShortcuts: false, + draggable: false, + disableDoubleClickZoom: true, + scrollwheel: false, + streetViewControl: false +}); + +var olmap = document.createElement('div'); +olmap.style['width'] = '100%'; +olmap.style['height'] = '100%'; +gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olmap); + +google.maps.event.addListenerOnce(gmap, 'tilesloaded', function() { + var vector = new ol.layer.Vector({ + source: new ol.source.Vector({ + parser: new ol.parser.GeoJSON(), + url: 'data/countries.geojson' + }) + }); + + var center = gmap.getCenter(); + var map = new ol.Map({ + layers: [vector], + interactions: ol.interaction.defaults({dragPan: false}) + .extend([new ol.interaction.DragPan({kinetic: false})]), + renderer: ol.RendererHint.CANVAS, + target: olmap, + view: new ol.View2D({ + center: ol.proj.transform([center.lng(), center.lat()], + 'EPSG:4326', 'EPSG:3857'), + zoom: gmap.getZoom() + }) + }); + + var view = map.getView().getView2D(); + view.on('change:center', function() { + var center = ol.proj.transform(view.getCenter(), + 'EPSG:3857', 'EPSG:4326'); + gmap.setCenter(new google.maps.LatLng(center[1], center[0])); + }); + view.on('change:resolution', function() { + gmap.setZoom(view.getZoom()); + }); +}); From 0fa60fc0c68b02110c7a2c90d04dd478138871bb Mon Sep 17 00:00:00 2001 From: ahocevar Date: Wed, 5 Feb 2014 18:55:55 +0100 Subject: [PATCH 2/2] Updating example to use the new vector API --- examples/google-map.html | 5 +++++ examples/google-map.js | 27 +++++++++++++++++++++------ 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/examples/google-map.html b/examples/google-map.html index 31896f93cd..82760fdfaa 100644 --- a/examples/google-map.html +++ b/examples/google-map.html @@ -8,6 +8,11 @@ + Google Maps integration example diff --git a/examples/google-map.js b/examples/google-map.js index 7207961a0d..53ee9fa843 100644 --- a/examples/google-map.js +++ b/examples/google-map.js @@ -1,12 +1,16 @@ +// NOCOMPILE +// This example uses the GMapx v3 API, which we do not have an exports file for. goog.require('ol.Map'); goog.require('ol.RendererHint'); goog.require('ol.View2D'); goog.require('ol.interaction'); goog.require('ol.interaction.DragPan'); goog.require('ol.layer.Vector'); -goog.require('ol.parser.GeoJSON'); goog.require('ol.proj'); -goog.require('ol.source.Vector'); +goog.require('ol.source.GeoJSON'); +goog.require('ol.style.Fill'); +goog.require('ol.style.Stroke'); +goog.require('ol.style.Style'); var gmap = new google.maps.Map(document.getElementById('map'), { @@ -27,10 +31,21 @@ gmap.controls[google.maps.ControlPosition.TOP_LEFT].push(olmap); google.maps.event.addListenerOnce(gmap, 'tilesloaded', function() { var vector = new ol.layer.Vector({ - source: new ol.source.Vector({ - parser: new ol.parser.GeoJSON(), - url: 'data/countries.geojson' - }) + source: new ol.source.GeoJSON({ + url: 'data/geojson/countries.geojson', + projection: 'EPSG:3857' + }), + styleFunction: function(feature, resolution) { + return [new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.6)' + }), + stroke: new ol.style.Stroke({ + color: '#319FD3', + width: 1 + }) + })]; + } }); var center = gmap.getCenter();