Google.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 / tms.js View on Github

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSMSource from 'ol/source/OSM.js';
import XYZSource from 'ol/source/XYZ.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';


const center = [-10997148, 4569099];

const googleLayer = new GoogleLayer();

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

mapgears / ol3-google-maps / examples / wmts.js View on Github

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSMSource from 'ol/source/OSM.js';
import WMTSSource from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {get as getProjection} from 'ol/proj.js';
import {getWidth as getExtentWidth, getTopLeft as getExtentTopLeft} from 'ol/extent.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';


const center = [-10997148, 4569099];

const googleLayer = new GoogleLayer();

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

// Setup tilegrid for wmts layer
const projection = getProjection('EPSG:3857');
const projectionExtent = projection.getExtent();
const size = getExtentWidth(projectionExtent) / 256;
const resolutions = new Array(14);
const matrixIds = new Array(14);
for (let z = 0; z &lt; 14; ++z) {
  // generate resolutions and matrixIds arrays for this WMTS
  resolutions[z] = size / Math.pow(2, z);
  matrixIds[z] = z;

mapgears / ol3-google-maps / examples / themed.js View on Github

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];

const regularLayer = new GoogleLayer({
  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(),

mapgears / ol3-google-maps / examples / themed.js View on Github

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];

const regularLayer = new GoogleLayer({
  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
  ],

mapgears / ol3-google-maps / examples / archived / layerswitcher.js View on Github

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import OSMSource from 'ol/source/OSM.js';
import LayerSwitcher from 'ol-layerswitcher';
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({
  title: 'Google',
  type: 'base'
});

const osmLayer = new TileLayer({
  source: new OSMSource(),
  title: 'OSM',
  type: 'base'
});


const map = new Map({
  // use OL3-Google-Maps recommended default interactions
  interactions: defaultInteractions(),
  layers: [
    googleLayer,

mapgears / ol3-google-maps / examples / wms.js View on Github

import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import ImageLayer from 'ol/layer/Image.js';
import OSMSource from 'ol/source/OSM.js';
import ImageWMSSource from 'ol/source/ImageWMS.js';
import TileWMSSource from 'ol/source/TileWMS.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';

const center = [-10997148, 4569099];

const googleLayer = new GoogleLayer();

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

const tileWMSLayer = new TileLayer({
  extent: [-13884991, 2870341, -7455066, 6338219],
  source: new TileWMSSource({
    url: 'http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en',
    params: {'LAYERS': 'limits', 'TILED': true},
    serverType: 'geoserver'
  }),
  visible: true
});

mapgears / ol3-google-maps / examples / vector.js View on Github

import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import Style from 'ol/style/Style.js';
import Stroke from 'ol/style/Stroke.js';
import Fill from 'ol/style/Fill.js';
import Circle from 'ol/style/Circle.js';
import ZoomSlider from 'ol/control/ZoomSlider.js';
import {defaults as defaultControls} from 'ol/control.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];

const googleLayer = new GoogleLayer();

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

const source = new VectorSource();
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);

mapgears / ol3-google-maps / examples / min-max-resolution.js View on Github

import OSMSource from 'ol/source/OSM.js';
import VectorSource from 'ol/source/Vector.js';
import TileJSONSource from 'ol/source/TileJSON.js';
import ImageWMSSource from 'ol/source/ImageWMS.js';
import Feature from 'ol/Feature.js';
import Point from 'ol/geom/Point.js';
import Style from 'ol/style/Style.js';
import Icon from 'ol/style/Icon.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';


const center = [-10997148, 4569099];

const googleLayer = new GoogleLayer();

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

const tileJSONLayer = new TileLayer({
  source: new TileJSONSource({
    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
    crossOrigin: 'anonymous'
  }),
  minResolution: 4000,
  maxResolution: 10000
});

const imageWMSLayer = new ImageLayer({

mapgears / ol3-google-maps / examples / order.js View on Github

import ImageLayer from 'ol/layer/Image.js';
import OSMSource from 'ol/source/OSM.js';
import WMTSSource from 'ol/source/WMTS.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {get as getProjection} from 'ol/proj.js';
import {getWidth as getExtentWidth, getTopLeft as getExtentTopLeft} from 'ol/extent.js';
import ImageWMSSource from 'ol/source/ImageWMS.js';
import TileWMSSource from 'ol/source/TileWMS.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';


const center = [-10997148, 6569099];

const googleLayer = new GoogleLayer();
googleLayer.name = 'Google layer - Base layer';
googleLayer.color = 'rgb(163, 204, 255)';

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});
osmLayer.name = 'OSM layer - Base layer';
osmLayer.color = 'rgb(241, 238, 232)';

const tileWMSLayer = new TileLayer({
  source: new TileWMSSource({
    url: 'http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en',
    params: {'LAYERS': 'limits', 'TILED': true},
    serverType: 'geoserver'
  }),

mapgears / ol3-google-maps / examples / tiles.js View on Github

import TileLayer from 'ol/layer/Tile.js';
import OSMSource from 'ol/source/OSM.js';
import TileJSONSource from 'ol/source/TileJSON.js';
import TileWMSSource from 'ol/source/TileWMS.js';
import WMTSSource from 'ol/source/WMTS.js';
import XYZSource from 'ol/source/XYZ.js';
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {get as getProjection} from 'ol/proj.js';
import {getWidth as getExtentWidth, getTopLeft as getExtentTopLeft} from 'ol/extent.js';
import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
import GoogleLayer from 'olgm/layer/Google.js';
import {defaults as defaultInteractions} from 'olgm/interaction.js';

const center = [-10997148, 4569099];

const googleLayer = new GoogleLayer();

const osmLayer = new TileLayer({
  source: new OSMSource(),
  visible: false
});

const tileJSONLayer = new TileLayer({
  source: new TileJSONSource({
    url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
    crossOrigin: 'anonymous'
  }),
  opacity: 0.5
});

const tmsLayer = new TileLayer({
  source: new XYZSource({

How to use the olgm/layer/Google.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.

olgm

Package Health Score

Popular olgm functions

Similar packages