How to use the olgm/OLGoogleMaps.js function in olgm
To help you get started, we’ve selected a few olgm examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mapgears / ol3-google-maps / examples / wmts.js View on Github 
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
layers: [
googleLayer,
osmLayer,
wmtsLayer
],
target: 'map',
view: new View({
center: center,
zoom: 4
})
});
const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();
document.getElementById('toggle').addEventListener('click', function() {
googleLayer.setVisible(!googleLayer.getVisible());
osmLayer.setVisible(!osmLayer.getVisible());
});layers: [
googleLayer,
osmLayer,
tileWMSLayer,
tileWMSLayer2,
imageWMSLayer,
imageWMSLayer2
],
target: 'map',
view: new View({
center: center,
zoom: 4
})
});
const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();
document.getElementById('toggleOSM').addEventListener('click', function() {
googleLayer.setVisible(!googleLayer.getVisible());
osmLayer.setVisible(!osmLayer.getVisible());
});
document.getElementById('toggleWMS').addEventListener('click', function() {
tileWMSLayer.setVisible(!tileWMSLayer.getVisible());
tileWMSLayer2.setVisible(!tileWMSLayer2.getVisible());
imageWMSLayer.setVisible(!imageWMSLayer.getVisible());
imageWMSLayer2.setVisible(!imageWMSLayer2.getVisible());
const spanText = tileWMSLayer.getVisible() ? 'tiled' : 'image';
document.getElementById('currentMode').innerHTML = spanText;
});const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
layers: [
regularLayer,
themedLayer
],
target: 'map',
view: new View({
center: center,
zoom: 12
})
});
const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();
document.getElementById('toggle').addEventListener('click', function() {
regularLayer.setVisible(!regularLayer.getVisible());
themedLayer.setVisible(!themedLayer.getVisible());
});interactions: defaultInteractions(),
layers: [
osmLayer,
tileWMSLayer,
imageWMSLayer,
googleLayer,
vector
],
target: 'map',
view: new View({
center: center,
zoom: 4
})
});
const olGM = new OLGoogleMaps({
map: map,
watch: watchOptions
}); // map is the Map instance
olGM.activate();
document.getElementById('toggleOSM').addEventListener('click', function() {
googleLayer.setVisible(!googleLayer.getVisible());
osmLayer.setVisible(!osmLayer.getVisible());
});
document.getElementById('toggleWatch').addEventListener('click', function(event) {
if (event.target.matches('input')) {
const option = event.target.value;
watchOptions[option] = !watchOptions[option];
olGM.setWatchOptions(watchOptions);const map = new Map({
interactions: interactions,
layers: [
googleLayer,
osmLayer,
vector
],
target: 'map',
view: new View({
center: center,
rotation: Math.PI / 3,
zoom: 12
})
});
const olGM = new OLGoogleMaps({
map: map,
mapIconOptions: {
useCanvas: true
}}); // map is the Map instance
olGM.activate();
document.getElementById('toggle').addEventListener('click', function() {
googleLayer.setVisible(!googleLayer.getVisible());
osmLayer.setVisible(!osmLayer.getVisible());
});target: 'map',
view: new View({
center: center,
zoom: 12
})
});
const olGM = new OLGoogleMaps({
map: map
});
// Get the map in the overview box
const overviewMap = overviewMapControl.getOverviewMap();
// Setup an instance of olGM for the overview
const overviewOLGM = new OLGoogleMaps({
map: overviewMap
});
// Activate it
overviewOLGM.activate();
// Activate the main map only when google maps is done loading in the overview.
google.maps.event.addListenerOnce(overviewOLGM.gmap, 'idle', function() {
olGM.activate();
});
document.getElementById('toggle').addEventListener('click', function() {
googleLayer.setVisible(!googleLayer.getVisible());
osmLayer.setVisible(!osmLayer.getVisible());
});layers: [
googleLayer,
osmLayer,
imageWMSLayer,
imageWMSLayer2,
tileWMSLayer,
wmtsLayer
],
target: 'map',
view: new View({
center: center,
zoom: 4
})
});
const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();
createLayerTree();
function createLayerTree() {
const layerTreeElement = document.getElementById('layerTree');
layerTreeElement.innerHTML = '';
const layers = map.getLayers();
for (let i = layers.getLength() - 1; i >= 0; i--) {
const layer = layers.getArray()[i];
const item = document.createElement('div');
item.style.backgroundColor = layer.color;
const moreText = layer.getVisible() ? '' : '(invisible) ';
const itemText = document.createTextNode(moreText + layer.name);interactions: defaultInteractions(),
layers: [
googleLayer,
osmLayer,
tileJSONLayer,
imageWMSLayer,
vectorLayer
],
target: 'map',
view: new View({
center: center,
zoom: 4
})
});
const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();
document.getElementById('toggle').addEventListener('click', function() {
googleLayer.setVisible(!googleLayer.getVisible());
osmLayer.setVisible(!osmLayer.getVisible());
});const googleLayer = new GoogleLayer();
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
layers: [
googleLayer
],
target: 'map',
view: new View({
center: center,
zoom: 12
})
});
const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
olGM.activate();}
return event.type == 'pointermove';
},
style: new Style({
fill: new Fill({
color: [255, 23, 180, 0.2]
}),
stroke: new Stroke({
color: [255, 23, 180, 1]
})
})
});
map.addInteraction(select);
const olGM = new OLGoogleMaps({
map: map,
mapIconOptions: {
useCanvas: true
}});
olGM.activate();
document.getElementById('toggle').onclick = function() {
olGM.toggle();
};
document.getElementById('add-point').onclick = function() {
addMarkerFeatures(3);
};
document.getElementById('clear-point').onclick = function() {
vector.getSource().clear();
