-
-
-
-
- 
OpenLayers
-
+
+
+
- OpenLayers
-
+
+
+
+
+ OpenLayers
+
+
+
+
- OpenLayers
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
+
diff --git a/config/jsdoc/api/template/tmpl/method.tmpl b/config/jsdoc/api/template/tmpl/method.tmpl
index a5ddc77f5d..9ff68aa638 100644
--- a/config/jsdoc/api/template/tmpl/method.tmpl
+++ b/config/jsdoc/api/template/tmpl/method.tmpl
@@ -64,7 +64,7 @@ var self = this;
-
-
-
-
--
-
- - () - ++ + () - diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl index 074e99672f..50709af9cc 100644 --- a/config/jsdoc/api/template/tmpl/navigation.tmpl +++ b/config/jsdoc/api/template/tmpl/navigation.tmpl @@ -7,53 +7,64 @@ function toShortName(name) { function getItemCssClass(type) { if (type === 'module') { - return 'glyphicon-plus'; + return 'fa-plus'; } else if (type === 'class') { - return 'glyphicon-chevron-right'; + return 'fa-chevron-right'; } return ''; } -const printList = v => { ?> - - { - const cls = v.stability && v.stability !== 'stable' ? ' class="unstable"' : ''; ?> -
- > { + const shortName = toShortName(member.name); ?> +
- { + const shortName = toShortName(member.name); + const cls = member.stability && member.stability !== 'stable' ? ' class="unstable"' : ''; ?> +
- > { + const ancestor = self.find({longname: eventName})[0] || + {longname: eventName, name: eventName.split(/#?event:/)[1]}; + const eventEnum = ancestor.longname.split(/#?event:/)[0]; + if (self.find({longname: eventEnum})[0]) { + printListItemWithStability(ancestor); + } else { + const cls = ancestor.stability && ancestor.stability !== 'stable' ? ' class="unstable"' : ''; + const shortName = toShortName(ancestor.name); ?> +
- >
- +-+ diff --git a/config/jsdoc/info/api-plugin.js b/config/jsdoc/info/api-plugin.js index afef0dc34e..2a3dd96610 100644 --- a/config/jsdoc/info/api-plugin.js +++ b/config/jsdoc/info/api-plugin.js @@ -1,15 +1,11 @@ - - /** * Handle the api annotation. * @param {Object} dictionary The tag dictionary. */ -exports.defineTags = function(dictionary) { - +exports.defineTags = function (dictionary) { dictionary.defineTag('api', { - onTagged: function(doclet, tag) { + onTagged: function (doclet, tag) { doclet.api = true; - } + }, }); - }; diff --git a/config/jsdoc/info/define-plugin.js b/config/jsdoc/info/define-plugin.js index 78634499ba..3d604db19a 100644 --- a/config/jsdoc/info/define-plugin.js +++ b/config/jsdoc/info/define-plugin.js @@ -5,31 +5,27 @@ * insensitive, with or without ticks). */ - const DEFAULT_VALUE = /default\s+is\s+`?(true|false)`?/i; - /** * Hook to define new tags. * @param {Object} dictionary The tag dictionary. */ -exports.defineTags = function(dictionary) { - +exports.defineTags = function (dictionary) { dictionary.defineTag('define', { canHaveType: true, mustHaveValue: true, - onTagged: function(doclet, tag) { + onTagged: function (doclet, tag) { const types = tag.value.type.names; if (types.length === 1 && types[0] === 'boolean') { const match = tag.value.description.match(DEFAULT_VALUE); if (match) { doclet.define = { - default: match[1] === 'true' + default: match[1] === 'true', }; doclet.description = tag.value.description; } } - } + }, }); - }; diff --git a/config/jsdoc/info/publish.js b/config/jsdoc/info/publish.js index bc01c31f89..f57c4dec57 100644 --- a/config/jsdoc/info/publish.js +++ b/config/jsdoc/info/publish.js @@ -5,18 +5,16 @@ const assert = require('assert'); const path = require('path'); - /** * Publish hook for the JSDoc template. Writes to JSON stdout. * @param {function} data The root of the Taffy DB containing doclet records. * @param {Object} opts Options. * @return {Promise} A promise that resolves when writing is complete. */ -exports.publish = function(data, opts) { - +exports.publish = function (data, opts) { function getTypes(data) { const types = []; - data.forEach(function(name) { + data.forEach(function (name) { types.push(name.replace(/^function$/, 'Function')); }); return types; @@ -27,19 +25,22 @@ exports.publish = function(data, opts) { const docs = data( [ {define: {isObject: true}}, - function() { + function () { if (this.kind == 'class') { if (!('extends' in this) || typeof this.api == 'boolean') { classes[this.longname] = this; return true; } } - return (typeof this.api == 'boolean' || - this.meta && (/[\\\/]externs$/).test(this.meta.path)); - } + return ( + typeof this.api == 'boolean' || + (this.meta && /[\\\/]externs$/.test(this.meta.path)) + ); + }, ], {kind: {'!is': 'file'}}, - {kind: {'!is': 'event'}}).get(); + {kind: {'!is': 'event'}} + ).get(); // get symbols data, filter out those that are members of private classes const symbols = []; @@ -49,117 +50,133 @@ exports.publish = function(data, opts) { let base = []; const augments = {}; const symbolsByName = {}; - docs.filter(function(doc) { - let include = true; - const constructor = doc.memberof; - if (constructor && constructor.substr(-1) === '_' && constructor.indexOf('module:') === -1) { - assert.strictEqual(doc.inherited, true, - 'Unexpected export on private class: ' + doc.longname); - include = false; - } - return include; - }).forEach(function(doc) { - const isExterns = (/[\\\/]externs$/).test(doc.meta.path); - if (doc.define) { - defines.push({ - name: doc.longname, - description: doc.description, - path: path.join(doc.meta.path, doc.meta.filename), - default: doc.define.default - }); - } else if (doc.kind == 'typedef' || doc.isEnum === true) { - typedefs.push({ - name: doc.longname, - types: getTypes(doc.type.names) - }); - } else { - const symbol = { - name: doc.longname, - kind: doc.kind, - description: doc.classdesc || doc.description, - path: path.join(doc.meta.path, doc.meta.filename) - }; - if (doc.augments) { - symbol.extends = doc.augments[0]; + docs + .filter(function (doc) { + let include = true; + const constructor = doc.memberof; + if ( + constructor && + constructor.substr(-1) === '_' && + constructor.indexOf('module:') === -1 + ) { + assert.strictEqual( + doc.inherited, + true, + 'Unexpected export on private class: ' + doc.longname + ); + include = false; } - if (doc.virtual) { - symbol.virtual = true; - } - if (doc.type) { - symbol.types = getTypes(doc.type.names); - } - if (doc.params) { - const params = []; - doc.params.forEach(function(param) { - const paramInfo = { - name: param.name - }; - params.push(paramInfo); - paramInfo.types = getTypes(param.type.names); - if (typeof param.variable == 'boolean') { - paramInfo.variable = param.variable; - } - if (typeof param.optional == 'boolean') { - paramInfo.optional = param.optional; - } - if (typeof param.nullable == 'boolean') { - paramInfo.nullable = param.nullable; - } + return include; + }) + .forEach(function (doc) { + const isExterns = /[\\\/]externs$/.test(doc.meta.path); + if (doc.define) { + defines.push({ + name: doc.longname, + description: doc.description, + path: path.join(doc.meta.path, doc.meta.filename), + default: doc.define.default, }); - symbol.params = params; - } - if (doc.returns) { - symbol.returns = { - types: getTypes(doc.returns[0].type.names) + } else if (doc.kind == 'typedef' || doc.isEnum === true) { + typedefs.push({ + name: doc.longname, + types: getTypes(doc.type.names), + }); + } else { + const symbol = { + name: doc.longname, + kind: doc.kind, + description: doc.classdesc || doc.description, + path: path.join(doc.meta.path, doc.meta.filename), }; - if (typeof doc.returns[0].nullable == 'boolean') { - symbol.returns.nullable = doc.returns[0].nullable; + if (doc.augments) { + symbol.extends = doc.augments[0]; } - } - if (doc.tags) { - doc.tags.every(function(tag) { - if (tag.title == 'template') { - symbol.template = tag.value; - return false; + if (doc.virtual) { + symbol.virtual = true; + } + if (doc.type) { + symbol.types = getTypes(doc.type.names); + } + if (doc.params) { + const params = []; + doc.params.forEach(function (param) { + const paramInfo = { + name: param.name, + }; + params.push(paramInfo); + paramInfo.types = getTypes(param.type.names); + if (typeof param.variable == 'boolean') { + paramInfo.variable = param.variable; + } + if (typeof param.optional == 'boolean') { + paramInfo.optional = param.optional; + } + if (typeof param.nullable == 'boolean') { + paramInfo.nullable = param.nullable; + } + }); + symbol.params = params; + } + if (doc.returns) { + symbol.returns = { + types: getTypes(doc.returns[0].type.names), + }; + if (typeof doc.returns[0].nullable == 'boolean') { + symbol.returns.nullable = doc.returns[0].nullable; } - return true; - }); - } - - const target = isExterns ? externs : (doc.api ? symbols : base); - const existingSymbol = symbolsByName[symbol.name]; - if (existingSymbol) { - const idx = target.indexOf(existingSymbol); - target.splice(idx, 1); - } - target.push(symbol); - symbolsByName[symbol.name] = symbol; - - if (doc.api && symbol.extends) { - while (symbol.extends in classes && !classes[symbol.extends].api && - classes[symbol.extends].augments) { - symbol.extends = classes[symbol.extends].augments[0]; } - if (symbol.extends) { - augments[symbol.extends] = true; + if (doc.tags) { + doc.tags.every(function (tag) { + if (tag.title == 'template') { + symbol.template = tag.value; + return false; + } + return true; + }); + } + + const target = isExterns ? externs : doc.api ? symbols : base; + const existingSymbol = symbolsByName[symbol.name]; + if (existingSymbol) { + const idx = target.indexOf(existingSymbol); + target.splice(idx, 1); + } + target.push(symbol); + symbolsByName[symbol.name] = symbol; + + if (doc.api && symbol.extends) { + while ( + symbol.extends in classes && + !classes[symbol.extends].api && + classes[symbol.extends].augments + ) { + symbol.extends = classes[symbol.extends].augments[0]; + } + if (symbol.extends) { + augments[symbol.extends] = true; + } } } - } + }); + + base = base.filter(function (symbol) { + return symbol.name in augments || symbol.virtual; }); - base = base.filter(function(symbol) { - return (symbol.name in augments || symbol.virtual); - }); - - return new Promise(function(resolve, reject) { + return new Promise(function (resolve, reject) { process.stdout.write( - JSON.stringify({ - symbols: symbols, - defines: defines, - typedefs: typedefs, - externs: externs, - base: base - }, null, 2)); + JSON.stringify( + { + symbols: symbols, + defines: defines, + typedefs: typedefs, + externs: externs, + base: base, + }, + null, + 2 + ) + ); }); - }; diff --git a/config/jsdoc/info/virtual-plugin.js b/config/jsdoc/info/virtual-plugin.js index a1cb8ee8ec..f83a2dba26 100644 --- a/config/jsdoc/info/virtual-plugin.js +++ b/config/jsdoc/info/virtual-plugin.js @@ -2,15 +2,13 @@ * Handle the interface and abstract annotations. * @param {Object} dictionary The tag dictionary. */ -exports.defineTags = function(dictionary) { - +exports.defineTags = function (dictionary) { const classTag = dictionary.lookUp('class'); dictionary.defineTag('interface', { mustNotHaveValue: true, - onTagged: function(doclet, tag) { + onTagged: function (doclet, tag) { classTag.onTagged.apply(this, arguments); doclet.virtual = true; - } + }, }); - }; diff --git a/config/webpack-config-legacy-build.js b/config/webpack-config-legacy-build.js index ca374a0e61..6b4e60b5fa 100644 --- a/config/webpack-config-legacy-build.js +++ b/config/webpack-config-legacy-build.js @@ -3,11 +3,16 @@ module.exports = { entry: './build/index.js', devtool: 'source-map', mode: 'production', + resolve: { + alias: { + ol: path.resolve('./src/ol'), + }, + }, output: { path: path.resolve('./build/legacy'), filename: 'ol.js', library: 'ol', libraryTarget: 'umd', - libraryExport: 'default' - } + libraryExport: 'default', + }, }; diff --git a/doc/tutorials/raster-reprojection.md b/doc/tutorials/raster-reprojection.md index 167d25f353..b068f45e16 100644 --- a/doc/tutorials/raster-reprojection.md +++ b/doc/tutorials/raster-reprojection.md @@ -39,10 +39,10 @@ var map = new Map({ If a source (based on `ol/source/TileImage` or `ol/source/Image`) has a projection different from the current `ol/View`’s projection then the reprojection happens automatically under the hood. ### Examples -- [Raster reprojection demo](https://openlayers.org/en/master/examples/reprojection.html) -- [OpenStreetMap to WGS84 reprojection](https://openlayers.org/en/master/examples/reprojection-wgs84.html) -- [Reprojection with EPSG.io database search](https://openlayers.org/en/master/examples/reprojection-by-code.html) -- [Image reprojection](https://openlayers.org/en/master/examples/reprojection-image.html) +- [Raster reprojection demo](https://openlayers.org/en/latest/examples/reprojection.html) +- [OpenStreetMap to WGS84 reprojection](https://openlayers.org/en/latest/examples/reprojection-wgs84.html) +- [Reprojection with EPSG.io database search](https://openlayers.org/en/latest/examples/reprojection-by-code.html) +- [Image reprojection](https://openlayers.org/en/latest/examples/reprojection-image.html) ### Custom projection The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string. It can be installed with @@ -125,7 +125,7 @@ Although this is mathematically correct behavior of the inverse transformation, A possible general solution would be to calculate the forward transformation for every vertex as well - but this would significantly decrease performance (especially for computationally expensive transformations). Therefore a recommended workaround is to define a proper visibility extent on the `ol.layer.Tile` in the view projection. -Setting such a limit is demonstrated in the [reprojection demo example](https://openlayers.org/en/master/examples/reprojection.html). +Setting such a limit is demonstrated in the [reprojection demo example](https://openlayers.org/en/latest/examples/reprojection.html). ### Resolution calculation When determining source tiles to load, the ideal source resolution needs to be calculated. diff --git a/examples/.eslintrc b/examples/.eslintrc index 769357d35a..c404b2e6e6 100644 --- a/examples/.eslintrc +++ b/examples/.eslintrc @@ -5,6 +5,7 @@ "common": false, "createMapboxStreetsV6Style": false, "d3": false, + "domtoimage": false, "geojsonvt": false, "GyroNorm": false, "jsPDF": false, diff --git a/examples/accessible.js b/examples/accessible.js index 6eb92a4da1..0feda2138f 100644 --- a/examples/accessible.js +++ b/examples/accessible.js @@ -1,29 +1,28 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -document.getElementById('zoom-out').onclick = function() { +document.getElementById('zoom-out').onclick = function () { const view = map.getView(); const zoom = view.getZoom(); view.setZoom(zoom - 1); }; -document.getElementById('zoom-in').onclick = function() { +document.getElementById('zoom-in').onclick = function () { const view = map.getView(); const zoom = view.getZoom(); view.setZoom(zoom + 1); diff --git a/examples/animation.js b/examples/animation.js index ad59685ab5..7d07a41306 100644 --- a/examples/animation.js +++ b/examples/animation.js @@ -1,9 +1,9 @@ import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; import View from '../src/ol/View.js'; import {easeIn, easeOut} from '../src/ol/easing.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import {fromLonLat} from '../src/ol/proj.js'; -import OSM from '../src/ol/source/OSM.js'; const london = fromLonLat([-0.12755, 51.507222]); const moscow = fromLonLat([37.6178, 55.7517]); @@ -13,7 +13,7 @@ const bern = fromLonLat([7.4458, 46.95]); const view = new View({ center: istanbul, - zoom: 6 + zoom: 6, }); const map = new Map({ @@ -21,10 +21,10 @@ const map = new Map({ layers: [ new TileLayer({ preload: 4, - source: new OSM() - }) + source: new OSM(), + }), ], - view: view + view: view, }); // A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael). @@ -32,18 +32,18 @@ function bounce(t) { const s = 7.5625; const p = 2.75; let l; - if (t < (1 / p)) { + if (t < 1 / p) { l = s * t * t; } else { - if (t < (2 / p)) { - t -= (1.5 / p); + if (t < 2 / p) { + t -= 1.5 / p; l = s * t * t + 0.75; } else { - if (t < (2.5 / p)) { - t -= (2.25 / p); + if (t < 2.5 / p) { + t -= 2.25 / p; l = s * t * t + 0.9375; } else { - t -= (2.625 / p); + t -= 2.625 / p; l = s * t * t + 0.984375; } } @@ -53,77 +53,85 @@ function bounce(t) { // An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael). function elastic(t) { - return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1; + return ( + Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1 + ); } function onClick(id, callback) { document.getElementById(id).addEventListener('click', callback); } -onClick('rotate-left', function() { +onClick('rotate-left', function () { view.animate({ - rotation: view.getRotation() + Math.PI / 2 + rotation: view.getRotation() + Math.PI / 2, }); }); -onClick('rotate-right', function() { +onClick('rotate-right', function () { view.animate({ - rotation: view.getRotation() - Math.PI / 2 + rotation: view.getRotation() - Math.PI / 2, }); }); -onClick('rotate-around-rome', function() { +onClick('rotate-around-rome', function () { // Rotation animation takes the shortest arc, so animate in two parts const rotation = view.getRotation(); - view.animate({ - rotation: rotation + Math.PI, - anchor: rome, - easing: easeIn - }, { - rotation: rotation + 2 * Math.PI, - anchor: rome, - easing: easeOut - }); + view.animate( + { + rotation: rotation + Math.PI, + anchor: rome, + easing: easeIn, + }, + { + rotation: rotation + 2 * Math.PI, + anchor: rome, + easing: easeOut, + } + ); }); -onClick('pan-to-london', function() { +onClick('pan-to-london', function () { view.animate({ center: london, - duration: 2000 + duration: 2000, }); }); -onClick('elastic-to-moscow', function() { +onClick('elastic-to-moscow', function () { view.animate({ center: moscow, duration: 2000, - easing: elastic + easing: elastic, }); }); -onClick('bounce-to-istanbul', function() { +onClick('bounce-to-istanbul', function () { view.animate({ center: istanbul, duration: 2000, - easing: bounce + easing: bounce, }); }); -onClick('spin-to-rome', function() { +onClick('spin-to-rome', function () { // Rotation animation takes the shortest arc, so animate in two parts const center = view.getCenter(); - view.animate({ - center: [ - center[0] + (rome[0] - center[0]) / 2, - center[1] + (rome[1] - center[1]) / 2 - ], - rotation: Math.PI, - easing: easeIn - }, { - center: rome, - rotation: 2 * Math.PI, - easing: easeOut - }); + view.animate( + { + center: [ + center[0] + (rome[0] - center[0]) / 2, + center[1] + (rome[1] - center[1]) / 2, + ], + rotation: Math.PI, + easing: easeIn, + }, + { + center: rome, + rotation: 2 * Math.PI, + easing: easeOut, + } + ); }); function flyTo(location, done) { @@ -141,21 +149,28 @@ function flyTo(location, done) { done(complete); } } - view.animate({ - center: location, - duration: duration - }, callback); - view.animate({ - zoom: zoom - 1, - duration: duration / 2 - }, { - zoom: zoom, - duration: duration / 2 - }, callback); + view.animate( + { + center: location, + duration: duration, + }, + callback + ); + view.animate( + { + zoom: zoom - 1, + duration: duration / 2, + }, + { + zoom: zoom, + duration: duration / 2, + }, + callback + ); } -onClick('fly-to-bern', function() { - flyTo(bern, function() {}); +onClick('fly-to-bern', function () { + flyTo(bern, function () {}); }); function tour() { @@ -166,7 +181,7 @@ function tour() { ++index; if (index < locations.length) { const delay = index === 0 ? 0 : 750; - setTimeout(function() { + setTimeout(function () { flyTo(locations[index], next); }, delay); } else { diff --git a/examples/arcgis-image.html b/examples/arcgis-image.html index 87b6e43089..241e0c1def 100644 --- a/examples/arcgis-image.html +++ b/examples/arcgis-image.html @@ -6,6 +6,6 @@ docs: > This example shows how to use a dynamic ArcGIS REST MapService. This source type supports Map and Image Services. For dyamic ArcGIS services. -tags: arcgis, image, dynamiclayer" +tags: "arcgis, image, dynamiclayer" --- diff --git a/examples/arcgis-image.js b/examples/arcgis-image.js index aff5b8f2ee..321b39f25b 100644 --- a/examples/arcgis-image.js +++ b/examples/arcgis-image.js @@ -1,28 +1,29 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {Tile as TileLayer, Image as ImageLayer} from '../src/ol/layer.js'; -import {OSM, ImageArcGISRest} from '../src/ol/source.js'; +import {ImageArcGISRest, OSM} from '../src/ol/source.js'; +import {Image as ImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + - 'Specialty/ESRI_StateCityHighway_USA/MapServer'; +const url = + 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + + 'Specialty/ESRI_StateCityHighway_USA/MapServer'; const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new ImageLayer({ source: new ImageArcGISRest({ ratio: 1, params: {}, - url: url - }) - }) + url: url, + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/arcgis-tiled.html b/examples/arcgis-tiled.html index 576abf6b4d..a92546eca5 100644 --- a/examples/arcgis-tiled.html +++ b/examples/arcgis-tiled.html @@ -7,6 +7,6 @@ docs: > This source type supports Map and Image Services. For cached ArcGIS services, better performance is available by using
ol/source/XYZinstead. -tags: arcgis, tile, tilelayer" +tags: "arcgis, tile, tilelayer" --- diff --git a/examples/arcgis-tiled.js b/examples/arcgis-tiled.js index 4377963891..64f98e4aae 100644 --- a/examples/arcgis-tiled.js +++ b/examples/arcgis-tiled.js @@ -1,27 +1,28 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {OSM, TileArcGISRest} from '../src/ol/source.js'; -const url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + - 'Specialty/ESRI_StateCityHighway_USA/MapServer'; +const url = + 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' + + 'Specialty/ESRI_StateCityHighway_USA/MapServer'; const layers = [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ extent: [-13884991, 2870341, -7455066, 6338219], source: new TileArcGISRest({ - url: url - }) - }) + url: url, + }), + }), ]; const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/attributions.js b/examples/attributions.js index 360a918917..9ee484c4af 100644 --- a/examples/attributions.js +++ b/examples/attributions.js @@ -1,24 +1,24 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, Attribution} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {Attribution, defaults as defaultControls} from '../src/ol/control.js'; const attribution = new Attribution({ - collapsible: false + collapsible: false, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], controls: defaultControls({attribution: false}).extend([attribution]), target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); function checkSize() { diff --git a/examples/bing-maps.html b/examples/bing-maps.html index a3e7b5b48f..2752130f9e 100644 --- a/examples/bing-maps.html +++ b/examples/bing-maps.html @@ -6,7 +6,7 @@ docs: >When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set
tags: "bing, bing-maps" cloak: - - key: As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5 + - key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp value: Your Bing Maps Key from http://www.bingmapsportal.com/ here --- diff --git a/examples/bing-maps.js b/examples/bing-maps.js index b0ecb7c2be..77bcdd2b69 100644 --- a/examples/bing-maps.js +++ b/examples/bing-maps.js @@ -1,38 +1,39 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import BingMaps from '../src/ol/source/BingMaps.js'; - +import Map from '../src/ol/Map.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const styles = [ 'RoadOnDemand', 'Aerial', 'AerialWithLabelsOnDemand', 'CanvasDark', - 'OrdnanceSurvey' + 'OrdnanceSurvey', ]; const layers = []; let i, ii; for (i = 0, ii = styles.length; i < ii; ++i) { - layers.push(new TileLayer({ - visible: false, - preload: Infinity, - source: new BingMaps({ - key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5', - imagerySet: styles[i] - // use maxZoom 19 to see stretched tiles instead of the BingMaps - // "no photos at this zoom level" tiles - // maxZoom: 19 + layers.push( + new TileLayer({ + visible: false, + preload: Infinity, + source: new BingMaps({ + key: 'ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp', + imagerySet: styles[i], + // use maxZoom 19 to see stretched tiles instead of the BingMaps + // "no photos at this zoom level" tiles + // maxZoom: 19 + }), }) - })); + ); } const map = new Map({ layers: layers, target: 'map', view: new View({ center: [-6655.5402445057125, 6709968.258934638], - zoom: 13 - }) + zoom: 13, + }), }); const select = document.getElementById('layer-select'); diff --git a/examples/box-selection.js b/examples/box-selection.js index 5f6b3de1a8..61962b310d 100644 --- a/examples/box-selection.js +++ b/examples/box-selection.js @@ -1,33 +1,31 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {platformModifierKeyOnly} from '../src/ol/events/condition.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; import {DragBox, Select} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {platformModifierKeyOnly} from '../src/ol/events/condition.js'; const vectorSource = new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); - const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], zoom: 2, - constrainRotation: 16 - }) + constrainRotation: 16, + }), }); // a normal select interaction to handle click @@ -38,12 +36,12 @@ const selectedFeatures = select.getFeatures(); // a DragBox interaction used to select features by drawing boxes const dragBox = new DragBox({ - condition: platformModifierKeyOnly + condition: platformModifierKeyOnly, }); map.addInteraction(dragBox); -dragBox.on('boxend', function() { +dragBox.on('boxend', function () { // features that intersect the box geometry are added to the // collection of selected features @@ -54,7 +52,7 @@ dragBox.on('boxend', function() { const oblique = rotation % (Math.PI / 2) !== 0; const candidateFeatures = oblique ? [] : selectedFeatures; const extent = dragBox.getGeometry().getExtent(); - vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) { + vectorSource.forEachFeatureIntersectingExtent(extent, function (feature) { candidateFeatures.push(feature); }); @@ -68,7 +66,7 @@ dragBox.on('boxend', function() { const geometry = dragBox.getGeometry().clone(); geometry.rotate(-rotation, anchor); const extent = geometry.getExtent(); - candidateFeatures.forEach(function(feature) { + candidateFeatures.forEach(function (feature) { const geometry = feature.getGeometry().clone(); geometry.rotate(-rotation, anchor); if (geometry.intersectsExtent(extent)) { @@ -76,18 +74,17 @@ dragBox.on('boxend', function() { } }); } - }); // clear selection when drawing a new box and when clicking on the map -dragBox.on('boxstart', function() { +dragBox.on('boxstart', function () { selectedFeatures.clear(); }); const infoBox = document.getElementById('info'); -selectedFeatures.on(['add', 'remove'], function() { - const names = selectedFeatures.getArray().map(function(feature) { +selectedFeatures.on(['add', 'remove'], function () { + const names = selectedFeatures.getArray().map(function (feature) { return feature.get('name'); }); if (names.length > 0) { diff --git a/examples/button-title.html b/examples/button-title.html index 84f1341dea..0f8540f42e 100644 --- a/examples/button-title.html +++ b/examples/button-title.html @@ -6,8 +6,8 @@ docs: > This example shows how to customize the buttons tooltips with Bootstrap. tags: "custom, tooltip" resources: - - https://code.jquery.com/jquery-2.2.3.min.js - - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css - - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js + - https://code.jquery.com/jquery-3.5.1.min.js + - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css + - https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js --- diff --git a/examples/button-title.js b/examples/button-title.js index c48462a62f..b42183ea5d 100644 --- a/examples/button-title.js +++ b/examples/button-title.js @@ -1,26 +1,25 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [-8730000, 5930000], rotation: Math.PI / 5, - zoom: 8 - }) + zoom: 8, + }), }); - $('.ol-zoom-in, .ol-zoom-out').tooltip({ - placement: 'right' + placement: 'right', }); $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({ - placement: 'left' + placement: 'left', }); diff --git a/examples/canvas-gradient-pattern.js b/examples/canvas-gradient-pattern.js index 1b91b8593d..3504e5e964 100644 --- a/examples/canvas-gradient-pattern.js +++ b/examples/canvas-gradient-pattern.js @@ -1,11 +1,11 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; -import {fromLonLat} from '../src/ol/proj.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {DEVICE_PIXEL_RATIO} from '../src/ol/has.js'; import {Fill, Stroke, Style} from '../src/ol/style.js'; +import {fromLonLat} from '../src/ol/proj.js'; const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); @@ -15,7 +15,7 @@ const context = canvas.getContext('2d'); const pixelRatio = DEVICE_PIXEL_RATIO; // Generate a rainbow gradient -const gradient = (function() { +const gradient = (function () { const grad = context.createLinearGradient(0, 0, 512 * pixelRatio, 0); grad.addColorStop(0, 'red'); grad.addColorStop(1 / 6, 'orange'); @@ -28,7 +28,7 @@ const gradient = (function() { })(); // Generate a canvasPattern with two circles on white background -const pattern = (function() { +const pattern = (function () { canvas.width = 8 * pixelRatio; canvas.height = 8 * pixelRatio; // white background @@ -45,7 +45,7 @@ const pattern = (function() { context.arc(4 * pixelRatio, 4 * pixelRatio, 1.5 * pixelRatio, 0, 2 * Math.PI); context.fill(); return context.createPattern(canvas, 'repeat'); -}()); +})(); // Generate style for gradient or pattern fill const fill = new Fill(); @@ -53,8 +53,8 @@ const style = new Style({ fill: fill, stroke: new Stroke({ color: '#333', - width: 2 - }) + width: 2, + }), }); /** @@ -64,7 +64,7 @@ const style = new Style({ * @param {import("../src/ol/Feature.js").default} feature The feature to style. * @return {Style} The style to use for the feature. */ -const getStackedStyle = function(feature) { +const getStackedStyle = function (feature) { const id = feature.getId(); fill.setColor(id > 'J' ? gradient : pattern); return style; @@ -74,19 +74,17 @@ const getStackedStyle = function(feature) { const vectorLayer = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: getStackedStyle + style: getStackedStyle, }); // … finally create a map with that layer. const map = new Map({ - layers: [ - vectorLayer - ], + layers: [vectorLayer], target: 'map', view: new View({ center: fromLonLat([16, 48]), - zoom: 3 - }) + zoom: 3, + }), }); diff --git a/examples/canvas-tiles.js b/examples/canvas-tiles.js index b8fcb00220..df852b27e9 100644 --- a/examples/canvas-tiles.js +++ b/examples/canvas-tiles.js @@ -1,21 +1,20 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {OSM, TileDebug} from '../src/ol/source.js'; - const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ - source: new TileDebug() - }) + source: new TileDebug(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); diff --git a/examples/cartodb.js b/examples/cartodb.js index 81a27bca1b..c385fe1c5c 100644 --- a/examples/cartodb.js +++ b/examples/cartodb.js @@ -1,47 +1,48 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {CartoDB, OSM} from '../src/ol/source.js'; const mapConfig = { - 'layers': [{ - 'type': 'cartodb', - 'options': { - 'cartocss_version': '2.1.1', - 'cartocss': '#layer { polygon-fill: #F00; }', - 'sql': 'select * from european_countries_e where area > 0' - } - }] + 'layers': [ + { + 'type': 'cartodb', + 'options': { + 'cartocss_version': '2.1.1', + 'cartocss': '#layer { polygon-fill: #F00; }', + 'sql': 'select * from european_countries_e where area > 0', + }, + }, + ], }; const cartoDBSource = new CartoDB({ account: 'documentation', - config: mapConfig + config: mapConfig, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new TileLayer({ - source: cartoDBSource - }) + source: cartoDBSource, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); function setArea(n) { mapConfig.layers[0].options.sql = - 'select * from european_countries_e where area > ' + n; + 'select * from european_countries_e where area > ' + n; cartoDBSource.setConfig(mapConfig); } - -document.getElementById('country-area').addEventListener('change', function() { +document.getElementById('country-area').addEventListener('change', function () { setArea(this.value); }); diff --git a/examples/center.css b/examples/center.css index f3eea4d4cb..ea1b3377d3 100644 --- a/examples/center.css +++ b/examples/center.css @@ -6,15 +6,16 @@ width: 1000px; height: 600px; } -div.ol-zoom { +.map .ol-zoom { top: 178px; left: 158px; } -div.ol-rotate { +.map .ol-rotate { top: 178px; right: 58px; } -.map div.ol-attribution { +.map .ol-attribution, +.map .ol-attribution.ol-uncollapsible { bottom: 30px; right: 50px; } diff --git a/examples/center.js b/examples/center.js index 7f5ca270ad..df4d8fab3f 100644 --- a/examples/center.js +++ b/examples/center.js @@ -1,72 +1,83 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; /** @type {VectorSourcemaxZoomto19in the options passed tool/source/BingMaps.} pixel A pixel in RGB space. @@ -29,11 +27,14 @@ function rgb2hcl(pixel) { const blue = rgb2xyz(pixel[2]); const x = xyz2lab( - (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn); + (0.4124564 * red + 0.3575761 * green + 0.1804375 * blue) / Xn + ); const y = xyz2lab( - (0.2126729 * red + 0.7151522 * green + 0.0721750 * blue) / Yn); + (0.2126729 * red + 0.7151522 * green + 0.072175 * blue) / Yn + ); const z = xyz2lab( - (0.0193339 * red + 0.1191920 * green + 0.9503041 * blue) / Zn); + (0.0193339 * red + 0.119192 * green + 0.9503041 * blue) / Zn + ); const l = 116 * y - 16; const a = 500 * (x - y); @@ -52,7 +53,6 @@ function rgb2hcl(pixel) { return pixel; } - /** * Convert an HCL pixel into an RGB pixel. * @param {Array } pixel A pixel in HCL space. @@ -75,7 +75,7 @@ function hcl2rgb(pixel) { z = Zn * lab2xyz(z); pixel[0] = xyz2rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z); - pixel[1] = xyz2rgb(-0.9692660 * x + 1.8760108 * y + 0.0415560 * z); + pixel[1] = xyz2rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z); pixel[2] = xyz2rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z); return pixel; @@ -94,18 +94,21 @@ function rgb2xyz(x) { } function xyz2rgb(x) { - return 255 * (x <= 0.0031308 ? - 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055); + return ( + 255 * (x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055) + ); } const raster = new RasterSource({ - sources: [new Stamen({ - layer: 'watercolor' - })], - operation: function(pixels, data) { + sources: [ + new Stamen({ + layer: 'watercolor', + }), + ], + operation: function (pixels, data) { const hcl = rgb2hcl(pixels[0]); - let h = hcl[0] + Math.PI * data.hue / 180; + let h = hcl[0] + (Math.PI * data.hue) / 180; if (h < 0) { h += twoPi; } else if (h > twoPi) { @@ -113,8 +116,8 @@ const raster = new RasterSource({ } hcl[0] = h; - hcl[1] *= (data.chroma / 100); - hcl[2] *= (data.lightness / 100); + hcl[1] *= data.chroma / 100; + hcl[2] *= data.lightness / 100; return hcl2rgb(hcl); }, @@ -132,13 +135,13 @@ const raster = new RasterSource({ t1: t1, t2: t2, t3: t3, - twoPi: twoPi - } + twoPi: twoPi, + }, }); const controls = {}; -raster.on('beforeoperations', function(event) { +raster.on('beforeoperations', function (event) { const data = event.data; for (const id in controls) { data[id] = Number(controls[id].value); @@ -148,22 +151,22 @@ raster.on('beforeoperations', function(event) { const map = new Map({ layers: [ new ImageLayer({ - source: raster - }) + source: raster, + }), ], target: 'map', view: new View({ center: [0, 2500000], zoom: 2, - maxZoom: 18 - }) + maxZoom: 18, + }), }); const controlIds = ['hue', 'chroma', 'lightness']; -controlIds.forEach(function(id) { +controlIds.forEach(function (id) { const control = document.getElementById(id); const output = document.getElementById(id + 'Out'); - control.addEventListener('input', function() { + control.addEventListener('input', function () { output.innerText = control.value; raster.changed(); }); diff --git a/examples/custom-controls.js b/examples/custom-controls.js index f39be07a83..10c578229f 100644 --- a/examples/custom-controls.js +++ b/examples/custom-controls.js @@ -1,16 +1,14 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, Control} from '../src/ol/control.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {Control, defaults as defaultControls} from '../src/ol/control.js'; // // Define rotate to north control. // class RotateNorthControl extends Control { - /** * @param {Object=} opt_options Control options. */ @@ -26,7 +24,7 @@ class RotateNorthControl extends Control { super({ element: element, - target: options.target + target: options.target, }); button.addEventListener('click', this.handleRotateNorth.bind(this), false); @@ -35,28 +33,23 @@ class RotateNorthControl extends Control { handleRotateNorth() { this.getMap().getView().setRotation(0); } - } - // // Create map, giving it a rotate to north control. // - const map = new Map({ - controls: defaultControls().extend([ - new RotateNorthControl() - ]), + controls: defaultControls().extend([new RotateNorthControl()]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], zoom: 3, - rotation: 1 - }) + rotation: 1, + }), }); diff --git a/examples/custom-interactions.js b/examples/custom-interactions.js index 9fa87a1b5f..ca75edf3ea 100644 --- a/examples/custom-interactions.js +++ b/examples/custom-interactions.js @@ -1,12 +1,14 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {LineString, Point, Polygon} from '../src/ol/geom.js'; -import {defaults as defaultInteractions, Pointer as PointerInteraction} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {TileJSON, Vector as VectorSource} from '../src/ol/source.js'; import {Fill, Icon, Stroke, Style} from '../src/ol/style.js'; - +import {LineString, Point, Polygon} from '../src/ol/geom.js'; +import { + Pointer as PointerInteraction, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {TileJSON, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; class Drag extends PointerInteraction { constructor() { @@ -14,7 +16,7 @@ class Drag extends PointerInteraction { handleDownEvent: handleDownEvent, handleDragEvent: handleDragEvent, handleMoveEvent: handleMoveEvent, - handleUpEvent: handleUpEvent + handleUpEvent: handleUpEvent, }); /** @@ -43,7 +45,6 @@ class Drag extends PointerInteraction { } } - /** * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event. * @return {boolean} `true` to start the drag sequence. @@ -51,10 +52,9 @@ class Drag extends PointerInteraction { function handleDownEvent(evt) { const map = evt.map; - const feature = map.forEachFeatureAtPixel(evt.pixel, - function(feature) { - return feature; - }); + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); if (feature) { this.coordinate_ = evt.coordinate; @@ -64,7 +64,6 @@ function handleDownEvent(evt) { return !!feature; } - /** * @param {import("../src/ol/MapBrowserEvent.js").default} evt Map browser event. */ @@ -79,17 +78,15 @@ function handleDragEvent(evt) { this.coordinate_[1] = evt.coordinate[1]; } - /** * @param {import("../src/ol/MapBrowserEvent.js").default} evt Event. */ function handleMoveEvent(evt) { if (this.cursor_) { const map = evt.map; - const feature = map.forEachFeatureAtPixel(evt.pixel, - function(feature) { - return feature; - }); + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); const element = evt.map.getTargetElement(); if (feature) { if (element.style.cursor != this.cursor_) { @@ -103,7 +100,6 @@ function handleMoveEvent(evt) { } } - /** * @return {boolean} `false` to stop the drag sequence. */ @@ -113,29 +109,43 @@ function handleUpEvent() { return false; } - const pointFeature = new Feature(new Point([0, 0])); const lineFeature = new Feature( - new LineString([[-1e7, 1e6], [-1e6, 3e6]])); + new LineString([ + [-1e7, 1e6], + [-1e6, 3e6], + ]) +); const polygonFeature = new Feature( - new Polygon([[[-3e6, -1e6], [-3e6, 1e6], - [-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]])); + new Polygon([ + [ + [-3e6, -1e6], + [-3e6, 1e6], + [-1e6, 1e6], + [-1e6, -1e6], + [-3e6, -1e6], + ], + ]) +); -const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; +const key = + 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q'; const map = new Map({ interactions: defaultInteractions().extend([new Drag()]), layers: [ new TileLayer({ source: new TileJSON({ - url: 'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' + key - }) + url: + 'https://a.tiles.mapbox.com/v4/aj.1x1-degrees.json?access_token=' + + key, + }), }), new VectorLayer({ source: new VectorSource({ - features: [pointFeature, lineFeature, polygonFeature] + features: [pointFeature, lineFeature, polygonFeature], }), style: new Style({ image: new Icon({ @@ -143,21 +153,21 @@ const map = new Map({ anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.95, - src: 'data/icon.png' + src: 'data/icon.png', }), stroke: new Stroke({ width: 3, - color: [255, 0, 0, 1] + color: [255, 0, 0, 1], }), fill: new Fill({ - color: [0, 0, 255, 0.6] - }) - }) - }) + color: [0, 0, 255, 0.6], + }), + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/d3.js b/examples/d3.js index e15fe1da8d..ae6b352f71 100644 --- a/examples/d3.js +++ b/examples/d3.js @@ -1,24 +1,23 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {getWidth, getCenter} from '../src/ol/extent.js'; -import {Layer, Tile as TileLayer} from '../src/ol/layer.js'; import SourceState from '../src/ol/source/State.js'; -import {fromLonLat, toLonLat} from '../src/ol/proj.js'; import Stamen from '../src/ol/source/Stamen.js'; +import View from '../src/ol/View.js'; +import {Layer, Tile as TileLayer} from '../src/ol/layer.js'; +import {fromLonLat, toLonLat} from '../src/ol/proj.js'; +import {getCenter, getWidth} from '../src/ol/extent.js'; class CanvasLayer extends Layer { - constructor(options) { super(options); this.features = options.features; - this.svg = d3.select(document.createElement('div')).append('svg') + this.svg = d3 + .select(document.createElement('div')) + .append('svg') .style('position', 'absolute'); - this.svg.append('path') - .datum(this.features) - .attr('class', 'boundary'); + this.svg.append('path').datum(this.features).attr('class', 'boundary'); } getSourceState() { @@ -51,7 +50,10 @@ class CanvasLayer extends Layer { const scale = r / frameState.viewState.resolution; const center = toLonLat(getCenter(frameState.extent), projection); - d3Projection.scale(scale).center(center).translate([width / 2, height / 2]); + d3Projection + .scale(scale) + .center(center) + .translate([width / 2, height / 2]); d3Path = d3Path.projection(d3Projection); d3Path(this.features); @@ -59,8 +61,7 @@ class CanvasLayer extends Layer { this.svg.attr('width', width); this.svg.attr('height', height); - this.svg.select('path') - .attr('d', d3Path); + this.svg.select('path').attr('d', d3Path); return this.svg.node(); } @@ -70,25 +71,23 @@ const map = new Map({ layers: [ new TileLayer({ source: new Stamen({ - layer: 'watercolor' - }) - }) + layer: 'watercolor', + }), + }), ], target: 'map', view: new View({ center: fromLonLat([-97, 38]), - zoom: 4 - }) + zoom: 4, + }), }); - /** * Load the topojson data and create an ol/layer/Image for that data. */ -d3.json('data/topojson/us.json').then(function(us) { - +d3.json('data/topojson/us.json').then(function (us) { const layer = new CanvasLayer({ - features: topojson.feature(us, us.objects.counties) + features: topojson.feature(us, us.objects.counties), }); map.addLayer(layer); diff --git a/examples/data/fish.png b/examples/data/fish.png new file mode 100644 index 0000000000..8163d23285 Binary files /dev/null and b/examples/data/fish.png differ diff --git a/examples/data/square.svg b/examples/data/square.svg index 0b7a912a53..e7a5e249f3 100644 --- a/examples/data/square.svg +++ b/examples/data/square.svg @@ -2,6 +2,6 @@ diff --git a/examples/device-orientation.js b/examples/device-orientation.js index 8f7fd602d6..d45579d23d 100644 --- a/examples/device-orientation.js +++ b/examples/device-orientation.js @@ -1,32 +1,31 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {toRadians} from '../src/ol/math.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {toRadians} from '../src/ol/math.js'; const view = new View({ center: [0, 0], - zoom: 2 + zoom: 2, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', - view: view + view: view, }); function el(id) { return document.getElementById(id); } - const gn = new GyroNorm(); -gn.init().then(function() { - gn.start(function(event) { +gn.init().then(function () { + gn.start(function (event) { const center = view.getCenter(); const resolution = view.getResolution(); const alpha = toRadians(event.do.alpha); diff --git a/examples/disable-image-smoothing.css b/examples/disable-image-smoothing.css new file mode 100644 index 0000000000..db58102d58 --- /dev/null +++ b/examples/disable-image-smoothing.css @@ -0,0 +1,15 @@ +@media (min-width: 800px) { + .wrapper { + display: flex; + } + .half { + padding: 0 10px; + width: 50%; + float: left; + } +} +#opacity { + display: inline-block; + width: 150px; + vertical-align: text-bottom; +} diff --git a/examples/disable-image-smoothing.html b/examples/disable-image-smoothing.html new file mode 100644 index 0000000000..39a452daa6 --- /dev/null +++ b/examples/disable-image-smoothing.html @@ -0,0 +1,45 @@ +--- +layout: example.html +title: Disable Image Smoothing +shortdesc: Example of disabling image smoothing +docs: > + Example of disabling image smoothing when using raster DEM (digital elevation model) data. + The imageSmoothing: falsesetting is used to disable canvas image smoothing during + reprojection and rendering. Elevation data is + calculated from the pixel value returned by forEachLayerAtPixel. For comparison a second map + with smoothing enabled returns inaccuate elevations which are very noticeable close to 3107 meters + due to how elevation is calculated from the pixel value. +tags: "disable image smoothing, xyz, maptiler, reprojection" +cloak: + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ +--- ++diff --git a/examples/disable-image-smoothing.js b/examples/disable-image-smoothing.js new file mode 100644 index 0000000000..0a6b23923a --- /dev/null +++ b/examples/disable-image-smoothing.js @@ -0,0 +1,120 @@ +import Map from '../src/ol/Map.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; + +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = + '© MapTiler ' + + '© OpenStreetMap contributors'; + +const disabledLayer = new TileLayer({ + // specify className so forEachLayerAtPixel can distinguish layers + className: 'ol-layer-dem', + source: new XYZ({ + attributions: attributions, + url: + 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, + maxZoom: 10, + crossOrigin: '', + imageSmoothing: false, + }), +}); + +const imagery = new TileLayer({ + className: 'ol-layer-imagery', + source: new XYZ({ + attributions: attributions, + url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + crossOrigin: '', + }), +}); + +const enabledLayer = new TileLayer({ + source: new XYZ({ + attributions: attributions, + url: + 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key, + maxZoom: 10, + crossOrigin: '', + }), +}); + +imagery.on('prerender', function (evt) { + // use opaque background to conceal DEM while fully opaque imagery renders + if (imagery.getOpacity() === 1) { + evt.context.fillStyle = 'white'; + evt.context.fillRect( + 0, + 0, + evt.context.canvas.width, + evt.context.canvas.height + ); + } +}); + +const control = document.getElementById('opacity'); +const output = document.getElementById('output'); +control.addEventListener('input', function () { + output.innerText = control.value; + imagery.setOpacity(control.value / 100); +}); +output.innerText = control.value; +imagery.setOpacity(control.value / 100); + +const view = new View({ + center: [6.893, 45.8295], + zoom: 16, + projection: 'EPSG:4326', +}); + +const map1 = new Map({ + target: 'map1', + layers: [disabledLayer, imagery], + view: view, +}); + +const map2 = new Map({ + target: 'map2', + layers: [enabledLayer], + view: view, +}); + +const info1 = document.getElementById('info1'); +const info2 = document.getElementById('info2'); + +const showElevations = function (evt) { + if (evt.dragging) { + return; + } + map1.forEachLayerAtPixel( + evt.pixel, + function (layer, pixel) { + const height = + -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; + info1.innerText = height.toFixed(1); + }, + { + layerFilter: function (layer) { + return layer === disabledLayer; + }, + } + ); + map2.forEachLayerAtPixel( + evt.pixel, + function (layer, pixel) { + const height = + -10000 + (pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1; + info2.innerText = height.toFixed(1); + }, + { + layerFilter: function (layer) { + return layer === enabledLayer; + }, + } + ); +}; + +map1.on('pointermove', showElevations); +map2.on('pointermove', showElevations); diff --git a/examples/drag-and-drop-image-vector.js b/examples/drag-and-drop-image-vector.js index 56491c33dd..d230d1c7b6 100644 --- a/examples/drag-and-drop-image-vector.js +++ b/examples/drag-and-drop-image-vector.js @@ -1,22 +1,23 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; +import { + DragAndDrop, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js'; -import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js'; -import {VectorImage as VectorImageLayer, Tile as TileLayer} from '../src/ol/layer.js'; -import {XYZ, Vector as VectorSource} from '../src/ol/source.js'; +import { + Tile as TileLayer, + VectorImage as VectorImageLayer, +} from '../src/ol/layer.js'; +import {Vector as VectorSource, XYZ} from '../src/ol/source.js'; const dragAndDropInteraction = new DragAndDrop({ - formatConstructors: [ - GPX, - GeoJSON, - IGC, - KML, - TopoJSON - ] + formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON], }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const map = new Map({ @@ -25,31 +26,34 @@ const map = new Map({ new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) - }) + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -dragAndDropInteraction.on('addfeatures', function(event) { +dragAndDropInteraction.on('addfeatures', function (event) { const vectorSource = new VectorSource({ - features: event.features + features: event.features, }); - map.addLayer(new VectorImageLayer({ - source: vectorSource - })); + map.addLayer( + new VectorImageLayer({ + source: vectorSource, + }) + ); map.getView().fit(vectorSource.getExtent()); }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -64,7 +68,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -72,6 +76,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/drag-and-drop.js b/examples/drag-and-drop.js index 0f407fec82..04ba089aee 100644 --- a/examples/drag-and-drop.js +++ b/examples/drag-and-drop.js @@ -1,22 +1,20 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; +import { + DragAndDrop, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; import {GPX, GeoJSON, IGC, KML, TopoJSON} from '../src/ol/format.js'; -import {defaults as defaultInteractions, DragAndDrop} from '../src/ol/interaction.js'; import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {XYZ, Vector as VectorSource} from '../src/ol/source.js'; +import {Vector as VectorSource, XYZ} from '../src/ol/source.js'; const dragAndDropInteraction = new DragAndDrop({ - formatConstructors: [ - GPX, - GeoJSON, - IGC, - KML, - TopoJSON - ] + formatConstructors: [GPX, GeoJSON, IGC, KML, TopoJSON], }); const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const map = new Map({ @@ -25,31 +23,34 @@ const map = new Map({ new TileLayer({ source: new XYZ({ attributions: attributions, - url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) - }) + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + maxZoom: 20, + }), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -dragAndDropInteraction.on('addfeatures', function(event) { +dragAndDropInteraction.on('addfeatures', function (event) { const vectorSource = new VectorSource({ - features: event.features + features: event.features, }); - map.addLayer(new VectorLayer({ - source: vectorSource - })); + map.addLayer( + new VectorLayer({ + source: vectorSource, + }) + ); map.getView().fit(vectorSource.getExtent()); }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -64,7 +65,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -72,6 +73,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/drag-rotate-and-zoom.js b/examples/drag-rotate-and-zoom.js index 88e58a4f8a..f552b25553 100644 --- a/examples/drag-rotate-and-zoom.js +++ b/examples/drag-rotate-and-zoom.js @@ -1,22 +1,22 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import { + DragRotateAndZoom, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; const map = new Map({ - interactions: defaultInteractions().extend([ - new DragRotateAndZoom() - ]), + interactions: defaultInteractions().extend([new DragRotateAndZoom()]), layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/draw-and-modify-features.js b/examples/draw-and-modify-features.js index 0863a752fb..bc2a56773c 100644 --- a/examples/draw-and-modify-features.js +++ b/examples/draw-and-modify-features.js @@ -1,12 +1,12 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {Draw, Modify, Snap} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {Draw, Modify, Snap} from '../src/ol/interaction.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource(); @@ -14,19 +14,19 @@ const vector = new VectorLayer({ source: source, style: new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.2)' + color: 'rgba(255, 255, 255, 0.2)', }), stroke: new Stroke({ color: '#ffcc33', - width: 2 + width: 2, }), image: new CircleStyle({ radius: 7, fill: new Fill({ - color: '#ffcc33' - }) - }) - }) + color: '#ffcc33', + }), + }), + }), }); const map = new Map({ @@ -34,8 +34,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const modify = new Modify({source: source}); @@ -47,18 +47,17 @@ const typeSelect = document.getElementById('type'); function addInteractions() { draw = new Draw({ source: source, - type: typeSelect.value + type: typeSelect.value, }); map.addInteraction(draw); snap = new Snap({source: source}); map.addInteraction(snap); - } /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); map.removeInteraction(snap); addInteractions(); diff --git a/examples/draw-features.js b/examples/draw-features.js index 4d0d200b8f..cefff36c35 100644 --- a/examples/draw-features.js +++ b/examples/draw-features.js @@ -1,17 +1,17 @@ +import Draw from '../src/ol/interaction/Draw.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import Draw from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource({wrapX: false}); const vector = new VectorLayer({ - source: source + source: source, }); const map = new Map({ @@ -19,8 +19,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const typeSelect = document.getElementById('type'); @@ -31,17 +31,16 @@ function addInteraction() { if (value !== 'None') { draw = new Draw({ source: source, - type: typeSelect.value + type: typeSelect.value, }); map.addInteraction(draw); } } - /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); addInteraction(); }; diff --git a/examples/draw-freehand.js b/examples/draw-freehand.js index 92cefa6c89..d7d2b08057 100644 --- a/examples/draw-freehand.js +++ b/examples/draw-freehand.js @@ -1,17 +1,17 @@ +import Draw from '../src/ol/interaction/Draw.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import Draw from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource({wrapX: false}); const vector = new VectorLayer({ - source: source + source: source, }); const map = new Map({ @@ -19,8 +19,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const typeSelect = document.getElementById('type'); @@ -32,17 +32,16 @@ function addInteraction() { draw = new Draw({ source: source, type: typeSelect.value, - freehand: true + freehand: true, }); map.addInteraction(draw); } } - /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); addInteraction(); }; diff --git a/examples/draw-shapes.js b/examples/draw-shapes.js index 7ed90d5be0..f02fba2ac8 100644 --- a/examples/draw-shapes.js +++ b/examples/draw-shapes.js @@ -1,18 +1,21 @@ +import Draw, { + createBox, + createRegularPolygon, +} from '../src/ol/interaction/Draw.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Polygon from '../src/ol/geom/Polygon.js'; -import Draw, {createRegularPolygon, createBox} from '../src/ol/interaction/Draw.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import View from '../src/ol/View.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const source = new VectorSource({wrapX: false}); const vector = new VectorLayer({ - source: source + source: source, }); const map = new Map({ @@ -20,8 +23,8 @@ const map = new Map({ target: 'map', view: new View({ center: [-11000000, 4600000], - zoom: 4 - }) + zoom: 4, + }), }); const typeSelect = document.getElementById('type'); @@ -39,7 +42,7 @@ function addInteraction() { geometryFunction = createBox(); } else if (value === 'Star') { value = 'Circle'; - geometryFunction = function(coordinates, geometry) { + geometryFunction = function (coordinates, geometry) { const center = coordinates[0]; const last = coordinates[1]; const dx = center[0] - last[0]; @@ -49,7 +52,7 @@ function addInteraction() { const newCoordinates = []; const numPoints = 12; for (let i = 0; i < numPoints; ++i) { - const angle = rotation + i * 2 * Math.PI / numPoints; + const angle = rotation + (i * 2 * Math.PI) / numPoints; const fraction = i % 2 === 0 ? 1 : 0.5; const offsetX = radius * fraction * Math.cos(angle); const offsetY = radius * fraction * Math.sin(angle); @@ -67,17 +70,16 @@ function addInteraction() { draw = new Draw({ source: source, type: value, - geometryFunction: geometryFunction + geometryFunction: geometryFunction, }); map.addInteraction(draw); } } - /** * Handle change event. */ -typeSelect.onchange = function() { +typeSelect.onchange = function () { map.removeInteraction(draw); addInteraction(); }; diff --git a/examples/dynamic-data.js b/examples/dynamic-data.js index e65a0d21f7..deca3b51aa 100644 --- a/examples/dynamic-data.js +++ b/examples/dynamic-data.js @@ -1,13 +1,13 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {MultiPoint, Point} from '../src/ol/geom.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {MultiPoint, Point} from '../src/ol/geom.js'; import {getVectorContext} from '../src/ol/render.js'; const tileLayer = new TileLayer({ - source: new OSM() + source: new OSM(), }); const map = new Map({ @@ -15,30 +15,30 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const imageStyle = new Style({ image: new CircleStyle({ radius: 5, fill: new Fill({color: 'yellow'}), - stroke: new Stroke({color: 'red', width: 1}) - }) + stroke: new Stroke({color: 'red', width: 1}), + }), }); const headInnerImageStyle = new Style({ image: new CircleStyle({ radius: 2, - fill: new Fill({color: 'blue'}) - }) + fill: new Fill({color: 'blue'}), + }), }); const headOuterImageStyle = new Style({ image: new CircleStyle({ radius: 5, - fill: new Fill({color: 'black'}) - }) + fill: new Fill({color: 'black'}), + }), }); const n = 200; @@ -46,16 +46,16 @@ const omegaTheta = 30000; // Rotation period in ms const R = 7e6; const r = 2e6; const p = 2e6; -tileLayer.on('postrender', function(event) { +tileLayer.on('postrender', function (event) { const vectorContext = getVectorContext(event); const frameState = event.frameState; - const theta = 2 * Math.PI * frameState.time / omegaTheta; + const theta = (2 * Math.PI * frameState.time) / omegaTheta; const coordinates = []; let i; for (i = 0; i < n; ++i) { - const t = theta + 2 * Math.PI * i / n; - const x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r); - const y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r); + const t = theta + (2 * Math.PI * i) / n; + const x = (R + r) * Math.cos(t) + p * Math.cos(((R + r) * t) / r); + const y = (R + r) * Math.sin(t) + p * Math.sin(((R + r) * t) / r); coordinates.push([x, y]); } vectorContext.setStyle(imageStyle); diff --git a/examples/earthquake-clusters.js b/examples/earthquake-clusters.js index e328f75562..8ffd0602a0 100644 --- a/examples/earthquake-clusters.js +++ b/examples/earthquake-clusters.js @@ -1,29 +1,38 @@ +import KML from '../src/ol/format/KML.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import {createEmpty, getWidth, getHeight, extend} from '../src/ol/extent.js'; -import KML from '../src/ol/format/KML.js'; -import {defaults as defaultInteractions, Select} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import { + Circle as CircleStyle, + Fill, + RegularShape, + Stroke, + Style, + Text, +} from '../src/ol/style.js'; import {Cluster, Stamen, Vector as VectorSource} from '../src/ol/source.js'; -import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text} from '../src/ol/style.js'; - +import { + Select, + defaults as defaultInteractions, +} from '../src/ol/interaction.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {createEmpty, extend, getHeight, getWidth} from '../src/ol/extent.js'; const earthquakeFill = new Fill({ - color: 'rgba(255, 153, 0, 0.8)' + color: 'rgba(255, 153, 0, 0.8)', }); const earthquakeStroke = new Stroke({ color: 'rgba(255, 204, 0, 0.2)', - width: 1 + width: 1, }); const textFill = new Fill({ - color: '#fff' + color: '#fff', }); const textStroke = new Stroke({ color: 'rgba(0, 0, 0, 0.6)', - width: 3 + width: 3, }); const invisibleFill = new Fill({ - color: 'rgba(255, 255, 255, 0.01)' + color: 'rgba(255, 255, 255, 0.01)', }); function createEarthquakeStyle(feature) { @@ -42,14 +51,14 @@ function createEarthquakeStyle(feature) { points: 5, angle: Math.PI, fill: earthquakeFill, - stroke: earthquakeStroke - }) + stroke: earthquakeStroke, + }), }); } let maxFeatureCount; let vector = null; -const calculateClusterInfo = function(resolution) { +const calculateClusterInfo = function (resolution) { maxFeatureCount = 0; const features = vector.getSource().getFeatures(); let feature, radius; @@ -62,8 +71,7 @@ const calculateClusterInfo = function(resolution) { extend(extent, originalFeatures[j].getGeometry().getExtent()); } maxFeatureCount = Math.max(maxFeatureCount, jj); - radius = 0.25 * (getWidth(extent) + getHeight(extent)) / - resolution; + radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution; feature.set('radius', radius); } }; @@ -81,14 +89,14 @@ function styleFunction(feature, resolution) { image: new CircleStyle({ radius: feature.get('radius'), fill: new Fill({ - color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))] - }) + color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)], + }), }), text: new Text({ text: size.toString(), fill: textFill, - stroke: textStroke - }) + stroke: textStroke, + }), }); } else { const originalFeature = feature.get('features')[0]; @@ -98,12 +106,14 @@ function styleFunction(feature, resolution) { } function selectStyleFunction(feature) { - const styles = [new Style({ - image: new CircleStyle({ - radius: feature.get('radius'), - fill: invisibleFill - }) - })]; + const styles = [ + new Style({ + image: new CircleStyle({ + radius: feature.get('radius'), + fill: invisibleFill, + }), + }), + ]; const originalFeatures = feature.get('features'); let originalFeature; for (let i = originalFeatures.length - 1; i >= 0; --i) { @@ -119,31 +129,32 @@ vector = new VectorLayer({ source: new VectorSource({ url: 'data/kml/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) - }) + extractStyles: false, + }), + }), }), - style: styleFunction + style: styleFunction, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ layers: [raster, vector], - interactions: defaultInteractions().extend([new Select({ - condition: function(evt) { - return evt.type == 'pointermove' || - evt.type == 'singleclick'; - }, - style: selectStyleFunction - })]), + interactions: defaultInteractions().extend([ + new Select({ + condition: function (evt) { + return evt.type == 'pointermove' || evt.type == 'singleclick'; + }, + style: selectStyleFunction, + }), + ]), target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/earthquake-custom-symbol.html b/examples/earthquake-custom-symbol.html index 729d8eb3e7..34dd810d67 100644 --- a/examples/earthquake-custom-symbol.html +++ b/examples/earthquake-custom-symbol.html @@ -1,7 +1,7 @@ --- layout: example.html title: Earthquakes with custom symbols -shortdesc: Demonstrates the use of `toCanvas` to create custom icon symbols. +shortdesc: Demonstrates the use of `toContext` to create custom icon symbols. docs: > This example parses a KML file and renders the features as a vector layer. The layer is given a++Smoothing Disabled
+ ++ +++ ++++Uncorrected Comparison
+ ++ ++stylethat renders earthquake locations with a custom lightning symbol and a size relative to their magnitude. tags: "KML, vector, style, canvas, symbol" diff --git a/examples/earthquake-custom-symbol.js b/examples/earthquake-custom-symbol.js index 917c1ada8e..45659589b4 100644 --- a/examples/earthquake-custom-symbol.js +++ b/examples/earthquake-custom-symbol.js @@ -1,22 +1,29 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import KML from '../src/ol/format/KML.js'; +import Map from '../src/ol/Map.js'; import Polygon from '../src/ol/geom/Polygon.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {toContext} from '../src/ol/render.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Icon, Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {toContext} from '../src/ol/render.js'; - -const symbol = [[0, 0], [4, 2], [6, 0], [10, 5], [6, 3], [4, 5], [0, 0]]; +const symbol = [ + [0, 0], + [4, 2], + [6, 0], + [10, 5], + [6, 3], + [4, 5], + [0, 0], +]; let scale; -const scaleFunction = function(coordinate) { +const scaleFunction = function (coordinate) { return [coordinate[0] * scale, coordinate[1] * scale]; }; const styleCache = {}; -const styleFunction = function(feature) { +const styleFunction = function (feature) { // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a // standards-violatingtag in each Placemark. We extract it from // the Placemark's name instead. @@ -27,19 +34,23 @@ const styleFunction = function(feature) { let style = styleCache[size]; if (!style) { const canvas = document.createElement('canvas'); - const vectorContext = toContext(canvas.getContext('2d'), - {size: [size, size], pixelRatio: 1}); - vectorContext.setStyle(new Style({ - fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}), - stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2}) - })); + const vectorContext = toContext(canvas.getContext('2d'), { + size: [size, size], + pixelRatio: 1, + }); + vectorContext.setStyle( + new Style({ + fill: new Fill({color: 'rgba(255, 153, 0, 0.4)'}), + stroke: new Stroke({color: 'rgba(255, 204, 0, 0.2)', width: 2}), + }) + ); vectorContext.drawGeometry(new Polygon([symbol.map(scaleFunction)])); style = new Style({ image: new Icon({ img: canvas, imgSize: [size, size], - rotation: 1.2 - }) + rotation: 1.2, + }), }); styleCache[size] = style; } @@ -50,16 +61,16 @@ const vector = new VectorLayer({ source: new VectorSource({ url: 'data/kml/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), - style: styleFunction + style: styleFunction, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ @@ -67,6 +78,6 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/edit-geographic.js b/examples/edit-geographic.js index 6c0cd07c1f..857e06ee20 100644 --- a/examples/edit-geographic.js +++ b/examples/edit-geographic.js @@ -1,46 +1,46 @@ -import {Map, View} from '../src/ol/index.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {Modify, Select, Draw, Snap} from '../src/ol/interaction.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {Draw, Modify, Select, Snap} from '../src/ol/interaction.js'; +import {Map, View} from '../src/ol/index.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {useGeographic} from '../src/ol/proj.js'; useGeographic(); const source = new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); const map = new Map({ target: 'map', layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ - source: source - }) + source: source, + }), ], view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const select = new Select(); const modify = new Modify({ - features: select.getFeatures() + features: select.getFeatures(), }); const draw = new Draw({ type: 'Polygon', - source: source + source: source, }); const snap = new Snap({ - source: source + source: source, }); function removeInteractions() { diff --git a/examples/epsg-4326.js b/examples/epsg-4326.js index 86cf815629..9ac4146e40 100644 --- a/examples/epsg-4326.js +++ b/examples/epsg-4326.js @@ -1,9 +1,8 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {defaults as defaultControls, ScaleLine} from '../src/ol/control.js'; import TileLayer from '../src/ol/layer/Tile.js'; import TileWMS from '../src/ol/source/TileWMS.js'; - +import View from '../src/ol/View.js'; +import {ScaleLine, defaults as defaultControls} from '../src/ol/control.js'; const layers = [ new TileLayer({ @@ -11,23 +10,23 @@ const layers = [ url: 'https://ahocevar.com/geoserver/wms', params: { 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR', - 'TILED': true - } - }) - }) + 'TILED': true, + }, + }), + }), ]; const map = new Map({ controls: defaultControls().extend([ new ScaleLine({ - units: 'degrees' - }) + units: 'degrees', + }), ]), layers: layers, target: 'map', view: new View({ projection: 'EPSG:4326', center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); diff --git a/examples/es2015-custom-element.html b/examples/es2015-custom-element.html new file mode 100644 index 0000000000..a9d76bc683 --- /dev/null +++ b/examples/es2015-custom-element.html @@ -0,0 +1,9 @@ +--- +layout: example.html +title: Custom map element +shortdesc: Example of a custom element with a map. +docs: > + The example creates and registers a custom element, `ol-map`, which contains a simple map. **Note:** Only works in browsers that supports `ShadowRoot`. +tags: "es2015, web-component, custom-element, shadow-dom" +--- + diff --git a/examples/es2015-custom-element.js b/examples/es2015-custom-element.js new file mode 100644 index 0000000000..4a4dbd8901 --- /dev/null +++ b/examples/es2015-custom-element.js @@ -0,0 +1,41 @@ +import Map from '../src/ol/Map.js'; +import OSM from '../src/ol/source/OSM.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; + +class OLComponent extends HTMLElement { + constructor() { + super(); + this.shadow = this.attachShadow({mode: 'open'}); + const link = document.createElement('link'); + link.setAttribute('rel', 'stylesheet'); + link.setAttribute('href', 'css/ol.css'); + this.shadow.appendChild(link); + const style = document.createElement('style'); + style.innerText = ` + :host { + display: block; + } + `; + this.shadow.appendChild(style); + const div = document.createElement('div'); + div.style.width = '100%'; + div.style.height = '100%'; + this.shadow.appendChild(div); + + this.map = new Map({ + target: div, + layers: [ + new TileLayer({ + source: new OSM(), + }), + ], + view: new View({ + center: [0, 0], + zoom: 2, + }), + }); + } +} + +customElements.define('ol-map', OLComponent); diff --git a/examples/export-map.js b/examples/export-map.js index 0039f0f1d8..ca3836b8ef 100644 --- a/examples/export-map.js +++ b/examples/export-map.js @@ -1,48 +1,57 @@ +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - opacity: 0.5 - }) + opacity: 0.5, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -document.getElementById('export-png').addEventListener('click', function() { - map.once('rendercomplete', function() { +document.getElementById('export-png').addEventListener('click', function () { + map.once('rendercomplete', function () { const mapCanvas = document.createElement('canvas'); const size = map.getSize(); mapCanvas.width = size[0]; mapCanvas.height = size[1]; const mapContext = mapCanvas.getContext('2d'); - Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) { - if (canvas.width > 0) { - const opacity = canvas.parentNode.style.opacity; - mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); - const transform = canvas.style.transform; - // Get the transform parameters from the style's transform matrix - const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number); - // Apply the transform to the export map context - CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix); - mapContext.drawImage(canvas, 0, 0); + Array.prototype.forEach.call( + document.querySelectorAll('.ol-layer canvas'), + function (canvas) { + if (canvas.width > 0) { + const opacity = canvas.parentNode.style.opacity; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + const transform = canvas.style.transform; + // Get the transform parameters from the style's transform matrix + const matrix = transform + .match(/^matrix\(([^\(]*)\)$/)[1] + .split(',') + .map(Number); + // Apply the transform to the export map context + CanvasRenderingContext2D.prototype.setTransform.apply( + mapContext, + matrix + ); + mapContext.drawImage(canvas, 0, 0); + } } - }); + ); if (navigator.msSaveBlob) { // link download attribuute does not work on MS browsers navigator.msSaveBlob(mapCanvas.msToBlob(), 'map.png'); diff --git a/examples/export-pdf.js b/examples/export-pdf.js index 97dac9b59e..3d1bb4fcc0 100644 --- a/examples/export-pdf.js +++ b/examples/export-pdf.js @@ -1,94 +1,110 @@ import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; import WKT from '../src/ol/format/WKT.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const format = new WKT(); const feature = format.readFeature( 'POLYGON((10.689697265625 -25.0927734375, 34.595947265625 ' + - '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' + - '-39.1552734375, 10.689697265625 -25.0927734375))'); + '-20.1708984375, 38.814697265625 -35.6396484375, 13.502197265625 ' + + '-39.1552734375, 10.689697265625 -25.0927734375))' +); feature.getGeometry().transform('EPSG:4326', 'EPSG:3857'); const vector = new VectorLayer({ source: new VectorSource({ - features: [feature] + features: [feature], }), - opacity: 0.5 + opacity: 0.5, }); - const map = new Map({ layers: [raster, vector], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); - const dims = { a0: [1189, 841], a1: [841, 594], a2: [594, 420], a3: [420, 297], a4: [297, 210], - a5: [210, 148] + a5: [210, 148], }; - const exportButton = document.getElementById('export-pdf'); -exportButton.addEventListener('click', function() { +exportButton.addEventListener( + 'click', + function () { + exportButton.disabled = true; + document.body.style.cursor = 'progress'; - exportButton.disabled = true; - document.body.style.cursor = 'progress'; + const format = document.getElementById('format').value; + const resolution = document.getElementById('resolution').value; + const dim = dims[format]; + const width = Math.round((dim[0] * resolution) / 25.4); + const height = Math.round((dim[1] * resolution) / 25.4); + const size = map.getSize(); + const viewResolution = map.getView().getResolution(); - const format = document.getElementById('format').value; - const resolution = document.getElementById('resolution').value; - const dim = dims[format]; - const width = Math.round(dim[0] * resolution / 25.4); - const height = Math.round(dim[1] * resolution / 25.4); - const size = map.getSize(); - const viewResolution = map.getView().getResolution(); - - map.once('rendercomplete', function() { - const mapCanvas = document.createElement('canvas'); - mapCanvas.width = width; - mapCanvas.height = height; - const mapContext = mapCanvas.getContext('2d'); - Array.prototype.forEach.call(document.querySelectorAll('.ol-layer canvas'), function(canvas) { - if (canvas.width > 0) { - const opacity = canvas.parentNode.style.opacity; - mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); - const transform = canvas.style.transform; - // Get the transform parameters from the style's transform matrix - const matrix = transform.match(/^matrix\(([^\(]*)\)$/)[1].split(',').map(Number); - // Apply the transform to the export map context - CanvasRenderingContext2D.prototype.setTransform.apply(mapContext, matrix); - mapContext.drawImage(canvas, 0, 0); - } + map.once('rendercomplete', function () { + const mapCanvas = document.createElement('canvas'); + mapCanvas.width = width; + mapCanvas.height = height; + const mapContext = mapCanvas.getContext('2d'); + Array.prototype.forEach.call( + document.querySelectorAll('.ol-layer canvas'), + function (canvas) { + if (canvas.width > 0) { + const opacity = canvas.parentNode.style.opacity; + mapContext.globalAlpha = opacity === '' ? 1 : Number(opacity); + const transform = canvas.style.transform; + // Get the transform parameters from the style's transform matrix + const matrix = transform + .match(/^matrix\(([^\(]*)\)$/)[1] + .split(',') + .map(Number); + // Apply the transform to the export map context + CanvasRenderingContext2D.prototype.setTransform.apply( + mapContext, + matrix + ); + mapContext.drawImage(canvas, 0, 0); + } + } + ); + const pdf = new jsPDF('landscape', undefined, format); + pdf.addImage( + mapCanvas.toDataURL('image/jpeg'), + 'JPEG', + 0, + 0, + dim[0], + dim[1] + ); + pdf.save('map.pdf'); + // Reset original map size + map.setSize(size); + map.getView().setResolution(viewResolution); + exportButton.disabled = false; + document.body.style.cursor = 'auto'; }); - const pdf = new jsPDF('landscape', undefined, format); - pdf.addImage(mapCanvas.toDataURL('image/jpeg'), 'JPEG', 0, 0, dim[0], dim[1]); - pdf.save('map.pdf'); - // Reset original map size - map.setSize(size); - map.getView().setResolution(viewResolution); - exportButton.disabled = false; - document.body.style.cursor = 'auto'; - }); - // Set print size - const printSize = [width, height]; - map.setSize(printSize); - const scaling = Math.min(width / size[0], height / size[1]); - map.getView().setResolution(viewResolution / scaling); - -}, false); + // Set print size + const printSize = [width, height]; + map.setSize(printSize); + const scaling = Math.min(width / size[0], height / size[1]); + map.getView().setResolution(viewResolution / scaling); + }, + false +); diff --git a/examples/extent-constrained.js b/examples/extent-constrained.js index 70613dd536..1fbdb14ac9 100644 --- a/examples/extent-constrained.js +++ b/examples/extent-constrained.js @@ -1,25 +1,24 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import OSM from '../src/ol/source/OSM.js'; -import {defaults as defaultControls} from '../src/ol/control.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import ZoomSlider from '../src/ol/control/ZoomSlider.js'; +import {defaults as defaultControls} from '../src/ol/control.js'; const view = new View({ center: [328627.563458, 5921296.662223], zoom: 8, - extent: [-572513.341856, 5211017.966314, - 916327.095083, 6636950.728974] + extent: [-572513.341856, 5211017.966314, 916327.095083, 6636950.728974], }); new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], keyboardEventTarget: document, target: 'map', view: view, - controls: defaultControls().extend([new ZoomSlider()]) + controls: defaultControls().extend([new ZoomSlider()]), }); diff --git a/examples/extent-interaction.js b/examples/extent-interaction.js index 0925665abf..dbd519a137 100644 --- a/examples/extent-interaction.js +++ b/examples/extent-interaction.js @@ -1,43 +1,31 @@ +import ExtentInteraction from '../src/ol/interaction/Extent.js'; +import GeoJSON from '../src/ol/format/GeoJSON.js'; import Map from '../src/ol/Map.js'; import View from '../src/ol/View.js'; -import GeoJSON from '../src/ol/format/GeoJSON.js'; -import ExtentInteraction from '../src/ol/interaction/Extent.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {shiftKeyOnly} from '../src/ol/events/condition.js'; const vectorSource = new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() + source: new OSM(), }), new VectorLayer({ - source: vectorSource - }) + source: vectorSource, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -const extent = new ExtentInteraction(); +const extent = new ExtentInteraction({condition: shiftKeyOnly}); map.addInteraction(extent); -extent.setActive(false); - -//Enable interaction by holding shift -window.addEventListener('keydown', function(event) { - if (event.keyCode == 16) { - extent.setActive(true); - } -}); -window.addEventListener('keyup', function(event) { - if (event.keyCode == 16) { - extent.setActive(false); - } -}); diff --git a/examples/feature-animation.js b/examples/feature-animation.js index 27fcec3eed..c1391ff2a1 100644 --- a/examples/feature-animation.js +++ b/examples/feature-animation.js @@ -1,19 +1,19 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import {unByKey} from '../src/ol/Observable.js'; -import View from '../src/ol/View.js'; -import {easeOut} from '../src/ol/easing.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {fromLonLat} from '../src/ol/proj.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Stroke, Style} from '../src/ol/style.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {easeOut} from '../src/ol/easing.js'; +import {fromLonLat} from '../src/ol/proj.js'; import {getVectorContext} from '../src/ol/render.js'; +import {unByKey} from '../src/ol/Observable.js'; const tileLayer = new TileLayer({ source: new OSM({ - wrapX: false - }) + wrapX: false, + }), }); const map = new Map({ @@ -22,15 +22,15 @@ const map = new Map({ view: new View({ center: [0, 0], zoom: 1, - multiWorld: true - }) + multiWorld: true, + }), }); const source = new VectorSource({ - wrapX: false + wrapX: false, }); const vector = new VectorLayer({ - source: source + source: source, }); map.addLayer(vector); @@ -62,9 +62,9 @@ function flash(feature) { radius: radius, stroke: new Stroke({ color: 'rgba(255, 0, 0, ' + opacity + ')', - width: 0.25 + opacity - }) - }) + width: 0.25 + opacity, + }), + }), }); vectorContext.setStyle(style); @@ -78,7 +78,7 @@ function flash(feature) { } } -source.on('addfeature', function(e) { +source.on('addfeature', function (e) { flash(e.feature); }); diff --git a/examples/feature-move-animation.js b/examples/feature-move-animation.js index e3c38fdc9a..3210ad650d 100644 --- a/examples/feature-move-animation.js +++ b/examples/feature-move-animation.js @@ -1,12 +1,18 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import Polyline from '../src/ol/format/Polyline.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import XYZ from '../src/ol/source/XYZ.js'; +import Polyline from '../src/ol/format/Polyline.js'; import VectorSource from '../src/ol/source/Vector.js'; -import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from '../src/ol/style.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; +import { + Circle as CircleStyle, + Fill, + Icon, + Stroke, + Style, +} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {getVectorContext} from '../src/ol/render.js'; // This long string is placed here due to jsFiddle limitations. @@ -50,14 +56,16 @@ const polyline = [ 'ab@`CuOlC}YnAcV`@_^m@aeB}@yk@YuTuBg^uCkZiGk\\yGeY}Lu_@oOsZiTe[uWi[sl@', 'mo@soAauAsrBgzBqgAglAyd@ig@asAcyAklA}qAwHkGi{@s~@goAmsAyDeEirB_{B}IsJ', 'uEeFymAssAkdAmhAyTcVkFeEoKiH}l@kp@wg@sj@ku@ey@uh@kj@}EsFmG}Jk^_r@_f@m', - '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL' + '~@ym@yjA??a@cFd@kBrCgDbAUnAcBhAyAdk@et@??kF}D??OL', ].join(''); -const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline({ - factor: 1e6 -}).readGeometry(polyline, { +const route = /** @type {import("../src/ol/geom/LineString.js").default} */ (new Polyline( + { + factor: 1e6, + } +).readGeometry(polyline, { dataProjection: 'EPSG:4326', - featureProjection: 'EPSG:3857' + featureProjection: 'EPSG:3857', })); const routeCoords = route.getCoordinates(); @@ -65,42 +73,46 @@ const routeLength = routeCoords.length; const routeFeature = new Feature({ type: 'route', - geometry: route + geometry: route, }); -const geoMarker = /** @type Feature
'); document.getElementById('info').innerHTML = html; }); -geolocation.on('error', function() { +geolocation.on('error', function () { alert('geolocation error'); // FIXME we should remove the coordinates in positions }); // convert radians to degrees function radToDeg(rad) { - return rad * 360 / (Math.PI * 2); + return (rad * 360) / (Math.PI * 2); } // convert degrees to radians function degToRad(deg) { - return deg * Math.PI * 2 / 360; + return (deg * Math.PI * 2) / 360; } // modulo for negative values function mod(n) { - return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI); + return ((n % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI); } function addPosition(position, heading, m, speed) { @@ -105,7 +105,7 @@ function addPosition(position, heading, m, speed) { // force the rotation change to be less than 180° if (Math.abs(headingDiff) > Math.PI) { - const sign = (headingDiff >= 0) ? 1 : -1; + const sign = headingDiff >= 0 ? 1 : -1; headingDiff = -sign * (2 * Math.PI - Math.abs(headingDiff)); } heading = prevHeading + headingDiff; @@ -130,8 +130,8 @@ function getCenterWithHeading(position, rotation, resolution) { const height = size[1]; return [ - position[0] - Math.sin(rotation) * height * resolution * 1 / 4, - position[1] + Math.cos(rotation) * height * resolution * 1 / 4 + position[0] - (Math.sin(rotation) * height * resolution * 1) / 4, + position[1] + (Math.cos(rotation) * height * resolution * 1) / 4, ]; } @@ -147,61 +147,69 @@ function updateView() { view.setCenter(getCenterWithHeading(c, -c[2], view.getResolution())); view.setRotation(-c[2]); marker.setPosition(c); + map.render(); } } // geolocate device const geolocateBtn = document.getElementById('geolocate'); -geolocateBtn.addEventListener('click', function() { - geolocation.setTracking(true); // Start position tracking +geolocateBtn.addEventListener( + 'click', + function () { + geolocation.setTracking(true); // Start position tracking - tileLayer.on('postrender', updateView); - map.render(); + tileLayer.on('postrender', updateView); + map.render(); - disableButtons(); -}, false); + disableButtons(); + }, + false +); // simulate device move let simulationData; const client = new XMLHttpRequest(); client.open('GET', 'data/geolocation-orientation.json'); - /** * Handle data loading. */ -client.onload = function() { +client.onload = function () { simulationData = JSON.parse(client.responseText).data; }; client.send(); const simulateBtn = document.getElementById('simulate'); -simulateBtn.addEventListener('click', function() { - const coordinates = simulationData; +simulateBtn.addEventListener( + 'click', + function () { + const coordinates = simulationData; - const first = coordinates.shift(); - simulatePositionChange(first); + const first = coordinates.shift(); + simulatePositionChange(first); - let prevDate = first.timestamp; - function geolocate() { - const position = coordinates.shift(); - if (!position) { - return; + let prevDate = first.timestamp; + function geolocate() { + const position = coordinates.shift(); + if (!position) { + return; + } + const newDate = position.timestamp; + simulatePositionChange(position); + window.setTimeout(function () { + prevDate = newDate; + geolocate(); + }, (newDate - prevDate) / 0.5); } - const newDate = position.timestamp; - simulatePositionChange(position); - window.setTimeout(function() { - prevDate = newDate; - geolocate(); - }, (newDate - prevDate) / 0.5); - } - geolocate(); + geolocate(); - tileLayer.on('postrender', updateView); - map.render(); + tileLayer.on('postrender', updateView); + map.render(); - disableButtons(); -}, false); + disableButtons(); + }, + false +); function simulatePositionChange(position) { const coords = position.coords; diff --git a/examples/geolocation.js b/examples/geolocation.js index 4ca461308f..625c25c682 100644 --- a/examples/geolocation.js +++ b/examples/geolocation.js @@ -1,45 +1,45 @@ import Feature from '../src/ol/Feature.js'; import Geolocation from '../src/ol/Geolocation.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const view = new View({ center: [0, 0], - zoom: 2 + zoom: 2, }); const map = new Map({ layers: [ new TileLayer({ - source: new OSM() - }) + source: new OSM(), + }), ], target: 'map', - view: view + view: view, }); const geolocation = new Geolocation({ // enableHighAccuracy must be set to true to have the heading value. trackingOptions: { - enableHighAccuracy: true + enableHighAccuracy: true, }, - projection: view.getProjection() + projection: view.getProjection(), }); function el(id) { return document.getElementById(id); } -el('track').addEventListener('change', function() { +el('track').addEventListener('change', function () { geolocation.setTracking(this.checked); }); // update the HTML page when the position changes. -geolocation.on('change', function() { +geolocation.on('change', function () { el('accuracy').innerText = geolocation.getAccuracy() + ' [m]'; el('altitude').innerText = geolocation.getAltitude() + ' [m]'; el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]'; @@ -48,40 +48,41 @@ geolocation.on('change', function() { }); // handle geolocation error. -geolocation.on('error', function(error) { +geolocation.on('error', function (error) { const info = document.getElementById('info'); info.innerHTML = error.message; info.style.display = ''; }); const accuracyFeature = new Feature(); -geolocation.on('change:accuracyGeometry', function() { +geolocation.on('change:accuracyGeometry', function () { accuracyFeature.setGeometry(geolocation.getAccuracyGeometry()); }); const positionFeature = new Feature(); -positionFeature.setStyle(new Style({ - image: new CircleStyle({ - radius: 6, - fill: new Fill({ - color: '#3399CC' +positionFeature.setStyle( + new Style({ + image: new CircleStyle({ + radius: 6, + fill: new Fill({ + color: '#3399CC', + }), + stroke: new Stroke({ + color: '#fff', + width: 2, + }), }), - stroke: new Stroke({ - color: '#fff', - width: 2 - }) }) -})); +); -geolocation.on('change:position', function() { +geolocation.on('change:position', function () { const coordinates = geolocation.getPosition(); - positionFeature.setGeometry(coordinates ? - new Point(coordinates) : null); + positionFeature.setGeometry(coordinates ? new Point(coordinates) : null); }); new VectorLayer({ map: map, source: new VectorSource({ - features: [accuracyFeature, positionFeature] - }) + features: [accuracyFeature, positionFeature], + }), }); diff --git a/examples/getfeatureinfo-image.js b/examples/getfeatureinfo-image.js index 109b2eabea..aa2cc832d7 100644 --- a/examples/getfeatureinfo-image.js +++ b/examples/getfeatureinfo-image.js @@ -1,37 +1,39 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import ImageLayer from '../src/ol/layer/Image.js'; import ImageWMS from '../src/ol/source/ImageWMS.js'; - +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; const wmsSource = new ImageWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'ne:ne'}, serverType: 'geoserver', - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', }); const wmsLayer = new ImageLayer({ - source: wmsSource + source: wmsSource, }); const view = new View({ center: [0, 0], - zoom: 1 + zoom: 1, }); const map = new Map({ layers: [wmsLayer], target: 'map', - view: view + view: view, }); -map.on('singleclick', function(evt) { +map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = ''; const viewResolution = /** @type {number} */ (view.getResolution()); const url = wmsSource.getFeatureInfoUrl( - evt.coordinate, viewResolution, 'EPSG:3857', - {'INFO_FORMAT': 'text/html'}); + evt.coordinate, + viewResolution, + 'EPSG:3857', + {'INFO_FORMAT': 'text/html'} + ); if (url) { fetch(url) .then((response) => response.text()) @@ -41,12 +43,12 @@ map.on('singleclick', function(evt) { } }); -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = map.getEventPixel(evt.originalEvent); - const hit = map.forEachLayerAtPixel(pixel, function() { + const hit = map.forEachLayerAtPixel(pixel, function () { return true; }); map.getTargetElement().style.cursor = hit ? 'pointer' : ''; diff --git a/examples/getfeatureinfo-layers.js b/examples/getfeatureinfo-layers.js index f3e779bd9e..650ed91f55 100644 --- a/examples/getfeatureinfo-layers.js +++ b/examples/getfeatureinfo-layers.js @@ -1,23 +1,27 @@ import WMSGetFeatureInfo from '../src/ol/format/WMSGetFeatureInfo.js'; -fetch('data/wmsgetfeatureinfo/osm-restaurant-hotel.xml').then(function(response) { - return response.text(); -}).then(function(response) { +fetch('data/wmsgetfeatureinfo/osm-restaurant-hotel.xml') + .then(function (response) { + return response.text(); + }) + .then(function (response) { + // this is the standard way to read the features + const allFeatures = new WMSGetFeatureInfo().readFeatures(response); + document.getElementById('all').innerText = allFeatures.length.toString(); - // this is the standard way to read the features - const allFeatures = new WMSGetFeatureInfo().readFeatures(response); - document.getElementById('all').innerText = allFeatures.length.toString(); + // when specifying the 'layers' options, only the features of those + // layers are returned by the format + const hotelFeatures = new WMSGetFeatureInfo({ + layers: ['hotel'], + }).readFeatures(response); + document.getElementById( + 'hotel' + ).innerText = hotelFeatures.length.toString(); - // when specifying the 'layers' options, only the features of those - // layers are returned by the format - const hotelFeatures = new WMSGetFeatureInfo({ - layers: ['hotel'] - }).readFeatures(response); - document.getElementById('hotel').innerText = hotelFeatures.length.toString(); - - const restaurantFeatures = new WMSGetFeatureInfo({ - layers: ['restaurant'] - }).readFeatures(response); - document.getElementById('restaurant').innerText = restaurantFeatures.length.toString(); - -}); + const restaurantFeatures = new WMSGetFeatureInfo({ + layers: ['restaurant'], + }).readFeatures(response); + document.getElementById( + 'restaurant' + ).innerText = restaurantFeatures.length.toString(); + }); diff --git a/examples/getfeatureinfo-tile.js b/examples/getfeatureinfo-tile.js index 574535bbe4..db354c3808 100644 --- a/examples/getfeatureinfo-tile.js +++ b/examples/getfeatureinfo-tile.js @@ -1,37 +1,39 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; import TileWMS from '../src/ol/source/TileWMS.js'; - +import View from '../src/ol/View.js'; const wmsSource = new TileWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'ne:ne', 'TILED': true}, serverType: 'geoserver', - crossOrigin: 'anonymous' + crossOrigin: 'anonymous', }); const wmsLayer = new TileLayer({ - source: wmsSource + source: wmsSource, }); const view = new View({ center: [0, 0], - zoom: 1 + zoom: 1, }); const map = new Map({ layers: [wmsLayer], target: 'map', - view: view + view: view, }); -map.on('singleclick', function(evt) { +map.on('singleclick', function (evt) { document.getElementById('info').innerHTML = ''; const viewResolution = /** @type {number} */ (view.getResolution()); const url = wmsSource.getFeatureInfoUrl( - evt.coordinate, viewResolution, 'EPSG:3857', - {'INFO_FORMAT': 'text/html'}); + evt.coordinate, + viewResolution, + 'EPSG:3857', + {'INFO_FORMAT': 'text/html'} + ); if (url) { fetch(url) .then((response) => response.text()) @@ -41,12 +43,12 @@ map.on('singleclick', function(evt) { } }); -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = map.getEventPixel(evt.originalEvent); - const hit = map.forEachLayerAtPixel(pixel, function() { + const hit = map.forEachLayerAtPixel(pixel, function () { return true; }); map.getTargetElement().style.cursor = hit ? 'pointer' : ''; diff --git a/examples/gpx.js b/examples/gpx.js index 7570048b55..60803a680b 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -1,58 +1,59 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GPX from '../src/ol/format/GPX.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import XYZ from '../src/ol/source/XYZ.js'; +import Map from '../src/ol/Map.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import XYZ from '../src/ol/source/XYZ.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const raster = new TileLayer({ source: new XYZ({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, - maxZoom: 20 - }) + maxZoom: 20, + }), }); const style = { 'Point': new Style({ image: new CircleStyle({ fill: new Fill({ - color: 'rgba(255,255,0,0.4)' + color: 'rgba(255,255,0,0.4)', }), radius: 5, stroke: new Stroke({ color: '#ff0', - width: 1 - }) - }) + width: 1, + }), + }), }), 'LineString': new Style({ stroke: new Stroke({ color: '#f00', - width: 3 - }) + width: 3, + }), }), 'MultiLineString': new Style({ stroke: new Stroke({ color: '#0f0', - width: 3 - }) - }) + width: 3, + }), + }), }; const vector = new VectorLayer({ source: new VectorSource({ url: 'data/gpx/fells_loop.gpx', - format: new GPX() + format: new GPX(), }), - style: function(feature) { + style: function (feature) { return style[feature.getGeometry().getType()]; - } + }, }); const map = new Map({ @@ -60,13 +61,13 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: [-7916041.528716288, 5228379.045749711], - zoom: 12 - }) + zoom: 12, + }), }); -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { const features = []; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { features.push(feature); }); if (features.length > 0) { @@ -83,7 +84,7 @@ const displayFeatureInfo = function(pixel) { } }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -91,6 +92,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/graticule.js b/examples/graticule.js index 32d2196b9b..812829c054 100644 --- a/examples/graticule.js +++ b/examples/graticule.js @@ -1,33 +1,32 @@ import Graticule from '../src/ol/layer/Graticule.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; import OSM from '../src/ol/source/OSM.js'; import Stroke from '../src/ol/style/Stroke.js'; - +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import {fromLonLat} from '../src/ol/proj.js'; const map = new Map({ layers: [ new TileLayer({ source: new OSM({ - wrapX: false - }) + wrapX: false, + }), }), new Graticule({ // the style to use for the lines, optional. strokeStyle: new Stroke({ color: 'rgba(255,120,0,0.9)', width: 2, - lineDash: [0.5, 4] + lineDash: [0.5, 4], }), showLabels: true, - wrapX: false - }) + wrapX: false, + }), ], target: 'map', view: new View({ center: fromLonLat([4.8, 47.75]), - zoom: 5 - }) + zoom: 5, + }), }); diff --git a/examples/heatmap-earthquakes.js b/examples/heatmap-earthquakes.js index 93256ab1a8..c07661b088 100644 --- a/examples/heatmap-earthquakes.js +++ b/examples/heatmap-earthquakes.js @@ -1,9 +1,9 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import KML from '../src/ol/format/KML.js'; -import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {Heatmap as HeatmapLayer, Tile as TileLayer} from '../src/ol/layer.js'; const blur = document.getElementById('blur'); const radius = document.getElementById('radius'); @@ -12,25 +12,25 @@ const vector = new HeatmapLayer({ source: new VectorSource({ url: 'data/kml/2012_Earthquakes_Mag5.kml', format: new KML({ - extractStyles: false - }) + extractStyles: false, + }), }), blur: parseInt(blur.value, 10), radius: parseInt(radius.value, 10), - weight: function(feature) { + weight: function (feature) { // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a // standards-violatingtag in each Placemark. We extract it from // the Placemark's name instead. const name = feature.get('name'); const magnitude = parseFloat(name.substr(2)); return magnitude - 5; - } + }, }); const raster = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); new Map({ @@ -38,17 +38,17 @@ new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); -const blurHandler = function() { +const blurHandler = function () { vector.setBlur(parseInt(blur.value, 10)); }; blur.addEventListener('input', blurHandler); blur.addEventListener('change', blurHandler); -const radiusHandler = function() { +const radiusHandler = function () { vector.setRadius(parseInt(radius.value, 10)); }; radius.addEventListener('input', radiusHandler); diff --git a/examples/here-maps.js b/examples/here-maps.js index 94112d64b1..341ae2bb10 100644 --- a/examples/here-maps.js +++ b/examples/here-maps.js @@ -1,6 +1,6 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; const appId = 'kDm0Jq1K4Ak7Bwtn8uvk'; @@ -11,60 +11,66 @@ const hereLayers = [ type: 'maptile', scheme: 'normal.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'base', type: 'maptile', scheme: 'normal.day.transit', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'base', type: 'maptile', scheme: 'pedestrian.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'aerial', type: 'maptile', scheme: 'terrain.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'aerial', type: 'maptile', scheme: 'satellite.day', app_id: appId, - app_code: appCode + app_code: appCode, }, { base: 'aerial', type: 'maptile', scheme: 'hybrid.day', app_id: appId, - app_code: appCode - } + app_code: appCode, + }, ]; -const urlTpl = 'https://{1-4}.{base}.maps.cit.api.here.com' + +const urlTpl = + 'https://{1-4}.{base}.maps.cit.api.here.com' + '/{type}/2.1/maptile/newest/{scheme}/{z}/{x}/{y}/256/png' + '?app_id={app_id}&app_code={app_code}'; const layers = []; let i, ii; for (i = 0, ii = hereLayers.length; i < ii; ++i) { const layerDesc = hereLayers[i]; - layers.push(new TileLayer({ - visible: false, - preload: Infinity, - source: new XYZ({ - url: createUrl(urlTpl, layerDesc), - attributions: 'Map Tiles © ' + new Date().getFullYear() + ' ' + - 'HERE' + layers.push( + new TileLayer({ + visible: false, + preload: Infinity, + source: new XYZ({ + url: createUrl(urlTpl, layerDesc), + attributions: + 'Map Tiles © ' + + new Date().getFullYear() + + ' ' + + 'HERE', + }), }) - })); + ); } const map = new Map({ @@ -72,8 +78,8 @@ const map = new Map({ target: 'map', view: new View({ center: [921371.9389, 6358337.7609], - zoom: 10 - }) + zoom: 10, + }), }); function createUrl(tpl, layerDesc) { diff --git a/examples/hit-tolerance.js b/examples/hit-tolerance.js index a337485f8e..443abb7ee5 100644 --- a/examples/hit-tolerance.js +++ b/examples/hit-tolerance.js @@ -1,29 +1,34 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import Feature from '../src/ol/Feature.js'; import LineString from '../src/ol/geom/LineString.js'; +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; +import {OSM, Vector as VectorSource} from '../src/ol/source.js'; import {Stroke, Style} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const raster = new TileLayer({ - source: new OSM() + source: new OSM(), }); const style = new Style({ stroke: new Stroke({ color: 'black', - width: 1 - }) + width: 1, + }), }); -const feature = new Feature(new LineString([[-4000000, 0], [4000000, 0]])); +const feature = new Feature( + new LineString([ + [-4000000, 0], + [4000000, 0], + ]) +); const vector = new VectorLayer({ source: new VectorSource({ - features: [feature] + features: [feature], }), - style: style + style: style, }); const map = new Map({ @@ -31,21 +36,25 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); let hitTolerance; const statusElement = document.getElementById('status'); -map.on('singleclick', function(e) { +map.on('singleclick', function (e) { let hit = false; - map.forEachFeatureAtPixel(e.pixel, function() { - hit = true; - }, { - hitTolerance: hitTolerance - }); + map.forEachFeatureAtPixel( + e.pixel, + function () { + hit = true; + }, + { + hitTolerance: hitTolerance, + } + ); if (hit) { style.getStroke().setColor('green'); statusElement.innerHTML = ' A feature got hit!'; @@ -59,7 +68,7 @@ map.on('singleclick', function(e) { const selectHitToleranceElement = document.getElementById('hitTolerance'); const circleCanvas = document.getElementById('circle'); -const changeHitTolerance = function() { +const changeHitTolerance = function () { hitTolerance = parseInt(selectHitToleranceElement.value, 10); const size = 2 * hitTolerance + 2; @@ -68,7 +77,13 @@ const changeHitTolerance = function() { const ctx = circleCanvas.getContext('2d'); ctx.clearRect(0, 0, size, size); ctx.beginPath(); - ctx.arc(hitTolerance + 1, hitTolerance + 1, hitTolerance + 0.5, 0, 2 * Math.PI); + ctx.arc( + hitTolerance + 1, + hitTolerance + 1, + hitTolerance + 0.5, + 0, + 2 * Math.PI + ); ctx.fill(); ctx.stroke(); }; diff --git a/examples/hitdetect-vector.js b/examples/hitdetect-vector.js index d09cc96c4e..df9620f014 100644 --- a/examples/hitdetect-vector.js +++ b/examples/hitdetect-vector.js @@ -1,40 +1,39 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; - const style = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 + width: 1, }), text: new Text({ font: '12px Calibri,sans-serif', fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#fff', - width: 3 - }) - }) + width: 3, + }), + }), }); const vectorLayer = new VectorLayer({ source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: function(feature) { + style: function (feature) { style.getText().setText(feature.get('name')); return style; - } + }, }); const map = new Map({ @@ -42,43 +41,42 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); const highlightStyle = new Style({ stroke: new Stroke({ color: '#f00', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(255,0,0,0.1)' + color: 'rgba(255,0,0,0.1)', }), text: new Text({ font: '12px Calibri,sans-serif', fill: new Fill({ - color: '#000' + color: '#000', }), stroke: new Stroke({ color: '#f00', - width: 3 - }) - }) + width: 3, + }), + }), }); const featureOverlay = new VectorLayer({ source: new VectorSource(), map: map, - style: function(feature) { + style: function (feature) { highlightStyle.getText().setText(feature.get('name')); return highlightStyle; - } + }, }); let highlight; -const displayFeatureInfo = function(pixel) { - - vectorLayer.getFeatures(pixel).then(function(features) { +const displayFeatureInfo = function (pixel) { + vectorLayer.getFeatures(pixel).then(function (features) { const feature = features.length ? features[0] : undefined; const info = document.getElementById('info'); if (features.length) { @@ -97,10 +95,9 @@ const displayFeatureInfo = function(pixel) { highlight = feature; } }); - }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -108,6 +105,6 @@ map.on('pointermove', function(evt) { displayFeatureInfo(pixel); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/icon-color.js b/examples/icon-color.js index e88e3d52b8..098319a119 100644 --- a/examples/icon-color.js +++ b/examples/icon-color.js @@ -1,71 +1,76 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; -import {fromLonLat} from '../src/ol/proj.js'; import TileJSON from '../src/ol/source/TileJSON.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Icon, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {fromLonLat} from '../src/ol/proj.js'; const rome = new Feature({ - geometry: new Point(fromLonLat([12.5, 41.9])) + geometry: new Point(fromLonLat([12.5, 41.9])), }); const london = new Feature({ - geometry: new Point(fromLonLat([-0.12755, 51.507222])) + geometry: new Point(fromLonLat([-0.12755, 51.507222])), }); const madrid = new Feature({ - geometry: new Point(fromLonLat([-3.683333, 40.4])) + geometry: new Point(fromLonLat([-3.683333, 40.4])), }); -rome.setStyle(new Style({ - image: new Icon({ - color: '#8959A8', - crossOrigin: 'anonymous', - src: 'data/square.svg' +rome.setStyle( + new Style({ + image: new Icon({ + color: '#8959A8', + crossOrigin: 'anonymous', + imgSize: [20, 20], + src: 'data/square.svg', + }), }) -})); +); -london.setStyle(new Style({ - image: new Icon({ - color: '#4271AE', - crossOrigin: 'anonymous', - src: 'data/dot.png' +london.setStyle( + new Style({ + image: new Icon({ + color: '#4271AE', + crossOrigin: 'anonymous', + src: 'data/dot.png', + }), }) -})); +); -madrid.setStyle(new Style({ - image: new Icon({ - color: [113, 140, 0], - crossOrigin: 'anonymous', - src: 'data/dot.png' +madrid.setStyle( + new Style({ + image: new Icon({ + color: [113, 140, 0], + crossOrigin: 'anonymous', + src: 'data/dot.png', + }), }) -})); - +); const vectorSource = new VectorSource({ - features: [rome, london, madrid] + features: [rome, london, madrid], }); const vectorLayer = new VectorLayer({ - source: vectorSource + source: vectorSource, }); const rasterLayer = new TileLayer({ source: new TileJSON({ url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json', - crossOrigin: '' - }) + crossOrigin: '', + }), }); const map = new Map({ layers: [rasterLayer, vectorLayer], target: document.getElementById('map'), view: new View({ - center: fromLonLat([2.896372, 44.60240]), - zoom: 3 - }) + center: fromLonLat([2.896372, 44.6024]), + zoom: 3, + }), }); diff --git a/examples/icon-negative.js b/examples/icon-negative.js index dfa83db624..3380580d18 100644 --- a/examples/icon-negative.js +++ b/examples/icon-negative.js @@ -1,13 +1,12 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; import Select from '../src/ol/interaction/Select.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import Stamen from '../src/ol/source/Stamen.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Icon, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; function createStyle(src, img) { return new Style({ @@ -16,8 +15,8 @@ function createStyle(src, img) { crossOrigin: 'anonymous', src: src, img: img, - imgSize: img ? [img.width, img.height] : undefined - }) + imgSize: img ? [img.width, img.height] : undefined, + }), }); } @@ -27,25 +26,25 @@ iconFeature.set('style', createStyle('data/icon.png', undefined)); const map = new Map({ layers: [ new TileLayer({ - source: new Stamen({layer: 'watercolor'}) + source: new Stamen({layer: 'watercolor'}), }), new VectorLayer({ - style: function(feature) { + style: function (feature) { return feature.get('style'); }, - source: new VectorSource({features: [iconFeature]}) - }) + source: new VectorSource({features: [iconFeature]}), + }), ], target: document.getElementById('map'), view: new View({ center: [0, 0], - zoom: 3 - }) + zoom: 3, + }), }); const selectStyle = {}; const select = new Select({ - style: function(feature) { + style: function (feature) { const image = feature.get('style').getImage().getImage(); if (!selectStyle[image.src]) { const canvas = document.createElement('canvas'); @@ -62,11 +61,12 @@ const select = new Select({ selectStyle[image.src] = createStyle(undefined, canvas); } return selectStyle[image.src]; - } + }, }); map.addInteraction(select); -map.on('pointermove', function(evt) { - map.getTargetElement().style.cursor = - map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : ''; +map.on('pointermove', function (evt) { + map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) + ? 'pointer' + : ''; }); diff --git a/examples/icon-scale.html b/examples/icon-scale.html new file mode 100644 index 0000000000..50f8f73646 --- /dev/null +++ b/examples/icon-scale.html @@ -0,0 +1,16 @@ +--- +layout: example.html +title: Icon Scale +shortdesc: Example of scaling icons and labels. +docs: > + Icons and labels can be scaled in both dimensions if required. A negative value will flip the image + or text around its anchor point (reversed text is not suitable for line placement). A newline + character inserted in label text is interpreted in a vector layer, but will not be shown in + a vector context. +tags: "vector, style, icon, label, scale" +resources: + - https://code.jquery.com/jquery-2.2.3.min.js + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css + - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js +--- + diff --git a/examples/icon-scale.js b/examples/icon-scale.js new file mode 100644 index 0000000000..741f87c225 --- /dev/null +++ b/examples/icon-scale.js @@ -0,0 +1,133 @@ +import Feature from '../src/ol/Feature.js'; +import Map from '../src/ol/Map.js'; +import Overlay from '../src/ol/Overlay.js'; +import Point from '../src/ol/geom/Point.js'; +import TileJSON from '../src/ol/source/TileJSON.js'; +import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; +import {Icon, Style, Text} from '../src/ol/style.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import {fromLonLat} from '../src/ol/proj.js'; +import {getVectorContext} from '../src/ol/render.js'; + +const rasterLayer = new TileLayer({ + source: new TileJSON({ + url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json', + crossOrigin: '', + }), +}); + +const iconFeature = new Feature({ + geometry: new Point(fromLonLat([0, -10])), + name: 'Fish.1', +}); + +const feature1 = new Feature({ + geometry: new Point(fromLonLat([0, -10])), + name: 'Fish.1 Island', +}); + +const feature2 = new Feature({ + geometry: new Point(fromLonLat([-30, 10])), + name: 'Fish.2 Island', +}); + +const iconStyle = new Style({ + image: new Icon({ + anchor: [0.5, 0.9], + src: 'data/fish.png', + crossOrigin: '', + scale: [0, 0], + rotation: Math.PI / 4, + }), + text: new Text({ + text: 'FISH\nTEXT', + scale: [0, 0], + rotation: Math.PI / 4, + textAlign: 'center', + textBaseline: 'top', + }), +}); + +let i = 0; +let j = 45; + +iconFeature.setStyle(function () { + const x = Math.sin((i * Math.PI) / 180) * 3; + const y = Math.sin((j * Math.PI) / 180) * 4; + iconStyle.getImage().setScale([x, y]); + iconStyle.getText().setScale([x, y]); + return iconStyle; +}); + +rasterLayer.on('postrender', function (event) { + const vectorContext = getVectorContext(event); + const x = Math.cos((i * Math.PI) / 180) * 3; + const y = Math.cos((j * Math.PI) / 180) * 4; + iconStyle.getImage().setScale([x, y]); + iconStyle.getText().setScale([x, y]); + vectorContext.drawFeature(feature2, iconStyle); +}); + +const vectorSource = new VectorSource({ + features: [iconFeature, feature1, feature2], +}); + +const vectorLayer = new VectorLayer({ + source: vectorSource, +}); + +const map = new Map({ + layers: [rasterLayer, vectorLayer], + target: document.getElementById('map'), + view: new View({ + center: fromLonLat([-15, 0]), + zoom: 3, + }), +}); + +setInterval(function () { + i = (i + 4) % 360; + j = (j + 5) % 360; + vectorSource.changed(); +}, 1000); + +const element = document.getElementById('popup'); + +const popup = new Overlay({ + element: element, + positioning: 'bottom-center', + stopEvent: false, + offset: [0, -50], +}); +map.addOverlay(popup); + +// display popup on click +map.on('click', function (evt) { + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); + $(element).popover('destroy'); + if (feature) { + const coordinates = feature.getGeometry().getCoordinates(); + popup.setPosition(coordinates); + $(element).popover({ + placement: 'top', + html: true, + animation: false, + content: feature.get('name'), + }); + $(element).popover('show'); + } +}); + +// change mouse cursor when over marker +map.on('pointermove', function (e) { + if (e.dragging) { + $(element).popover('destroy'); + return; + } + const pixel = map.getEventPixel(e.originalEvent); + const hit = map.hasFeatureAtPixel(pixel); + map.getTarget().style.cursor = hit ? 'pointer' : ''; +}); diff --git a/examples/icon-sprite-webgl.html b/examples/icon-sprite-webgl.html index 2a6bce2201..66e83e231e 100644 --- a/examples/icon-sprite-webgl.html +++ b/examples/icon-sprite-webgl.html @@ -15,8 +15,8 @@ docs: > tags: "webgl, icon, sprite, point, ufo" experimental: true cloak: - - key: pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg - value: Your Mapbox access token from https://mapbox.com/ here + - key: get_your_own_D6rA4zTHduk6KOKTXzGB + value: Get your own API key at https://www.maptiler.com/cloud/ ---Current sighting:diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js index ce2adb7649..6008e19a2a 100644 --- a/examples/icon-sprite-webgl.js +++ b/examples/icon-sprite-webgl.js @@ -1,34 +1,39 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import TileJSON from '../src/ol/source/TileJSON.js'; import Feature from '../src/ol/Feature.js'; +import Map from '../src/ol/Map.js'; import Point from '../src/ol/geom/Point.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; +import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; +import XYZ from '../src/ol/source/XYZ.js'; import {Vector} from '../src/ol/source.js'; import {fromLonLat} from '../src/ol/proj.js'; -import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js'; -const key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg'; +const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; +const attributions = + '© MapTiler ' + + '© OpenStreetMap contributors'; const map = new Map({ layers: [ new TileLayer({ - source: new TileJSON({ - url: 'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' + key, - crossOrigin: 'anonymous' - }) - }) + source: new XYZ({ + attributions: attributions, + url: + 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, + tileSize: 512, + }), + }), ], target: document.getElementById('map'), view: new View({ center: [0, 4000000], - zoom: 2 - }) + zoom: 2, + }), }); const vectorSource = new Vector({ features: [], - attributions: 'National UFO Reporting Center' + attributions: 'National UFO Reporting Center', }); const oldColor = [255, 160, 110]; @@ -37,13 +42,13 @@ const size = 16; const style = { variables: { - filterShape: 'all' + filterShape: 'all', }, filter: [ 'case', ['!=', ['var', 'filterShape'], 'all'], ['==', ['get', 'shape'], ['var', 'filterShape']], - true + true, ], symbol: { symbolType: 'image', @@ -53,44 +58,51 @@ const style = { 'interpolate', ['linear'], ['get', 'year'], - 1950, oldColor, - 2013, newColor + 1950, + oldColor, + 2013, + newColor, ], rotateWithView: false, - offset: [ - 0, - 0 - ], + offset: [0, 0], textureCoord: [ 'match', ['get', 'shape'], - 'light', [0, 0, 0.25, 0.5], - 'sphere', [0.25, 0, 0.5, 0.5], - 'circle', [0.25, 0, 0.5, 0.5], - 'disc', [0.5, 0, 0.75, 0.5], - 'oval', [0.5, 0, 0.75, 0.5], - 'triangle', [0.75, 0, 1, 0.5], - 'fireball', [0, 0.5, 0.25, 1], - [0.75, 0.5, 1, 1] - ] - } + 'light', + [0, 0, 0.25, 0.5], + 'sphere', + [0.25, 0, 0.5, 0.5], + 'circle', + [0.25, 0, 0.5, 0.5], + 'disc', + [0.5, 0, 0.75, 0.5], + 'oval', + [0.5, 0, 0.75, 0.5], + 'triangle', + [0.75, 0, 1, 0.5], + 'fireball', + [0, 0.5, 0.25, 1], + [0.75, 0.5, 1, 1], + ], + }, }; // key is shape name, value is sightings count const shapeTypes = { - all: 0 + all: 0, }; const shapeSelect = document.getElementById('shape-filter'); -shapeSelect.addEventListener('input', function() { - style.variables.filterShape = shapeSelect.options[shapeSelect.selectedIndex].value; +shapeSelect.addEventListener('input', function () { + style.variables.filterShape = + shapeSelect.options[shapeSelect.selectedIndex].value; map.render(); }); function fillShapeSelect() { Object.keys(shapeTypes) - .sort(function(a, b) { + .sort(function (a, b) { return shapeTypes[b] - shapeTypes[a]; }) - .forEach(function(shape) { + .forEach(function (shape) { const option = document.createElement('option'); option.text = `${shape} (${shapeTypes[shape]} sightings)`; option.value = shape; @@ -100,7 +112,7 @@ function fillShapeSelect() { const client = new XMLHttpRequest(); client.open('GET', 'data/csv/ufo_sighting_data.csv'); -client.onload = function() { +client.onload = function () { const csv = client.responseText; const features = []; @@ -122,13 +134,15 @@ client.onload = function() { shapeTypes[shape] = (shapeTypes[shape] ? shapeTypes[shape] : 0) + 1; shapeTypes['all']++; - features.push(new Feature({ - datetime: line[0], - year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int - shape: shape, - duration: line[3], - geometry: new Point(coords) - })); + features.push( + new Feature({ + datetime: line[0], + year: parseInt(/[0-9]{4}/.exec(line[0])[0]), // extract the year as int + shape: shape, + duration: line[3], + geometry: new Point(coords), + }) + ); } vectorSource.addFeatures(features); fillShapeSelect(); @@ -138,21 +152,28 @@ client.send(); map.addLayer( new WebGLPointsLayer({ source: vectorSource, - style: style + style: style, }) ); const info = document.getElementById('info'); -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (map.getView().getInteracting() || map.getView().getAnimating()) { return; } const pixel = evt.pixel; info.innerText = ''; - map.forEachFeatureAtPixel(pixel, function(feature) { + map.forEachFeatureAtPixel(pixel, function (feature) { const datetime = feature.get('datetime'); const duration = feature.get('duration'); const shape = feature.get('shape'); - info.innerText = 'On ' + datetime + ', lasted ' + duration + ' seconds and had a "' + shape + '" shape.'; + info.innerText = + 'On ' + + datetime + + ', lasted ' + + duration + + ' seconds and had a "' + + shape + + '" shape.'; }); }); diff --git a/examples/icon.js b/examples/icon.js index cb427a5984..1c9a79a0b3 100644 --- a/examples/icon.js +++ b/examples/icon.js @@ -1,19 +1,18 @@ import Feature from '../src/ol/Feature.js'; import Map from '../src/ol/Map.js'; import Overlay from '../src/ol/Overlay.js'; -import View from '../src/ol/View.js'; import Point from '../src/ol/geom/Point.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import TileJSON from '../src/ol/source/TileJSON.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Icon, Style} from '../src/ol/style.js'; - +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; const iconFeature = new Feature({ geometry: new Point([0, 0]), name: 'Null Island', population: 4000, - rainfall: 500 + rainfall: 500, }); const iconStyle = new Style({ @@ -21,25 +20,25 @@ const iconStyle = new Style({ anchor: [0.5, 46], anchorXUnits: 'fraction', anchorYUnits: 'pixels', - src: 'data/icon.png' - }) + src: 'data/icon.png', + }), }); iconFeature.setStyle(iconStyle); const vectorSource = new VectorSource({ - features: [iconFeature] + features: [iconFeature], }); const vectorLayer = new VectorLayer({ - source: vectorSource + source: vectorSource, }); const rasterLayer = new TileLayer({ source: new TileJSON({ url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json', - crossOrigin: '' - }) + crossOrigin: '', + }), }); const map = new Map({ @@ -47,8 +46,8 @@ const map = new Map({ target: document.getElementById('map'), view: new View({ center: [0, 0], - zoom: 3 - }) + zoom: 3, + }), }); const element = document.getElementById('popup'); @@ -57,23 +56,22 @@ const popup = new Overlay({ element: element, positioning: 'bottom-center', stopEvent: false, - offset: [0, -50] + offset: [0, -50], }); map.addOverlay(popup); // display popup on click -map.on('click', function(evt) { - const feature = map.forEachFeatureAtPixel(evt.pixel, - function(feature) { - return feature; - }); +map.on('click', function (evt) { + const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) { + return feature; + }); if (feature) { const coordinates = feature.getGeometry().getCoordinates(); popup.setPosition(coordinates); $(element).popover({ placement: 'top', html: true, - content: feature.get('name') + content: feature.get('name'), }); $(element).popover('show'); } else { @@ -82,7 +80,7 @@ map.on('click', function(evt) { }); // change mouse cursor when over marker -map.on('pointermove', function(e) { +map.on('pointermove', function (e) { if (e.dragging) { $(element).popover('destroy'); return; diff --git a/examples/igc.js b/examples/igc.js index 261108f59a..9fb6719696 100644 --- a/examples/igc.js +++ b/examples/igc.js @@ -1,33 +1,32 @@ import Feature from '../src/ol/Feature.js'; -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import IGC from '../src/ol/format/IGC.js'; -import {LineString, Point} from '../src/ol/geom.js'; -import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; +import Map from '../src/ol/Map.js'; import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js'; +import {LineString, Point} from '../src/ol/geom.js'; +import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js'; import {getVectorContext} from '../src/ol/render.js'; - const colors = { 'Clement Latour': 'rgba(0, 0, 255, 0.7)', 'Damien de Baesnt': 'rgba(0, 215, 255, 0.7)', 'Sylvain Dhonneur': 'rgba(0, 165, 255, 0.7)', 'Tom Payne': 'rgba(0, 255, 255, 0.7)', - 'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)' + 'Ulrich Prinz': 'rgba(0, 215, 255, 0.7)', }; const styleCache = {}; -const styleFunction = function(feature) { +const styleFunction = function (feature) { const color = colors[feature.get('PLT')]; let style = styleCache[color]; if (!style) { style = new Style({ stroke: new Stroke({ color: color, - width: 3 - }) + width: 3, + }), }); styleCache[color] = style; } @@ -41,13 +40,13 @@ const igcUrls = [ 'data/igc/Damien-de-Baenst.igc', 'data/igc/Sylvain-Dhonneur.igc', 'data/igc/Tom-Payne.igc', - 'data/igc/Ulrich-Prinz.igc' + 'data/igc/Ulrich-Prinz.igc', ]; function get(url, callback) { const client = new XMLHttpRequest(); client.open('GET', url); - client.onload = function() { + client.onload = function () { callback(client.responseText); }; client.send(); @@ -55,9 +54,10 @@ function get(url, callback) { const igcFormat = new IGC(); for (let i = 0; i < igcUrls.length; ++i) { - get(igcUrls[i], function(data) { - const features = igcFormat.readFeatures(data, - {featureProjection: 'EPSG:3857'}); + get(igcUrls[i], function (data) { + const features = igcFormat.readFeatures(data, { + featureProjection: 'EPSG:3857', + }); vectorSource.addFeatures(features); }); } @@ -65,9 +65,9 @@ for (let i = 0; i < igcUrls.length; ++i) { const time = { start: Infinity, stop: -Infinity, - duration: 0 + duration: 0, }; -vectorSource.on('addfeature', function(event) { +vectorSource.on('addfeature', function (event) { const geometry = event.feature.getGeometry(); time.start = Math.min(time.start, geometry.getFirstCoordinate()[2]); time.stop = Math.max(time.stop, geometry.getLastCoordinate()[2]); @@ -76,7 +76,7 @@ vectorSource.on('addfeature', function(event) { const vectorLayer = new VectorLayer({ source: vectorSource, - style: styleFunction + style: styleFunction, }); const map = new Map({ @@ -85,25 +85,25 @@ const map = new Map({ source: new OSM({ attributions: [ 'All maps © OpenCycleMap', - ATTRIBUTION + ATTRIBUTION, ], - url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + - '?apikey=0e6fc415256d4fbb9b5166a718591d71' - }) + url: + 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + + '?apikey=0e6fc415256d4fbb9b5166a718591d71', + }), }), - vectorLayer + vectorLayer, ], target: 'map', view: new View({ center: [703365.7089403362, 5714629.865071137], - zoom: 9 - }) + zoom: 9, + }), }); - let point = null; let line = null; -const displaySnap = function(coordinate) { +const displaySnap = function (coordinate) { const closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate); const info = document.getElementById('info'); if (closestFeature === null) { @@ -120,7 +120,7 @@ const displaySnap = function(coordinate) { } const date = new Date(closestPoint[2] * 1000); info.innerHTML = - closestFeature.get('PLT') + ' (' + date.toUTCString() + ')'; + closestFeature.get('PLT') + ' (' + date.toUTCString() + ')'; const coordinates = [coordinate, [closestPoint[0], closestPoint[1]]]; if (line === null) { line = new LineString(coordinates); @@ -131,7 +131,7 @@ const displaySnap = function(coordinate) { map.render(); }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (evt.dragging) { return; } @@ -139,23 +139,23 @@ map.on('pointermove', function(evt) { displaySnap(coordinate); }); -map.on('click', function(evt) { +map.on('click', function (evt) { displaySnap(evt.coordinate); }); const stroke = new Stroke({ color: 'rgba(255,0,0,0.9)', - width: 1 + width: 1, }); const style = new Style({ stroke: stroke, image: new CircleStyle({ radius: 5, fill: null, - stroke: stroke - }) + stroke: stroke, + }), }); -vectorLayer.on('postrender', function(evt) { +vectorLayer.on('postrender', function (evt) { const vectorContext = getVectorContext(evt); vectorContext.setStyle(style); if (point !== null) { @@ -173,16 +173,16 @@ const featureOverlay = new VectorLayer({ image: new CircleStyle({ radius: 5, fill: new Fill({ - color: 'rgba(255,0,0,0.9)' - }) - }) - }) + color: 'rgba(255,0,0,0.9)', + }), + }), + }), }); -document.getElementById('time').addEventListener('input', function() { +document.getElementById('time').addEventListener('input', function () { const value = parseInt(this.value, 10) / 100; - const m = time.start + (time.duration * value); - vectorSource.forEachFeature(function(feature) { + const m = time.start + time.duration * value; + vectorSource.forEachFeature(function (feature) { const geometry = /** @type {import("../src/ol/geom/LineString.js").default} */ (feature.getGeometry()); const coordinate = geometry.getCoordinateAtM(m, true); let highlight = feature.get('highlight'); diff --git a/examples/iiif.js b/examples/iiif.js index b2fc4e4e59..882e67fcbc 100644 --- a/examples/iiif.js +++ b/examples/iiif.js @@ -1,45 +1,53 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; -import TileLayer from '../src/ol/layer/Tile.js'; import IIIF from '../src/ol/source/IIIF.js'; import IIIFInfo from '../src/ol/format/IIIFInfo.js'; +import Map from '../src/ol/Map.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import View from '../src/ol/View.js'; const layer = new TileLayer(), - map = new Map({ - layers: [layer], - target: 'map' - }), - notifyDiv = document.getElementById('iiif-notification'), - urlInput = document.getElementById('imageInfoUrl'), - displayButton = document.getElementById('display'); + map = new Map({ + layers: [layer], + target: 'map', + }), + notifyDiv = document.getElementById('iiif-notification'), + urlInput = document.getElementById('imageInfoUrl'), + displayButton = document.getElementById('display'); function refreshMap(imageInfoUrl) { - fetch(imageInfoUrl).then(function(response) { - response.json().then(function(imageInfo) { - const options = new IIIFInfo(imageInfo).getTileSourceOptions(); - if (options === undefined || options.version === undefined) { - notifyDiv.textContent = 'Data seems to be no valid IIIF image information.'; - return; - } - options.zDirection = -1; - const iiifTileSource = new IIIF(options); - layer.setSource(iiifTileSource); - map.setView(new View({ - resolutions: iiifTileSource.getTileGrid().getResolutions(), - extent: iiifTileSource.getTileGrid().getExtent(), - constrainOnlyCenter: true - })); - map.getView().fit(iiifTileSource.getTileGrid().getExtent()); - notifyDiv.textContent = ''; - }).catch(function(body) { - notifyDiv.textContent = 'Could not read image info json. ' + body; + fetch(imageInfoUrl) + .then(function (response) { + response + .json() + .then(function (imageInfo) { + const options = new IIIFInfo(imageInfo).getTileSourceOptions(); + if (options === undefined || options.version === undefined) { + notifyDiv.textContent = + 'Data seems to be no valid IIIF image information.'; + return; + } + options.zDirection = -1; + const iiifTileSource = new IIIF(options); + layer.setSource(iiifTileSource); + map.setView( + new View({ + resolutions: iiifTileSource.getTileGrid().getResolutions(), + extent: iiifTileSource.getTileGrid().getExtent(), + constrainOnlyCenter: true, + }) + ); + map.getView().fit(iiifTileSource.getTileGrid().getExtent()); + notifyDiv.textContent = ''; + }) + .catch(function (body) { + notifyDiv.textContent = 'Could not read image info json. ' + body; + }); + }) + .catch(function () { + notifyDiv.textContent = 'Could not read data from URL.'; }); - }).catch(function() { - notifyDiv.textContent = 'Could not read data from URL.'; - }); } -displayButton.addEventListener('click', function() { +displayButton.addEventListener('click', function () { refreshMap(urlInput.value); }); diff --git a/examples/image-filter.js b/examples/image-filter.js index db6a8105f6..d798f39e49 100644 --- a/examples/image-filter.js +++ b/examples/image-filter.js @@ -1,11 +1,12 @@ import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import TileLayer from '../src/ol/layer/Tile.js'; -import {fromLonLat} from '../src/ol/proj.js'; +import View from '../src/ol/View.js'; import XYZ from '../src/ol/source/XYZ.js'; +import {fromLonLat} from '../src/ol/proj.js'; const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB'; -const attributions = '© MapTiler ' + +const attributions = + '© MapTiler ' + '© OpenStreetMap contributors'; const imagery = new TileLayer({ @@ -13,8 +14,8 @@ const imagery = new TileLayer({ attributions: attributions, url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key, maxZoom: 20, - crossOrigin: '' - }) + crossOrigin: '', + }), }); const map = new Map({ @@ -22,52 +23,25 @@ const map = new Map({ target: 'map', view: new View({ center: fromLonLat([-120, 50]), - zoom: 6 - }) + zoom: 6, + }), }); const kernels = { - none: [ - 0, 0, 0, - 0, 1, 0, - 0, 0, 0 - ], - sharpen: [ - 0, -1, 0, - -1, 5, -1, - 0, -1, 0 - ], - sharpenless: [ - 0, -1, 0, - -1, 10, -1, - 0, -1, 0 - ], - blur: [ - 1, 1, 1, - 1, 1, 1, - 1, 1, 1 - ], - shadow: [ - 1, 2, 1, - 0, 1, 0, - -1, -2, -1 - ], - emboss: [ - -2, 1, 0, - -1, 1, 1, - 0, 1, 2 - ], - edge: [ - 0, 1, 0, - 1, -4, 1, - 0, 1, 0 - ] + none: [0, 0, 0, 0, 1, 0, 0, 0, 0], + sharpen: [0, -1, 0, -1, 5, -1, 0, -1, 0], + sharpenless: [0, -1, 0, -1, 10, -1, 0, -1, 0], + blur: [1, 1, 1, 1, 1, 1, 1, 1, 1], + shadow: [1, 2, 1, 0, 1, 0, -1, -2, -1], + emboss: [-2, 1, 0, -1, 1, 1, 0, 1, 2], + edge: [0, 1, 0, 1, -4, 1, 0, 1, 0], }; function normalize(kernel) { const len = kernel.length; const normal = new Array(len); - let i, sum = 0; + let i, + sum = 0; for (i = 0; i < len; ++i) { sum += kernel[i]; } @@ -86,24 +60,21 @@ function normalize(kernel) { const select = document.getElementById('kernel'); let selectedKernel = normalize(kernels[select.value]); - /** * Update the kernel and re-render on change. */ -select.onchange = function() { +select.onchange = function () { selectedKernel = normalize(kernels[select.value]); map.render(); }; - /** * Apply a filter on "postrender" events. */ -imagery.on('postrender', function(event) { +imagery.on('postrender', function (event) { convolve(event.context, selectedKernel); }); - /** * Apply a convolution kernel to canvas. This works for any size kernel, but * performance starts degrading above 3 x 3. @@ -126,14 +97,21 @@ function convolve(context, kernel) { for (let pixelY = 0; pixelY < height; ++pixelY) { const pixelsAbove = pixelY * width; for (let pixelX = 0; pixelX < width; ++pixelX) { - let r = 0, g = 0, b = 0, a = 0; + let r = 0, + g = 0, + b = 0, + a = 0; for (let kernelY = 0; kernelY < size; ++kernelY) { for (let kernelX = 0; kernelX < size; ++kernelX) { const weight = kernel[kernelY * size + kernelX]; const neighborY = Math.min( - height - 1, Math.max(0, pixelY + kernelY - half)); + height - 1, + Math.max(0, pixelY + kernelY - half) + ); const neighborX = Math.min( - width - 1, Math.max(0, pixelX + kernelX - half)); + width - 1, + Math.max(0, pixelX + kernelX - half) + ); const inputIndex = (neighborY * width + neighborX) * 4; r += inputData[inputIndex] * weight; g += inputData[inputIndex + 1] * weight; diff --git a/examples/image-load-events.js b/examples/image-load-events.js index 5d2518da22..7bc8725591 100644 --- a/examples/image-load-events.js +++ b/examples/image-load-events.js @@ -1,8 +1,7 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import ImageLayer from '../src/ol/layer/Image.js'; import ImageWMS from '../src/ol/source/ImageWMS.js'; - +import Map from '../src/ol/Map.js'; +import View from '../src/ol/View.js'; /** * Renders a progress bar. @@ -15,11 +14,10 @@ function Progress(el) { this.loaded = 0; } - /** * Increment the count of loading tiles. */ -Progress.prototype.addLoading = function() { +Progress.prototype.addLoading = function () { if (this.loading === 0) { this.show(); } @@ -27,48 +25,44 @@ Progress.prototype.addLoading = function() { this.update(); }; - /** * Increment the count of loaded tiles. */ -Progress.prototype.addLoaded = function() { +Progress.prototype.addLoaded = function () { const this_ = this; - setTimeout(function() { + setTimeout(function () { ++this_.loaded; this_.update(); }, 100); }; - /** * Update the progress bar. */ -Progress.prototype.update = function() { - const width = (this.loaded / this.loading * 100).toFixed(1) + '%'; +Progress.prototype.update = function () { + const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%'; this.el.style.width = width; if (this.loading === this.loaded) { this.loading = 0; this.loaded = 0; const this_ = this; - setTimeout(function() { + setTimeout(function () { this_.hide(); }, 500); } }; - /** * Show the progress bar. */ -Progress.prototype.show = function() { +Progress.prototype.show = function () { this.el.style.visibility = 'visible'; }; - /** * Hide the progress bar. */ -Progress.prototype.hide = function() { +Progress.prototype.hide = function () { if (this.loading === this.loaded) { this.el.style.visibility = 'hidden'; this.el.style.width = 0; @@ -80,27 +74,25 @@ const progress = new Progress(document.getElementById('progress')); const source = new ImageWMS({ url: 'https://ahocevar.com/geoserver/wms', params: {'LAYERS': 'topp:states'}, - serverType: 'geoserver' + serverType: 'geoserver', }); -source.on('imageloadstart', function() { +source.on('imageloadstart', function () { progress.addLoading(); }); -source.on('imageloadend', function() { +source.on('imageloadend', function () { progress.addLoaded(); }); -source.on('imageloaderror', function() { +source.on('imageloaderror', function () { progress.addLoaded(); }); const map = new Map({ - layers: [ - new ImageLayer({source: source}) - ], + layers: [new ImageLayer({source: source})], target: 'map', view: new View({ center: [-10997148, 4569099], - zoom: 4 - }) + zoom: 4, + }), }); diff --git a/examples/image-vector-layer.js b/examples/image-vector-layer.js index cd24c917b4..5339c43cbc 100644 --- a/examples/image-vector-layer.js +++ b/examples/image-vector-layer.js @@ -1,21 +1,20 @@ -import Map from '../src/ol/Map.js'; -import View from '../src/ol/View.js'; import GeoJSON from '../src/ol/format/GeoJSON.js'; +import Map from '../src/ol/Map.js'; import VectorImageLayer from '../src/ol/layer/VectorImage.js'; import VectorLayer from '../src/ol/layer/Vector.js'; import VectorSource from '../src/ol/source/Vector.js'; +import View from '../src/ol/View.js'; import {Fill, Stroke, Style, Text} from '../src/ol/style.js'; - const style = new Style({ fill: new Fill({ - color: 'rgba(255, 255, 255, 0.6)' + color: 'rgba(255, 255, 255, 0.6)', }), stroke: new Stroke({ color: '#319FD3', - width: 1 + width: 1, }), - text: new Text() + text: new Text(), }); const map = new Map({ @@ -24,19 +23,19 @@ const map = new Map({ imageRatio: 2, source: new VectorSource({ url: 'data/geojson/countries.geojson', - format: new GeoJSON() + format: new GeoJSON(), }), - style: function(feature) { + style: function (feature) { style.getText().setText(feature.get('name')); return style; - } - }) + }, + }), ], target: 'map', view: new View({ center: [0, 0], - zoom: 1 - }) + zoom: 1, + }), }); const featureOverlay = new VectorLayer({ @@ -45,45 +44,48 @@ const featureOverlay = new VectorLayer({ style: new Style({ stroke: new Stroke({ color: '#f00', - width: 1 + width: 1, }), fill: new Fill({ - color: 'rgba(255,0,0,0.1)' - }) - }) + color: 'rgba(255,0,0,0.1)', + }), + }), }); let highlight; -const displayFeatureInfo = function(pixel) { +const displayFeatureInfo = function (pixel) { + map + .getLayers() + .item(0) + .getFeatures(pixel) + .then(function (features) { + const feature = features.length > 0 ? features[0] : undefined; - map.getLayers().item(0).getFeatures(pixel).then(function(features) { - const feature = features.length > 0 ? features[0] : undefined; - - const info = document.getElementById('info'); - if (feature) { - info.innerHTML = feature.getId() + ': ' + feature.get('name'); - } else { - info.innerHTML = ' '; - } - - if (feature !== highlight) { - if (highlight) { - featureOverlay.getSource().removeFeature(highlight); - } + const info = document.getElementById('info'); if (feature) { - featureOverlay.getSource().addFeature(feature); + info.innerHTML = feature.getId() + ': ' + feature.get('name'); + } else { + info.innerHTML = ' '; } - highlight = feature; - } - }); + + if (feature !== highlight) { + if (highlight) { + featureOverlay.getSource().removeFeature(highlight); + } + if (feature) { + featureOverlay.getSource().addFeature(feature); + } + highlight = feature; + } + }); }; -map.on('pointermove', function(evt) { +map.on('pointermove', function (evt) { if (!evt.dragging) { displayFeatureInfo(evt.pixel); } }); -map.on('click', function(evt) { +map.on('click', function (evt) { displayFeatureInfo(evt.pixel); }); diff --git a/examples/immediate-geographic.js b/examples/immediate-geographic.js index 7c92cf0459..cc21f14383 100644 --- a/examples/immediate-geographic.js +++ b/examples/immediate-geographic.js @@ -1,18 +1,18 @@ +import Stamen from '../src/ol/source/Stamen.js'; +import TileLayer from '../src/ol/layer/Tile.js'; +import {Circle, Fill, Style} from '../src/ol/style.js'; import {Map, View} from '../src/ol/index.js'; import {Point} from '../src/ol/geom.js'; -import TileLayer from '../src/ol/layer/Tile.js'; -import Stamen from '../src/ol/source/Stamen.js'; -import {Circle, Fill, Style} from '../src/ol/style.js'; import {getVectorContext} from '../src/ol/render.js'; -import {useGeographic} from '../src/ol/proj.js'; import {upAndDown} from '../src/ol/easing.js'; +import {useGeographic} from '../src/ol/proj.js'; useGeographic(); const layer = new TileLayer({ source: new Stamen({ - layer: 'toner' - }) + layer: 'toner', + }), }); const map = new Map({ @@ -20,17 +20,17 @@ const map = new Map({ target: 'map', view: new View({ center: [0, 0], - zoom: 2 - }) + zoom: 2, + }), }); const image = new Circle({ radius: 8, - fill: new Fill({color: 'rgb(255, 153, 0)'}) + fill: new Fill({color: 'rgb(255, 153, 0)'}), }); const style = new Style({ - image: image + image: image, }); const n = 1000; @@ -42,7 +42,7 @@ for (let i = 0; i < n; ++i) { geometries[i] = new Point([lon, lat]); } -layer.on('postrender', function(event) { +layer.on('postrender', function (event) { const vectorContext = getVectorContext(event); for (let i = 0; i < n; ++i) { diff --git a/examples/index.html b/examples/index.html index 4acb81f718..06d1a153dd 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,38 +4,21 @@ - + + -OpenLayers Examples -- -+-- - -
OpenLayers
-
- + OpenLayers
+
+
+
+
+