Add vector example

mapgears · Oct 2, 2015 · 598842f · 598842f
1 parent fc1b30c
commit 598842f
Show file tree

Hide file tree

Showing 2 changed files with 99 additions and 0 deletions.
diff --git a/examples/vector.html b/examples/vector.html
@@ -0,0 +1,49 @@
+<?xml version='1.0' encoding='UTF-8'?>
+<!DOCTYPE HTML>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="robots" content="index, all" />
+    <title>OL3-Google-Maps vector example</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="../ol3/css/ol.css" type="text/css" />
+    <link rel="stylesheet" href="./resources/layout.css" type="text/css" />
+  </head>
+  <body>
+
+    <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="span12">
+          <h4>Vector example</h4>
+          <p>
+            Demonstrates the synchronization between a vector layer added
+            to the OpenLayers map with Google Maps.
+          </p>
+          <p>
+            OL3-Google-Maps detects any vector layer added to the OpenLayers
+            map and synchronize the vector features added to it to the
+            Google Maps map. The geometry and style are also synchronized.
+          </p>
+
+          <input id="toggle" type="button" onclick="toggle();"
+                 value="Toggle Between OL3 and GMAPS" />
+
+        </div>
+      </div>
+    </div>
+
+    <script src="../ol3/build/ol.js"></script>
+
+    <!-- GoogleMaps API Key for 127.0.0.1 -->
+    <script type="text/javascript"
+            src="https://maps.googleapis.com/maps/api/js?v=3.21&key=AIzaSyD71KlyTCXJouZsGbgPCJ-oCtK76fZJUTQ"></script>
+
+    <script src="/@loader"></script>
+    <script src="vector.js"></script>
+  </body>
+</html>
diff --git a/examples/vector.js b/examples/vector.js
@@ -0,0 +1,50 @@
+var center = [-7908084, 6177492];
+
+var googleLayer = new olgm.layer.Google();
+
+var osmLayer = new ol.layer.Tile({
+  source: new ol.source.OSM(),
+  visible: false
+});
+
+var source = new ol.source.Vector();
+var feature = new ol.Feature(new ol.geom.Point(center));
+feature.setStyle(new ol.style.Style({
+    image: new ol.style.Circle({
+      'fill': new ol.style.Fill({color: 'rgba(153,51,51,0.3)'}),
+      'stroke': new ol.style.Stroke({color: 'rgb(153,51,51)', width: 2}),
+      'radius': 20
+    })
+  }));
+source.addFeature(feature);
+var vector = new ol.layer.Vector({
+  source: source
+});
+
+var map = new ol.Map({
+  // kinetic dragPan is not recommended, thus disabled here
+  interactions: ol.interaction.defaults({
+    dragPan: false
+  }).extend([
+    new ol.interaction.DragPan()
+  ]),
+  layers: [
+    googleLayer,
+    osmLayer,
+    vector
+  ],
+  target: 'map',
+  view: new ol.View({
+    center: center,
+    zoom: 12
+  })
+});
+
+var olGM = new olgm.OLGoogleMaps({map: map}); // map is the ol.Map instance
+olGM.activate();
+
+
+function toggle() {
+  googleLayer.setVisible(!googleLayer.getVisible());
+  osmLayer.setVisible(!osmLayer.getVisible());
+};