diff --git a/examples/vector.html b/examples/vector.html new file mode 100644 index 0000000..7311611 --- /dev/null +++ b/examples/vector.html @@ -0,0 +1,49 @@ + + + + + + + OL3-Google-Maps vector example + + + + + + +
+
+
+
+
+
+
+
+

Vector example

+

+ Demonstrates the synchronization between a vector layer added + to the OpenLayers map with Google Maps. +

+

+ 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. +

+ + + +
+
+
+ + + + + + + + + + diff --git a/examples/vector.js b/examples/vector.js new file mode 100644 index 0000000..a50ccb7 --- /dev/null +++ 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()); +};