Merge pull request #1421 from ahocevar/google-integration

Example for obtaining a Google base map
2014-02-05 20:14:28 +01:00
parent 2b46c037d7 0fa60fc0c6
commit ef200e8b03
2 changed files with 131 additions and 0 deletions
--- a/examples/google-map.html
+++ b/examples/google-map.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="chrome=1">
+    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
+    <link rel="stylesheet" href="../css/ol.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
+    <link rel="stylesheet" href="../resources/layout.css" type="text/css">
+    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
+    <style type="text/css">
+    div.ol-logo {
+      left: 65px;
+    }
+    </style>
+    <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>
+    <title>Google Maps integration example</title>
+  </head>
+  <body>
+
+    <div class="navbar navbar-inverse navbar-fixed-top">
+      <div class="navbar-inner">
+        <div class="container">
+          <a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>          
+        </div>
+      </div>
+    </div>
+
+    <div class="container-fluid">
+
+      <div class="row-fluid">
+        <div class="span12">
+          <div id="map" class="map"></div>
+        </div>
+      </div>
+
+      <div class="row-fluid">
+
+        <div class="span4">
+          <h4 id="title">Google Maps integration example</h4>
+          <p id="shortdesc">Example of a GMaps map with an ol3 map as control, to give users a Google base map with ol3 content on top.</p>
+          <div id="docs">
+            <p>See the <a href="google-map.js" target="_blank">google-map.js source</a> to see how this is done.</p>
+          </div>
+          <div id="tags">google</div>
+        </div>
+
+      </div>
+
+    </div>
+
+    <script src="jquery.min.js" type="text/javascript"></script>
+    <script src="loader.js?id=google-map" type="text/javascript"></script>
+    <script src="../resources/example-behaviour.js" type="text/javascript"></script>
+
+  </body>
+</html>
--- a/examples/google-map.js
+++ b/examples/google-map.js
@@ -0,0 +1,74 @@
+// 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.proj');
+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'), {
+  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.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();
+  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());
+  });
+});