7 | Shows that WMTS layers added to OL3 are ported to Google Maps 8 | when the latter gets activated. 9 |
10 | --- 11 | 12 | 13 | -------------------------------------------------------------------------------- /examples/xyz.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: example.html 3 | title: XYZ 4 | shortdesc: Example of XYZ layers rendered in Google Maps. 5 | docs: > 6 |7 | Shows that XYZ layers added to OL3 are ported to Google Maps 8 | when the latter gets activated. 9 |
10 | --- 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/olgm/listener/AbstractListener.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @module olgm/listener/AbstractListener 3 | */ 4 | /** 5 | * Interface for things that have listened to something that can be unlistened to. 6 | */ 7 | class AbstractListener { 8 | /** 9 | * Unlisten to what the listener has listened to. 10 | */ 11 | unlisten() { 12 | throw new TypeError('not implemented'); 13 | } 14 | } 15 | 16 | export default AbstractListener; 17 | -------------------------------------------------------------------------------- /changelog/v0.18.0.md: -------------------------------------------------------------------------------- 1 | * [#203](https://github.com/mapgears/ol3-google-maps/pull/203) - Upgrade eslint to 4.15.0 ([@mapgears](https://github.com/mapgears)) 2 | * [#202](https://github.com/mapgears/ol3-google-maps/pull/202) - Upgrade to OpenLayers 4.5.0 ([@bampakoa](https://github.com/bampakoa)) 3 | * [#174](https://github.com/mapgears/ol3-google-maps/pull/174) - Remove Closure Library dependency ([@JamiesWhiteShirt](https://github.com/JamiesWhiteShirt)) 4 | -------------------------------------------------------------------------------- /changelog/v1.1.0.md: -------------------------------------------------------------------------------- 1 | * [#242](https://github.com/mapgears/ol3-google-maps/pull/242) - Upgrade eslint ([@mapgears](https://github.com/mapgears)) 2 | * [#241](https://github.com/mapgears/ol3-google-maps/pull/241) - Add gmapOptions option ([@JamiesWhiteShirt](https://github.com/JamiesWhiteShirt)) 3 | * [#240](https://github.com/mapgears/ol3-google-maps/pull/240) - Handle changing object properties ([@JamiesWhiteShirt](https://github.com/JamiesWhiteShirt)) 4 | -------------------------------------------------------------------------------- /config/jsdoc/api/template/tmpl/tutorial.tmpl: -------------------------------------------------------------------------------- 1 |7 | Demonstrates the support of rotated maps with OL3-Google-Maps. 8 |
9 |10 | Use Alt + Shift + Drag to rotate the map. 11 |
12 | --- 13 | 14 | 15 | -------------------------------------------------------------------------------- /changelog/v1.7.0.md: -------------------------------------------------------------------------------- 1 | * [#314](https://github.com/mapgears/ol3-google-maps/pull/314) - latest ol version have breaking changes in TileWMS.js ([rajsync](https://github.com/search?q=rajsync&type=Users)) 2 | * [#305](https://github.com/mapgears/ol3-google-maps/pull/305) - WMS layers + Zoom fixes ([@vlt1](https://github.com/vlt1)) 3 | * [#291](https://github.com/mapgears/ol3-google-maps/pull/291) - cacheItem.forEach is undefined ([@wussup](https://github.com/wussup)) 4 | -------------------------------------------------------------------------------- /examples/archived/latest.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: example.html 3 | title: Latest Google Maps version 4 | shortdesc: Example using the latest version of Google Maps. 5 | docs: > 6 | This example demonstrates OL-Google-Maps with the latest version of Google Maps. 7 | --- 8 | 9 | 10 |Google Maps API v
11 | -------------------------------------------------------------------------------- /examples/min-max-resolution.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: example.html 3 | title: Min/Max resolution 4 | shortdesc: Example of minResolution/maxResolution on Google layers. 5 | docs: > 6 | In this example, the three layers are only visible in two zoom 7 | levels, thanks to the minResolution and maxResolution layer 8 | attributes. 9 | --- 10 | 11 | 12 | -------------------------------------------------------------------------------- /examples/regularshape.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: example.html 3 | title: Regular shapes 4 | shortdesc: Example where layers can be re-ordered. 5 | docs: > 6 | This example demonstrates regular shapes being drawn on Google Maps. 7 | This is done by building a SVG path from the RegularShape 8 | attributes, and sending it to Google Maps. 9 | --- 10 | 11 | 12 | -------------------------------------------------------------------------------- /config/jsdoc/api/template/README.md: -------------------------------------------------------------------------------- 1 | This template is based on the [Jaguar](https://github.com/davidshimjs/jaguarjs/tree/master/docs/templates/jaguar) template. [JaguarJS](https://github.com/davidshimjs/jaguarjs) is licensed under the [LGPL license](https://github.com/davidshimjs/jaguarjs/tree/master/LICENSE). 2 | 3 | The default template for JSDoc 3 uses: [the Taffy Database library](http://taffydb.com/) and the [Underscore Template library](http://documentcloud.github.com/underscore/#template). 4 | -------------------------------------------------------------------------------- /config/jsdoc/info/virtual-plugin.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Handle the interface and abstract annotations. 3 | * @param {Object} dictionary The tag dictionary. 4 | */ 5 | exports.defineTags = function(dictionary) { 6 | 7 | const classTag = dictionary.lookUp('class'); 8 | dictionary.defineTag('interface', { 9 | mustHaveValue: false, 10 | onTagged: function(doclet, tag) { 11 | classTag.onTagged.apply(this, arguments); 12 | doclet.virtual = true; 13 | } 14 | }); 15 | 16 | }; 17 | -------------------------------------------------------------------------------- /config/jsdoc/api/template/less/jaguar.less: -------------------------------------------------------------------------------- 1 | @import "common.less"; 2 | 3 | // normalize 4 | html, body { 5 | font: 1em "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif; 6 | background-color: #fff; 7 | } 8 | ul, ol { 9 | margin: 0; 10 | padding: 0; 11 | } 12 | li { 13 | list-style-type: none; 14 | } 15 | 16 | #wrap { 17 | position: relative; 18 | } 19 | 20 | @import "navigation.less"; 21 | @import "main.less"; 22 | @import "footer.less"; -------------------------------------------------------------------------------- /changelog/v0.17.0.md: -------------------------------------------------------------------------------- 1 | * [#197](https://github.com/mapgears/ol3-google-maps/pull/197) - Upgrade to OpenLayers 4.4.2 ([@bampakoa](https://github.com/bampakoa)) 2 | * [#195](https://github.com/mapgears/ol3-google-maps/pull/195) - Move olgm.gm inner 'gen' methods to olgm.gm namespace ([Alexandre Dubé](https://github.com/search?q=Alexandre Dubé&type=Users)) 3 | * [#180](https://github.com/mapgears/ol3-google-maps/pull/180) - Support for MultiPolygon ([Jacob Burkhart](https://github.com/search?q=Jacob Burkhart&type=Users)) 4 | -------------------------------------------------------------------------------- /examples/tms.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: example.html 3 | title: TMS 4 | shortdesc: Example of TMS layers rendered in Google Maps. 5 | docs: > 6 | Shows that TMS layers added to OL are rendered in Google Maps 7 | when the latter gets activated. Note: OL doesn't actually support 8 | TMS layers. Instead, we use the XYZ layer source with an inverted 9 | y coordinate. 10 | --- 11 | 12 | 13 | -------------------------------------------------------------------------------- /changelog/v1.3.0.md: -------------------------------------------------------------------------------- 1 | * [#259](https://github.com/mapgears/ol3-google-maps/pull/259) - Extend olgm.layer.GoogleLayer from ol.layer.Layer instead of ol.layer.layerGroup. ([@mstenta](https://github.com/mstenta)) 2 | * [#258](https://github.com/mapgears/ol3-google-maps/pull/258) - Fix PropertyListener ([@JamiesWhiteShirt](https://github.com/JamiesWhiteShirt)) 3 | * [#252](https://github.com/mapgears/ol3-google-maps/pull/252) - Fix fractionnal zoom levels calculation to match with OpenLayers ([@agpixdev](https://github.com/agpixdev)) 4 | -------------------------------------------------------------------------------- /config/jsdoc/api/template/tmpl/examples.tmpl: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | ') === -1) { ?> 10 |') ?>
13 |
14 |
--------------------------------------------------------------------------------
/changelog/v0.8.0.md:
--------------------------------------------------------------------------------
1 | * [#108](https://github.com/mapgears/ol3-google-maps/pull/108) - Support ol.style.RegularShape
2 | * [#102](https://github.com/mapgears/ol3-google-maps/pull/102) - Render markers using canvas on Google Maps
3 | * [#106](https://github.com/mapgears/ol3-google-maps/pull/106) - Add support for writing and running tests
4 | * [#99](https://github.com/mapgears/ol3-google-maps/pull/99) - Switch from jshint to eslint
5 | * [#98](https://github.com/mapgears/ol3-google-maps/pull/98) - Ask for Google Maps API key when serving examples
6 |
--------------------------------------------------------------------------------
/src/olgm/asserts.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/asserts
3 | */
4 | /* Based on https://github.com/openlayers/openlayers/blob/master/src/ol/asserts.js */
5 | /**
6 | * @param {*} assertion Assertion we expected to be truthy
7 | * @param {string=} opt_message Error message in case of failure
8 | */
9 | export function assert(assertion, opt_message) {
10 | if (!assertion) {
11 | let message = 'Assertion failed';
12 | if (opt_message) {
13 | message += ': ' + opt_message;
14 | }
15 | throw new Error(message);
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/config/jsdoc/api/index.md:
--------------------------------------------------------------------------------
1 | #### API change policy
2 |
3 | The OL-Google-Maps API consists of
4 | * names and signatures of constructors
5 | * names and signatures of instance methods and properties
6 | * names and signatures of functions
7 | * names of constants
8 |
9 | Within a major release series, the API will not be changed. Any changes to the API will be accompanied by a new major release.
10 |
11 | *Note*: The API change policy does not cover CSS class names that are used to style the OL-Google-Maps UI. It also does not cover any typedefs and enums.
12 |
--------------------------------------------------------------------------------
/changelog/v1.4.0.md:
--------------------------------------------------------------------------------
1 | * [#263](https://github.com/mapgears/ol3-google-maps/pull/263) - Upgrade eslint ([@mapgears](https://github.com/mapgears))
2 | * [#262](https://github.com/mapgears/ol3-google-maps/pull/262) - Bump eslint-utils from 1.3.1 to 1.4.2 ([@mapgears](https://github.com/mapgears))
3 | * [#253](https://github.com/mapgears/ol3-google-maps/pull/253) - Track changes made to feature style ([@agpixdev](https://github.com/agpixdev))
4 | * [#261](https://github.com/mapgears/ol3-google-maps/pull/261) - Bump lodash from 4.17.4 to 4.17.15 ([@mapgears](https://github.com/mapgears))
5 |
--------------------------------------------------------------------------------
/changelog/v0.14.0.md:
--------------------------------------------------------------------------------
1 | * [#171](https://github.com/mapgears/ol3-google-maps/pull/171) - Upgrade linter and closure-util libs and configs ([@mapgears](https://github.com/mapgears))
2 | * [#170](https://github.com/mapgears/ol3-google-maps/pull/170) - Upgrade to OpenLayers 4.1.1 ([@hawkaa](https://github.com/hawkaa))
3 | * [#166](https://github.com/mapgears/ol3-google-maps/pull/166) - Add layerswitcher example ([@mapgears](https://github.com/mapgears))
4 | * [#163](https://github.com/mapgears/ol3-google-maps/pull/163) - Upgrade GoogleMaps API to 3.27 ([@laurentboileau](https://github.com/laurentboileau))
5 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/static/scripts/linenumber.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var counter = 0;
3 | var numbered;
4 | var source = document.getElementsByClassName('prettyprint source');
5 |
6 | if (source && source[0]) {
7 | source = source[0].getElementsByTagName('code')[0];
8 |
9 | numbered = source.innerHTML.split('\n');
10 | numbered = numbered.map(function(item) {
11 | counter++;
12 | return '' + item;
13 | });
14 |
15 | source.innerHTML = numbered.join('\n');
16 | }
17 | })();
18 |
--------------------------------------------------------------------------------
/examples/overviewmap.css:
--------------------------------------------------------------------------------
1 | .ol-custom-overviewmap,
2 | .ol-custom-overviewmap.ol-uncollapsible {
3 | bottom: auto;
4 | left: auto;
5 | right: 0;
6 | top: 0;
7 | }
8 |
9 | .ol-custom-overviewmap .ol-overviewmap-map {
10 | border: none;
11 | width: 300px;
12 | }
13 |
14 | /* Remove attributions from the overview
15 | They already appear on the main map */
16 |
17 | .ol-custom-overviewmap .ol-overviewmap-map a {
18 | display: none;
19 | }
20 |
21 | .ol-custom-overviewmap .ol-overviewmap-map a div img {
22 | display: none;
23 | }
24 |
25 | .ol-custom-overviewmap .ol-overviewmap-map .gmnoprint {
26 | display: none;
27 | }
28 |
--------------------------------------------------------------------------------
/examples/simple.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Simple
4 | shortdesc: A simple map containing a single Google layer. OpenLayers is on top of Google Maps and controls all interactions on the map.
5 | docs: >
6 |
7 | A simple map containing a single Google layer. OpenLayers is
8 | on top of Google Maps and controls all interactions on the map.
9 |
10 |
11 | As soon as the OpenLayers map has a visible Google layer
12 | in it, the Google Maps map is activated by the library,
13 | which puts the OpenLayers map on top of the Google Maps one.
14 |
15 | ---
16 |
17 |
--------------------------------------------------------------------------------
/test/README.MD:
--------------------------------------------------------------------------------
1 | ## Guidelines ##
2 |
3 | ### Where to write tests ###
4 |
5 | Place your tests in the test/spec folder. The name of the test file should be
6 | the same as the name of the source file that contains the code you're testing,
7 | except that the extension will be `.test.js` instead of `.js`.
8 |
9 | ### Writing tests ###
10 |
11 | All tests are combined into a single file, and they are all run on the same
12 | HTML file. Therefore, all variables you set must be unset in the same test.
13 | The state of the page should be the same before and after the tests.
14 |
15 | ### Running tests ###
16 |
17 | `npm test` or `tasks/runtests.sh`
18 |
--------------------------------------------------------------------------------
/changelog/v0.6.md:
--------------------------------------------------------------------------------
1 | * [#81](https://github.com/mapgears/ol3-google-maps/pull/81) - Update ol3 to v3.16.0
2 | * [#79](https://github.com/mapgears/ol3-google-maps/pull/79) - Split LayersHerald into different heralds
3 | * [#78](https://github.com/mapgears/ol3-google-maps/pull/78) - Compile ol3-google-maps with ol3
4 | * [#77](https://github.com/mapgears/ol3-google-maps/pull/77) - Add support for WMS layers
5 | * [#71](https://github.com/mapgears/ol3-google-maps/pull/71) - Dispatch event after setVisible on Google layer
6 | * [#66](https://github.com/mapgears/ol3-google-maps/pull/66) - Run npm install before generating externs ([@alexbrault](https://github.com/alexbrault))
7 |
--------------------------------------------------------------------------------
/examples/label.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Label style
4 | shortdesc: Example of label vector style rendered in Google Maps.
5 | docs: >
6 |
7 | This example displays styled OpenLayers point geometries displayed as labels in a Google map.
8 |
9 |
10 | The MapLabel library, which is natively included in
11 | OL-Google-Maps, takes care of rendering the text labels in
12 | Google Maps. It has been extended to support displaying markers
13 | over labels.
14 |
15 | ---
16 |
17 |
18 |
--------------------------------------------------------------------------------
/examples/vector.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Vector
4 | shortdesc: Example of a vector layer rendered in Google Maps.
5 | docs: >
6 |
7 | Demonstrates the synchronization between a vector layer added
8 | to the OpenLayers map with Google Maps.
9 |
10 |
11 | OL3-Google-Maps detects any vector layer added to the OpenLayers
12 | map and synchronize the vector features added to it to the
13 | Google Maps map. The geometry and style are also synchronized.
14 |
15 | ---
16 |
17 |
18 |
--------------------------------------------------------------------------------
/changelog/v0.20.0.md:
--------------------------------------------------------------------------------
1 | * [#220](https://github.com/mapgears/ol3-google-maps/pull/220) - Add hoek 5.0.3 to fix vulnerability deps ([@mapgears](https://github.com/mapgears))
2 | * [#219](https://github.com/mapgears/ol3-google-maps/pull/219) - Fix ImageOverlay onRemove - check if this.div_ is defined ([@mapgears](https://github.com/mapgears))
3 | * [#214](https://github.com/mapgears/ol3-google-maps/pull/214) - Add proper support for MultiPoint and fix broken MultiPolygon support ([@benhutchins](https://github.com/benhutchins))
4 | * [#212](https://github.com/mapgears/ol3-google-maps/pull/212) - Fix #158 - use utility methods to create WMS image url ([@mapgears](https://github.com/mapgears))
5 |
--------------------------------------------------------------------------------
/examples/wms.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: WMS
4 | shortdesc: Example of WMS layers rendered in Google Maps.
5 | docs: >
6 |
7 | Shows that WMS layers added to OL3 are ported to Google Maps
8 | when the latter gets activated.
9 |
10 | ---
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/examples/order.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Order
4 | shortdesc: Example where layers can be re-ordered.
5 | docs: >
6 | In this example, layers are displayed in the table.
7 | They can be re-ordered by clicking the arrow buttons
8 | next to their names. The top-most layers will display in
9 | front of the layers placed below them in the table. The base
10 | Google layer is not affected by this, it will always display
11 | behind every layer. Vector layers will also always display in
12 | front of every layer while Google Maps is active.
13 | ---
14 |
15 |
16 |
--------------------------------------------------------------------------------
/changelog/v1.6.0.md:
--------------------------------------------------------------------------------
1 | * [#283](https://github.com/mapgears/ol3-google-maps/pull/283) - Support OpenLayers 6+ ([@mstenta](https://github.com/mstenta))
2 | * [#288](https://github.com/mapgears/ol3-google-maps/pull/288) - Restore ol-layerswitcher example ([@mstenta](https://github.com/mstenta))
3 | * [#284](https://github.com/mapgears/ol3-google-maps/pull/284) - Use feature geometry name instead of hardcoded 'geometry' property ([@wussup](https://github.com/wussup))
4 | * [#281](https://github.com/mapgears/ol3-google-maps/pull/281) - Fix event unlistening when dealing with a list of event keys ([@wussup](https://github.com/wussup))
5 | * [#279](https://github.com/mapgears/ol3-google-maps/pull/279) - Add link to olgm+webpack example ([@geopamplona](https://github.com/geopamplona))
6 |
--------------------------------------------------------------------------------
/src/olgm/Abstract.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/Abstract
3 | */
4 | class Abstract {
5 | /**
6 | * @classdesc
7 | * Abstract class for most classes of this library, which receives a reference
8 | * to the `google.maps.Map` and {@link module:ol/PluggableMap} objects and behave accordingly with
9 | * them.
10 | *
11 | * @param {module:ol/PluggableMap} ol3map openlayers map
12 | * @param {google.maps.Map} gmap google maps map
13 | */
14 | constructor(ol3map, gmap) {
15 | /**
16 | * @type {module:ol/PluggableMap}
17 | * @protected
18 | */
19 | this.ol3map = ol3map;
20 |
21 | /**
22 | * @type {!google.maps.Map}
23 | * @protected
24 | */
25 | this.gmap = gmap;
26 | }
27 | }
28 | export default Abstract;
29 |
--------------------------------------------------------------------------------
/src/olgm/listener/Listener.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/listener/Listener
3 | */
4 | import AbstractListener from './AbstractListener.js';
5 | import {unByKey} from 'ol/Observable.js';
6 |
7 | class Listener extends AbstractListener {
8 | /**
9 | * Listener for OL events.
10 | * @param {module:ol/events~EventsKey|Array} listenerKey OL events key
11 | */
12 | constructor(listenerKey) {
13 | super();
14 |
15 | /**
16 | * @type {module:ol/events~EventsKey|Array}
17 | * @private
18 | */
19 | this.listenerKey_ = listenerKey;
20 | }
21 |
22 | /**
23 | * @inheritdoc
24 | */
25 | unlisten() {
26 | unByKey(this.listenerKey_);
27 | }
28 | }
29 |
30 | export default Listener;
31 |
--------------------------------------------------------------------------------
/changelog/v0.9.0.md:
--------------------------------------------------------------------------------
1 | * [#116](https://github.com/mapgears/ol3-google-maps/pull/116) - Support layer order for tile and image layers
2 | * [#115](https://github.com/mapgears/ol3-google-maps/pull/115) - Add support for transparency change on tiled layers
3 | * [#113](https://github.com/mapgears/ol3-google-maps/pull/113) - Support centered origin on tile layers
4 | * [#112](https://github.com/mapgears/ol3-google-maps/pull/112) - Add an example using the map overview control
5 | * [#111](https://github.com/mapgears/ol3-google-maps/pull/111) - Add options to watch image and tile layers
6 | * [#110](https://github.com/mapgears/ol3-google-maps/pull/110) - Support minResolution and maxResolution
7 | * [#109](https://github.com/mapgears/ol3-google-maps/pull/109) - Add basic support for map rotation
8 |
--------------------------------------------------------------------------------
/tasks/prepare-package.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const path = require('path');
3 | const pkg = require('../package.json');
4 |
5 | const buildDir = path.resolve(__dirname, '../build/olgm');
6 |
7 | // update the version number in util.js
8 | const utilPath = path.join(buildDir, 'util.js');
9 | const versionRegEx = /const VERSION = '(.*)';/g;
10 | const utilSrc = fs.readFileSync(utilPath, 'utf-8').replace(versionRegEx, `const VERSION = '${pkg.version}';`);
11 | fs.writeFileSync(utilPath, utilSrc, 'utf-8');
12 |
13 | // write out simplified package.json
14 | delete pkg.scripts;
15 | delete pkg.devDependencies;
16 | delete pkg.style;
17 | delete pkg.eslintConfig;
18 | delete pkg.private;
19 | fs.writeFileSync(path.join(buildDir, 'package.json'), JSON.stringify(pkg, null, 2), 'utf-8');
20 |
--------------------------------------------------------------------------------
/changelog/v1.5.0.md:
--------------------------------------------------------------------------------
1 | * [#276](https://github.com/mapgears/ol3-google-maps/pull/276) - Fix lag issue with Google Maps when zooming ([@agpixdev](https://github.com/agpixdev))
2 | * [#273](https://github.com/mapgears/ol3-google-maps/pull/273) - Bump handlebars from 4.0.11 to 4.1.2 ([@mapgears](https://github.com/mapgears))
3 | * [#275](https://github.com/mapgears/ol3-google-maps/pull/275) - Properly size the canvas based on image size and rotation angle ([@agpixdev](https://github.com/agpixdev))
4 | * [#277](https://github.com/mapgears/ol3-google-maps/pull/277) - Fix for infrequent crashes at initialization time ([@agpixdev](https://github.com/agpixdev))
5 | * [#274](https://github.com/mapgears/ol3-google-maps/pull/274) - Create map icon/label on specific Google Maps pane ([@agpixdev](https://github.com/agpixdev))
6 |
--------------------------------------------------------------------------------
/examples/simple.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
4 | import GoogleLayer from 'olgm/layer/Google.js';
5 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
6 |
7 |
8 | const center = [-7908084, 6177492];
9 |
10 | // This dummy layer tells Google Maps to switch to its default map type
11 | const googleLayer = new GoogleLayer();
12 |
13 | const map = new Map({
14 | // use OL3-Google-Maps recommended default interactions
15 | interactions: defaultInteractions(),
16 | layers: [
17 | googleLayer
18 | ],
19 | target: 'map',
20 | view: new View({
21 | center: center,
22 | zoom: 12
23 | })
24 | });
25 |
26 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
27 | olGM.activate();
28 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/exceptions.tmpl:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 | -
7 |
8 |
9 |
10 |
11 | -
12 |
13 | -
14 | Type
15 |
16 | -
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/changelog/v0.7.md:
--------------------------------------------------------------------------------
1 | * [#97](https://github.com/mapgears/ol3-google-maps/pull/97) - Update task scripts
2 | * [#96](https://github.com/mapgears/ol3-google-maps/pull/96) - Fix invalid requests being sent on tile layers
3 | * [#95](https://github.com/mapgears/ol3-google-maps/pull/95) - Added Windows build support ([sindrma](https://github.com/search?q=sindrma&type=Users))
4 | * [#92](https://github.com/mapgears/ol3-google-maps/pull/92) - Update google maps api to v3.24
5 | * [#90](https://github.com/mapgears/ol3-google-maps/pull/90) - Remove API key from examples
6 | * [#87](https://github.com/mapgears/ol3-google-maps/pull/87) - Improve procedure for building examples
7 | * [#86](https://github.com/mapgears/ol3-google-maps/pull/86) - Add examples for different tile layer types
8 | * [#82](https://github.com/mapgears/ol3-google-maps/pull/82) - Add support for WMTS layers
9 |
--------------------------------------------------------------------------------
/examples/overviewmap.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Overview map
4 | shortdesc: Example showing a Google Maps layer being used in an overview control.
5 | docs: >
6 |
7 | This example shows a Google Maps layer being used in an overview
8 | control.
9 |
10 |
11 | Since the overview control contains a different map instance, we
12 | also need an different olGM instance for it.
13 |
14 |
15 | There are two google maps layers visible at the same time, we need
16 | to load them in sequence. As soon as the google maps instance in the
17 | overview control is done loading, we activate the main one. When
18 | using only one google maps layer, no delay is necessary.
19 |
20 | ---
21 |
22 |
23 |
--------------------------------------------------------------------------------
/changelog/v0.15.0.md:
--------------------------------------------------------------------------------
1 | * [#191](https://github.com/mapgears/ol3-google-maps/pull/191) - Upgrade eslint to latest version ([@mapgears](https://github.com/mapgears))
2 | * [#189](https://github.com/mapgears/ol3-google-maps/pull/189) - Upgrade to OpenLayers 4.2.0 ([@bampakoa](https://github.com/bampakoa))
3 | * [#190](https://github.com/mapgears/ol3-google-maps/pull/190) - Update dos2unix command on development guides for Windows 10 ([@bampakoa](https://github.com/bampakoa))
4 | * [#186](https://github.com/mapgears/ol3-google-maps/pull/186) - Documentation for developing on Windows 10 ([@bampakoa](https://github.com/bampakoa))
5 | * [#182](https://github.com/mapgears/ol3-google-maps/pull/182) - Add installation instructions ([@bampakoa](https://github.com/bampakoa))
6 | * [#173](https://github.com/mapgears/ol3-google-maps/pull/173) - Add Openlayers linting ([@JamiesWhiteShirt](https://github.com/JamiesWhiteShirt))
7 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/static/scripts/prettify/lang-css.js:
--------------------------------------------------------------------------------
1 | PR.registerLangHandler(PR.createSimpleLexer([["pln",/^[\t\n\f\r ]+/,null," \t\r\n "]],[["str",/^"(?:[^\n\f\r"\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*"/,null],["str",/^'(?:[^\n\f\r'\\]|\\(?:\r\n?|\n|\f)|\\[\S\s])*'/,null],["lang-css-str",/^url\(([^"')]*)\)/i],["kwd",/^(?:url|rgb|!important|@import|@page|@media|@charset|inherit)(?=[^\w-]|$)/i,null],["lang-css-kw",/^(-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*)\s*:/i],["com",/^\/\*[^*]*\*+(?:[^*/][^*]*\*+)*\//],["com",
2 | /^(?:<\!--|--\>)/],["lit",/^(?:\d+|\d*\.\d+)(?:%|[a-z]+)?/i],["lit",/^#[\da-f]{3,6}/i],["pln",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i],["pun",/^[^\s\w"']+/]]),["css"]);PR.registerLangHandler(PR.createSimpleLexer([],[["kwd",/^-?(?:[_a-z]|\\[\da-f]+ ?)(?:[\w-]|\\\\[\da-f]+ ?)*/i]]),["css-kw"]);PR.registerLangHandler(PR.createSimpleLexer([],[["str",/^[^"')]+/]]),["css-str"]);
3 |
--------------------------------------------------------------------------------
/config/jsdoc/api/conf.json:
--------------------------------------------------------------------------------
1 | {
2 | "opts": {
3 | "recurse": true,
4 | "template": "config/jsdoc/api/template"
5 | },
6 | "tags": {
7 | "allowUnknownTags": true
8 | },
9 | "source": {
10 | "includePattern": ".+\\.js(doc)?$",
11 | "excludePattern": "(^|\\/|\\\\)_",
12 | "include": [
13 | "src/olgm"
14 | ]
15 | },
16 | "plugins": [
17 | "plugins/markdown",
18 | "config/jsdoc/api/plugins/normalize-exports",
19 | "config/jsdoc/api/plugins/inline-options",
20 | "config/jsdoc/api/plugins/events",
21 | "config/jsdoc/api/plugins/observable",
22 | "config/jsdoc/api/plugins/api"
23 | ],
24 | "markdown": {
25 | "parser": "gfm"
26 | },
27 | "templates": {
28 | "cleverLinks": true,
29 | "monospaceLinks": true,
30 | "default": {
31 | "outputSourceFiles": false
32 | },
33 | "applicationName": "OL-Google-Maps"
34 | },
35 | "jsVersion": 180
36 | }
37 |
--------------------------------------------------------------------------------
/examples/traffic.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
4 | import GoogleLayer from 'olgm/layer/Google.js';
5 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
6 |
7 |
8 | const center = [-7908084, 6177492];
9 |
10 | // This dummy layer tells Google Maps to switch to its default map type
11 | const googleLayer = new GoogleLayer();
12 |
13 | const map = new Map({
14 | // use OL3-Google-Maps recommended default interactions
15 | interactions: defaultInteractions(),
16 | layers: [
17 | googleLayer
18 | ],
19 | target: 'map',
20 | view: new View({
21 | center: center,
22 | zoom: 12
23 | })
24 | });
25 |
26 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
27 | olGM.activate();
28 |
29 | const gmap = olGM.getGoogleMapsMap();
30 |
31 | const trafficLayer = new google.maps.TrafficLayer();
32 | trafficLayer.setMap(gmap);
33 |
--------------------------------------------------------------------------------
/changelog/v0.3.md:
--------------------------------------------------------------------------------
1 | * [#21](https://github.com/mapgears/ol3-google-maps/pull/21) - Add changelog script ([@mapgears](https://github.com/mapgears))
2 | * [#20](https://github.com/mapgears/ol3-google-maps/pull/20) - Add support for wrapping the build in UMD syntax. ([@mapgears](https://github.com/mapgears))
3 | * [#19](https://github.com/mapgears/ol3-google-maps/pull/19) - Fix vector herald activation ([@mapgears](https://github.com/mapgears))
4 | * [#18](https://github.com/mapgears/ol3-google-maps/pull/18) - Add themed example ([@mapgears](https://github.com/mapgears))
5 | * [#17](https://github.com/mapgears/ol3-google-maps/pull/17) - Add themed gmap support, i.e. styles for Google Maps ([@mapgears](https://github.com/mapgears))
6 | * [#16](https://github.com/mapgears/ol3-google-maps/pull/16) - Add vector icon example ([@mapgears](https://github.com/mapgears))
7 | * [#15](https://github.com/mapgears/ol3-google-maps/pull/15) - Fix icon scale property ([@mapgears](https://github.com/mapgears))
8 |
--------------------------------------------------------------------------------
/src/olgm/uri.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/uri
3 | */
4 | /**
5 | * Shamelessly borrowed from `ol.uri.appendParams`.
6 | *
7 | * Appends query parameters to a URI.
8 | *
9 | * @param {string} uri The original URI, which may already have query data.
10 | * @param {!Object} params An object where keys are URI-encoded parameter keys,
11 | * and the values are arbitrary types or arrays.
12 | * @return {string} The new URI.
13 | */
14 | export function appendParams(uri, params) {
15 | const keyParams = [];
16 | // Skip any null or undefined parameter values
17 | Object.keys(params).forEach(function(k) {
18 | if (params[k] !== null && params[k] !== undefined) {
19 | keyParams.push(k + '=' + encodeURIComponent(params[k]));
20 | }
21 | });
22 | const qs = keyParams.join('&');
23 | // remove any trailing ? or &
24 | uri = uri.replace(/[?&]$/, '');
25 | // append ? or & depending on whether uri has existing parameters
26 | uri = uri.indexOf('?') === -1 ? uri + '?' : uri + '&';
27 | return uri + qs;
28 | }
29 |
--------------------------------------------------------------------------------
/test/spec/olgm/herald/Layers.test.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import Layers from 'olgm/herald/Layers.js';
3 |
4 | describe('olgm.herald.Layers', function() {
5 | // Setup constructor variables
6 | const originalOl3map = new Map({});
7 | const gmapEl = document.createElement('div');
8 | gmapEl.style.height = '100px';
9 | gmapEl.style.width = '100px';
10 | const originalGmap = new google.maps.Map(gmapEl);
11 | const watchVector = true;
12 |
13 | describe('constructor', function() {
14 | const layersHerald = new Layers(
15 | originalOl3map, originalGmap, watchVector);
16 |
17 | it('sets the Google Maps map', function() {
18 | const gmap = layersHerald.gmap;
19 | expect(gmap).to.be.an.instanceof(google.maps.Map);
20 | expect(gmap).to.equal(originalGmap);
21 | });
22 |
23 | it('sets the OpenLayers map', function() {
24 | const ol3map = layersHerald.ol3map;
25 | expect(ol3map).to.be.an.instanceof(Map);
26 | expect(ol3map).to.equal(originalOl3map);
27 | });
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/config/jsdoc/info/define-plugin.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @fileoverview This plugin extracts info from boolean defines. This only
3 | * handles boolean defines with the default value in the description. Default
4 | * is assumed to be provided with something like "default is `true`" (case
5 | * insensitive, with or without ticks).
6 | */
7 |
8 |
9 | const DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i;
10 |
11 |
12 | /**
13 | * Hook to define new tags.
14 | * @param {Object} dictionary The tag dictionary.
15 | */
16 | exports.defineTags = function(dictionary) {
17 |
18 | dictionary.defineTag('define', {
19 | canHaveType: true,
20 | mustHaveValue: true,
21 | onTagged: function(doclet, tag) {
22 | const types = tag.value.type.names;
23 | if (types.length === 1 && types[0] === 'boolean') {
24 | const match = tag.value.description.match(DEFAULT_VALUE);
25 | if (match) {
26 | doclet.define = {
27 | default: match[1] === 'true'
28 | };
29 | doclet.description = tag.value.description;
30 | }
31 | }
32 | }
33 | });
34 |
35 | };
36 |
--------------------------------------------------------------------------------
/examples/themed.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
4 | import GoogleLayer from 'olgm/layer/Google.js';
5 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
6 |
7 |
8 | const center = [-7908084, 6177492];
9 |
10 | const regularLayer = new GoogleLayer({
11 | visible: false
12 | });
13 |
14 | const themedLayer = new GoogleLayer({
15 | styles: [{
16 | 'stylers': [{
17 | 'saturation': -100
18 | }, {
19 | 'gamma': 2.25
20 | }]
21 | }]
22 | });
23 |
24 | const map = new Map({
25 | // use OL3-Google-Maps recommended default interactions
26 | interactions: defaultInteractions(),
27 | layers: [
28 | regularLayer,
29 | themedLayer
30 | ],
31 | target: 'map',
32 | view: new View({
33 | center: center,
34 | zoom: 12
35 | })
36 | });
37 |
38 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
39 | olGM.activate();
40 |
41 | document.getElementById('toggle').addEventListener('click', function() {
42 | regularLayer.setVisible(!regularLayer.getVisible());
43 | themedLayer.setVisible(!themedLayer.getVisible());
44 | });
45 |
--------------------------------------------------------------------------------
/config/jsdoc/api/plugins/events.js:
--------------------------------------------------------------------------------
1 | const events = {};
2 | const classes = {};
3 |
4 | exports.handlers = {
5 |
6 | newDoclet: function(e) {
7 | const doclet = e.doclet;
8 | let cls;
9 | if (doclet.kind == 'event') {
10 | cls = doclet.longname.split('#')[0];
11 | if (!(cls in events)) {
12 | events[cls] = [];
13 | }
14 | events[cls].push(doclet.longname);
15 | } else if (doclet.kind == 'class') {
16 | classes[doclet.longname] = doclet;
17 | }
18 | },
19 |
20 | parseComplete: function(e) {
21 | const doclets = e.doclets;
22 | let doclet, i, ii, j, jj, event, fires;
23 | for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
24 | doclet = doclets[i];
25 | if (doclet.fires) {
26 | if (doclet.kind == 'class') {
27 | fires = [];
28 | for (j = 0, jj = doclet.fires.length; j < jj; ++j) {
29 | event = doclet.fires[j].replace('event:', '');
30 | if (events[event]) {
31 | fires.push.apply(fires, events[event]);
32 | } else {
33 | fires.push(doclet.fires[j]);
34 | }
35 | }
36 | doclet.fires = fires;
37 | }
38 | }
39 | }
40 | }
41 |
42 | };
43 |
44 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/observables.tmpl:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | Name
9 | Type
10 | Settable
11 | ol/Object~ObjectEvent type
12 | Description
13 |
14 |
15 |
16 |
17 |
25 |
26 |
27 |
29 |
30 |
31 |
32 |
33 | change:
37 |
38 |
39 |
40 |
--------------------------------------------------------------------------------
/examples/layerswitcher.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import OSMSource from 'ol/source/OSM.js';
5 | import 'ol-layerswitcher/src/ol-layerswitcher.css';
6 | import LayerSwitcher from 'ol-layerswitcher';
7 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
8 | import GoogleLayer from 'olgm/layer/Google.js';
9 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
10 |
11 | const center = [-7908084, 6177492];
12 |
13 | // This dummy layer tells Google Maps to switch to its default map type
14 | const googleLayer = new GoogleLayer({
15 | title: 'Google',
16 | type: 'base'
17 | });
18 |
19 | const osmLayer = new TileLayer({
20 | source: new OSMSource(),
21 | title: 'OSM',
22 | type: 'base'
23 | });
24 |
25 |
26 | const map = new Map({
27 | // use OL3-Google-Maps recommended default interactions
28 | interactions: defaultInteractions(),
29 | layers: [
30 | googleLayer,
31 | osmLayer
32 | ],
33 | target: 'map',
34 | view: new View({
35 | center: center,
36 | zoom: 12
37 | })
38 | });
39 |
40 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
41 | olGM.activate();
42 |
43 | const layerSwitcher = new LayerSwitcher();
44 | map.addControl(layerSwitcher);
45 |
--------------------------------------------------------------------------------
/examples/watchoptions.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Watch options
4 | shortdesc: Example using watch options to enable/disable rendering in Google Maps.
5 | docs: >
6 |
7 | You can choose to let OL render the layers over the Google Maps
8 | basemap. It will cause a visible lag when panning or zooming, but
9 | it will eliminate any limitation of the library for that type of
10 | layer.
11 |
12 |
13 | In this example, you can enable and disable watching different
14 | types of layers. When it's green, it means
15 | Google Maps is allowed to render it when a Google Layer is visible.
16 | When it's red, OpenLayers renders that layer type at all times.
17 |
18 | ---
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/olgm/herald/Herald.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/herald/Herald
3 | */
4 | import Abstract from '../Abstract.js';
5 |
6 | /**
7 | * @typedef {Object} WatchOptions
8 | * @property {boolean} [image=true] Whether to watch image layers or not
9 | * @property {boolean} [tile=true] Whether to watch tile layers or not
10 | * @property {boolean} [vector=true] Whether to watch vector layers or not
11 | */
12 |
13 | class Herald extends Abstract {
14 | /**
15 | * Abstract class for all heralds. When activated, an herald synchronizes
16 | * something from the OpenLayers map to the Google Maps one. When deactivated,
17 | * it stops doing so.
18 | *
19 | * @param {module:ol/PluggableMap} ol3map openlayers map
20 | * @param {google.maps.Map} gmap google maps map
21 | */
22 | constructor(ol3map, gmap) {
23 | super(ol3map, gmap);
24 |
25 | /**
26 | * @type {module:olgm/AbstractListener~AbstractListener|null}
27 | * @protected
28 | */
29 | this.listener = null;
30 | }
31 |
32 |
33 | /**
34 | * Register all event listeners.
35 | */
36 | activate() {}
37 |
38 |
39 | /**
40 | * Unregister all event listeners.
41 | */
42 | deactivate() {
43 | if (this.listener) {
44 | this.listener.unlisten();
45 | }
46 | }
47 | }
48 | export default Herald;
49 |
--------------------------------------------------------------------------------
/src/olgm/gm/PanesOverlay.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/gm/PanesOverlay
3 | */
4 | /**
5 | * @classdesc
6 | * @api
7 | */
8 | class PanesOverlay extends ((window.google && window.google.maps && google.maps.OverlayView) || Object) {
9 | /**
10 | * This overlay doesn't actually do anything, it's only a way to get the map's
11 | * panes since Google Maps' API doesn't offer any other way to do so.
12 | * @param {google.maps.Map} gmap Google Maps map
13 | */
14 | constructor(gmap) {
15 | super();
16 |
17 | this.setMap(gmap);
18 | }
19 |
20 |
21 | /**
22 | * This function is the only reason this class exists. It returns the panes.
23 | * @return {google.maps.MapPanes|undefined} array of panes
24 | * @api
25 | */
26 | getMapPanes() {
27 | return this.getPanes();
28 | }
29 |
30 |
31 | /**
32 | * Override parent function, but do not do anything
33 | * @api
34 | * @override
35 | */
36 | onAdd() {
37 |
38 | }
39 |
40 |
41 | /**
42 | * Override parent function, but do not do anything
43 | * @api
44 | * @override
45 | */
46 | draw() {
47 |
48 | }
49 |
50 |
51 | /**
52 | * Override parent function, but do not do anything
53 | * @api
54 | * @override
55 | */
56 | onRemove() {
57 |
58 | }
59 | }
60 | export default PanesOverlay;
61 |
--------------------------------------------------------------------------------
/examples/xyz.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import OSMSource from 'ol/source/OSM.js';
5 | import XYZSource from 'ol/source/XYZ.js';
6 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
7 | import GoogleLayer from 'olgm/layer/Google.js';
8 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
9 |
10 |
11 | const center = [-10997148, 4569099];
12 |
13 | const googleLayer = new GoogleLayer();
14 |
15 | const osmLayer = new TileLayer({
16 | source: new OSMSource(),
17 | visible: false
18 | });
19 |
20 | const xyzLayer = new TileLayer({
21 | source: new XYZSource({
22 | url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
23 | }),
24 | opacity: 0.5
25 | });
26 |
27 | const map = new Map({
28 | // use OL3-Google-Maps recommended default interactions
29 | interactions: defaultInteractions(),
30 | layers: [
31 | googleLayer,
32 | osmLayer,
33 | xyzLayer
34 | ],
35 | target: 'map',
36 | view: new View({
37 | center: center,
38 | zoom: 4
39 | })
40 | });
41 |
42 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
43 | olGM.activate();
44 |
45 | document.getElementById('toggle').addEventListener('click', function() {
46 | googleLayer.setVisible(!googleLayer.getVisible());
47 | osmLayer.setVisible(!osmLayer.getVisible());
48 | });
49 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/members.tmpl:
--------------------------------------------------------------------------------
1 | {' + self.linkto(name, self.htmlsafe(name)) + '} ';
9 | });
10 | }
11 | ?>
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | Example 1? 's':'' ?>
36 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/examples/tms.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import OSMSource from 'ol/source/OSM.js';
5 | import XYZSource from 'ol/source/XYZ.js';
6 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
7 | import GoogleLayer from 'olgm/layer/Google.js';
8 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
9 |
10 |
11 | const center = [-10997148, 4569099];
12 |
13 | const googleLayer = new GoogleLayer();
14 |
15 | const osmLayer = new TileLayer({
16 | source: new OSMSource(),
17 | visible: false
18 | });
19 |
20 | const tmsLayer = new TileLayer({
21 | source: new XYZSource({
22 | url: 'http://v3.cartalib.mapgears.com/mapcache/tms/1.0.0/' +
23 | 'mapgears_basemap@g/{z}/{x}/{-y}.'
24 | }),
25 | opacity: 1
26 | });
27 |
28 | const map = new Map({
29 | // use OL3-Google-Maps recommended default interactions
30 | interactions: defaultInteractions(),
31 | layers: [
32 | googleLayer,
33 | osmLayer,
34 | tmsLayer
35 | ],
36 | target: 'map',
37 | view: new View({
38 | center: center,
39 | zoom: 4
40 | })
41 | });
42 |
43 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
44 | olGM.activate();
45 |
46 | document.getElementById('toggle').addEventListener('click', function() {
47 | googleLayer.setVisible(!googleLayer.getVisible());
48 | osmLayer.setVisible(!osmLayer.getVisible());
49 | });
50 |
--------------------------------------------------------------------------------
/changelog/v0.2.md:
--------------------------------------------------------------------------------
1 | * [#14](https://github.com/mapgears/ol3-google-maps/pull/14) - Fix #13 - Manage vector layer visibility ([@mapgears](https://github.com/mapgears))
2 | * [#11](https://github.com/mapgears/ol3-google-maps/pull/11) - Upgrade OpenLayers to v3.10.1 ([@mapgears](https://github.com/mapgears))
3 | * [#10](https://github.com/mapgears/ol3-google-maps/pull/10) - Fix vector source herald activation ([@mapgears](https://github.com/mapgears))
4 | * [#9](https://github.com/mapgears/ol3-google-maps/pull/9) - Fix CSS while Google Maps is active ([@mapgears](https://github.com/mapgears))
5 | * [#8](https://github.com/mapgears/ol3-google-maps/pull/8) - Fix label font color ([@mapgears](https://github.com/mapgears))
6 | * [#7](https://github.com/mapgears/ol3-google-maps/pull/7) - Fix label geometry update ([@mapgears](https://github.com/mapgears))
7 | * [#6](https://github.com/mapgears/ol3-google-maps/pull/6) - Support vector labels (text styling) ([@mapgears](https://github.com/mapgears))
8 | * [#5](https://github.com/mapgears/ol3-google-maps/pull/5) - Add example - Latest Google Maps API version ([@mapgears](https://github.com/mapgears))
9 | * [#3](https://github.com/mapgears/ol3-google-maps/pull/3) - Add getter to know if Google Maps is active ([@mapgears](https://github.com/mapgears))
10 | * [#2](https://github.com/mapgears/ol3-google-maps/pull/2) - Fix empty style ([@mapgears](https://github.com/mapgears))
11 | * [#1](https://github.com/mapgears/ol3-google-maps/pull/1) - Fix zoom binding ([@mapgears](https://github.com/mapgears))
12 |
--------------------------------------------------------------------------------
/config/jsdoc/api/plugins/inline-options.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @filedesc
3 | * Inlines option params from typedefs
4 | */
5 |
6 | const properties = {};
7 |
8 | exports.handlers = {
9 |
10 | /**
11 | * Collects all typedefs, keyed by longname
12 | * @param {Object} e Event object.
13 | */
14 | newDoclet: function(e) {
15 | if (e.doclet.kind == 'typedef' && e.doclet.properties) {
16 | properties[e.doclet.longname] = e.doclet.properties;
17 | }
18 | },
19 |
20 | /**
21 | * Adds `options.*` params for options that match the longname of one of the
22 | * collected typedefs.
23 | * @param {Object} e Event object.
24 | */
25 | parseComplete: function(e) {
26 | const doclets = e.doclets;
27 | for (let i = 0, ii = doclets.length; i < ii; ++i) {
28 | const doclet = doclets[i];
29 | if (doclet.params) {
30 | const params = doclet.params;
31 | for (let j = 0, jj = params.length; j < jj; ++j) {
32 | const param = params[j];
33 | if (param.type && param.type.names) {
34 | const type = param.type.names[0];
35 | if (type in properties) {
36 | param.type.names[0] = type;
37 | params.push.apply(params, properties[type].map(p => {
38 | const property = Object.assign({}, p);
39 | property.name = `${param.name}.${property.name}`;
40 | return property;
41 | }));
42 | }
43 | }
44 | }
45 | }
46 | }
47 | }
48 |
49 | };
50 |
--------------------------------------------------------------------------------
/examples/resources/common.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var clipboard = new Clipboard('#copy-button');
3 | clipboard.on('success', function(e) {
4 | e.clearSelection();
5 | });
6 |
7 | var codepenButton = document.getElementById('codepen-button');
8 | if (codepenButton) {
9 | codepenButton.onclick = function(event) {
10 | event.preventDefault();
11 | var form = document.getElementById('codepen-form');
12 |
13 | // Doc : https://blog.codepen.io/documentation/api/prefill/
14 |
15 | var resources = form.resources.value.split(',');
16 |
17 | var data = {
18 | title: form.title.value,
19 | description: form.description.value,
20 | layout: 'left',
21 | html: form.html.value,
22 | css: form.css.value,
23 | js: form.js.value,
24 | css_external: resources.filter(function(resource) {
25 | return resource.lastIndexOf('.css') === resource.length - 4;
26 | }).join(';'),
27 | js_external: resources.filter(function(resource) {
28 | return resource.lastIndexOf('.js') === resource.length - 3;
29 | }).join(';')
30 | };
31 |
32 | // binary flags to display html, css, js and/or console tabs
33 | data.editors = '' + Number(data.html.length > 0) +
34 | Number(data.css.length > 0) +
35 | Number(data.js.length > 0) +
36 | Number(data.js.indexOf('console') > 0);
37 |
38 | form.data.value = JSON.stringify(data);
39 |
40 | form.submit();
41 | };
42 | }
43 | })();
44 |
--------------------------------------------------------------------------------
/src/olgm/layer/Google.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/layer/Google
3 | */
4 | import TileLayer from 'ol/layer/Tile.js';
5 |
6 | /**
7 | * @typedef {Object} Options
8 | * @property {boolean} [visible=true] Visibility.
9 | * @property {google.maps.MapTypeId<(number|string)>|string|undefined} [mapTypeId=google.maps.MapTypeId.ROADMAP] The type of google map
10 | * @property {Array|undefined} [styles] Google map styling
11 | */
12 |
13 | /**
14 | * @classdesc
15 | * An ol3 layer object serving the purpose of being added to the ol3 map
16 | * as dummy layer. The `mapTypeId` defines which Google Maps map type the
17 | * layer represents.
18 | * @api
19 | */
20 | class GoogleLayer extends TileLayer {
21 | /**
22 | * @param {module:olgm/layer/Google~Options} opt_options Layer options.
23 | */
24 | constructor(opt_options) {
25 | const options = opt_options ? opt_options : {};
26 | super(options);
27 |
28 | /**
29 | * @type {google.maps.MapTypeId<(number|string)>|string}
30 | * @private
31 | */
32 | this.mapTypeId_ = options.mapTypeId !== undefined ? options.mapTypeId :
33 | google.maps.MapTypeId.ROADMAP;
34 |
35 | /**
36 | * @type {?Array}
37 | * @private
38 | */
39 | this.styles_ = options.styles ? options.styles : null;
40 | }
41 |
42 |
43 | /**
44 | * @return {google.maps.MapTypeId<(number|string)>|string} map type id
45 | * @api
46 | */
47 | getMapTypeId() {
48 | return this.mapTypeId_;
49 | }
50 |
51 |
52 | /**
53 | * @return {?Array} map styles
54 | */
55 | getStyles() {
56 | return this.styles_;
57 | }
58 | }
59 | export default GoogleLayer;
60 |
--------------------------------------------------------------------------------
/examples/webpack/config.js:
--------------------------------------------------------------------------------
1 | const CopyPlugin = require('copy-webpack-plugin');
2 | const ExampleBuilder = require('./example-builder');
3 | const fs = require('fs');
4 | const path = require('path');
5 |
6 | const src = path.join(__dirname, '..');
7 |
8 | const examples = fs.readdirSync(src)
9 | .filter(name => /^(?!index).*\.html$/.test(name))
10 | .map(name => name.replace(/\.html$/, ''));
11 |
12 | const entry = {};
13 | examples.forEach(example => {
14 | entry[example] = `./${example}.js`;
15 | });
16 |
17 | module.exports = {
18 | context: src,
19 | target: 'web',
20 | entry: entry,
21 | resolve: {
22 | modules: [path.resolve(__dirname, '..', '..', 'src'), 'node_modules']
23 | },
24 | module: {
25 | rules: [{
26 | test: /\.css$/,
27 | use: [
28 | {loader: 'style-loader'},
29 | {loader: 'css-loader'}
30 | ]
31 | }]
32 | },
33 | optimization: {
34 | runtimeChunk: {
35 | name: 'common'
36 | },
37 | splitChunks: {
38 | name: 'common',
39 | chunks: 'initial',
40 | minChunks: 2
41 | }
42 | },
43 | plugins: [
44 | new ExampleBuilder({
45 | templates: path.join(__dirname, '..', 'templates'),
46 | common: 'common'
47 | }),
48 | new CopyPlugin([
49 | {from: '../node_modules/ol/ol.css', to: 'css'},
50 | {from: '../src/olgm/olgm.css', to: 'css'},
51 | {from: 'data', to: 'data'},
52 | {from: 'resources', to: 'resources'},
53 | {from: 'Jugl.js', to: 'Jugl.js'},
54 | {from: 'index.html', to: 'index.html'}
55 | ])
56 | ],
57 | devtool: 'source-map',
58 | output: {
59 | filename: '[name].js',
60 | path: path.join(__dirname, '..', '..', 'build', 'examples')
61 | }
62 | };
63 |
--------------------------------------------------------------------------------
/examples/templates/readme.md:
--------------------------------------------------------------------------------
1 | This folder contains example templates. These templates are used to build the examples in the `examples/` folder. The resulting examples are written to the `build/examples` folder.
2 |
3 | Although the main purpose of these examples is to demonstrate how to use the API, they also serve other purposes in the development cycle, and so are not exactly as they would be in normal application code:
4 |
5 | * every time the library changes, they are compiled together with the library as a basic check that they remain in sync with the library
6 |
7 | * they use a special loader script to enable defining at run time which build mode (raw/debug/advanced) to use
8 |
9 | To enable this, examples have the following, not needed in application code:
10 |
11 | * each html file loads `loader.js`; application code would not need this, but would instead load the appropriate library build file, either a hosted version or a custom build
12 |
13 | * each js file starts with `goog.require` functions, used by the compiler; application code would only have these if the code is to be compiled together with the library and/or Closure library
14 |
15 | * some js files use type definitions (comments with @type tags); these are also used by the compiler, and are only needed if the code is to be compiled together with the library
16 |
17 | * html files load `resources/common.js` and some scripts use `common.getRendererFromQueryString()` to set the map renderer; application code would not need these
18 |
19 | At the bottom of each example generated in the `build/examples` folder, a modified version of its source code is shown. That modified version can be run standalone and is usually used as starting point for users to extend examples into their own application.
20 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/layout.tmpl:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | OL-Google-Maps v<?js= version ?> API - <?js= title ?>
9 |
10 |
11 |
12 |
13 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/test/karma.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-env node, es6 */
2 |
3 | const path = require('path');
4 |
5 | module.exports = function(karma) {
6 | karma.set({
7 | browserDisconnectTolerance: 2,
8 | frameworks: ['mocha', 'chai'],
9 | client: {
10 | runInParent: true,
11 | mocha: {
12 | timeout: 2500
13 | }
14 | },
15 | files: [
16 | `https://maps.googleapis.com/maps/api/js?v=3&callback=Function.prototype&key=${process.env.GOOGLE_MAPS_API_KEY}`,
17 | {
18 | pattern: path.resolve(__dirname, './index_test.js'),
19 | watched: false
20 | }
21 | ],
22 | exclude: [
23 | '**/*.test.js'
24 | ],
25 | preprocessors: {
26 | '**/*.js': ['webpack', 'sourcemap']
27 | },
28 | reporters: ['progress'],
29 | webpack: {
30 | devtool: 'inline-source-map',
31 | mode: 'development',
32 | resolve: {
33 | modules: [path.resolve(__dirname, '..', 'src'), 'node_modules']
34 | }
35 | },
36 | webpackMiddleware: {
37 | noInfo: true
38 | },
39 | crossOriginAttribute: false,
40 | browsers: ['Chrome']
41 | });
42 |
43 | if (process.env.TRAVIS) {
44 | karma.set({
45 | reporters: ['dots'],
46 | browserDisconnectTimeout: 10000,
47 | browserDisconnectTolerance: 1,
48 | captureTimeout: 240000,
49 | browserNoActivityTimeout: 240000,
50 | preprocessors: {
51 | '../src/**/*.js': ['coverage']
52 | },
53 | coverageReporter: {
54 | reporters: [
55 | {
56 | type: 'lcovonly', // that's enough for coveralls, no HTML
57 | dir: '../coverage/',
58 | subdir: '.'
59 | },
60 | {
61 | type: 'text-summary' // prints the textual summary to the terminal
62 | }
63 | ]
64 | }
65 | });
66 | }
67 | };
68 |
--------------------------------------------------------------------------------
/changelog/v0.4.md:
--------------------------------------------------------------------------------
1 | * [#57](https://github.com/mapgears/ol3-google-maps/pull/57) - Upgrade to OL3 v3.14.2 ([@mapgears](https://github.com/mapgears))
2 | * [#53](https://github.com/mapgears/ol3-google-maps/pull/53) - Add new traffic example ([@mapgears](https://github.com/mapgears))
3 | * [#48](https://github.com/mapgears/ol3-google-maps/pull/48) - https://github.com/mapgears/ol3-google-maps/issues/46 ([@fipp](https://github.com/fipp))
4 | * [#45](https://github.com/mapgears/ol3-google-maps/pull/45) - Add DEVELOPING file for instructions to develop with ol3gm ([@mapgears](https://github.com/mapgears))
5 | * [#43](https://github.com/mapgears/ol3-google-maps/pull/43) - Include OpenLayers as node module instead of git submodule ([@mapgears](https://github.com/mapgears))
6 | * [#34](https://github.com/mapgears/ol3-google-maps/pull/34) - Updated README with installation section ([@fipp](https://github.com/fipp))
7 | * [#31](https://github.com/mapgears/ol3-google-maps/pull/31) - Remove dependency on Google Maps when loading the library ([@mapgears](https://github.com/mapgears))
8 | * [#29](https://github.com/mapgears/ol3-google-maps/pull/29) - Update LIMITATIONS.md ([@christopheblin](https://github.com/christopheblin))
9 | * [#28](https://github.com/mapgears/ol3-google-maps/pull/28) - Fix ie issue ([@mapgears](https://github.com/mapgears))
10 | * [#25](https://github.com/mapgears/ol3-google-maps/pull/25) - Handle replacing the geometry like changing it ([@mapgears](https://github.com/mapgears))
11 | * [#24](https://github.com/mapgears/ol3-google-maps/pull/24) - Mark getMapTypeId as @api ([@mapgears](https://github.com/mapgears))
12 | * [#23](https://github.com/mapgears/ol3-google-maps/pull/23) - Add missing dependency to UMD definition ([@mapgears](https://github.com/mapgears))
13 | * [#22](https://github.com/mapgears/ol3-google-maps/pull/22) - Fix activation of vector source herald ([@mapgears](https://github.com/mapgears))
14 |
--------------------------------------------------------------------------------
/tasks/changelog.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | #
3 | # Generate a Markdown-formatted changelog from merge commits.
4 | #
5 |
6 | set -o errexit
7 |
8 | #
9 | # Regex to match the standard pull request commit message. Creates capture
10 | # groups for pull request number, GitHub username, and commit message body.
11 | #
12 | MERGE_RE=Merge\ pull\ request\ #\([0-9]+\)\ from\ \([^/]+\)\/[^\ ]+\ \(.*\)
13 |
14 | # Squash commits have a different format
15 | SQUASH_RE='([^\|]+)\|([^\(]+) \(#([0-9]+)\)'
16 |
17 | GITHUB_URL=https://github.com
18 | PULLS_URL=${GITHUB_URL}/mapgears/ol3-google-maps/pull
19 |
20 | display_usage() {
21 | cat <<-EOF
22 |
23 | Usage: ${1}
24 |
25 | Creates a Markdown-formatted changelog given a revision range.
26 |
27 | E.g.
28 | ${1} v0.1.. > changelog/v0.2.md
29 |
30 | See git-log(1) for details on the revision range syntax.
31 |
32 | EOF
33 | }
34 |
35 | #
36 | # Scan the git log for merge commit messages and output Markdown. This only
37 | # follows the first parent of merge commits to avoid merges within a topic
38 | # branch (instead only showing merges to master).
39 | #
40 | main() {
41 | git log --first-parent --format='%aN|%s %b' ${1} |
42 | {
43 | while read l; do
44 | if [[ ${l} =~ ${MERGE_RE} ]] ; then
45 | number="${BASH_REMATCH[1]}"
46 | author="${BASH_REMATCH[2]}"
47 | summary="${BASH_REMATCH[3]}"
48 | echo " * [#${number}](${PULLS_URL}/${number}) - ${summary} ([@${author}](${GITHUB_URL}/${author}))"
49 | elif [[ ${l} =~ ${SQUASH_RE} ]] ; then
50 | number="${BASH_REMATCH[3]}"
51 | author="${BASH_REMATCH[1]}"
52 | summary="${BASH_REMATCH[2]}"
53 | echo " * [#${number}](${PULLS_URL}/${number}) - ${summary} ([${author}](${GITHUB_URL}/search?q=${author}&type=Users))"
54 | fi
55 | done
56 | }
57 | }
58 |
59 | if test ${#} -ne 1; then
60 | display_usage ${0}
61 | exit 1
62 | else
63 | main ${1}
64 | fi
65 |
--------------------------------------------------------------------------------
/examples/overviewmap.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import OSMSource from 'ol/source/OSM.js';
5 | import OverviewMap from 'ol/control/OverviewMap.js';
6 | import {defaults as defaultControls} from 'ol/control.js';
7 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
8 | import GoogleLayer from 'olgm/layer/Google.js';
9 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
10 |
11 |
12 | const center = [-7908084, 6177492];
13 |
14 | const googleLayer = new GoogleLayer();
15 |
16 | const osmLayer = new TileLayer({
17 | source: new OSMSource(),
18 | visible: false
19 | });
20 |
21 | // Create the overview map control
22 | const overviewMapControl = new OverviewMap({
23 | className: 'ol-overviewmap ol-custom-overviewmap',
24 | collapsed: false
25 | });
26 |
27 | const map = new Map({
28 | controls: defaultControls().extend([
29 | overviewMapControl
30 | ]),
31 | // use OL3-Google-Maps recommended default interactions
32 | interactions: defaultInteractions(),
33 | layers: [
34 | googleLayer,
35 | osmLayer
36 | ],
37 | target: 'map',
38 | view: new View({
39 | center: center,
40 | zoom: 12
41 | })
42 | });
43 |
44 | const olGM = new OLGoogleMaps({
45 | map: map
46 | });
47 |
48 | // Get the map in the overview box
49 | const overviewMap = overviewMapControl.getOverviewMap();
50 |
51 | // Setup an instance of olGM for the overview
52 | const overviewOLGM = new OLGoogleMaps({
53 | map: overviewMap
54 | });
55 |
56 | // Activate it
57 | overviewOLGM.activate();
58 |
59 | // Activate the main map only when google maps is done loading in the overview.
60 | google.maps.event.addListenerOnce(overviewOLGM.gmap, 'idle', function() {
61 | olGM.activate();
62 | });
63 |
64 | document.getElementById('toggle').addEventListener('click', function() {
65 | googleLayer.setVisible(!googleLayer.getVisible());
66 | osmLayer.setVisible(!osmLayer.getVisible());
67 | });
68 |
--------------------------------------------------------------------------------
/examples/tiles.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Tiles
4 | shortdesc: Example of different tile layers rendered in Google Maps.
5 | docs: >
6 |
7 | Shows different tile layers rendered in Google Maps. Note: the
8 | layers are displayed in the order that you enable them.
9 |
10 |
11 | Whenever the opacity is changed on an OL3 layer, the same change
12 | is applied to the layer rendered by Google Maps. However, while
13 | Google Maps is active, all OL3 layers have their opacity set to 0.
14 | This means whenever the opacity is changed, OL3-Google-Maps changes
15 | it back to 0.
16 |
17 |
18 | To do this, we listen to the opacity:change event. This event is
19 | not fired if the value doesn't change. This means that setting the
20 | value to 0 on the OL3 layer won't work, the value should be set to
21 | something close to 0 instead. The slider below goes from 0.01 to 1,
22 | although Number.MIN_VALUE could be used instead.
23 |
24 | ---
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
46 |
47 |
--------------------------------------------------------------------------------
/src/olgm/listener/PropertyListener.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/listener/PropertyListener
3 | */
4 | import Listener from './Listener.js';
5 |
6 | class PropertyListener extends Listener {
7 | /**
8 | * Listener for OL object properties. Has utilities for listening on the property value.
9 | * @param {module:ol/Object~BaseObject} target Object with a property
10 | * @param {module:ol/Object~BaseObject=} oldTarget The previous object with a property
11 | * @param {string} key Property key
12 | * @param {function} listen Takes the current and previous property value as arguments.
13 | * Called on initialization and when the property value changes.
14 | * On initialization, the previous property value will be taken from the old target, if any.
15 | * Can return an AbstractListener or an array of AbstractListeners which will be unlistened when the property value changes.
16 | */
17 | constructor(target, oldTarget, key, listen) {
18 | super(target.on('change:' + key, e => {
19 | if (this.innerListener_) {
20 | if (Array.isArray(this.innerListener_)) {
21 | this.innerListener_.forEach(listener => listener.unlisten());
22 | } else {
23 | this.innerListener_.unlisten();
24 | }
25 | }
26 | this.innerListener_ = listen(e.target.get(e.key), e.oldValue);
27 | }));
28 |
29 | /**
30 | * @type {?module:olgm/AbstractListener~AbstractListener|Array}
31 | * @private
32 | */
33 | this.innerListener_ = listen(target.get(key), oldTarget && oldTarget.get(key));
34 | }
35 |
36 | /**
37 | * @inheritdoc
38 | */
39 | unlisten() {
40 | if (this.innerListener_) {
41 | if (Array.isArray(this.innerListener_)) {
42 | this.innerListener_.forEach(listener => listener.unlisten());
43 | } else {
44 | this.innerListener_.unlisten();
45 | }
46 | }
47 | super.unlisten();
48 | }
49 | }
50 |
51 | export default PropertyListener;
52 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Mapgears
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
24 | Portions of this library were borrowed from the MapLabel project, which
25 | original source code is available at
26 |
27 | http://google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel
28 |
29 | and published under the following license:
30 |
31 | Copyright 2011 Google Inc.
32 |
33 | Licensed under the Apache License, Version 2.0 (the "License");
34 | you may not use this file except in compliance with the License.
35 | You may obtain a copy of the License at
36 |
37 | http://www.apache.org/licenses/LICENSE-2.0
38 |
39 | Unless required by applicable law or agreed to in writing, software
40 | distributed under the License is distributed on an "AS IS" BASIS,
41 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
42 | See the License for the specific language governing permissions and
43 | limitations under the License.
--------------------------------------------------------------------------------
/src/olgm/interaction.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/interaction
3 | */
4 | import {defaults as olDefaults} from 'ol/interaction.js';
5 | import DragPan from 'ol/interaction/DragPan.js';
6 |
7 |
8 | /**
9 | * Set of interactions that are recommended to include in ol3 maps used
10 | * by this library. It basically is the same as the default interactions
11 | * included in such maps by default, with the exclusion of some that are
12 | * not compatible with this library.
13 | *
14 | * Here's the one that are excluded and why:
15 | * * `ol.interaction.DragRotate` - Google Maps doesn't support the same kind
16 | * of rotation that OL3 does.
17 | * * `ol.interaction.PinchRotate` - Google Maps doesn't support the same kind
18 | * of rotation that OL3 does.
19 | * * `ol.interaction.DragPan` - The one created by OL3 includes kinetic
20 | * animation while panning, which causes animation not being syncrhonized
21 | * with Google Maps. It is excluded, but also replace by one that doesn't
22 | * have kinetic enabled.
23 | * * `ol.interaction.MouseWheelZoom` - By default, OL uses a zoom animation
24 | * that is causing a lag before zooming starts. It is deactivated by setting
25 | * its duration to 0. Without this change, a temporary 'shift' effect is also
26 | * visible when zooming; this change prevents this artefact as well.
27 | *
28 | * @param {module:ol/interaction/Interaction~DefaultsOptions=} opt_options Defaults options.
29 | * @return {module:ol/Collection} A collection of
30 | * interactions to be used with the module:ol/PluggableMap constructor's interactions option.
31 | * @api stable
32 | */
33 | export function defaults(opt_options) {
34 |
35 | const options = (opt_options !== undefined) ? opt_options : {};
36 |
37 | options['altShiftDragRotate'] = false;
38 | options['dragPan'] = false;
39 | options['pinchRotate'] = false;
40 | options['zoomDuration'] = 0;
41 |
42 | return olDefaults(options).extend([
43 | new DragPan()
44 | ]);
45 |
46 | }
47 |
--------------------------------------------------------------------------------
/examples/archived/latest.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import VectorLayer from 'ol/layer/Vector.js';
5 | import OSMSource from 'ol/source/OSM.js';
6 | import VectorSource from 'ol/source/Vector.js';
7 | import Feature from 'ol/Feature.js';
8 | import Point from 'ol/geom/Point.js';
9 | import Style from 'ol/style/Style.js';
10 | import Stroke from 'ol/style/Stroke.js';
11 | import Fill from 'ol/style/Fill.js';
12 | import Circle from 'ol/style/Circle.js';
13 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
14 | import GoogleLayer from 'olgm/layer/Google.js';
15 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
16 |
17 |
18 | const center = [-7908084, 6177492];
19 |
20 | const googleLayer = new GoogleLayer();
21 |
22 | const osmLayer = new TileLayer({
23 | source: new OSMSource(),
24 | visible: false
25 | });
26 |
27 | const source = new VectorSource();
28 | const feature = new Feature(new Point(center));
29 | feature.setStyle(new Style({
30 | image: new Circle({
31 | 'fill': new Fill({color: 'rgba(153,51,51,0.3)'}),
32 | 'stroke': new Stroke({color: 'rgb(153,51,51)', width: 2}),
33 | 'radius': 20
34 | })
35 | }));
36 | source.addFeature(feature);
37 | const vector = new VectorLayer({
38 | source: source
39 | });
40 |
41 | const map = new Map({
42 | // use OL3-Google-Maps recommended default interactions
43 | interactions: defaultInteractions(),
44 | layers: [
45 | googleLayer,
46 | osmLayer,
47 | vector
48 | ],
49 | target: 'map',
50 | view: new View({
51 | center: center,
52 | zoom: 12
53 | })
54 | });
55 |
56 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
57 | olGM.activate();
58 |
59 |
60 | document.getElementById('toggle').addEventListener('click', function() {
61 | googleLayer.setVisible(!googleLayer.getVisible());
62 | osmLayer.setVisible(!osmLayer.getVisible());
63 | });
64 |
65 | document.getElementById('google-maps-version').innerHTML = google.maps.version;
66 |
--------------------------------------------------------------------------------
/examples/vector.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import VectorLayer from 'ol/layer/Vector.js';
5 | import OSMSource from 'ol/source/OSM.js';
6 | import VectorSource from 'ol/source/Vector.js';
7 | import Feature from 'ol/Feature.js';
8 | import Point from 'ol/geom/Point.js';
9 | import Style from 'ol/style/Style.js';
10 | import Stroke from 'ol/style/Stroke.js';
11 | import Fill from 'ol/style/Fill.js';
12 | import Circle from 'ol/style/Circle.js';
13 | import ZoomSlider from 'ol/control/ZoomSlider.js';
14 | import {defaults as defaultControls} from 'ol/control.js';
15 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
16 | import GoogleLayer from 'olgm/layer/Google.js';
17 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
18 |
19 |
20 | const center = [-7908084, 6177492];
21 |
22 | const googleLayer = new GoogleLayer();
23 |
24 | const osmLayer = new TileLayer({
25 | source: new OSMSource(),
26 | visible: false
27 | });
28 |
29 | const source = new VectorSource();
30 | const feature = new Feature(new Point(center));
31 | feature.setStyle(new Style({
32 | image: new Circle({
33 | 'fill': new Fill({color: 'rgba(153,51,51,0.3)'}),
34 | 'stroke': new Stroke({color: 'rgb(153,51,51)', width: 2}),
35 | 'radius': 20
36 | })
37 | }));
38 | source.addFeature(feature);
39 | const vector = new VectorLayer({
40 | source: source
41 | });
42 |
43 | const map = new Map({
44 | // use OL3-Google-Maps recommended default interactions
45 | interactions: defaultInteractions(),
46 | controls: defaultControls().extend([
47 | new ZoomSlider()
48 | ]),
49 | layers: [
50 | googleLayer,
51 | osmLayer,
52 | vector
53 | ],
54 | target: 'map',
55 | view: new View({
56 | center: center,
57 | zoom: 12
58 | })
59 | });
60 |
61 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
62 | olGM.activate();
63 |
64 |
65 | document.getElementById('toggle').addEventListener('click', function() {
66 | googleLayer.setVisible(!googleLayer.getVisible());
67 | osmLayer.setVisible(!osmLayer.getVisible());
68 | });
69 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/static/styles/prettify-jsdoc.css:
--------------------------------------------------------------------------------
1 | /* JSDoc prettify.js theme */
2 |
3 | /* plain text */
4 | .pln {
5 | color: #000000;
6 | font-weight: normal;
7 | font-style: normal;
8 | }
9 |
10 | /* string content */
11 | .str {
12 | color: #006400;
13 | font-weight: normal;
14 | font-style: normal;
15 | }
16 |
17 | /* a keyword */
18 | .kwd {
19 | color: #000000;
20 | font-weight: bold;
21 | font-style: normal;
22 | }
23 |
24 | /* a comment */
25 | .com {
26 | font-weight: normal;
27 | font-style: italic;
28 | }
29 |
30 | /* a type name */
31 | .typ {
32 | color: #000000;
33 | font-weight: normal;
34 | font-style: normal;
35 | }
36 |
37 | /* a literal value */
38 | .lit {
39 | color: #006400;
40 | font-weight: normal;
41 | font-style: normal;
42 | }
43 |
44 | /* punctuation */
45 | .pun {
46 | color: #000000;
47 | font-weight: bold;
48 | font-style: normal;
49 | }
50 |
51 | /* lisp open bracket */
52 | .opn {
53 | color: #000000;
54 | font-weight: bold;
55 | font-style: normal;
56 | }
57 |
58 | /* lisp close bracket */
59 | .clo {
60 | color: #000000;
61 | font-weight: bold;
62 | font-style: normal;
63 | }
64 |
65 | /* a markup tag name */
66 | .tag {
67 | color: #006400;
68 | font-weight: normal;
69 | font-style: normal;
70 | }
71 |
72 | /* a markup attribute name */
73 | .atn {
74 | color: #006400;
75 | font-weight: normal;
76 | font-style: normal;
77 | }
78 |
79 | /* a markup attribute value */
80 | .atv {
81 | color: #006400;
82 | font-weight: normal;
83 | font-style: normal;
84 | }
85 |
86 | /* a declaration */
87 | .dec {
88 | color: #000000;
89 | font-weight: bold;
90 | font-style: normal;
91 | }
92 |
93 | /* a variable name */
94 | .var {
95 | color: #000000;
96 | font-weight: normal;
97 | font-style: normal;
98 | }
99 |
100 | /* a function name */
101 | .fun {
102 | color: #000000;
103 | font-weight: bold;
104 | font-style: normal;
105 | }
106 |
107 | /* Specify class=linenums on a pre to get line numbering */
108 | ol.linenums {
109 | margin-top: 0;
110 | margin-bottom: 0;
111 | }
112 |
--------------------------------------------------------------------------------
/src/olgm/obj.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/obj
3 | */
4 | /* Based on https://github.com/openlayers/openlayers/blob/master/src/ol/obj.js */
5 |
6 |
7 | /**
8 | * Polyfill for Object.assign(). Assigns enumerable and own properties from
9 | * one or more source objects to a target object.
10 | * See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign.
11 | *
12 | * @param {!Object} target The target object.
13 | * @param {...Object} var_sources The source object(s).
14 | * @return {!Object} The modified target object.
15 | */
16 | export const assign = (typeof Object.assign === 'function') ? Object.assign : function(target, var_sources) {
17 | if (target === undefined || target === null) {
18 | throw new TypeError('Cannot convert undefined or null to object');
19 | }
20 |
21 | const output = Object(target);
22 | for (let i = 1, ii = arguments.length; i < ii; ++i) {
23 | const source = arguments[i];
24 | if (source !== undefined && source !== null) {
25 | for (const key in source) {
26 | if (source.hasOwnProperty(key)) {
27 | output[key] = source[key];
28 | }
29 | }
30 | }
31 | }
32 | return output;
33 | };
34 |
35 |
36 | /**
37 | * Removes all properties from an object.
38 | * @param {Object} object The object to clear.
39 | */
40 | export function clear(object) {
41 | for (const property in object) {
42 | delete object[property];
43 | }
44 | }
45 |
46 |
47 | /**
48 | * Get an array of property values from an object.
49 | * @param {Object} object The object from which to get the values.
50 | * @return {!Array} The property values.
51 | * @template K,V
52 | */
53 | export function getValues(object) {
54 | const values = [];
55 | for (const property in object) {
56 | values.push(object[property]);
57 | }
58 | return values;
59 | }
60 |
61 |
62 | /**
63 | * Determine if an object has any properties.
64 | * @param {Object} object The object to check.
65 | * @return {boolean} The object is empty.
66 | */
67 | export function isEmpty(object) {
68 | let property;
69 | for (property in object) {
70 | return false;
71 | }
72 | return !property;
73 | }
74 |
--------------------------------------------------------------------------------
/examples/rotation.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import VectorLayer from 'ol/layer/Vector.js';
5 | import OSMSource from 'ol/source/OSM.js';
6 | import VectorSource from 'ol/source/Vector.js';
7 | import Feature from 'ol/Feature.js';
8 | import Point from 'ol/geom/Point.js';
9 | import Style from 'ol/style/Style.js';
10 | import Icon from 'ol/style/Icon.js';
11 | import DragPanInteraction from 'ol/interaction/DragPan.js';
12 | import {defaults as defaultInteractions} from 'ol/interaction.js';
13 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
14 | import GoogleLayer from 'olgm/layer/Google.js';
15 |
16 |
17 | const center = [-7908084, 6177492];
18 |
19 | const googleLayer = new GoogleLayer();
20 |
21 | const osmLayer = new TileLayer({
22 | source: new OSMSource(),
23 | visible: false
24 | });
25 |
26 | const source = new VectorSource();
27 | const feature = new Feature(new Point(center));
28 | feature.setStyle(new Style({
29 | image: new Icon(/** @type {olx.style.IconOptions} */ ({
30 | anchor: [0.5, 46],
31 | anchorXUnits: 'fraction',
32 | anchorYUnits: 'pixels',
33 | size: [32, 48],
34 | scale: 0.75,
35 | src: 'data/icon.png',
36 | rotation: 0.25 * Math.PI,
37 | opacity: 0.5
38 | }))
39 | }));
40 | source.addFeature(feature);
41 | const vector = new VectorLayer({
42 | source: source
43 | });
44 |
45 | const interactionOptions = {'dragPan': false};
46 | const interactions = defaultInteractions(interactionOptions).extend([
47 | new DragPanInteraction()
48 | ]);
49 |
50 | const map = new Map({
51 | interactions: interactions,
52 | layers: [
53 | googleLayer,
54 | osmLayer,
55 | vector
56 | ],
57 | target: 'map',
58 | view: new View({
59 | center: center,
60 | rotation: Math.PI / 3,
61 | zoom: 12
62 | })
63 | });
64 |
65 | const olGM = new OLGoogleMaps({
66 | map: map,
67 | mapIconOptions: {
68 | useCanvas: true
69 | }}); // map is the Map instance
70 | olGM.activate();
71 |
72 |
73 | document.getElementById('toggle').addEventListener('click', function() {
74 | googleLayer.setVisible(!googleLayer.getVisible());
75 | osmLayer.setVisible(!osmLayer.getVisible());
76 | });
77 |
--------------------------------------------------------------------------------
/src/olgm/herald/Source.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/herald/Source
3 | */
4 | import Herald from './Herald.js';
5 |
6 | class SourceHerald extends Herald {
7 | /**
8 | * This is an abstract class. Children of this class will listen to one or
9 | * multiple layers of a specific class to render them using the Google Maps
10 | * API whenever a Google Maps layer is active.
11 | * @param {module:ol/PluggableMap} ol3map openlayers map
12 | * @param {google.maps.Map} gmap google maps map
13 | * @abstract
14 | */
15 | constructor(ol3map, gmap) {
16 | super(ol3map, gmap);
17 |
18 | /**
19 | * Flag that determines whether the GoogleMaps map is currently active, i.e.
20 | * is currently shown and has the OpenLayers map added as one of its control.
21 | * @type {boolean}
22 | * @protected
23 | */
24 | this.googleMapsIsActive_ = false;
25 | }
26 |
27 |
28 | /**
29 | * Watch the layer. This adds the layer to the list of layers the herald is
30 | * listening to, so that it can display it using Google Maps as soon as the
31 | * layer becomes visible.
32 | * @param {module:ol/layer/Base} layer layer to watch
33 | * @abstract
34 | * @api
35 | */
36 | watchLayer(layer) {}
37 |
38 |
39 | /**
40 | * Stop watching the layer. This removes the layer from the list of layers the
41 | * herald is listening to, and restores its original opacity.
42 | * @param {module:ol/layer/Base} layer layer to unwatch
43 | * @abstract
44 | * @api
45 | */
46 | unwatchLayer(layer) {}
47 |
48 |
49 | /**
50 | * Set the googleMapsIsActive value to true or false
51 | * @param {boolean} active whether or not google maps is active
52 | * @api
53 | */
54 | setGoogleMapsActive(active) {
55 | this.googleMapsIsActive = active;
56 | }
57 |
58 |
59 | /**
60 | * Find the index of a layer in the ol3 map's layers
61 | * @param {module:ol/layer/Base} layer layer to find in ol3's layers array
62 | * @returns {number} suggested zIndex for that layer
63 | * @api
64 | */
65 | findIndex(layer) {
66 | const layers = this.ol3map.getLayers().getArray();
67 | let layerIndex = layers.indexOf(layer);
68 | const zIndex = layer.getZIndex();
69 |
70 | if (zIndex != 0) {
71 | layerIndex = zIndex;
72 | }
73 |
74 | return layerIndex;
75 | }
76 | }
77 | export default SourceHerald;
78 |
--------------------------------------------------------------------------------
/config/jsdoc/api/plugins/observable.js:
--------------------------------------------------------------------------------
1 | const classes = {};
2 | const observables = {};
3 |
4 | exports.handlers = {
5 |
6 | newDoclet: function(e) {
7 | const doclet = e.doclet;
8 | if (doclet.kind == 'class') {
9 | classes[doclet.longname] = doclet;
10 | }
11 | },
12 |
13 | parseComplete: function(e) {
14 | const doclets = e.doclets;
15 | let cls, doclet, event, i, ii, observable;
16 | for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
17 | doclet = doclets[i];
18 | cls = classes[doclet.longname.split('#')[0]];
19 | if (typeof doclet.observable == 'string' && cls) {
20 | let name = doclet.name.replace(/^[sg]et/, '');
21 | name = name.substr(0, 1).toLowerCase() + name.substr(1);
22 | const key = doclet.longname.split('#')[0] + '#' + name;
23 | doclet.observable = key;
24 | if (!observables[key]) {
25 | observables[key] = {};
26 | }
27 | observable = observables[key];
28 | observable.name = name;
29 | observable.readonly = typeof observable.readonly == 'boolean' ?
30 | observable.readonly : true;
31 | if (doclet.name.indexOf('get') === 0) {
32 | observable.type = doclet.returns[0].type;
33 | observable.description = doclet.returns[0].description;
34 | } else if (doclet.name.indexOf('set') === 0) {
35 | observable.readonly = false;
36 | }
37 | if (doclet.stability) {
38 | observable.stability = doclet.stability;
39 | }
40 | if (!cls.observables) {
41 | cls.observables = [];
42 | }
43 | observable = observables[doclet.observable];
44 | if (observable.type && cls.observables.indexOf(observable) == -1) {
45 | cls.observables.push(observable);
46 | }
47 | if (!cls.fires) {
48 | cls.fires = [];
49 | }
50 | event = 'module:ol/Object~ObjectEvent#event:change:' + name;
51 | if (cls.fires.indexOf(event) == -1) {
52 | cls.fires.push(event);
53 | }
54 | }
55 | }
56 | }
57 |
58 | };
59 |
60 | exports.defineTags = function(dictionary) {
61 | dictionary.defineTag('observable', {
62 | mustNotHaveValue: true,
63 | canHaveType: false,
64 | canHaveName: false,
65 | onTagged: function(doclet, tag) {
66 | doclet.observable = '';
67 | }
68 | });
69 | };
70 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/returns.tmpl:
--------------------------------------------------------------------------------
1 | /g, '');
8 |
9 | var isNamed = ret.name ? true : false;
10 | var name = ret.name || ret.description;
11 | var startSpacePos = name.indexOf(" ");
12 |
13 | if (parentReturn !== null && name.indexOf(parentReturn.name + '.') === 0) {
14 | ret.name = isNamed ? name.substr(parentReturn.name.length + 1) : name.substr(parentReturn.name.length + 1, startSpacePos - (parentReturn.name.length + 1));
15 |
16 | parentReturn.subReturns = parentReturn.subReturns || [];
17 | parentReturn.subReturns.push(ret);
18 | returns[i] = null;
19 | } else {
20 | if (!isNamed) {
21 | ret.name = ret.description.substr(0, startSpacePos !== -1 ? startSpacePos : ret.description.length);
22 | }
23 |
24 | parentReturn = ret;
25 | }
26 | }
27 | });
28 | ?>
29 |
30 | 1) {
32 | ?>
33 |
34 |
35 |
36 | Name
37 | Type
38 | Description
39 |
40 |
41 |
42 |
49 |
50 |
52 |
55 |
56 | |
57 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 | Returns:
70 |
71 |
72 |
--------------------------------------------------------------------------------
/config/jsdoc/api/readme.md:
--------------------------------------------------------------------------------
1 | # API Documentation
2 |
3 | This directory contains configuration (`conf.json`), static content (`index.md`), template (`template/`) and plugins (`plugins/`) for the [JSDoc3](http://usejsdoc.org/) API generator.
4 |
5 | ## Documenting the source code
6 |
7 | JSDoc annotations are used for metadata used by the compiler, for defining the user facing API, and for user documentation.
8 |
9 | In the simplest case, a JSDoc block can look like this:
10 | ```js
11 | /**
12 | * Activate OpenLayers map
13 | * @api
14 | */
15 | olgm.OLGoogleMaps.prototype.activateOpenLayers = function() {
16 | // ...
17 | };
18 | ```
19 | The first line is text for the user documentation. This can be long, and it can
20 | contain Markdown.
21 |
22 | The second line (`@api`) marks the method as part of the api and thus exportable. Without such an api annotation, the method will not be documented in the generated API documentation. Symbols without an api annotation will also not be exportable.
23 |
24 | The `@api` annotation can be used in conjunction with the `@inheritDoc` annotation to export a symbol that is documented on a parent class (where the method may be abstract). In general, `@api` annotations should never be used on abstract methods (only on their implementations).
25 |
26 | ### Events
27 |
28 | Events are documented using `@fires` and `@event` annotations:
29 | ```js
30 | /**
31 | * Constants for event names.
32 | * @enum {string}
33 | */
34 | ol.MapBrowserEventType = {
35 | /**
36 | * A true single click with no dragging and no double click. Note that this
37 | * event is delayed by 250 ms to ensure that it is not a double click.
38 | * @event ol.MapBrowserEvent#singleclick
39 | * @api
40 | */
41 | SINGLECLICK: 'singleclick',
42 | // ...
43 | };
44 | ```
45 | Note the value of the `@event` annotation. The text before the hash refers to the event class that the event belongs to, and the text after the hash is the type of the event.
46 |
47 | To document which events are fired by a class or method, the `@fires` annotation is used:
48 | ```js
49 | /**
50 | * @fires ol.MapBrowserEvent
51 | * @fires ol.MapEvent
52 | * @fires ol.render.Event
53 | * ...
54 | */
55 | ol.Map = function(options) {
56 | // ...
57 | };
58 | ```
59 |
60 | ### Observable Properties
61 |
62 | Observable properties are documented using the `@observable` annotation. This annotation is added to the getter of an observable property. If an observable property is also settable, the setter is annotated with `@observable` as well.
63 |
--------------------------------------------------------------------------------
/examples/icon.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import VectorLayer from 'ol/layer/Vector.js';
5 | import OSMSource from 'ol/source/OSM.js';
6 | import VectorSource from 'ol/source/Vector.js';
7 | import Feature from 'ol/Feature.js';
8 | import Point from 'ol/geom/Point.js';
9 | import Style from 'ol/style/Style.js';
10 | import Icon from 'ol/style/Icon.js';
11 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
12 | import GoogleLayer from 'olgm/layer/Google.js';
13 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
14 |
15 | const center = [-7908084, 6177492];
16 | const left = [-7928084, 6177492];
17 |
18 | const googleLayer = new GoogleLayer();
19 |
20 | const osmLayer = new TileLayer({
21 | source: new OSMSource(),
22 | visible: false
23 | });
24 |
25 | const source = new VectorSource();
26 | const feature = new Feature(new Point(center));
27 | feature.setStyle(new Style({
28 | image: new Icon(({
29 | anchor: [0.5, 46],
30 | anchorXUnits: 'fraction',
31 | anchorYUnits: 'pixels',
32 | size: [32, 48],
33 | scale: 0.75,
34 | src: 'data/icon.png',
35 | rotation: 0.25 * Math.PI,
36 | opacity: 0.5
37 | }))
38 | }));
39 | source.addFeature(feature);
40 |
41 | const bigIcon = new Feature(new Point(left));
42 | bigIcon.setStyle(new Style({
43 | image: new Icon(({
44 | anchor: [132, 468],
45 | anchorXUnits: 'pixels',
46 | anchorYUnits: 'pixels',
47 | src: 'data/linux.png',
48 | opacity: 0.5
49 | }))
50 | }));
51 |
52 | source.addFeature(bigIcon);
53 |
54 | setInterval(function() {
55 | const image = bigIcon.getStyle().getImage();
56 | image.setRotation(image.getRotation() + Math.PI / 180.0);
57 | bigIcon.changed();
58 | }, 30);
59 |
60 | const vector = new VectorLayer({
61 | source: source
62 | });
63 |
64 | const map = new Map({
65 | // use OL3-Google-Maps recommended default interactions
66 | interactions: defaultInteractions(),
67 | layers: [
68 | googleLayer,
69 | osmLayer,
70 | vector
71 | ],
72 | target: 'map',
73 | view: new View({
74 | center: center,
75 | zoom: 12
76 | })
77 | });
78 |
79 | const olGM = new OLGoogleMaps({
80 | map: map,
81 | mapIconOptions: {
82 | useCanvas: true
83 | }}); // map is the ol.Map instance
84 | olGM.activate();
85 |
86 |
87 | document.getElementById('toggle').addEventListener('click', function() {
88 | googleLayer.setVisible(!googleLayer.getVisible());
89 | osmLayer.setVisible(!osmLayer.getVisible());
90 | });
91 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/less/navigation.less:
--------------------------------------------------------------------------------
1 | @import "common.less";
2 |
3 | ::-webkit-scrollbar {
4 | width: 8px;
5 | background-color: transparent;
6 | }
7 |
8 | ::-webkit-scrollbar-thumb {
9 | background-color: gray;
10 | border-radius: 4px;
11 | }
12 |
13 | .navigation {
14 | position: fixed;
15 | float: left;
16 | width: @navWidth;
17 | height: 100%;
18 | background-color: @colorBgNavi;
19 |
20 | .applicationName {
21 | margin: 0;
22 | margin-top: 15px;
23 | padding: 10px 15px;
24 | font: bold 1.25em Helvetica;
25 | color: #fff;
26 |
27 | a {
28 | color: #fff;
29 | }
30 | }
31 |
32 | .search {
33 | padding: 10px 15px;
34 |
35 | input {
36 | background-color: #333;
37 | color: #fff;
38 | border-color: #555;
39 | }
40 | }
41 |
42 | .list {
43 | padding: 10px 15px 0 15px;
44 | position: relative;
45 | overflow: auto;
46 | width: 100%;
47 | }
48 |
49 | li.item {
50 | margin-bottom: 8px;
51 | padding-bottom: 8px;
52 | border-bottom: 1px solid #333;
53 |
54 | a {
55 | color: #bbb;
56 | &:hover {
57 | color: #fff;
58 | }
59 | }
60 | .title {
61 | cursor: pointer;
62 | position: relative;
63 | a {
64 | color: #e1e1e1;
65 | &:hover {
66 | color: #fff;
67 | }
68 | }
69 | display: block;
70 | font-size: 0.8em;
71 |
72 | .static {
73 | display: block;
74 | border-radius: 3px;
75 | background-color: @colorSubtitle;
76 | color: #000;
77 | font-size: 0.7em;
78 | padding: 2px 4px;
79 | float: right;
80 | }
81 | }
82 |
83 | .subtitle {
84 | margin-top: 10px;
85 | font: bold 0.65em Helvetica;
86 | color: @colorSubtitle;
87 | display: block;
88 | }
89 |
90 |
91 | ul {
92 | & > li {
93 | font-size: 0.7em;
94 | padding-left: 8px;
95 | margin-top: 2px;
96 | }
97 | }
98 |
99 | .itemMembers {
100 | display: none;
101 | }
102 | }
103 | }
--------------------------------------------------------------------------------
/examples/wmts.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import OSMSource from 'ol/source/OSM.js';
5 | import WMTSSource from 'ol/source/WMTS.js';
6 | import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
7 | import {get as getProjection} from 'ol/proj.js';
8 | import {getWidth as getExtentWidth, getTopLeft as getExtentTopLeft} from 'ol/extent.js';
9 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
10 | import GoogleLayer from 'olgm/layer/Google.js';
11 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
12 |
13 |
14 | const center = [-10997148, 4569099];
15 |
16 | const googleLayer = new GoogleLayer();
17 |
18 | const osmLayer = new TileLayer({
19 | source: new OSMSource(),
20 | visible: false
21 | });
22 |
23 | // Setup tilegrid for wmts layer
24 | const projection = getProjection('EPSG:3857');
25 | const projectionExtent = projection.getExtent();
26 | const size = getExtentWidth(projectionExtent) / 256;
27 | const resolutions = new Array(14);
28 | const matrixIds = new Array(14);
29 | for (let z = 0; z < 14; ++z) {
30 | // generate resolutions and matrixIds arrays for this WMTS
31 | resolutions[z] = size / Math.pow(2, z);
32 | matrixIds[z] = z;
33 | }
34 |
35 | const wmtsLayer = new TileLayer({
36 | opacity: 0.7,
37 | source: new WMTSSource({
38 | attributions: 'Tiles © ArcGIS',
40 | url: 'http://services.arcgisonline.com/arcgis/rest/' +
41 | 'services/Demographics/USA_Population_Density/MapServer/WMTS/',
42 | layer: '0',
43 | matrixSet: 'EPSG:3857',
44 | format: 'image/png',
45 | projection: projection,
46 | tileGrid: new WMTSTileGrid({
47 | origin: getExtentTopLeft(projectionExtent),
48 | resolutions: resolutions,
49 | matrixIds: matrixIds
50 | }),
51 | style: 'default',
52 | wrapX: true
53 | })
54 | });
55 |
56 |
57 | const map = new Map({
58 | // use OL3-Google-Maps recommended default interactions
59 | interactions: defaultInteractions(),
60 | layers: [
61 | googleLayer,
62 | osmLayer,
63 | wmtsLayer
64 | ],
65 | target: 'map',
66 | view: new View({
67 | center: center,
68 | zoom: 4
69 | })
70 | });
71 |
72 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
73 | olGM.activate();
74 |
75 | document.getElementById('toggle').addEventListener('click', function() {
76 | googleLayer.setVisible(!googleLayer.getVisible());
77 | osmLayer.setVisible(!osmLayer.getVisible());
78 | });
79 |
--------------------------------------------------------------------------------
/examples/resources/layout.css:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700);
2 |
3 | body {
4 | font-family: 'Quattrocento Sans', sans-serif;
5 | font-size: 16px;
6 | }
7 | .navbar {
8 | background-color: #1F6B75;
9 | color: white;
10 | border: 0;
11 | border-radius: 0;
12 | }
13 | .navbar-brand {
14 | color: white;
15 | font-weight: bold;
16 | font-size: 160%;
17 | }
18 | .navbar-brand:hover,
19 | .navbar-brand:focus {
20 | color: #aae1e9;
21 | }
22 | .navbar-brand img {
23 | height: 35px;
24 | vertical-align: middle;
25 | margin-right: 5px;
26 | display: inline-block;
27 | }
28 | .nav>li>a:hover, .nav>li>a:focus, .nav>li>a.active {
29 | background-color: #268591;
30 | }
31 | .navbar-nav>li>a {
32 | color: white;
33 | }
34 | .display-table {
35 | display: table;
36 | }
37 | .version-form, .navbar-form {
38 | display: table-cell;
39 | vertical-align: middle;
40 | }
41 | .version-form {
42 | color: #333;
43 | }
44 |
45 | #title {
46 | margin-top: 0;
47 | }
48 |
49 | #docs {
50 | margin-top: 1em;
51 | }
52 |
53 | ul.inline,
54 | ol.inline {
55 | margin-left: 0;
56 | padding-left: 0;
57 | list-style: none;
58 | }
59 |
60 | ul.inline>li,
61 | ol.inline>li {
62 | display: inline-block;
63 | padding-left: 5px;
64 | padding-right: 5px;
65 | }
66 |
67 | .map {
68 | height: 400px;
69 | width: 100%;
70 | background: url(map-background.jpg) repeat;
71 | margin-bottom: 10px;
72 | }
73 | .ol-attribution.ol-logo-only,
74 | .ol-attribution.ol-uncollapsible {
75 | max-width: calc(100% - 3em);
76 | height: 1.5em;
77 | }
78 | .ol-attribution ul {
79 | font-size: 1rem;
80 | }
81 | .ol-control button, .ol-attribution, .ol-scale-line-inner {
82 | font-family: 'Lucida Grande',Verdana,Geneva,Lucida,Arial,Helvetica,sans-serif;
83 | }
84 | .iframe-info iframe {
85 | width: 100%;
86 | }
87 |
88 | pre[class*="language-"] {
89 | margin-top: 20px;
90 | background: #FFFFFF;
91 | }
92 |
93 | #source-controls {
94 | position: absolute;
95 | margin-top: 20px;
96 | right: 40px;
97 | }
98 |
99 | #source-controls a {
100 | margin-left: 15px;
101 | }
102 |
103 | #copy-button {
104 | text-decoration: none;
105 | cursor: pointer;
106 | }
107 |
108 | #codepen-button {
109 | text-decoration: none;
110 | cursor: pointer;
111 | }
112 |
113 | pre {
114 | border: 1px solid #eee;
115 | border-radius: 0;
116 | }
117 |
118 | #tags, #shortdesc, .hidden {
119 | display: none;
120 | }
121 | #api-links ul {
122 | display: inline;
123 | }
124 | #latest-check {
125 | margin-top: -10px;
126 | margin-bottom: 10px;
127 | }
128 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/static/styles/prettify-tomorrow.css:
--------------------------------------------------------------------------------
1 | /* Tomorrow Theme */
2 | /* Original theme - https://github.com/chriskempson/tomorrow-theme */
3 | /* Pretty printing styles. Used with prettify.js. */
4 | /* SPAN elements with the classes below are added by prettyprint. */
5 | /* plain text */
6 | .pln {
7 | color: #4d4d4c; }
8 |
9 | @media screen {
10 | /* string content */
11 | .str {
12 | color: #718c00; }
13 |
14 | /* a keyword */
15 | .kwd {
16 | color: #8959a8; }
17 |
18 | /* a comment */
19 | .com {
20 | color: #8e908c; }
21 |
22 | /* a type name */
23 | .typ {
24 | color: #4271ae; }
25 |
26 | /* a literal value */
27 | .lit {
28 | color: #f5871f; }
29 |
30 | /* punctuation */
31 | .pun {
32 | color: #4d4d4c; }
33 |
34 | /* lisp open bracket */
35 | .opn {
36 | color: #4d4d4c; }
37 |
38 | /* lisp close bracket */
39 | .clo {
40 | color: #4d4d4c; }
41 |
42 | /* a markup tag name */
43 | .tag {
44 | color: #c82829; }
45 |
46 | /* a markup attribute name */
47 | .atn {
48 | color: #f5871f; }
49 |
50 | /* a markup attribute value */
51 | .atv {
52 | color: #3e999f; }
53 |
54 | /* a declaration */
55 | .dec {
56 | color: #f5871f; }
57 |
58 | /* a variable name */
59 | .var {
60 | color: #c82829; }
61 |
62 | /* a function name */
63 | .fun {
64 | color: #4271ae; } }
65 | /* Use higher contrast and text-weight for printable form. */
66 | @media print, projection {
67 | .str {
68 | color: #060; }
69 |
70 | .kwd {
71 | color: #006;
72 | font-weight: bold; }
73 |
74 | .com {
75 | color: #600;
76 | font-style: italic; }
77 |
78 | .typ {
79 | color: #404;
80 | font-weight: bold; }
81 |
82 | .lit {
83 | color: #044; }
84 |
85 | .pun, .opn, .clo {
86 | color: #440; }
87 |
88 | .tag {
89 | color: #006;
90 | font-weight: bold; }
91 |
92 | .atn {
93 | color: #404; }
94 |
95 | .atv {
96 | color: #060; } }
97 | /* Style */
98 | /*
99 | pre.prettyprint {
100 | background: white;
101 | font-family: Menlo, Monaco, Consolas, monospace;
102 | font-size: 12px;
103 | line-height: 1.5;
104 | border: 1px solid #ccc;
105 | padding: 10px; }
106 | */
107 |
108 | /* Specify class=linenums on a pre to get line numbering */
109 | ol.linenums {
110 | margin-top: 0;
111 | margin-bottom: 0; }
112 |
113 | /* IE indents via margin-left */
114 | li.L0,
115 | li.L1,
116 | li.L2,
117 | li.L3,
118 | li.L4,
119 | li.L5,
120 | li.L6,
121 | li.L7,
122 | li.L8,
123 | li.L9 {
124 | /* */ }
125 |
126 | /* Alternate shading for lines */
127 | li.L1,
128 | li.L3,
129 | li.L5,
130 | li.L7,
131 | li.L9 {
132 | /* */ }
133 |
--------------------------------------------------------------------------------
/config/jsdoc/api/plugins/typedefs.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Changes @enum annotations into @typedef.
3 | */
4 |
5 | // types that are undefined or typedefs containing undefined
6 | let undefinedLikes = null;
7 |
8 | /**
9 | * Changes the description of the param if it is required.
10 | * @param {Object} doclet The doclet.
11 | * @returns {Object} The modified doclet.
12 | */
13 | function markRequiredIfNeeded(doclet) {
14 | const memberof = doclet.memberof;
15 | if (!memberof) {
16 | return doclet;
17 | }
18 |
19 | const types = doclet.type.names;
20 | let isRequiredParam = true;
21 |
22 | // iterate over all types that are like-undefined (see above for explanation)
23 | for (let idx = undefinedLikes.length - 1; idx >= 0; idx--) {
24 | const undefinedLike = undefinedLikes[idx];
25 | // … if the current types contains a type that is undefined-like,
26 | // it is not required.
27 | if (types.indexOf(undefinedLike) != -1) {
28 | isRequiredParam = false;
29 | }
30 | }
31 |
32 | if (isRequiredParam) {
33 | const reqSnippet = 'Required.';
34 | const endsWithP = /<\/p>$/i;
35 | let description = doclet.description;
36 | if (description && endsWithP.test(description)) {
37 | description = description.replace(endsWithP, ' ' + reqSnippet);
38 | } else if (doclet.description === undefined) {
39 | description = '' + reqSnippet;
40 | }
41 | doclet.description = description;
42 | }
43 | return doclet;
44 | }
45 |
46 | /**
47 | * Iterates over all doclets and finds the names of types that contain
48 | * undefined. Stores the names in the global variable undefinedLikes, so
49 | * that e.g. markRequiredIfNeeded can use these.
50 | * @param {Array} doclets The doclets.
51 | */
52 | function findTypesLikeUndefined(doclets) {
53 | undefinedLikes = ['undefined']; // include type 'undefined' explicitly
54 | for (let i = doclets.length - 1; i >= 0; --i) {
55 | const doclet = doclets[i];
56 | if (doclet.kind === 'typedef') {
57 | const types = doclet.type.names;
58 | if (types.indexOf('undefined') !== -1) {
59 | // the typedef contains 'undefined', so it self is undefinedLike.
60 | undefinedLikes.push(doclet.longname);
61 | }
62 | }
63 | }
64 | }
65 |
66 | exports.handlers = {
67 |
68 | newDoclet: function(e) {
69 | const doclet = e.doclet;
70 | if (doclet.isEnum) {
71 | // We never export enums, so we document them like typedefs
72 | doclet.kind = 'typedef';
73 | delete doclet.isEnum;
74 | }
75 | },
76 |
77 | parseComplete: function(e) {
78 | const doclets = e.doclets;
79 | findTypesLikeUndefined(doclets);
80 | for (let i = doclets.length - 1; i >= 0; --i) {
81 | markRequiredIfNeeded(doclets[i]);
82 | }
83 | }
84 |
85 | };
86 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "olgm",
3 | "version": "1.8.0",
4 | "description": "OpenLayers Google Maps integration library",
5 | "keywords": [
6 | "map",
7 | "mapping",
8 | "ol",
9 | "google maps"
10 | ],
11 | "private": true,
12 | "homepage": "http://mapgears.github.io/ol3-google-maps/",
13 | "scripts": {
14 | "lint": "eslint tasks test src/olgm examples",
15 | "pretest": "npm run lint",
16 | "test": "npm run karma -- --single-run",
17 | "karma": "karma start test/karma.config.js",
18 | "serve-examples": "webpack-dev-server --config examples/webpack/config.js --mode development --watch",
19 | "build-examples": "webpack --config examples/webpack/config.js --mode production",
20 | "build-package": "npm run copy-src && npm run copy-css && npm run copy-readme && node tasks/prepare-package",
21 | "copy-src": "rm -rf build/olgm && mkdirp build && cp -rf src/olgm build",
22 | "copy-css": "cp src/olgm/olgm.css build/olgm/olgm.css",
23 | "copy-readme": "cp README.md build/olgm/",
24 | "apidoc": "jsdoc config/jsdoc/api/index.md -c config/jsdoc/api/conf.json -P package.json -d build/apidoc",
25 | "publish": "npm run build-package && npm publish build/olgm"
26 | },
27 | "main": "index.js",
28 | "repository": {
29 | "type": "git",
30 | "url": "git://github.com/mapgears/ol3-google-maps.git"
31 | },
32 | "license": "MIT",
33 | "bugs": {
34 | "url": "https://github.com/mapgears/ol3-google-maps/issues"
35 | },
36 | "peerDependencies": {
37 | "ol": "7"
38 | },
39 | "devDependencies": {
40 | "chai": "^4.1.2",
41 | "copy-webpack-plugin": "^4.4.1",
42 | "coveralls": "3.0.1",
43 | "css-loader": "^3.0.0",
44 | "eslint": "6.3.0",
45 | "eslint-config-openlayers": "^12.0.0",
46 | "front-matter": "^2.1.2",
47 | "glob": "^7.1.2",
48 | "handlebars": "4.1.2",
49 | "istanbul": "0.4.5",
50 | "jsdoc": "3.5.5",
51 | "karma": "^2.0.0",
52 | "karma-chai": "0.1.0",
53 | "karma-chrome-launcher": "^2.2.0",
54 | "karma-coverage": "^1.1.1",
55 | "karma-mocha": "1.3.0",
56 | "karma-phantomjs-launcher": "^1.0.4",
57 | "karma-sourcemap-loader": "^0.3.7",
58 | "karma-webpack": "4.0.0-beta.0",
59 | "marked": "0.4.0",
60 | "mkdirp": "^0.5.1",
61 | "mocha": "5.2.0",
62 | "ol": "7.3",
63 | "ol-layerswitcher": "^3.3.0",
64 | "phantomjs-prebuilt": "^2.1.16",
65 | "recast": "0.15.2",
66 | "style-loader": "^0.23.1",
67 | "uglifyjs-webpack-plugin": "^1.2.5",
68 | "walk": "^2.3.9",
69 | "webpack": "4.16.0",
70 | "webpack-cli": "^3.0.8",
71 | "webpack-dev-server": "^3.1.4"
72 | },
73 | "eslintConfig": {
74 | "extends": "openlayers",
75 | "globals": {
76 | "google": false
77 | }
78 | },
79 | "sideEffects": [
80 | "olgm.css"
81 | ]
82 | }
83 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/details.tmpl:
--------------------------------------------------------------------------------
1 |
5 |
6 |
10 |
11 | Properties:
12 |
13 |
14 |
15 |
16 |
17 |
18 | - Version:
19 |
- Since:
24 |
- Deprecated
- Yes
- Copyright:
45 |
- License:
50 |
- Default Value:
55 |
- Tutorials:
60 | -
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 | - See:
69 | -
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | - TODO
78 | -
79 |
80 |
81 |
82 |
83 |
84 |
85 |
--------------------------------------------------------------------------------
/examples/min-max-resolution.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import VectorLayer from 'ol/layer/Vector.js';
5 | import ImageLayer from 'ol/layer/Image.js';
6 | import OSMSource from 'ol/source/OSM.js';
7 | import VectorSource from 'ol/source/Vector.js';
8 | import TileJSONSource from 'ol/source/TileJSON.js';
9 | import ImageWMSSource from 'ol/source/ImageWMS.js';
10 | import Feature from 'ol/Feature.js';
11 | import Point from 'ol/geom/Point.js';
12 | import Style from 'ol/style/Style.js';
13 | import Icon from 'ol/style/Icon.js';
14 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
15 | import GoogleLayer from 'olgm/layer/Google.js';
16 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
17 |
18 |
19 | const center = [-10997148, 4569099];
20 |
21 | const googleLayer = new GoogleLayer();
22 |
23 | const osmLayer = new TileLayer({
24 | source: new OSMSource(),
25 | visible: false
26 | });
27 |
28 | const tileJSONLayer = new TileLayer({
29 | source: new TileJSONSource({
30 | url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
31 | crossOrigin: 'anonymous'
32 | }),
33 | minResolution: 4000,
34 | maxResolution: 10000
35 | });
36 |
37 | const imageWMSLayer = new ImageLayer({
38 | extent: [-13884991, 2870341, -7455066, 6338219],
39 | source: new ImageWMSSource({
40 | url: 'http://demo.boundlessgeo.com/geoserver/wms',
41 | params: {'LAYERS': 'topp:states', 'TILED': true},
42 | serverType: 'geoserver'
43 | }),
44 | minResolution: 4000,
45 | maxResolution: 10000
46 | });
47 |
48 | const vectorSource = new VectorSource();
49 | const markers = [];
50 |
51 | for (let i = 0; i < 50; i++) {
52 | const x = Math.floor((Math.random() * -18000000));
53 | const y = Math.floor((Math.random() * 10000000));
54 | const marker = new Feature(new Point([x, y]));
55 | marker.setStyle(new Style({
56 | image: new Icon(/** @type {olx.style.IconOptions} */ ({
57 | anchor: [0.5, 46],
58 | anchorXUnits: 'fraction',
59 | anchorYUnits: 'pixels',
60 | src: 'data/icon.png'
61 | }))
62 | })
63 | );
64 | markers.push(marker);
65 | }
66 |
67 | vectorSource.addFeatures(markers);
68 | const vectorLayer = new VectorLayer({
69 | source: vectorSource,
70 | minResolution: 4000,
71 | maxResolution: 10000
72 | });
73 |
74 | const map = new Map({
75 | // use OL3-Google-Maps recommended default interactions
76 | interactions: defaultInteractions(),
77 | layers: [
78 | googleLayer,
79 | osmLayer,
80 | tileJSONLayer,
81 | imageWMSLayer,
82 | vectorLayer
83 | ],
84 | target: 'map',
85 | view: new View({
86 | center: center,
87 | zoom: 4
88 | })
89 | });
90 |
91 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
92 | olGM.activate();
93 |
94 | document.getElementById('toggle').addEventListener('click', function() {
95 | googleLayer.setVisible(!googleLayer.getVisible());
96 | osmLayer.setVisible(!osmLayer.getVisible());
97 | });
98 |
--------------------------------------------------------------------------------
/examples/resources/prism/prism.css:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.10.0
2 | http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
3 | /**
4 | * prism.js default theme for JavaScript, CSS and HTML
5 | * Based on dabblet (http://dabblet.com)
6 | * @author Lea Verou
7 | */
8 |
9 | code[class*="language-"],
10 | pre[class*="language-"] {
11 | color: black;
12 | background: none;
13 | text-shadow: 0 1px white;
14 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
15 | text-align: left;
16 | white-space: pre;
17 | word-spacing: normal;
18 | word-break: normal;
19 | word-wrap: normal;
20 | line-height: 1.5;
21 |
22 | -moz-tab-size: 4;
23 | -o-tab-size: 4;
24 | tab-size: 4;
25 |
26 | -webkit-hyphens: none;
27 | -moz-hyphens: none;
28 | -ms-hyphens: none;
29 | hyphens: none;
30 | }
31 |
32 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
33 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
34 | text-shadow: none;
35 | background: #b3d4fc;
36 | }
37 |
38 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
39 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
40 | text-shadow: none;
41 | background: #b3d4fc;
42 | }
43 |
44 | @media print {
45 | code[class*="language-"],
46 | pre[class*="language-"] {
47 | text-shadow: none;
48 | }
49 | }
50 |
51 | /* Code blocks */
52 | pre[class*="language-"] {
53 | padding: 1em;
54 | margin: .5em 0;
55 | overflow: auto;
56 | }
57 |
58 | :not(pre) > code[class*="language-"],
59 | pre[class*="language-"] {
60 | background: #f5f2f0;
61 | }
62 |
63 | /* Inline code */
64 | :not(pre) > code[class*="language-"] {
65 | padding: .1em;
66 | border-radius: .3em;
67 | white-space: normal;
68 | }
69 |
70 | .token.comment,
71 | .token.prolog,
72 | .token.doctype,
73 | .token.cdata {
74 | color: slategray;
75 | }
76 |
77 | .token.punctuation {
78 | color: #999;
79 | }
80 |
81 | .namespace {
82 | opacity: .7;
83 | }
84 |
85 | .token.property,
86 | .token.tag,
87 | .token.boolean,
88 | .token.number,
89 | .token.constant,
90 | .token.symbol,
91 | .token.deleted {
92 | color: #905;
93 | }
94 |
95 | .token.selector,
96 | .token.attr-name,
97 | .token.string,
98 | .token.char,
99 | .token.builtin,
100 | .token.inserted {
101 | color: #690;
102 | }
103 |
104 | .token.operator,
105 | .token.entity,
106 | .token.url,
107 | .language-css .token.string,
108 | .style .token.string {
109 | color: #a67f59;
110 | background: hsla(0, 0%, 100%, .5);
111 | }
112 |
113 | .token.atrule,
114 | .token.attr-value,
115 | .token.keyword {
116 | color: #07a;
117 | }
118 |
119 | .token.function {
120 | color: #DD4A68;
121 | }
122 |
123 | .token.regex,
124 | .token.important,
125 | .token.variable {
126 | color: #e90;
127 | }
128 |
129 | .token.important,
130 | .token.bold {
131 | font-weight: bold;
132 | }
133 | .token.italic {
134 | font-style: italic;
135 | }
136 |
137 | .token.entity {
138 | cursor: help;
139 | }
140 |
141 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/navigation.tmpl:
--------------------------------------------------------------------------------
1 |
4 |
88 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/properties.tmpl:
--------------------------------------------------------------------------------
1 |
40 |
41 |
42 |
43 |
44 |
45 | Name
46 |
47 |
48 | Type
49 |
50 |
51 | Argument
52 |
53 |
54 |
55 | Default
56 |
57 |
58 | Description
59 |
60 |
61 |
62 |
63 |
68 |
69 |
70 |
71 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | <optional>
84 |
85 |
86 |
87 | <nullable>
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 | Properties
102 |
103 |
104 |
105 |
106 |
107 |
--------------------------------------------------------------------------------
/examples/watchoptions.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import VectorLayer from 'ol/layer/Vector.js';
5 | import ImageLayer from 'ol/layer/Image.js';
6 | import OSMSource from 'ol/source/OSM.js';
7 | import VectorSource from 'ol/source/Vector.js';
8 | import ImageWMSSource from 'ol/source/ImageWMS.js';
9 | import TileWMSSource from 'ol/source/TileWMS.js';
10 | import Feature from 'ol/Feature.js';
11 | import Point from 'ol/geom/Point.js';
12 | import Style from 'ol/style/Style.js';
13 | import Icon from 'ol/style/Icon.js';
14 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
15 | import GoogleLayer from 'olgm/layer/Google.js';
16 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
17 |
18 |
19 | const center = [-10997148, 4569099];
20 |
21 | const googleLayer = new GoogleLayer();
22 |
23 | const osmLayer = new TileLayer({
24 | source: new OSMSource(),
25 | visible: false
26 | });
27 |
28 | const imageWMSLayer = new ImageLayer({
29 | source: new ImageWMSSource({
30 | url: 'http://demo.boundlessgeo.com/geoserver/wms',
31 | params: {'LAYERS': 'topp:states', 'TILED': true},
32 | serverType: 'geoserver'
33 | })
34 | });
35 |
36 | const tileWMSLayer = new TileLayer({
37 | source: new TileWMSSource({
38 | url: 'http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en',
39 | params: {'LAYERS': 'limits', 'TILED': true},
40 | serverType: 'geoserver'
41 | })
42 | });
43 |
44 | const source = new VectorSource();
45 |
46 | const watchOptions = {
47 | 'image': false,
48 | 'tile': false,
49 | 'vector': false
50 | };
51 |
52 | // Add some randomly generated markers
53 | const markers = [];
54 |
55 | for (let i = 0; i < 10; i++) {
56 | const x = Math.floor((Math.random() * 1000000) - 10997148);
57 | const y = Math.floor((Math.random() * 1000000) + 4569099);
58 | const marker = new Feature(new Point([x, y]));
59 | marker.setStyle(new Style({
60 | image: new Icon(/** @type {olx.style.IconOptions} */ ({
61 | anchor: [0.5, 46],
62 | anchorXUnits: 'fraction',
63 | anchorYUnits: 'pixels',
64 | src: 'data/icon.png'
65 | })),
66 | zIndex: i
67 | })
68 | );
69 | markers.push(marker);
70 | }
71 |
72 | source.addFeatures(markers);
73 |
74 | const vector = new VectorLayer({
75 | source: source
76 | });
77 |
78 | const map = new Map({
79 | // use OL3-Google-Maps recommended default interactions
80 | interactions: defaultInteractions(),
81 | layers: [
82 | osmLayer,
83 | tileWMSLayer,
84 | imageWMSLayer,
85 | googleLayer,
86 | vector
87 | ],
88 | target: 'map',
89 | view: new View({
90 | center: center,
91 | zoom: 4
92 | })
93 | });
94 |
95 | const olGM = new OLGoogleMaps({
96 | map: map,
97 | watch: watchOptions
98 | }); // map is the Map instance
99 | olGM.activate();
100 |
101 |
102 | document.getElementById('toggleOSM').addEventListener('click', function() {
103 | googleLayer.setVisible(!googleLayer.getVisible());
104 | osmLayer.setVisible(!osmLayer.getVisible());
105 | });
106 |
107 | document.getElementById('toggleWatch').addEventListener('click', function(event) {
108 | if (event.target.matches('input')) {
109 | const option = event.target.value;
110 | watchOptions[option] = !watchOptions[option];
111 | olGM.setWatchOptions(watchOptions);
112 | }
113 | });
114 |
--------------------------------------------------------------------------------
/examples/wms.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import ImageLayer from 'ol/layer/Image.js';
5 | import OSMSource from 'ol/source/OSM.js';
6 | import ImageWMSSource from 'ol/source/ImageWMS.js';
7 | import TileWMSSource from 'ol/source/TileWMS.js';
8 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
9 | import GoogleLayer from 'olgm/layer/Google.js';
10 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
11 |
12 | const center = [-10997148, 4569099];
13 |
14 | const googleLayer = new GoogleLayer();
15 |
16 | const osmLayer = new TileLayer({
17 | source: new OSMSource(),
18 | visible: false
19 | });
20 |
21 | const tileWMSLayer = new TileLayer({
22 | extent: [-13884991, 2870341, -7455066, 6338219],
23 | source: new TileWMSSource({
24 | url: 'http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en',
25 | params: {'LAYERS': 'limits', 'TILED': true},
26 | serverType: 'geoserver'
27 | }),
28 | visible: true
29 | });
30 |
31 | const tileWMSLayer2 = new TileLayer({
32 | extent: [-13884991, 2870341, -7455066, 6338219],
33 | source: new TileWMSSource({
34 | url: 'http://demo.boundlessgeo.com/geoserver/wms',
35 | params: {'LAYERS': 'topp:states', 'TILED': true},
36 | serverType: 'geoserver'
37 | }),
38 | visible: true
39 | });
40 |
41 | const imageWMSLayer = new ImageLayer({
42 | extent: [-13884991, 2870341, -7455066, 6338219],
43 | source: new ImageWMSSource({
44 | url: 'http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en',
45 | params: {'LAYERS': 'limits', 'TILED': true},
46 | serverType: 'geoserver'
47 | }),
48 | visible: false
49 | });
50 |
51 | const imageWMSLayer2 = new ImageLayer({
52 | extent: [-13884991, 2870341, -7455066, 6338219],
53 | source: new ImageWMSSource({
54 | url: 'http://demo.boundlessgeo.com/geoserver/wms',
55 | params: {'LAYERS': 'topp:states', 'TILED': true},
56 | serverType: 'geoserver'
57 | }),
58 | visible: false
59 | });
60 |
61 | const map = new Map({
62 | // use OL3-Google-Maps recommended default interactions
63 | interactions: defaultInteractions(),
64 | layers: [
65 | googleLayer,
66 | osmLayer,
67 | tileWMSLayer,
68 | tileWMSLayer2,
69 | imageWMSLayer,
70 | imageWMSLayer2
71 | ],
72 | target: 'map',
73 | view: new View({
74 | center: center,
75 | zoom: 4
76 | })
77 | });
78 |
79 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
80 | olGM.activate();
81 |
82 | document.getElementById('toggleOSM').addEventListener('click', function() {
83 | googleLayer.setVisible(!googleLayer.getVisible());
84 | osmLayer.setVisible(!osmLayer.getVisible());
85 | });
86 |
87 | document.getElementById('toggleWMS').addEventListener('click', function() {
88 | tileWMSLayer.setVisible(!tileWMSLayer.getVisible());
89 | tileWMSLayer2.setVisible(!tileWMSLayer2.getVisible());
90 | imageWMSLayer.setVisible(!imageWMSLayer.getVisible());
91 | imageWMSLayer2.setVisible(!imageWMSLayer2.getVisible());
92 | const spanText = tileWMSLayer.getVisible() ? 'tiled' : 'image';
93 | document.getElementById('currentMode').innerHTML = spanText;
94 | });
95 |
96 | document.getElementById('setRandomParam').addEventListener('click', function() {
97 | const params = {
98 | 'random': Math.random()
99 | };
100 | tileWMSLayer.getSource().updateParams(params);
101 | tileWMSLayer2.getSource().updateParams(params);
102 | imageWMSLayer.getSource().updateParams(params);
103 | imageWMSLayer2.getSource().updateParams(params);
104 | });
105 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/tmpl/params.tmpl:
--------------------------------------------------------------------------------
1 |
49 |
50 |
51 |
52 |
53 |
54 | Name
55 |
56 |
57 | Type
58 |
59 |
60 | Default
61 |
62 |
63 | Description
64 |
65 |
66 |
67 |
68 |
73 |
74 |
75 |
76 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | class="description last">
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
--------------------------------------------------------------------------------
/examples/regularshape.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import VectorLayer from 'ol/layer/Vector.js';
5 | import OSMSource from 'ol/source/OSM.js';
6 | import VectorSource from 'ol/source/Vector.js';
7 | import Feature from 'ol/Feature.js';
8 | import Point from 'ol/geom/Point.js';
9 | import Style from 'ol/style/Style.js';
10 | import Stroke from 'ol/style/Stroke.js';
11 | import Fill from 'ol/style/Fill.js';
12 | import RegularShape from 'ol/style/RegularShape.js';
13 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
14 | import GoogleLayer from 'olgm/layer/Google.js';
15 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
16 |
17 |
18 | const center = [-7908084, 6177492];
19 |
20 | // This dummy layer tells Google Maps to switch to its default map type
21 | const googleLayer = new GoogleLayer();
22 |
23 | const osmLayer = new TileLayer({
24 | source: new OSMSource(),
25 | visible: false
26 | });
27 |
28 | const stroke = new Stroke({color: 'black', width: 2});
29 |
30 | const styles = {
31 | 'square': [new Style({
32 | image: new RegularShape({
33 | fill: new Fill({color: 'red'}),
34 | stroke: stroke,
35 | points: 4,
36 | radius: 10,
37 | angle: Math.PI / 4
38 | })
39 | })],
40 | 'triangle': [new Style({
41 | image: new RegularShape({
42 | fill: new Fill({color: 'yellow'}),
43 | stroke: stroke,
44 | points: 3,
45 | radius: 10,
46 | rotation: Math.PI / 4,
47 | angle: 0
48 | })
49 | })],
50 | 'star': [new Style({
51 | image: new RegularShape({
52 | fill: new Fill({color: 'green'}),
53 | stroke: stroke,
54 | points: 5,
55 | radius: 10,
56 | radius2: 4,
57 | angle: 0
58 | })
59 | })],
60 | 'pentagon': [new Style({
61 | image: new RegularShape({
62 | fill: new Fill({color: 'blue'}),
63 | stroke: stroke,
64 | points: 5,
65 | radius: 10,
66 | angle: 0
67 | })
68 | })],
69 | 'x': [new Style({
70 | image: new RegularShape({
71 | stroke: stroke,
72 | points: 4,
73 | radius: 10,
74 | radius2: 0,
75 | angle: Math.PI / 4
76 | })
77 | })]
78 | };
79 |
80 |
81 | const styleKeys = ['x', 'pentagon', 'star', 'triangle', 'square'];
82 | const count = 50;
83 | const features = new Array(count);
84 | const spread = 20000;
85 | for (let i = 0; i < count; ++i) {
86 | const x = center[0] - (spread / 2) + Math.random() * spread;
87 | const y = center[1] - (spread / 2) + Math.random() * spread;
88 | const coordinates = [x, y];
89 | features[i] = new Feature(new Point(coordinates));
90 | const style = styles[styleKeys[Math.floor(Math.random() * 5)]][0];
91 | features[i].setStyle(style);
92 | }
93 |
94 | const source = new VectorSource({
95 | features: features
96 | });
97 |
98 | const vectorLayer = new VectorLayer({
99 | source: source
100 | });
101 |
102 | const map = new Map({
103 | // use OL3-Google-Maps recommended default interactions
104 | interactions: defaultInteractions(),
105 | layers: [
106 | googleLayer,
107 | osmLayer,
108 | vectorLayer
109 | ],
110 | target: 'map',
111 | view: new View({
112 | center: center,
113 | zoom: 12
114 | })
115 | });
116 |
117 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
118 | olGM.activate();
119 |
120 | document.getElementById('toggle').addEventListener('click', function() {
121 | googleLayer.setVisible(!googleLayer.getVisible());
122 | osmLayer.setVisible(!osmLayer.getVisible());
123 | });
124 |
--------------------------------------------------------------------------------
/RELEASE.md:
--------------------------------------------------------------------------------
1 | ## Release Procedure ##
2 |
3 | ### Checkout master ###
4 |
5 | Update your repository with `git checkout master` and make sure there are no
6 | changes when running `git status`.
7 |
8 | ### Run linter and tests ###
9 |
10 | Type `npm run lint` to run the linter.
11 |
12 | Type `npm run test` to test the building of the JS code.
13 |
14 | ### Create a changelog ###
15 |
16 | You can generate a changelog file by running the following command:
17 |
18 | ./tasks/changelog.sh v0.7.0.. > changelog/v0.8.0.md
19 |
20 | In this example, `v0.7.0` is the last release, and `v0.8.0` is the one about to
21 | be created.
22 |
23 | Commit the changelog:
24 |
25 | git add changelog
26 | git commit -m 'Changelog for v0.8.0'
27 |
28 |
29 | ### Update the package version number ###
30 |
31 | We track our current version in `package.json` for npm. Set the new version
32 | number in the `"version"` attribute, without the `v` prefix.
33 |
34 | Then, commit and push the changes:
35 |
36 | npm install
37 | git add package.json package-lock.json
38 | git commit -m 'Update package version to 0.8.0'
39 | git push origin
40 | git push upstream
41 |
42 | This should be the last commit before the release.
43 |
44 |
45 | ### Create a tag ###
46 |
47 | We need to create a tag for the new version, and push it to our branch (and
48 | upstream):
49 |
50 | git tag -a v0.8.0 -m '0.8.0'
51 | git push origin --tags
52 | git push upstream --tags
53 |
54 | ### Create a distributable package ###
55 |
56 | OLGM currently no longer distribute a package.
57 |
58 | ### Create the release description on GitHub ###
59 |
60 | With the tag pushed, a new release will appear on the
61 | [releases](https://github.com/mapgears/ol3-google-maps/releases) page. Create a
62 | description including the major points and the changelog.
63 |
64 | ### Publish to npm ###
65 |
66 | You'll need to have a npm account and be a contributor to the project
67 | in order to publish a new release.
68 |
69 | Run:
70 |
71 | ```
72 | npm run publish
73 | ```
74 |
75 |
76 | ### Update the website ###
77 |
78 | FIXME - these instructions are deprecated. In order for these pages to
79 | work, we would need to have a distribution package.
80 |
81 | The website should be updated with the latest compiled examples and a link to
82 | the packaged library.
83 |
84 | First, on master, run the following command:
85 |
86 | git checkout master
87 | make API_KEY=AIzaSyDIDCAbY9acmoT5c4ZbDFRlUBc-RHK2rTw dist-examples
88 |
89 | This will generate the examples with the appropriate api key for our website.
90 |
91 | Then, checkout to the website's branch, and get the latest version:
92 |
93 | git checkout gh-pages
94 | git pull
95 |
96 | Update the compiled examples and library, then commit the changes:
97 |
98 | cp -r dist _examples/
99 | git add _examples/
100 | git commit -m 'Update examples for v0.8.0'
101 |
102 | The link to the latest distribution also needs to be updated. The link to be
103 | changed is located in the download section of the following files:
104 |
105 | * `_layouts/default.html`
106 | * `_layouts/example-list.html`
107 |
108 | It should point to the package uploaded in the release's description.
109 |
110 | Finally, commit and push the changes
111 |
112 | git add _layouts
113 | git commit -m 'Update distribution link for v0.8.0'
114 | git push origin
115 | git push upstream
116 |
117 | ### Announce the release ###
118 |
119 | Post an email on the
120 | [openlayers-dev](https://groups.google.com/forum/#!forum/openlayers-dev)
121 | mailing list announcing the release.
122 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # OL-Google-Maps
2 |
3 | [](https://travis-ci.org/mapgears/ol3-google-maps)
4 |
5 | ## OL-Google-Maps is deprecated
6 |
7 | OpenLayers - Google Maps integration library, which is now deprecated.
8 |
9 | The [OpenLayers](http://openlayers.org/) library now supports the possibility to use Google Maps as base maps from version [v9.0.0+](https://github.com/openlayers/openlayers/releases/tag/v9.0.0).
10 |
11 | In the past, Google Maps did not provide an API to requests tiles directly. You had to use the Google Maps API for that. OLGM provided a way to indirectly use tiles from Google Maps by using its Maps API.
12 |
13 | Now, Google have a [Map Tiles API](https://developers.google.com/maps/documentation/tile), which is what OpenLayers uses. Therefore, the use of the OLGM library is no longer recommended. You should upgrade to the latest version of OpenLayers.
14 |
15 | ## Features
16 |
17 | Synchronizes:
18 |
19 | * Layers (Google, Vector)
20 | * Vector features (style, geometry)
21 |
22 | ## Getting started
23 |
24 | For use with webpack, Rollup, Browserify, or other module bundlers, install the [`olgm` package](https://www.npmjs.com/package/olgm).
25 |
26 | ```
27 | npm install olgm
28 | ```
29 |
30 | You must also install the [`ol` package](https://www.npmjs.com/package/ol).
31 |
32 | To use OL-Google-Maps, first you need to load Google Maps API. It's important to load Google Maps API **before** OL-Google-Maps. You also need to use your own Google Maps API key.
33 |
34 | ```
35 |
39 | ```
40 |
41 | It is recommended to load the CSS file included in there as well.
42 |
43 | ```
44 |
45 | ```
46 |
47 | Then, in your existing OpenLayers application, activate OL3-Google-Maps. Here's a simple example:
48 |
49 | ```
50 | import Map from 'ol/Map.js';
51 | import GoogleLayer from 'olgm/layer/Google.js';
52 | import {defaults} from 'olgm/interaction.js';
53 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
54 | import View from 'ol/View';
55 |
56 | var center = [-7908084, 6177492];
57 |
58 | // This dummy layer tells Google Maps to switch to its default map type
59 | const googleLayer = new GoogleLayer();
60 |
61 | var map = new Map({
62 | // use OL3-Google-Maps recommended default interactions
63 | interactions: defaults(),
64 | layers: [
65 | googleLayer
66 | ],
67 | target: 'map',
68 | view: new View({
69 | center: center,
70 | zoom: 12
71 | })
72 | });
73 |
74 | var olGM = new OLGoogleMaps({map: map}); // map is the ol.Map instance
75 | olGM.activate();
76 | ```
77 |
78 | ## Live examples
79 |
80 | See the following example for more detail on bundling OL3-Google-Maps with your application:
81 |
82 | * Using [Webpack](https://github.com/geopamplona/olgm-webpack)
83 |
84 | See OL3-Google-Maps in action (version v0.20.0):
85 |
86 | * [Simple](http://mapgears.github.io/ol3-google-maps/examples/dist/examples/simple.html)
87 | * [Vector](http://mapgears.github.io/ol3-google-maps/examples/dist/examples/vector.html)
88 | * [Label](http://mapgears.github.io/ol3-google-maps/examples/dist/examples/label.html)
89 | * [Concept](http://mapgears.github.io/ol3-google-maps/examples/dist/examples/concept.html)
90 |
91 | See all other examples at:
92 | http://mapgears.github.io/ol3-google-maps/examples/
93 |
94 | ## The End
95 |
96 | OLGM no longer needs development as it is now deprecated. Upgrade to the latest version of OpenLayers instead.
97 |
98 | Thanks to everyone who contributed during the lifespan of the library!
99 |
100 |
--------------------------------------------------------------------------------
/src/olgm/gm/ImageOverlay.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/gm/ImageOverlay
3 | */
4 | /**
5 | * @classdesc
6 | * @api
7 | */
8 | class ImageOverlay extends ((window.google && window.google.maps && google.maps.OverlayView) || Object) {
9 | /**
10 | * Creates a new image overlay.
11 | * @param {string} src url to the image
12 | * @param {Array} size size of the image
13 | * @param {google.maps.LatLng} topLeft topLeft corner
14 | */
15 | constructor(src, size, topLeft) {
16 | super();
17 |
18 | /**
19 | * @type {string}
20 | * @private
21 | */
22 | this.src_ = src;
23 |
24 | /**
25 | * @type {Array}
26 | * @private
27 | */
28 | this.size_ = size;
29 |
30 | /**
31 | * @type {google.maps.LatLng}
32 | * @private
33 | */
34 | this.topLeft_ = topLeft;
35 |
36 | /**
37 | * @type {HTMLElement}
38 | * @private
39 | */
40 | this.div_ = null;
41 |
42 | /**
43 | * @type {number}
44 | * @private
45 | */
46 | this.zIndex_ = 0;
47 | }
48 |
49 |
50 | /**
51 | * Note: mark as `@api` to make the minimized version include this method.
52 | * @api
53 | * @override
54 | */
55 | onAdd() {
56 | const div = document.createElement('div');
57 | div.style.borderStyle = 'none';
58 | div.style.borderWidth = '0px';
59 | div.style.position = 'absolute';
60 | div.style.zIndex = this.zIndex_;
61 |
62 | // Create the img element and attach it to the div.
63 | const img = document.createElement('img');
64 | img.src = this.src_;
65 | img.style.width = '100%';
66 | img.style.height = '100%';
67 | img.style.position = 'absolute';
68 | div.appendChild(img);
69 |
70 | this.div_ = div;
71 |
72 | /**
73 | * Add the element to the "mapPane" pane. Normally we would put it in the
74 | * "overlayLayer" pane, but we want to be able to show it behind tile layers,
75 | * so we place them together in the same pane.
76 | */
77 | const panes = this.getPanes();
78 | panes.mapPane.appendChild(div);
79 | }
80 |
81 |
82 | /**
83 | * Note: mark as `@api` to make the minimized version include this method.
84 | * @api
85 | * @override
86 | */
87 | draw() {
88 | const div = this.div_;
89 |
90 | const sizeX = this.size_[0];
91 | const sizeY = this.size_[1];
92 |
93 | div.style.width = sizeX + 'px';
94 | div.style.height = sizeY + 'px';
95 |
96 | const overlayProjection = this.getProjection();
97 | const topLeftPx = overlayProjection.fromLatLngToDivPixel(this.topLeft_);
98 |
99 | let offsetX = topLeftPx.x;
100 | const offsetY = topLeftPx.y;
101 |
102 | // Adjust bad calculations when the view is larger than the world
103 | const worldWidth = overlayProjection.getWorldWidth();
104 | if (worldWidth < sizeX) {
105 | // Overlap of the map on each size
106 | const mapOverlap = Math.floor(sizeX / worldWidth) / 2;
107 |
108 | // For when only one map is overlapping
109 | const factor = Math.max(mapOverlap, 1);
110 |
111 | offsetX -= worldWidth * factor;
112 | }
113 |
114 | div.style.top = offsetY + 'px';
115 | div.style.left = offsetX + 'px';
116 | }
117 |
118 |
119 | /**
120 | * Set the zIndex for the div containing the image
121 | * @param {number} zIndex zIndex to set
122 | * @api
123 | */
124 | setZIndex(zIndex) {
125 | this.zIndex_ = zIndex;
126 | if (this.div_) {
127 | this.div_.style.zIndex = zIndex;
128 | }
129 | }
130 |
131 |
132 | /**
133 | * Note: mark as `@api` to make the minimized version include this method.
134 | * @api
135 | * @override
136 | */
137 | onRemove() {
138 | if (this.div_) {
139 | this.div_.parentNode.removeChild(this.div_);
140 | this.div_ = null;
141 | }
142 | }
143 | }
144 | export default ImageOverlay;
145 |
--------------------------------------------------------------------------------
/src/olgm/gm/MapElement.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/gm/MapElement
3 | */
4 | /**
5 | * @classdesc
6 | * This class is a parent for all elements that are drawn manually onto Google
7 | * Maps. This means drawing elements on a canvas attached to the Google Maps
8 | * map instead of drawing features on map tiles using their API.
9 | * This needs to be done for elements that are supported in OpenLayers 3 but
10 | * not in Google Maps, such as text labels on markers.
11 | *
12 | * Some of this code was borrowed from the MapLabel project, whose source code
13 | * can be found here: https://github.com/googlemaps/js-map-label
14 | * @api
15 | */
16 | class MapElement extends ((window.google && window.google.maps && google.maps.OverlayView) || Object) {
17 | /**
18 | * Creates a new Map Element, to be drawn as an OverlayView
19 | */
20 | constructor() {
21 | super();
22 |
23 | /**
24 | * @type {boolean}
25 | * @private
26 | */
27 | this.drawn_ = false;
28 |
29 |
30 | /**
31 | * @type {number}
32 | * @private
33 | */
34 | this.height_ = 0;
35 |
36 |
37 | /**
38 | * @type {number}
39 | * @private
40 | */
41 | this.width_ = 0;
42 | }
43 |
44 |
45 | /**
46 | * Draw features to the map (call redraw) and setup canvas if it's the first
47 | * time we draw
48 | * @api
49 | * @override
50 | */
51 | draw() {
52 | if (this.drawn_) {
53 | this.redraw_();
54 | return;
55 | }
56 |
57 | const canvas = this.canvas_;
58 | if (!canvas) {
59 | // onAdd has not been called yet.
60 | return;
61 | }
62 |
63 | const ctx = canvas.getContext('2d');
64 | const height = ctx.canvas.height;
65 | const width = ctx.canvas.width;
66 | this.width_ = width;
67 | this.height_ = height;
68 |
69 | if (!this.redraw_()) {
70 | return;
71 | }
72 |
73 | this.drawn_ = true;
74 | }
75 |
76 |
77 | /**
78 | * Redraw features to the map
79 | * @return {boolean} whether or not the function ran successfully
80 | * @private
81 | */
82 | redraw_() {
83 | const latLng = /** @type {google.maps.LatLng} */ (this.get('position'));
84 | if (!latLng) {
85 | return false;
86 | }
87 |
88 | const projection = this.getProjection();
89 | if (!projection) {
90 | // The map projection is not ready yet so do nothing
91 | return false;
92 | }
93 |
94 | const pos = projection.fromLatLngToDivPixel(latLng);
95 | const height = this.height_;
96 | const width = this.width_;
97 |
98 | const offsetX = this.get('offsetX') || 0;
99 | const offsetY = this.get('offsetY') || 0;
100 |
101 | const style = this.canvas_.style;
102 | style['top'] = (pos.y - (height / 2) + offsetY) + 'px';
103 | style['left'] = (pos.x - (width / 2) + offsetX) + 'px';
104 |
105 | style['visibility'] = this.getVisible_();
106 |
107 | return true;
108 | }
109 |
110 |
111 | /**
112 | * Get the visibility of the element.
113 | * @private
114 | * @return {string} blank string if visible, 'hidden' if invisible.
115 | */
116 | getVisible_() {
117 | const minZoom = /** @type {number} */ (this.get('minZoom'));
118 | const maxZoom = /** @type {number} */ (this.get('maxZoom'));
119 |
120 | if (minZoom === undefined && maxZoom === undefined) {
121 | return '';
122 | }
123 |
124 | const map = this.getMap();
125 | if (!map) {
126 | return '';
127 | }
128 |
129 | const mapZoom = map.getZoom();
130 | if (mapZoom < minZoom || mapZoom > maxZoom) {
131 | return 'hidden';
132 | }
133 | return '';
134 | }
135 |
136 |
137 | /**
138 | * Delete canvas when removing the element
139 | * @api
140 | * @override
141 | */
142 | onRemove() {
143 | const canvas = this.canvas_;
144 | if (canvas && canvas.parentNode) {
145 | canvas.parentNode.removeChild(canvas);
146 | }
147 | }
148 | }
149 | export default MapElement;
150 |
--------------------------------------------------------------------------------
/config/jsdoc/api/plugins/normalize-exports.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @filedesc
3 | * Expands module path type to point to default export when no name is given
4 | */
5 |
6 | const fs = require('fs');
7 | const path = require('path');
8 |
9 | let moduleRoot;
10 |
11 | function addDefaultExportPath(obj) {
12 | if (!Array.isArray(obj)) {
13 | obj = obj.names;
14 | }
15 | obj.forEach((name, index) => {
16 | const matches = name.match(/module\:([^>|),\.<]|)+/g);
17 | if (matches) {
18 | matches.forEach(module => {
19 | if (!/[~\.]/.test(module)) {
20 | const checkFile = module.replace(/^module\:/, '');
21 | let file;
22 | try {
23 | file = fs.readFileSync(require.resolve(path.join(moduleRoot, checkFile)), 'utf-8');
24 | } catch (Error) {
25 | file = fs.readFileSync(require.resolve(path.join(moduleRoot, '..', 'node_modules', checkFile)), 'utf-8');
26 | }
27 | const lines = file.split('\n');
28 | let hasDefaultExport = false;
29 | for (let i = 0, ii = lines.length; i < ii; ++i) {
30 | hasDefaultExport = hasDefaultExport || /^export default [^\{]/.test(lines[i]);
31 | const match = lines[i].match(/^export default ([A-Za-z_$][A-Za-z0-9_$]+);$/);
32 | if (match) {
33 | // Use variable name if default export is assigned to a variable.
34 | obj[index] = name = name.replace(module, `${module}~${match[1]}`);
35 | return;
36 | }
37 | }
38 | if (hasDefaultExport) {
39 | // Duplicate last part if default export is not assigned to a variable.
40 | obj[index] = name = name.replace(module, `${module}~${module.split('/').pop()}`);
41 | }
42 | }
43 | });
44 | }
45 | });
46 | }
47 |
48 | function replaceLinks(comment) {
49 | const matches = comment.match(/\{@link [^\} #]+}/g);
50 | if (matches) {
51 | const modules = matches.map(m => {
52 | const mm = m.match(/(module:[^\}]+)}$/);
53 | if (mm) {
54 | return mm[1];
55 | }
56 | }).filter(m => !!m);
57 | const newModules = modules.concat();
58 | addDefaultExportPath(newModules);
59 | modules.forEach((module, i) => {
60 | comment = comment.replace(module, newModules[i]);
61 | });
62 | }
63 | return comment;
64 | }
65 |
66 | exports.handlers = {
67 |
68 | /**
69 | * Adds default export to module path types without name
70 | * @param {Object} e Event object.
71 | */
72 | newDoclet: function(e) {
73 | const doclet = e.doclet;
74 | if (doclet.kind == 'module') {
75 | const levelsUp = doclet.longname.replace(/^module\:/, '').split('/');
76 | if (doclet.meta.filename != 'index.js') {
77 | levelsUp.pop();
78 | }
79 | const pathArgs = [doclet.meta.path].concat(levelsUp.map(() => '../'));
80 | moduleRoot = path.resolve.apply(null, pathArgs);
81 | } else {
82 | if (doclet.description) {
83 | doclet.description = replaceLinks(doclet.description);
84 | }
85 | if (doclet.classdesc) {
86 | doclet.classdesc = replaceLinks(doclet.classdesc);
87 | }
88 |
89 | const module = doclet.longname.split('#').shift();
90 | if (module.indexOf('module:') == 0 && module.indexOf('.') !== -1) {
91 | doclet.longname = doclet.longname.replace(module, module.replace('.', '~'));
92 | }
93 | if (doclet.augments) {
94 | addDefaultExportPath(doclet.augments);
95 | }
96 | if (doclet.params) {
97 | doclet.params.forEach(p => addDefaultExportPath(p.type));
98 | }
99 | if (doclet.returns) {
100 | doclet.returns.forEach(r => addDefaultExportPath(r.type));
101 | }
102 | if (doclet.properties) {
103 | doclet.properties.forEach(p => addDefaultExportPath(p.type));
104 | }
105 | if (doclet.type) {
106 | addDefaultExportPath(doclet.type);
107 | }
108 | }
109 | }
110 |
111 | };
112 |
--------------------------------------------------------------------------------
/examples/concept.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: example.html
3 | title: Concept
4 | shortdesc: This example is the playground of the developers of this library. It features pretty much everything OL-Google-Maps supports.
5 | docs: >
6 |
7 | This example is the playground of the developers of this library.
8 | It features pretty much everything OL3-Google-Maps supports.
9 | Random features are added to the OpenLayers map.
10 |
11 |
12 | Vector features in this example are draggable. This demonstrate
13 | the binding of geometries. The vector features you see are
14 | rendered by by Google Maps, but the ones in OpenLayers are
15 | on top of them, rendered invisible. When dragging a feature,
16 | the ol3 feature is dragged and the geometry of the Google Maps
17 | feature follows its counterpart.
18 |
19 |
20 | The pinwheel and hand-drawn shapes on the left of Ontario are
21 | MultiPolygon geometries. The blue wavy lines on the right is
22 | a MultiLineString geometry. All are draggable as well.
23 |
24 |
25 | The grouping of points over Lake Superior over each island are
26 | MultiPoint geometries.
27 |
28 |
29 | Mouse hovering a button shows more details about what it does.
30 |
31 | tags: "style"
32 | ---
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 | Concept example
42 |
43 |
44 |
45 |
50 |
51 |
52 |
53 |
65 |
66 |
67 |
68 |
84 |
85 |
86 |
87 |
88 |
89 |
--------------------------------------------------------------------------------
/config/jsdoc/api/template/static/scripts/main.js:
--------------------------------------------------------------------------------
1 | $(function () {
2 | // Search Items
3 | $('#search').on('keyup', function (e) {
4 | var value = $(this).val();
5 | var $el = $('.navigation');
6 |
7 | if (value) {
8 | var regexp = new RegExp(value, 'i');
9 | $el.find('li, .itemMembers').hide();
10 |
11 | $el.find('li').each(function (i, v) {
12 | var $item = $(v);
13 |
14 | if ($item.data('name') && regexp.test($item.data('name'))) {
15 | $item.show();
16 | $item.closest('.itemMembers').show();
17 | $item.closest('.item').show();
18 | }
19 | });
20 | } else {
21 | $el.find('.item, .itemMembers').show();
22 | }
23 |
24 | $el.find('.list').scrollTop(0);
25 | });
26 |
27 | // Toggle when click an item element
28 | $('.navigation').on('click', '.title', function (e) {
29 | $(this).parent().find('.itemMembers').toggle();
30 | });
31 |
32 | // Show an item related a current documentation automatically
33 | var filename = $('.page-title').data('filename').replace(/\.[a-z]+$/, '');
34 | var $currentItem = $('.navigation .item[data-name*="' + filename + '"]:eq(0)');
35 |
36 | if ($currentItem.length) {
37 | $currentItem
38 | .remove()
39 | .prependTo('.navigation .list')
40 | .show()
41 | .find('.itemMembers')
42 | .show();
43 | }
44 |
45 | // Auto resizing on navigation
46 | var _onResize = function () {
47 | var height = $(window).height();
48 | var $el = $('.navigation');
49 |
50 | $el.height(height).find('.list').height(height - 133);
51 | };
52 |
53 | $(window).on('resize', _onResize);
54 | _onResize();
55 |
56 | var currentVersion = document.getElementById('package-version').innerHTML;
57 |
58 | // warn about outdated version
59 | var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
60 | fetch(packageUrl).then(function(response) {
61 | return response.json();
62 | }).then(function(json) {
63 | var latestVersion = json.version;
64 | document.getElementById('latest-version').innerHTML = latestVersion;
65 | var url = window.location.href;
66 | var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
67 | var cookieText = 'dismissed=-' + latestVersion + '-';
68 | var dismissed = document.cookie.indexOf(cookieText) != -1;
69 | if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
70 | var link = url.replace(branchSearch[0], '/latest/apidoc/');
71 | fetch(link, {method: 'head'}).then(function(response) {
72 | var a = document.getElementById('latest-link');
73 | a.href = response.status == 200 ? link : '../../latest/apidoc/';
74 | });
75 | var latestCheck = document.getElementById('latest-check');
76 | latestCheck.style.display = '';
77 | document.getElementById('latest-dismiss').onclick = function() {
78 | latestCheck.style.display = 'none';
79 | document.cookie = cookieText;
80 | }
81 | }
82 | });
83 |
84 | // create source code links to github
85 | var srcLinks = $('div.tag-source');
86 | srcLinks.each(function(i, el) {
87 | var textParts = el.innerHTML.trim().split(', ');
88 | var link = 'https://github.com/openlayers/openlayers/blob/v' + currentVersion + '/src/ol/' +
89 | textParts[0];
90 | el.innerHTML = '' + textParts[0] + ', ' +
91 | '' +
92 | textParts[1] + '';
93 | });
94 |
95 | // Highlighting current anchor
96 |
97 | var anchors = $('.anchor');
98 | var _onHashChange = function () {
99 | var activeHash = window.document.location.hash
100 | .replace(/\./g, '\\.'); // Escape dot in element id
101 |
102 | anchors.removeClass('highlighted');
103 |
104 | if (activeHash.length > 0) {
105 | anchors.filter(activeHash).addClass('highlighted');
106 | }
107 | };
108 |
109 | $(window).on('hashchange', _onHashChange);
110 | _onHashChange();
111 | });
112 |
--------------------------------------------------------------------------------
/test/spec/olgm/OLGoogleMaps.test.js:
--------------------------------------------------------------------------------
1 | import View from 'ol/View.js';
2 | import Map from 'ol/Map.js';
3 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
4 | import GoogleLayer from 'olgm/layer/Google.js';
5 |
6 | describe('olgm.OLGoogleMaps', function() {
7 | const target = document.createElement('div');
8 | const style = target.style;
9 | style.width = '300px';
10 | style.height = '300px';
11 |
12 | const view = new View({
13 | center: [-7908084, 6177492],
14 | zoom: 12
15 | });
16 |
17 | describe('constructor', function() {
18 | const map = new Map({});
19 | let olGM;
20 |
21 | it('creates a new OLGoogleMaps object', function() {
22 | olGM = new OLGoogleMaps({map: map});
23 | expect(olGM).to.be.an.instanceof(OLGoogleMaps);
24 | });
25 |
26 | it('creates the Google Maps map', function() {
27 | const gmap = olGM.gmap;
28 | expect(gmap).to.be.an.instanceof(google.maps.Map);
29 | });
30 | });
31 |
32 | describe('#activate()', function() {
33 | document.body.appendChild(target);
34 | const googleLayer = new GoogleLayer();
35 | const map = new Map({
36 | layers: [
37 | googleLayer
38 | ],
39 | target: target,
40 | view: view
41 | });
42 | const olGM = new OLGoogleMaps({map: map});
43 |
44 | it('activates the heralds', function() {
45 | expect(olGM.getGoogleMapsActive()).to.be.false;
46 | olGM.activate();
47 | expect(olGM.getGoogleMapsActive()).to.be.true;
48 | });
49 |
50 | document.body.removeChild(target);
51 | });
52 |
53 | describe('#deactivate()', function() {
54 | document.body.appendChild(target);
55 | const googleLayer = new GoogleLayer();
56 | const map = new Map({
57 | layers: [
58 | googleLayer
59 | ],
60 | target: target,
61 | view: view
62 | });
63 | const olGM = new OLGoogleMaps({map: map});
64 |
65 | olGM.activate();
66 | it('deactivates the heralds', function() {
67 | expect(olGM.getGoogleMapsActive()).to.be.true;
68 | olGM.deactivate();
69 | expect(olGM.getGoogleMapsActive()).to.be.false;
70 | });
71 |
72 | document.body.removeChild(target);
73 | });
74 |
75 | describe('#getGoogleMapsActive()', function() {
76 | document.body.appendChild(target);
77 | const googleLayer = new GoogleLayer();
78 | const map = new Map({
79 | layers: [
80 | googleLayer
81 | ],
82 | target: target,
83 | view: view
84 | });
85 | const olGM = new OLGoogleMaps({map: map});
86 |
87 | it('returns true when Google Maps is active', function() {
88 | expect(olGM.getGoogleMapsActive()).to.be.false;
89 | olGM.activate();
90 | expect(olGM.getGoogleMapsActive()).to.be.true;
91 | });
92 | it('returns false when Google Maps is not active', function() {
93 | olGM.deactivate();
94 | expect(olGM.getGoogleMapsActive()).to.be.false;
95 | olGM.activate();
96 | });
97 | it('returns false when there is no Google Maps layer', function() {
98 | olGM.ol3map.removeLayer(googleLayer);
99 | expect(olGM.getGoogleMapsActive()).to.be.false;
100 | });
101 |
102 | document.body.removeChild(target);
103 | });
104 |
105 | describe('#getGoogleMapsMap()', function() {
106 | const map = new Map({});
107 | const olGM = new OLGoogleMaps({map: map});
108 |
109 | it('returns the Google Maps map', function() {
110 | const gmap = olGM.gmap;
111 | expect(gmap).to.be.an.instanceof(google.maps.Map);
112 | expect(gmap).to.equal(olGM.getGoogleMapsMap());
113 | });
114 | });
115 |
116 | describe('#toggle()', function() {
117 | document.body.appendChild(target);
118 | const googleLayer = new GoogleLayer();
119 | const map = new Map({
120 | layers: [
121 | googleLayer
122 | ],
123 | target: target,
124 | view: view
125 | });
126 | const olGM = new OLGoogleMaps({map: map});
127 |
128 | it('sets the OLGoogleMaps object to active when inactive', function() {
129 | expect(olGM.getGoogleMapsActive()).to.be.false;
130 | olGM.toggle();
131 | expect(olGM.getGoogleMapsActive()).to.be.true;
132 | });
133 | it('sets the OLGoogleMaps object to inactive when active', function() {
134 | expect(olGM.getGoogleMapsActive()).to.be.true;
135 | olGM.toggle();
136 | expect(olGM.getGoogleMapsActive()).to.be.false;
137 | });
138 |
139 | document.body.removeChild(target);
140 | });
141 | });
142 |
--------------------------------------------------------------------------------
/src/olgm/gm/MapIcon.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @module olgm/gm/MapIcon
3 | */
4 | import MapElement from './MapElement.js';
5 |
6 | /**
7 | * @typedef {Object} Options
8 | * @property {boolean} [useCanvas] Whether or not we should draw on canvases when we can, instead of using the Google Maps API. This fixes z-index issues with labels on margers
9 | */
10 |
11 | /**
12 | * @classdesc
13 | * @api
14 | */
15 | class MapIcon extends MapElement {
16 | /**
17 | * Creates a new map icon
18 | * @param {module:ol/style/Icon} imageStyle ol3 style properties
19 | * @param {Object=} opt_options Optional properties to set.
20 | */
21 | constructor(imageStyle, opt_options) {
22 | super();
23 |
24 | /**
25 | * This object contains the ol3 style properties for the icon. We keep
26 | * it as an object because its properties can change, for example the size
27 | * is only defined after the image is done loading.
28 | * @type {module:ol/style/Icon}
29 | * @private
30 | */
31 | this.imageStyle_ = imageStyle;
32 |
33 | this.setValues(opt_options);
34 | }
35 |
36 |
37 | /**
38 | * Listen to property changes and react accordingly
39 | * @param {string} prop property
40 | * @api
41 | * @override
42 | */
43 | changed(prop) {
44 | switch (prop) {
45 | case 'maxZoom':
46 | case 'minZoom':
47 | case 'offsetX':
48 | case 'offsetY':
49 | case 'position':
50 | this.draw();
51 | break;
52 | default:
53 | break;
54 | }
55 | }
56 |
57 | /**
58 | * Rotate a point around the origin by a given angle expressed as a (cos, sin) pair.
59 | * @private
60 | */
61 |
62 | rotate_(cosTheta, sinTheta, x, y) {
63 | return [x * cosTheta - y * sinTheta, x * sinTheta + y * cosTheta];
64 | }
65 |
66 | /**
67 | * Draws the icon to the canvas 2d context.
68 | * @private
69 | */
70 | drawCanvas_() {
71 | const canvas = this.canvas_;
72 | if (!canvas) {
73 | return;
74 | }
75 |
76 | const image = this.imageStyle_.getImage(1);
77 | if (!image) {
78 | return;
79 | }
80 |
81 | const style = canvas.style;
82 |
83 | style.zIndex = /** @type {number} */ (this.get('zIndex'));
84 |
85 | const scale = this.imageStyle_.getScale() || 1;
86 | const anchor = this.imageStyle_.getAnchor() || [0, 0];
87 | const rotation = this.imageStyle_.getRotation() || 0;
88 | const opacity = this.imageStyle_.getOpacity() || 1;
89 |
90 | const offsetX = anchor[0] * scale;
91 | const offsetY = anchor[1] * scale;
92 |
93 | let w_2 = image.width * scale * 0.5;
94 | let h_2 = image.height * scale * 0.5;
95 |
96 | w_2 += Math.abs(w_2 - offsetX);
97 | h_2 += Math.abs(h_2 - offsetY);
98 |
99 | const cosTheta = Math.cos(rotation);
100 | const sinTheta = Math.sin(rotation);
101 |
102 | const p1 = this.rotate_(cosTheta, sinTheta, -w_2, -h_2);
103 | const p2 = this.rotate_(cosTheta, sinTheta, +w_2, -h_2);
104 | const p3 = this.rotate_(cosTheta, sinTheta, -w_2, +h_2);
105 | const p4 = this.rotate_(cosTheta, sinTheta, +w_2, +h_2);
106 |
107 | const minX = Math.min(p1[0], p2[0], p3[0], p4[0]);
108 | const maxX = Math.max(p1[0], p2[0], p3[0], p4[0]);
109 | const minY = Math.min(p1[1], p2[1], p3[1], p4[1]);
110 | const maxY = Math.max(p1[1], p2[1], p3[1], p4[1]);
111 |
112 | canvas.width = Math.round(maxX - minX);
113 | canvas.height = Math.round(maxY - minY);
114 |
115 | const ctx = canvas.getContext('2d');
116 | ctx.clearRect(0, 0, canvas.width, canvas.height);
117 |
118 | const x = canvas.width / 2 - offsetX;
119 | const y = canvas.height / 2 - offsetY;
120 |
121 | ctx.translate(x + offsetX, y + offsetY);
122 | ctx.rotate(rotation);
123 | ctx.translate(-x - offsetX, -y - offsetY);
124 | ctx.globalAlpha = opacity;
125 |
126 | ctx.drawImage(image, x, y,
127 | image.width * scale, image.height * scale);
128 | }
129 |
130 | /**
131 | * Manage feature being added to the map
132 | * @api
133 | * @override
134 | */
135 | onAdd() {
136 | const canvas = this.canvas_ = document.createElement('canvas');
137 | const style = canvas.style;
138 | style.position = 'absolute';
139 |
140 | this.drawCanvas_();
141 |
142 | const panes = this.getPanes();
143 | if (panes) {
144 | let pane = this.get('olgm_pane');
145 | if (pane) {
146 | pane = panes[pane];
147 | }
148 | if (!pane) {
149 | pane = panes.markerLayer;
150 | }
151 |
152 | pane.appendChild(canvas);
153 | }
154 | }
155 | }
156 | export default MapIcon;
157 |
--------------------------------------------------------------------------------
/examples/tiles.js:
--------------------------------------------------------------------------------
1 | import Map from 'ol/Map.js';
2 | import View from 'ol/View.js';
3 | import TileLayer from 'ol/layer/Tile.js';
4 | import OSMSource from 'ol/source/OSM.js';
5 | import TileJSONSource from 'ol/source/TileJSON.js';
6 | import TileWMSSource from 'ol/source/TileWMS.js';
7 | import WMTSSource from 'ol/source/WMTS.js';
8 | import XYZSource from 'ol/source/XYZ.js';
9 | import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
10 | import {get as getProjection} from 'ol/proj.js';
11 | import {getWidth as getExtentWidth, getTopLeft as getExtentTopLeft} from 'ol/extent.js';
12 | import OLGoogleMaps from 'olgm/OLGoogleMaps.js';
13 | import GoogleLayer from 'olgm/layer/Google.js';
14 | import {defaults as defaultInteractions} from 'olgm/interaction.js';
15 |
16 | const center = [-10997148, 4569099];
17 |
18 | const googleLayer = new GoogleLayer();
19 |
20 | const osmLayer = new TileLayer({
21 | source: new OSMSource(),
22 | visible: false
23 | });
24 |
25 | const tileJSONLayer = new TileLayer({
26 | source: new TileJSONSource({
27 | url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
28 | crossOrigin: 'anonymous'
29 | }),
30 | opacity: 0.5
31 | });
32 |
33 | const tmsLayer = new TileLayer({
34 | source: new XYZSource({
35 | url: 'http://v3.cartalib.mapgears.com/mapcache/tms/' +
36 | '1.0.0/mapgears_basemap@g/{z}/{x}/{-y}.'
37 | })
38 | });
39 |
40 | // Setup tilegrid for wmts layer
41 | const projection = getProjection('EPSG:3857');
42 | const projectionExtent = projection.getExtent();
43 | const size = getExtentWidth(projectionExtent) / 256;
44 | const resolutions = new Array(14);
45 | const matrixIds = new Array(14);
46 | for (let z = 0; z < 14; ++z) {
47 | // generate resolutions and matrixIds arrays for this WMTS
48 | resolutions[z] = size / Math.pow(2, z);
49 | matrixIds[z] = z;
50 | }
51 |
52 | const wmsLayer = new TileLayer({
53 | extent: [-13884991, 2870341, -7455066, 6338219],
54 | source: new TileWMSSource({
55 | url: 'http://demo.boundlessgeo.com/geoserver/wms',
56 | params: {'LAYERS': 'topp:states', 'TILED': true},
57 | serverType: 'geoserver'
58 | })
59 | });
60 |
61 | const wmtsLayer = new TileLayer({
62 | opacity: 0.7,
63 | source: new WMTSSource({
64 | attributions: '' +
65 | 'Tiles © ArcGIS',
67 | url: 'http://services.arcgisonline.com/arcgis/rest/' +
68 | 'services/Demographics/USA_Population_Density/MapServer/WMTS/',
69 | layer: '0',
70 | matrixSet: 'EPSG:3857',
71 | format: 'image/png',
72 | projection: projection,
73 | tileGrid: new WMTSTileGrid({
74 | origin: getExtentTopLeft(projectionExtent),
75 | resolutions: resolutions,
76 | matrixIds: matrixIds
77 | }),
78 | style: 'default',
79 | wrapX: true
80 | })
81 | });
82 |
83 | const xyzLayer = new TileLayer({
84 | source: new XYZSource({
85 | url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
86 | }),
87 | opacity: 1
88 | });
89 |
90 | const togglableLayers = {
91 | TileJSON: tileJSONLayer,
92 | TMS: tmsLayer,
93 | WMS: wmsLayer,
94 | WMTS: wmtsLayer,
95 | XYZ: xyzLayer
96 | };
97 |
98 | const map = new Map({
99 | // use OL3-Google-Maps recommended default interactions
100 | interactions: defaultInteractions(),
101 | layers: [
102 | googleLayer,
103 | osmLayer
104 | ],
105 | target: 'map',
106 | view: new View({
107 | center: center,
108 | zoom: 4
109 | })
110 | });
111 |
112 | const olGM = new OLGoogleMaps({map: map}); // map is the Map instance
113 | olGM.activate();
114 |
115 | document.getElementById('toggleOSM').addEventListener('click', function() {
116 | googleLayer.setVisible(!googleLayer.getVisible());
117 | osmLayer.setVisible(!osmLayer.getVisible());
118 | });
119 |
120 | document.getElementById('toggleLayers').addEventListener('click', function(event) {
121 | if (event.target.matches('input')) {
122 | const layer = togglableLayers[event.target.value];
123 | if (event.target.checked) {
124 | map.addLayer(layer);
125 | } else {
126 | map.removeLayer(layer);
127 | }
128 | }
129 | });
130 |
131 | document.getElementById('opacity').addEventListener('input', function(event) {
132 | const value = event.target.value / 100;
133 | const valueElement = document.getElementById('opacityValue');
134 | valueElement.innerHTML = value;
135 |
136 | tileJSONLayer.setOpacity(value);
137 | tmsLayer.setOpacity(value);
138 | wmsLayer.setOpacity(value);
139 | wmtsLayer.setOpacity(value);
140 | xyzLayer.setOpacity(value);
141 | });
142 |
--------------------------------------------------------------------------------
/examples/templates/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | {{{ extraHead.local }}}
14 | {{{ css.tag }}}
15 |
16 |
17 |
18 |
19 | {{ title }}
20 |
21 |
22 |
23 |
24 |
25 |
28 |
29 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | {{ title }}
44 | {{{ contents }}}
45 |
46 |
47 |
48 |
49 |
50 | {{ shortdesc }}
51 | {{ md docs }}
52 |
53 |
54 |
55 |
56 |
57 | Copy
58 |
59 |
60 |
68 | <!DOCTYPE html>
69 | <html>
70 | <head>
71 | <title>{{ title }}</title>
72 | <link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
73 | <link rel="stylesheet" href="olgm.css" type="text/css">
74 | <script src="https://maps.googleapis.com/maps/api/js?v=3&key=GOOGLE_MAPS_API_KEY"></script>
75 | <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
76 | <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
77 | {{#if extraHead.remote}}
78 | {{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
79 | <style>
80 | {{ indent css.source spaces=6 }} </style>{{/if}}
81 | </head>
82 | <body>
83 | {{ indent contents spaces=4 }} <script>
84 | {{ indent js.source spaces=6 }} </script>
85 | </body>
86 | </html>
87 |
88 |
89 |
90 |
91 |
92 | {{{ js.tag }}}
93 |
94 |
95 |
--------------------------------------------------------------------------------
/config/jsdoc/api/plugins/api.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Define an @api tag
3 | * @param {Object} dictionary The tag dictionary.
4 | */
5 | exports.defineTags = function(dictionary) {
6 | dictionary.defineTag('api', {
7 | mustHaveValue: false,
8 | canHaveType: false,
9 | canHaveName: false,
10 | onTagged: function(doclet, tag) {
11 | includeTypes(doclet);
12 | doclet.stability = 'stable';
13 | }
14 | });
15 | };
16 |
17 |
18 | /*
19 | * Based on @api annotations, and assuming that items with no @api annotation
20 | * should not be documented, this plugin removes undocumented symbols
21 | * from the documentation.
22 | */
23 |
24 | const api = [];
25 | const classes = {};
26 | const types = {};
27 | const modules = {};
28 |
29 | function hasApiMembers(doclet) {
30 | return doclet.longname.split('#')[0] == this.longname;
31 | }
32 |
33 | function includeAugments(doclet) {
34 | const augments = doclet.augments;
35 | if (augments) {
36 | let cls;
37 | for (let i = augments.length - 1; i >= 0; --i) {
38 | cls = classes[augments[i]];
39 | if (cls) {
40 | includeAugments(cls);
41 | if (cls.fires) {
42 | if (!doclet.fires) {
43 | doclet.fires = [];
44 | }
45 | cls.fires.forEach(function(f) {
46 | if (doclet.fires.indexOf(f) == -1) {
47 | doclet.fires.push(f);
48 | }
49 | });
50 | }
51 | if (cls.observables) {
52 | if (!doclet.observables) {
53 | doclet.observables = [];
54 | }
55 | cls.observables.forEach(function(f) {
56 | if (doclet.observables.indexOf(f) == -1) {
57 | doclet.observables.push(f);
58 | }
59 | });
60 | }
61 | cls._hideConstructor = true;
62 | delete cls.undocumented;
63 | }
64 | }
65 | }
66 | }
67 |
68 | function extractTypes(item) {
69 | item.type.names.forEach(function(type) {
70 | const match = type.match(/^(.*<)?([^>]*)>?$/);
71 | if (match) {
72 | modules[match[2]] = true;
73 | types[match[2]] = true;
74 | }
75 | });
76 | }
77 |
78 | function includeTypes(doclet) {
79 | if (doclet.params) {
80 | doclet.params.forEach(extractTypes);
81 | }
82 | if (doclet.returns) {
83 | doclet.returns.forEach(extractTypes);
84 | }
85 | if (doclet.properties) {
86 | doclet.properties.forEach(extractTypes);
87 | }
88 | if (doclet.type && doclet.meta.code.type == 'MemberExpression') {
89 | extractTypes(doclet);
90 | }
91 | }
92 |
93 | exports.handlers = {
94 |
95 | newDoclet: function(e) {
96 | const doclet = e.doclet;
97 | if (doclet.stability) {
98 | modules[doclet.longname.split('~').shift()] = true;
99 | api.push(doclet);
100 | }
101 | // Mark explicity defined namespaces - needed in parseComplete to keep
102 | // namespaces that we need as containers for api items.
103 | if (/.*\.jsdoc$/.test(doclet.meta.filename) && doclet.kind == 'namespace') {
104 | doclet.namespace_ = true;
105 | }
106 | if (doclet.kind == 'class') {
107 | modules[doclet.longname.split('~').shift()] = true;
108 | classes[doclet.longname] = doclet;
109 | }
110 | },
111 |
112 | parseComplete: function(e) {
113 | const doclets = e.doclets;
114 | for (let i = doclets.length - 1; i >= 0; --i) {
115 | const doclet = doclets[i];
116 | if (doclet.stability || doclet.namespace_) {
117 | if (doclet.kind == 'class') {
118 | includeAugments(doclet);
119 | }
120 | if (doclet.fires) {
121 | doclet.fires.sort(function(a, b) {
122 | return a.split(/#?event:/)[1] < b.split(/#?event:/)[1] ? -1 : 1;
123 | });
124 | }
125 | if (doclet.observables) {
126 | doclet.observables.sort(function(a, b) {
127 | return a.name < b.name ? -1 : 1;
128 | });
129 | }
130 | // Always document namespaces and items with stability annotation
131 | continue;
132 | }
133 | if (doclet.kind == 'module' && doclet.longname in modules) {
134 | // Document all modules that are referenced by the API
135 | continue;
136 | }
137 | if (doclet.isEnum || doclet.kind == 'typedef') {
138 | continue;
139 | }
140 | if (doclet.kind == 'class' && api.some(hasApiMembers, doclet)) {
141 | // Mark undocumented classes with documented members as unexported.
142 | // This is used in ../template/tmpl/container.tmpl to hide the
143 | // constructor from the docs.
144 | doclet._hideConstructor = true;
145 | includeAugments(doclet);
146 | } else if (doclet.undocumented !== false && !doclet._hideConstructor && !(doclet.kind == 'typedef' && doclet.longname in types)) {
147 | // Remove all other undocumented symbols
148 | doclet.undocumented = true;
149 | }
150 | }
151 | }
152 |
153 | };
154 |
--------------------------------------------------------------------------------