Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
visible: false
});
const themedLayer = new GoogleLayer({
styles: [{
'stylers': [{
'saturation': -100
}, {
'gamma': 2.25
}]
}]
});
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());
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';
const center = [-7908084, 6177492];
// This dummy layer tells Google Maps to switch to its default map type
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();
const gmap = olGM.getGoogleMapsMap();
const trafficLayer = new google.maps.TrafficLayer();
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getExtentTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds
}),
style: 'default',
wrapX: true
})
});
wmtsLayer.name = 'Tile WMTS - Orange USA';
wmtsLayer.color = 'rgb(241, 207, 185)';
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
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
const feature = new Feature(new Point(center));
feature.setStyle(new Style({
image: new Circle({
'fill': new Fill({color: 'rgba(153,51,51,0.3)'}),
'stroke': new Stroke({color: 'rgb(153,51,51)', width: 2}),
'radius': 20
})
}));
source.addFeature(feature);
const vector = new VectorLayer({
source: source
});
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
controls: defaultControls().extend([
new ZoomSlider()
]),
layers: [
googleLayer,
osmLayer,
vector
],
target: 'map',
view: new View({
center: center,
zoom: 12
})
});
const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
}),
zIndex: i
})
);
markers.push(marker);
}
source.addFeatures(markers);
const vector = new VectorLayer({
source: source
});
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
layers: [
googleLayer,
osmLayer,
vector
],
target: 'map',
view: new View({
center: center,
zoom: 12
})
});
const olGM = new OLGoogleMaps({
map: map,
mapIconOptions: {
useCanvas: true
const osmLayer = new TileLayer({
source: new OSMSource(),
visible: false
});
const tmsLayer = new TileLayer({
source: new XYZSource({
url: 'http://v3.cartalib.mapgears.com/mapcache/tms/1.0.0/' +
'mapgears_basemap@g/{z}/{x}/{-y}.'
}),
opacity: 1
});
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
layers: [
googleLayer,
osmLayer,
tmsLayer
],
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() {
const lat = 50;
const lng = -70;
const zoom = 5;
//var extent = [-83, 44, -57, 55];
// const extent = [-9259955, 5467881, -6324773, 7424669];
const osmLayer = new TileLayer({
source: new OSMSource(),
visible: false
});
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions().extend([
new Drag()
]),
layers: [
osmLayer,
new GoogleLayer()
],
target: 'map',
view: new View({
center: transform([lng, lat], 'EPSG:4326', 'EPSG:3857'),
zoom: zoom
})
});
// FIXME - style override, this should be managed internally
/*
gmap.data.setStyle({
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';
const center = [-7908084, 6177492];
// This dummy layer tells Google Maps to switch to its default map type
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();
}))
})
);
markers.push(marker);
}
vectorSource.addFeatures(markers);
const vectorLayer = new VectorLayer({
source: vectorSource,
minResolution: 4000,
maxResolution: 10000
});
const map = new Map({
// use OL3-Google-Maps recommended default interactions
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();
})),
zIndex: i
})
);
markers.push(marker);
}
source.addFeatures(markers);
const vector = new VectorLayer({
source: source
});
const map = new Map({
// use OL3-Google-Maps recommended default interactions
interactions: defaultInteractions(),
layers: [
osmLayer,
tileWMSLayer,
imageWMSLayer,
googleLayer,
vector
],
target: 'map',
view: new View({
center: center,
zoom: 4
})
});
const olGM = new OLGoogleMaps({
map: map,