How to use the olgm/interaction.js.defaults 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.

github mapgears / ol3-google-maps / examples / themed.js View on Github external
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());
github mapgears / ol3-google-maps / examples / traffic.js View on Github external
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();
github mapgears / ol3-google-maps / examples / order.js View on Github external
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
github mapgears / ol3-google-maps / examples / vector.js View on Github external
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
github mapgears / ol3-google-maps / examples / label.js View on Github external
}),
    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
github mapgears / ol3-google-maps / examples / tms.js View on Github external
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() {
github mapgears / ol3-google-maps / examples / concept.js View on Github external
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({
github mapgears / ol3-google-maps / examples / simple.js View on Github external
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();
github mapgears / ol3-google-maps / examples / min-max-resolution.js View on Github external
}))
  })
  );
  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();
github mapgears / ol3-google-maps / examples / watchoptions.js View on Github external
})),
    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,

olgm

OpenLayers Google Maps integration library

MIT
Latest version published 9 months ago

Package Health Score

48 / 100
Full package analysis