ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make code prettier

Browse Source 
This updates ESLint and our shared eslint-config-openlayers to use Prettier.  Most formatting changes were automatically applied with this:

    npm run lint -- --fix

A few manual changes were required:

 * In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
 * In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason.  While editing this, I reworked `ExampleBuilder` to be a class.
 * In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.
This commit is contained in:
Tim Schaub
2020-04-06 12:25:12 -06:00
parent 53b48baf62
commit 054af09032
790 changed files with 46833 additions and 33765 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
config/jsdoc/api/plugins/api.js
View File

@@ -2,19 +2,18 @@
* Define an @api tag
* @param {Object} dictionary The tag dictionary.
*/
exports.defineTags = function(dictionary) {
exports.defineTags = function (dictionary) {
dictionary.defineTag('api', {
mustNotHaveValue: true,
canHaveType: false,
canHaveName: false,
onTagged: function(doclet, tag) {
onTagged: function (doclet, tag) {
includeTypes(doclet);
doclet.stability = 'stable';
}
},
});
};
/*
* Based on @api annotations, and assuming that items with no @api annotation
* should not be documented, this plugin removes undocumented symbols
@@ -56,7 +55,7 @@ function includeAugments(doclet) {
if (!doclet.fires) {
doclet.fires = [];
}
cls.fires.forEach(function(f) {
cls.fires.forEach(function (f) {
if (doclet.fires.indexOf(f) == -1) {
doclet.fires.push(f);
}
@@ -66,7 +65,7 @@ function includeAugments(doclet) {
if (!doclet.observables) {
doclet.observables = [];
}
cls.observables.forEach(function(f) {
cls.observables.forEach(function (f) {
if (doclet.observables.indexOf(f) == -1) {
doclet.observables.push(f);
}
@@ -79,7 +78,7 @@ function includeAugments(doclet) {
}
function extractTypes(item) {
item.type.names.forEach(function(type) {
item.type.names.forEach(function (type) {
const match = type.match(/^(.*<)?([^>]*)>?$/);
if (match) {
modules[match[2]] = true;
@@ -109,31 +108,35 @@ const moduleRoot = path.join(process.cwd(), 'src');
// Tag default exported Identifiers because their name should be the same as the module name.
exports.astNodeVisitor = {
visitNode: function(node, e, parser, currentSourceName) {
visitNode: function (node, e, parser, currentSourceName) {
if (node.parent && node.parent.type === 'ExportDefaultDeclaration') {
const modulePath = path.relative(moduleRoot, currentSourceName).replace(/\.js$/, '');
const exportName = 'module:' + modulePath.replace(/\\/g, '/') + (node.name ? '~' + node.name : '');
const modulePath = path
.relative(moduleRoot, currentSourceName)
.replace(/\.js$/, '');
const exportName =
'module:' +
modulePath.replace(/\\/g, '/') +
(node.name ? '~' + node.name : '');
defaultExports[exportName] = true;
}
}
},
};
function sortOtherMembers(doclet) {
if (doclet.fires) {
doclet.fires.sort(function(a, b) {
doclet.fires.sort(function (a, b) {
return a.split(/#?event:/)[1] < b.split(/#?event:/)[1] ? -1 : 1;
});
}
if (doclet.observables) {
doclet.observables.sort(function(a, b) {
doclet.observables.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
}
}
exports.handlers = {
newDoclet: function(e) {
newDoclet: function (e) {
const doclet = e.doclet;
if (doclet.stability) {
modules[doclet.longname.split(/[~\.]/).shift()] = true;
@@ -152,7 +155,7 @@ exports.handlers = {
}
},
parseComplete: function(e) {
parseComplete: function (e) {
const doclets = e.doclets;
const byLongname = doclets.index.longname;
for (let i = doclets.length - 1; i >= 0; --i) {
@@ -183,9 +186,12 @@ exports.handlers = {
// Remove all other undocumented symbols
doclet.undocumented = true;
}
if (doclet.memberof && byLongname[doclet.memberof] &&
byLongname[doclet.memberof][0].isEnum &&
!byLongname[doclet.memberof][0].properties.some(p => p.stability)) {
if (
doclet.memberof &&
byLongname[doclet.memberof] &&
byLongname[doclet.memberof][0].isEnum &&
!byLongname[doclet.memberof][0].properties.some((p) => p.stability)
) {
byLongname[doclet.memberof][0].undocumented = true;
}
}
@@ -194,10 +200,9 @@ exports.handlers = {
processingComplete(e) {
const byLongname = e.doclets.index.longname;
for (const name in defaultExports) {
byLongname[name].forEach(function(doclet) {
byLongname[name].forEach(function (doclet) {
doclet.isDefaultExport = true;
});
}
}
},
};

8
config/jsdoc/api/plugins/events.js
View File

@@ -1,8 +1,7 @@
const events = {};
exports.handlers = {
newDoclet: function(e) {
newDoclet: function (e) {
const doclet = e.doclet;
if (doclet.kind !== 'event') {
return;
@@ -15,7 +14,7 @@ exports.handlers = {
events[cls].push(doclet.longname);
},
parseComplete: function(e) {
parseComplete: function (e) {
const doclets = e.doclets;
for (let i = 0, ii = doclets.length - 1; i < ii; ++i) {
const doclet = doclets[i];
@@ -34,6 +33,5 @@ exports.handlers = {
}
}
}
}
},
};

21
config/jsdoc/api/plugins/inline-options.js
View File

@@ -6,12 +6,11 @@
const properties = {};
exports.handlers = {
/**
* Collects all typedefs, keyed by longname
* @param {Object} e Event object.
*/
newDoclet: function(e) {
newDoclet: function (e) {
if (e.doclet.kind == 'typedef' && e.doclet.properties) {
properties[e.doclet.longname] = e.doclet.properties;
}
@@ -22,7 +21,7 @@ exports.handlers = {
* collected typedefs.
* @param {Object} e Event object.
*/
parseComplete: function(e) {
parseComplete: function (e) {
const doclets = e.doclets;
for (let i = 0, ii = doclets.length; i < ii; ++i) {
const doclet = doclets[i];
@@ -34,16 +33,18 @@ exports.handlers = {
const type = param.type.names[0];
if (type in properties) {
param.type.names[0] = type;
params.push.apply(params, properties[type].map(p => {
const property = Object.assign({}, p);
property.name = `${param.name}.${property.name}`;
return property;
}));
params.push.apply(
params,
properties[type].map((p) => {
const property = Object.assign({}, p);
property.name = `${param.name}.${property.name}`;
return property;
})
);
}
}
}
}
}
}
},
};

42
config/jsdoc/api/plugins/markdown.js
View File

@@ -19,7 +19,7 @@ const tags = [
'properties',
'returns',
'see',
'summary'
'summary',
];
const hasOwnProp = Object.prototype.hasOwnProperty;
@@ -27,32 +27,32 @@ const hasOwnProp = Object.prototype.hasOwnProperty;
const markedRenderer = new marked.Renderer();
// Allow prettyprint to work on inline code samples
markedRenderer.code = function(code, language) {
markedRenderer.code = function (code, language) {
const langClass = language ? ' lang-' + language : '';
return format('<pre class="prettyprint source%s"><code>%s</code></pre>',
langClass, escapeCode(code));
return format(
'<pre class="prettyprint source%s"><code>%s</code></pre>',
langClass,
escapeCode(code)
);
};
function escapeCode(source) {
return source.replace(/</g, '&lt;')
return source
.replace(/</g, '&lt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
function escapeUnderscoresAndTildes(source) {
return source.replace(/\{@[^}\r\n]+\}/g, function(wholeMatch) {
return wholeMatch
.replace(/(^|[^\\])_/g, '$1\\_')
.replace('~', '&tilde;');
return source.replace(/\{@[^}\r\n]+\}/g, function (wholeMatch) {
return wholeMatch.replace(/(^|[^\\])_/g, '$1\\_').replace('~', '&tilde;');
});
}
function unencodeQuotesAndTildes(source) {
return source.replace(/\{@[^}\r\n]+\}/g, function(wholeMatch) {
return wholeMatch
.replace(/&quot;/g, '"')
.replace(/&tilde;/g, '~');
return source.replace(/\{@[^}\r\n]+\}/g, function (wholeMatch) {
return wholeMatch.replace(/&quot;/g, '"').replace(/&tilde;/g, '~');
});
}
@@ -63,7 +63,7 @@ function parse(source) {
result = marked(source, {renderer: markedRenderer})
.replace(/\s+$/, '')
.replace(/&#39;/g, '\'');
.replace(/&#39;/g, "'");
result = unencodeQuotesAndTildes(result);
@@ -82,15 +82,18 @@ function shouldProcessString(tagName, text) {
}
function process(doclet) {
tags.forEach(function(tag) {
tags.forEach(function (tag) {
if (!hasOwnProp.call(doclet, tag)) {
return;
}
if (typeof doclet[tag] === 'string' && shouldProcessString(tag, doclet[tag])) {
if (
typeof doclet[tag] === 'string' &&
shouldProcessString(tag, doclet[tag])
) {
doclet[tag] = parse(doclet[tag]);
} else if (Array.isArray(doclet[tag])) {
doclet[tag].forEach(function(value, index, original) {
doclet[tag].forEach(function (value, index, original) {
const inner = {};
inner[tag] = value;
@@ -103,9 +106,8 @@ function process(doclet) {
});
}
exports.handlers = {
newDoclet: function(e) {
newDoclet: function (e) {
process(e.doclet);
}
},
};

18
config/jsdoc/api/plugins/observable.js
View File

@@ -2,15 +2,14 @@ const classes = {};
const observables = {};
exports.handlers = {
newDoclet: function(e) {
newDoclet: function (e) {
const doclet = e.doclet;
if (doclet.kind == 'class' && !(doclet.longname in classes)) {
classes[doclet.longname] = doclet;
}
},
parseComplete: function(e) {
parseComplete: function (e) {
const doclets = e.doclets;
let cls, doclet, event, i, ii, observable;
for (i = 0, ii = doclets.length - 1; i < ii; ++i) {
@@ -26,8 +25,8 @@ exports.handlers = {
}
observable = observables[key];
observable.name = name;
observable.readonly = typeof observable.readonly == 'boolean' ?
observable.readonly : true;
observable.readonly =
typeof observable.readonly == 'boolean' ? observable.readonly : true;
if (doclet.name.indexOf('get') === 0) {
observable.type = doclet.returns[0].type;
observable.description = doclet.returns[0].description;
@@ -53,17 +52,16 @@ exports.handlers = {
}
}
}
}
},
};
exports.defineTags = function(dictionary) {
exports.defineTags = function (dictionary) {
dictionary.defineTag('observable', {
mustNotHaveValue: true,
canHaveType: false,
canHaveName: false,
onTagged: function(doclet, tag) {
onTagged: function (doclet, tag) {
doclet.observable = '';
}
},
});
};

205
config/jsdoc/api/template/publish.js
View File

@@ -4,7 +4,7 @@ const hasOwnProp = Object.prototype.hasOwnProperty;
// Work around an issue with hasOwnProperty in JSDoc's templateHelper.js.
//TODO Fix in JSDoc.
Object.prototype.hasOwnProperty = function(property) {
Object.prototype.hasOwnProperty = function (property) {
return property in this;
};
@@ -31,7 +31,11 @@ function find(spec) {
}
function tutoriallink(tutorial) {
return helper.toTutorial(tutorial, null, {tag: 'em', classname: 'disabled', prefix: 'Tutorial: '});
return helper.toTutorial(tutorial, null, {
tag: 'em',
classname: 'disabled',
prefix: 'Tutorial: ',
});
}
function getAncestorLinks(doclet) {
@@ -55,8 +59,12 @@ function needsSignature(doclet) {
// function and class definitions always get a signature
if (doclet.kind === 'function' || doclet.kind === 'class') {
needsSig = true;
} else if (doclet.kind === 'typedef' && doclet.type && doclet.type.names &&
doclet.type.names.length) {
} else if (
doclet.kind === 'typedef' &&
doclet.type &&
doclet.type.names &&
doclet.type.names.length
) {
// typedefs that contain functions get a signature, too
for (let i = 0, l = doclet.type.names.length; i < l; i++) {
if (doclet.type.names[i].toLowerCase() === 'function') {
@@ -81,22 +89,30 @@ function addSignatureReturns(f) {
f.signature = '<span class="signature">' + (f.signature || '') + '</span>';
if (returnTypes.length) {
f.signature += '<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">' + (returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') + '</span>';
f.signature +=
'<span class="glyphicon glyphicon-circle-arrow-right"></span><span class="type-signature returnType">' +
(returnTypes.length ? '{' + returnTypes.join('|') + '}' : '') +
'</span>';
}
}
function addSignatureTypes(f) {
const types = helper.getSignatureTypes(f);
f.signature = (f.signature || '') + '<span class="type-signature">' + (types.length ? ' :' + types.join('|') : '') + ' </span>';
f.signature =
(f.signature || '') +
'<span class="type-signature">' +
(types.length ? ' :' + types.join('|') : '') +
' </span>';
}
function shortenPaths(files, commonPrefix) {
// always use forward slashes
const regexp = new RegExp('\\\\', 'g');
Object.keys(files).forEach(function(file) {
files[file].shortened = files[file].resolved.replace(commonPrefix, '')
Object.keys(files).forEach(function (file) {
files[file].shortened = files[file].resolved
.replace(commonPrefix, '')
.replace(regexp, '/');
});
@@ -112,9 +128,10 @@ function getPathFromDoclet(doclet) {
return;
}
const filepath = doclet.meta.path && doclet.meta.path !== 'null' ?
doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop() :
doclet.meta.filename;
const filepath =
doclet.meta.path && doclet.meta.path !== 'null'
? doclet.meta.path + '/' + doclet.meta.filename.split(/[\/\\]/).pop()
: doclet.meta.filename;
return filepath;
}
@@ -126,7 +143,7 @@ function generate(title, docs, filename, resolveLinks) {
filename: filename,
title: title,
docs: docs,
packageInfo: (find({kind: 'package'}) || []) [0]
packageInfo: (find({kind: 'package'}) || [])[0],
};
const outpath = path.join(outdir, filename);
@@ -140,7 +157,7 @@ function generate(title, docs, filename, resolveLinks) {
}
function generateSourceFiles(sourceFiles) {
Object.keys(sourceFiles).forEach(function(file) {
Object.keys(sourceFiles).forEach(function (file) {
let source;
// links are keyed to the shortened path in each doclet's `meta.filename` property
const sourceOutfile = helper.getUniqueFilename(sourceFiles[file].shortened);
@@ -149,14 +166,20 @@ function generateSourceFiles(sourceFiles) {
try {
source = {
kind: 'source',
code: helper.htmlsafe(fs.readFileSync(sourceFiles[file].resolved, 'utf8'))
code: helper.htmlsafe(
fs.readFileSync(sourceFiles[file].resolved, 'utf8')
),
};
} catch (e) {
handle(e);
}
generate('Source: ' + sourceFiles[file].shortened, [source], sourceOutfile,
false);
generate(
'Source: ' + sourceFiles[file].shortened,
[source],
sourceOutfile,
false
);
});
}
@@ -175,14 +198,15 @@ function attachModuleSymbols(doclets, modules) {
const symbols = {};
// build a lookup table
doclets.forEach(function(symbol) {
doclets.forEach(function (symbol) {
symbols[symbol.longname] = symbol;
});
modules.forEach(function(module) {
modules.forEach(function (module) {
if (symbols[module.longname]) {
module.module = symbols[module.longname];
module.module.name = module.module.name.replace('module:', 'require("') + '")';
module.module.name =
module.module.name.replace('module:', 'require("') + '")';
}
});
}
@@ -210,7 +234,7 @@ function getPrettyName(doclet) {
*/
function buildNav(members) {
const nav = [];
members.classes.forEach(function(v) {
members.classes.forEach(function (v) {
// exclude interfaces from sidebar
if (v.interface !== true) {
nav.push({
@@ -220,52 +244,55 @@ function buildNav(members) {
name: v.name,
module: find({
kind: 'module',
longname: v.memberof
longname: v.memberof,
})[0],
members: find({
kind: 'member',
memberof: v.longname
memberof: v.longname,
}),
methods: find({
kind: 'function',
memberof: v.longname
memberof: v.longname,
}),
typedefs: find({
kind: 'typedef',
memberof: v.longname
memberof: v.longname,
}),
fires: v.fires,
events: find({
kind: 'event',
memberof: v.longname
})
memberof: v.longname,
}),
});
}
});
members.modules.forEach(function(v) {
members.modules.forEach(function (v) {
const classes = find({
kind: 'class',
memberof: v.longname
memberof: v.longname,
});
const members = find({
kind: 'member',
memberof: v.longname
memberof: v.longname,
});
const methods = find({
kind: 'function',
memberof: v.longname
memberof: v.longname,
});
const typedefs = find({
kind: 'typedef',
memberof: v.longname
memberof: v.longname,
});
const events = find({
kind: 'event',
memberof: v.longname
memberof: v.longname,
});
// Only add modules that contain more than just classes with their
// associated Options typedef
if (typedefs.length > classes.length || members.length + methods.length > 0) {
if (
typedefs.length > classes.length ||
members.length + methods.length > 0
) {
nav.push({
type: 'module',
longname: v.longname,
@@ -275,12 +302,12 @@ function buildNav(members) {
methods: methods,
typedefs: typedefs,
fires: v.fires,
events: events
events: events,
});
}
});
nav.sort(function(a, b) {
nav.sort(function (a, b) {
const prettyNameA = a.prettyname.toLowerCase();
const prettyNameB = b.prettyname.toLowerCase();
if (prettyNameA > prettyNameB) {
@@ -294,13 +321,12 @@ function buildNav(members) {
return nav;
}
/**
* @param {Object} taffyData See <http://taffydb.com/>.
* @param {Object} opts Options.
* @param {Object} tutorials Tutorials.
*/
exports.publish = function(taffyData, opts, tutorials) {
exports.publish = function (taffyData, opts, tutorials) {
data = taffyData;
const conf = env.conf.templates || {};
@@ -329,26 +355,30 @@ exports.publish = function(taffyData, opts, tutorials) {
let sourceFiles = {};
const sourceFilePaths = [];
data().each(function(doclet) {
data().each(function (doclet) {
doclet.attribs = '';
if (doclet.examples) {
doclet.examples = doclet.examples.map(function(example) {
doclet.examples = doclet.examples.map(function (example) {
let caption, code;
if (example.match(/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i)) {
if (
example.match(
/^\s*<caption>([\s\S]+?)<\/caption>(\s*[\n\r])([\s\S]+)$/i
)
) {
caption = RegExp.$1;
code = RegExp.$3;
}
return {
caption: caption || '',
code: code || example
code: code || example,
};
});
}
if (doclet.see) {
doclet.see.forEach(function(seeItem, i) {
doclet.see.forEach(function (seeItem, i) {
doclet.see[i] = hashToLink(doclet, seeItem);
});
}
@@ -361,7 +391,7 @@ exports.publish = function(taffyData, opts, tutorials) {
resolvedSourcePath = resolveSourcePath(sourcePath);
sourceFiles[sourcePath] = {
resolved: resolvedSourcePath,
shortened: null
shortened: null,
};
sourceFilePaths.push(resolvedSourcePath);
}
@@ -373,7 +403,7 @@ exports.publish = function(taffyData, opts, tutorials) {
const fromDir = path.join(templatePath, 'static');
const staticFiles = fs.ls(fromDir, 3);
staticFiles.forEach(function(fileName) {
staticFiles.forEach(function (fileName) {
const toDir = fs.toDir(fileName.replace(fromDir, outdir));
fs.mkPath(toDir);
fs.copyFileSync(fileName, toDir);
@@ -385,15 +415,22 @@ exports.publish = function(taffyData, opts, tutorials) {
let staticFileScanner;
if (conf['default'].staticFiles) {
staticFilePaths = conf['default'].staticFiles.paths || [];
staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter')).Filter(conf['default'].staticFiles);
staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner')).Scanner();
staticFileFilter = new (require('jsdoc/lib/jsdoc/src/filter').Filter)(
conf['default'].staticFiles
);
staticFileScanner = new (require('jsdoc/lib/jsdoc/src/scanner').Scanner)();
staticFilePaths.forEach(function(filePath) {
const extraStaticFiles = staticFileScanner.scan([filePath], 10, staticFileFilter);
staticFilePaths.forEach(function (filePath) {
const extraStaticFiles = staticFileScanner.scan(
[filePath],
10,
staticFileFilter
);
extraStaticFiles.forEach(function(fileName) {
const sourcePath = fs.statSync(filePath).isDirectory() ? filePath :
path.dirname(filePath);
extraStaticFiles.forEach(function (fileName) {
const sourcePath = fs.statSync(filePath).isDirectory()
? filePath
: path.dirname(filePath);
const toDir = fs.toDir(fileName.replace(sourcePath, outdir));
fs.mkPath(toDir);
fs.copyFileSync(fileName, toDir);
@@ -404,7 +441,7 @@ exports.publish = function(taffyData, opts, tutorials) {
if (sourceFilePaths.length) {
sourceFiles = shortenPaths(sourceFiles, path.commonPrefix(sourceFilePaths));
}
data().each(function(doclet) {
data().each(function (doclet) {
const url = helper.createLink(doclet);
helper.registerLink(doclet.longname, url);
@@ -419,7 +456,7 @@ exports.publish = function(taffyData, opts, tutorials) {
}
});
data().each(function(doclet) {
data().each(function (doclet) {
const url = helper.longnameToUrl[doclet.longname];
if (url.indexOf('#') > -1) {
@@ -435,7 +472,7 @@ exports.publish = function(taffyData, opts, tutorials) {
});
// do this after the urls have all been generated
data().each(function(doclet) {
data().each(function (doclet) {
doclet.ancestors = getAncestorLinks(doclet);
if (doclet.kind === 'member') {
@@ -461,8 +498,10 @@ exports.publish = function(taffyData, opts, tutorials) {
// once for all
view.nav = buildNav(members);
attachModuleSymbols(find({kind: ['class', 'function'], longname: {left: 'module:'}}),
members.modules);
attachModuleSymbols(
find({kind: ['class', 'function'], longname: {left: 'module:'}}),
members.modules
);
// only output pretty-printed source files if requested; do this before generating any other
// pages, so the other pages can link to the source files
@@ -478,9 +517,17 @@ exports.publish = function(taffyData, opts, tutorials) {
const files = find({kind: 'file'});
view.navigationHtml = helper.resolveLinks(view.partial('navigation.tmpl'));
generate('Index',
[{kind: 'mainpage', readme: opts.readme, longname: (opts.mainpagetitle) ? opts.mainpagetitle : 'Main Page'}].concat(files),
indexUrl);
generate(
'Index',
[
{
kind: 'mainpage',
readme: opts.readme,
longname: opts.mainpagetitle ? opts.mainpagetitle : 'Main Page',
},
].concat(files),
indexUrl
);
// set up the lists that we'll use to generate pages
const classes = taffy(members.classes);
@@ -493,27 +540,47 @@ exports.publish = function(taffyData, opts, tutorials) {
if (hasOwnProp.call(helper.longnameToUrl, longname)) {
const myClasses = helper.find(classes, {longname: longname});
if (myClasses.length) {
generate('Class: ' + myClasses[0].name, myClasses, helper.longnameToUrl[longname]);
generate(
'Class: ' + myClasses[0].name,
myClasses,
helper.longnameToUrl[longname]
);
}
const myModules = helper.find(modules, {longname: longname});
if (myModules.length) {
generate('Module: ' + myModules[0].name, myModules, helper.longnameToUrl[longname]);
generate(
'Module: ' + myModules[0].name,
myModules,
helper.longnameToUrl[longname]
);
}
const myNamespaces = helper.find(namespaces, {longname: longname});
if (myNamespaces.length) {
generate('Namespace: ' + myNamespaces[0].name, myNamespaces, helper.longnameToUrl[longname]);
generate(
'Namespace: ' + myNamespaces[0].name,
myNamespaces,
helper.longnameToUrl[longname]
);
}
const myMixins = helper.find(mixins, {longname: longname});
if (myMixins.length) {
generate('Mixin: ' + myMixins[0].name, myMixins, helper.longnameToUrl[longname]);
generate(
'Mixin: ' + myMixins[0].name,
myMixins,
helper.longnameToUrl[longname]
);
}
const myExternals = helper.find(externals, {longname: longname});
if (myExternals.length) {
generate('External: ' + myExternals[0].name, myExternals, helper.longnameToUrl[longname]);
generate(
'External: ' + myExternals[0].name,
myExternals,
helper.longnameToUrl[longname]
);
}
}
}
@@ -524,7 +591,7 @@ exports.publish = function(taffyData, opts, tutorials) {
title: title,
header: tutorial.title,
content: tutorial.parse(),
children: tutorial.children
children: tutorial.children,
};
let html = view.render('tutorial.tmpl', tutorialData);
@@ -537,8 +604,12 @@ exports.publish = function(taffyData, opts, tutorials) {
// tutorials can have only one parent so there is no risk for loops
function saveChildren(node) {
node.children.forEach(function(child) {
generateTutorial('Tutorial: ' + child.title, child, helper.tutorialToUrl(child.name));
node.children.forEach(function (child) {
generateTutorial(
'Tutorial: ' + child.title,
child,
helper.tutorialToUrl(child.name)
);
saveChildren(child);
});
}

10
config/jsdoc/info/api-plugin.js
View File

@@ -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;
}
},
});
};

12
config/jsdoc/info/define-plugin.js
View File

@@ -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;
}
}
}
},
});
};

237
config/jsdoc/info/publish.js
View File

@@ -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
)
);
});
};

8
config/jsdoc/info/virtual-plugin.js
View File

@@ -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;
}
},
});
};

4
config/webpack-config-legacy-build.js
View File

@@ -8,6 +8,6 @@ module.exports = {
filename: 'ol.js',
library: 'ol',
libraryTarget: 'umd',
libraryExport: 'default'
}
libraryExport: 'default',
},
};

17
examples/accessible.js
View File

@@ -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);

135
examples/animation.js
View File

@@ -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 {

21
examples/arcgis-image.js
View File

@@ -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,
}),
});

19
examples/arcgis-tiled.js
View File

@@ -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,
}),
});

16
examples/attributions.js
View File

@@ -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() {

36
examples/bing-maps.js
View File

@@ -1,38 +1,40 @@
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: '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
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');

35
examples/box-selection.js
View File

@@ -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) {

17
examples/button-title.js
View File

@@ -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',
});

32
examples/canvas-gradient-pattern.js
View File

@@ -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,
}),
});

13
examples/canvas-tiles.js
View File

@@ -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,
}),
});

37
examples/cartodb.js
View File

@@ -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);
});

77
examples/center.js
View File

@@ -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 {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
const source = new VectorSource({
url: 'data/geojson/switzerland.geojson',
format: new GeoJSON()
format: new GeoJSON(),
});
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,
}),
image: new CircleStyle({
radius: 5,
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,
}),
}),
});
const vectorLayer = new VectorLayer({
source: source,
style: style
style: style,
});
const view = new View({
center: [0, 0],
zoom: 1
zoom: 1,
});
const map = new Map({
layers: [
new TileLayer({
source: new OSM()
source: new OSM(),
}),
vectorLayer
vectorLayer,
],
target: 'map',
view: view
view: view,
});
const zoomtoswitzerland =
document.getElementById('zoomtoswitzerland');
zoomtoswitzerland.addEventListener('click', function() {
const feature = source.getFeatures()[0];
const polygon = feature.getGeometry();
view.fit(polygon, {padding: [170, 50, 30, 150]});
}, false);
const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
zoomtoswitzerland.addEventListener(
'click',
function () {
const feature = source.getFeatures()[0];
const polygon = feature.getGeometry();
view.fit(polygon, {padding: [170, 50, 30, 150]});
},
false
);
const zoomtolausanne = document.getElementById('zoomtolausanne');
zoomtolausanne.addEventListener('click', function() {
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
}, false);
zoomtolausanne.addEventListener(
'click',
function () {
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
view.fit(point, {padding: [170, 50, 30, 150], minResolution: 50});
},
false
);
const centerlausanne = document.getElementById('centerlausanne');
centerlausanne.addEventListener('click', function() {
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
const size = map.getSize();
view.centerOn(point.getCoordinates(), size, [570, 500]);
}, false);
centerlausanne.addEventListener(
'click',
function () {
const feature = source.getFeatures()[1];
const point = feature.getGeometry();
const size = map.getSize();
view.centerOn(point.getCoordinates(), size, [570, 500]);
},
false
);

20
examples/chaikin.js
View File

@@ -1,8 +1,8 @@
import Draw from '../src/ol/interaction/Draw.js';
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 Draw from '../src/ol/interaction/Draw.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import smooth from 'chaikin-smooth';
@@ -21,17 +21,17 @@ const map = new Map({
layers: [
new TileLayer({
source: new OSM(),
opacity: 0.5
opacity: 0.5,
}),
new VectorLayer({
source: vectorSource
})
source: vectorSource,
}),
],
target: 'map',
view: new View({
center: [1078373.5950, 6871994.5910],
zoom: 5
})
center: [1078373.595, 6871994.591],
zoom: 5,
}),
});
const shallSmoothen = document.getElementById('shall-smoothen');
@@ -39,10 +39,10 @@ const numIterations = document.getElementById('iterations');
const draw = new Draw({
source: vectorSource,
type: 'LineString'
type: 'LineString',
});
map.addInteraction(draw);
draw.on('drawend', function(event) {
draw.on('drawend', function (event) {
if (!shallSmoothen.checked) {
return;
}

41
examples/cluster.js
View File

@@ -1,11 +1,16 @@
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 View from '../src/ol/View.js';
import {
Circle as CircleStyle,
Fill,
Stroke,
Style,
Text,
} from '../src/ol/style.js';
import {Cluster, OSM, Vector as VectorSource} from '../src/ol/source.js';
import {Circle as CircleStyle, Fill, Stroke, Style, Text} from '../src/ol/style.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
const distance = document.getElementById('distance');
@@ -18,18 +23,18 @@ for (let i = 0; i < count; ++i) {
}
const source = new VectorSource({
features: features
features: features,
});
const clusterSource = new Cluster({
distance: parseInt(distance.value, 10),
source: source
source: source,
});
const styleCache = {};
const clusters = new VectorLayer({
source: clusterSource,
style: function(feature) {
style: function (feature) {
const size = feature.get('features').length;
let style = styleCache[size];
if (!style) {
@@ -37,27 +42,27 @@ const clusters = new VectorLayer({
image: new CircleStyle({
radius: 10,
stroke: new Stroke({
color: '#fff'
color: '#fff',
}),
fill: new Fill({
color: '#3399CC'
})
color: '#3399CC',
}),
}),
text: new Text({
text: size.toString(),
fill: new Fill({
color: '#fff'
})
})
color: '#fff',
}),
}),
});
styleCache[size] = style;
}
return style;
}
},
});
const raster = new TileLayer({
source: new OSM()
source: new OSM(),
});
const map = new Map({
@@ -65,10 +70,10 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
distance.addEventListener('input', function() {
distance.addEventListener('input', function () {
clusterSource.setDistance(parseInt(distance.value, 10));
});

59
examples/color-manipulation.js
View File

@@ -1,23 +1,21 @@
import ImageLayer from '../src/ol/layer/Image.js';
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import ImageLayer from '../src/ol/layer/Image.js';
import {Raster as RasterSource, Stamen} from '../src/ol/source.js';
/**
* Color manipulation functions below are adapted from
* https://github.com/d3/d3-color.
*/
const Xn = 0.950470;
const Xn = 0.95047;
const Yn = 1;
const Zn = 1.088830;
const Zn = 1.08883;
const t0 = 4 / 29;
const t1 = 6 / 29;
const t2 = 3 * t1 * t1;
const t3 = t1 * t1 * t1;
const twoPi = 2 * Math.PI;
/**
* Convert an RGB pixel into an HCL pixel.
* @param {Array<number>} 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<number>} 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();
});

25
examples/custom-controls.js
View File

@@ -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,
}),
});

78
examples/custom-interactions.js
View File

@@ -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,
}),
});

41
examples/d3.js vendored
View File

@@ -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);

19
examples/device-orientation.js
View File

@@ -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);

60
examples/disable-image-smoothing.js
View File

@@ -1,10 +1,11 @@
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 key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
const disabledLayer = new TileLayer({
@@ -12,11 +13,12 @@ const disabledLayer = new TileLayer({
className: 'ol-layer-dem',
source: new XYZ({
attributions: attributions,
url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
url:
'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
maxZoom: 10,
crossOrigin: '',
imageSmoothing: false
})
imageSmoothing: false,
}),
});
const imagery = new TileLayer({
@@ -25,30 +27,36 @@ const imagery = new TileLayer({
attributions: attributions,
url: 'https://api.maptiler.com/tiles/satellite/{z}/{x}/{y}.jpg?key=' + key,
maxZoom: 20,
crossOrigin: ''
})
crossOrigin: '',
}),
});
const enabledLayer = new TileLayer({
source: new XYZ({
attributions: attributions,
url: 'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
url:
'https://api.maptiler.com/tiles/terrain-rgb/{z}/{x}/{y}.png?key=' + key,
maxZoom: 10,
crossOrigin: ''
})
crossOrigin: '',
}),
});
imagery.on('prerender', function(evt) {
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);
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() {
control.addEventListener('input', function () {
output.innerText = control.value;
imagery.setOpacity(control.value / 100);
});
@@ -58,50 +66,52 @@ imagery.setOpacity(control.value / 100);
const view = new View({
center: [6.893, 45.8295],
zoom: 16,
projection: 'EPSG:4326'
projection: 'EPSG:4326',
});
const map1 = new Map({
target: 'map1',
layers: [disabledLayer, imagery],
view: view
view: view,
});
const map2 = new Map({
target: 'map2',
layers: [enabledLayer],
view: view
view: view,
});
const info1 = document.getElementById('info1');
const info2 = document.getElementById('info2');
const showElevations = function(evt) {
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;
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) {
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;
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) {
layerFilter: function (layer) {
return layer === enabledLayer;
}
},
}
);
};

56
examples/drag-and-drop-image-vector.js
View File

@@ -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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
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);
});

51
examples/drag-and-drop.js
View File

@@ -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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
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);
});

22
examples/drag-rotate-and-zoom.js
View File

@@ -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,
}),
});

29
examples/draw-and-modify-features.js
View File

@@ -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();

17
examples/draw-features.js
View File

@@ -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();
};

17
examples/draw-freehand.js
View File

@@ -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();
};

26
examples/draw-shapes.js
View File

@@ -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();
};

34
examples/dynamic-data.js
View File

@@ -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);

93
examples/earthquake-clusters.js
View File

@@ -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,
}),
});

57
examples/earthquake-custom-symbol.js
View File

@@ -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-violating <magnitude> tag 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,
}),
});

24
examples/edit-geographic.js
View File

@@ -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() {

21
examples/epsg-4326.js
View File

@@ -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,
}),
});

14
examples/es2015-custom-element.js
View File

@@ -1,10 +1,9 @@
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';
class OLComponent extends HTMLElement {
constructor() {
super();
this.shadow = this.attachShadow({mode: 'open'});
@@ -28,15 +27,14 @@ class OLComponent extends HTMLElement {
target: div,
layers: [
new TileLayer({
source: new OSM()
})
source: new OSM(),
}),
],
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
}
}

51
examples/export-map.js
View File

@@ -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');

126
examples/export-pdf.js
View File

@@ -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
);

15
examples/extent-constrained.js
View File

@@ -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()]),
});

22
examples/extent-interaction.js
View File

@@ -1,29 +1,29 @@
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';
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();
@@ -31,12 +31,12 @@ map.addInteraction(extent);
extent.setActive(false);
//Enable interaction by holding shift
window.addEventListener('keydown', function(event) {
window.addEventListener('keydown', function (event) {
if (event.keyCode == 16) {
extent.setActive(true);
}
});
window.addEventListener('keyup', function(event) {
window.addEventListener('keyup', function (event) {
if (event.keyCode == 16) {
extent.setActive(false);
}

32
examples/feature-animation.js
View File

@@ -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);
});

86
examples/feature-move-animation.js
View File

@@ -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<import("../src/ol/geom/Point").default> */(new Feature({
type: 'geoMarker',
geometry: new Point(routeCoords[0])
}));
const geoMarker = /** @type Feature<import("../src/ol/geom/Point").default> */ (new Feature(
{
type: 'geoMarker',
geometry: new Point(routeCoords[0]),
}
));
const startMarker = new Feature({
type: 'icon',
geometry: new Point(routeCoords[0])
geometry: new Point(routeCoords[0]),
});
const endMarker = new Feature({
type: 'icon',
geometry: new Point(routeCoords[routeLength - 1])
geometry: new Point(routeCoords[routeLength - 1]),
});
const styles = {
'route': new Style({
stroke: new Stroke({
width: 6, color: [237, 212, 0, 0.8]
})
width: 6,
color: [237, 212, 0, 0.8],
}),
}),
'icon': new Style({
image: new Icon({
anchor: [0.5, 1],
src: 'data/icon.png'
})
src: 'data/icon.png',
}),
}),
'geoMarker': new Style({
image: new CircleStyle({
radius: 7,
fill: new Fill({color: 'black'}),
stroke: new Stroke({
color: 'white', width: 2
})
})
})
color: 'white',
width: 2,
}),
}),
}),
};
let animating = false;
@@ -110,19 +122,20 @@ const startButton = document.getElementById('start-animation');
const vectorLayer = new VectorLayer({
source: new VectorSource({
features: [routeFeature, geoMarker, startMarker, endMarker]
features: [routeFeature, geoMarker, startMarker, endMarker],
}),
style: function(feature) {
style: function (feature) {
// hide geoMarker if animation is active
if (animating && feature.get('type') === 'geoMarker') {
return null;
}
return styles[feature.get('type')];
}
},
});
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
const center = [-5639523.95, -3501274.52];
@@ -132,21 +145,21 @@ const map = new Map({
center: center,
zoom: 10,
minZoom: 2,
maxZoom: 19
maxZoom: 19,
}),
layers: [
new TileLayer({
source: new XYZ({
attributions: attributions,
url: 'https://api.maptiler.com/maps/hybrid/{z}/{x}/{y}.jpg?key=' + key,
tileSize: 512
})
tileSize: 512,
}),
}),
vectorLayer
]
vectorLayer,
],
});
const moveFeature = function(event) {
const moveFeature = function (event) {
const vectorContext = getVectorContext(event);
const frameState = event.frameState;
@@ -154,7 +167,7 @@ const moveFeature = function(event) {
const elapsedTime = frameState.time - now;
// here the trick to increase speed is to jump some indexes
// on lineString coordinates
const index = Math.round(speed * elapsedTime / 1000);
const index = Math.round((speed * elapsedTime) / 1000);
if (index >= routeLength) {
stopAnimation(true);
@@ -186,7 +199,6 @@ function startAnimation() {
}
}
/**
* @param {boolean} ended end of animation.
*/

89
examples/filter-points-webgl.js
View File

@@ -1,61 +1,54 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/Map.js';
import Point from '../src/ol/geom/Point.js';
import Stamen from '../src/ol/source/Stamen.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 {Vector} from '../src/ol/source.js';
import {fromLonLat} from '../src/ol/proj.js';
import Stamen from '../src/ol/source/Stamen.js';
import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
const vectorSource = new Vector({
attributions: 'NASA'
attributions: 'NASA',
});
const oldColor = 'rgba(242,56,22,0.61)';
const newColor = '#ffe52c';
const period = 12; // animation period in seconds
const animRatio =
['^',
['/',
['%',
['+',
['time'],
[
'interpolate',
['linear'],
['get', 'year'],
1850, 0,
2015, period
]
],
period
const animRatio = [
'^',
[
'/',
[
'%',
[
'+',
['time'],
['interpolate', ['linear'], ['get', 'year'], 1850, 0, 2015, period],
],
period
period,
],
0.5
];
period,
],
0.5,
];
const style = {
variables: {
minYear: 1850,
maxYear: 2015
maxYear: 2015,
},
filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
symbol: {
symbolType: 'circle',
size: ['*',
size: [
'*',
['interpolate', ['linear'], ['get', 'mass'], 0, 8, 200000, 26],
['-', 1.75, ['*', animRatio, 0.75]]
['-', 1.75, ['*', animRatio, 0.75]],
],
color: ['interpolate',
['linear'],
animRatio,
0, newColor,
1, oldColor
],
opacity: ['-', 1.0, ['*', animRatio, 0.75]]
}
color: ['interpolate', ['linear'], animRatio, 0, newColor, 1, oldColor],
opacity: ['-', 1.0, ['*', animRatio, 0.75]],
},
};
// handle input values & events
@@ -85,7 +78,7 @@ updateStatusText();
// load data
const client = new XMLHttpRequest();
client.open('GET', 'data/csv/meteorite_landings.csv');
client.onload = function() {
client.onload = function () {
const csv = client.responseText;
const features = [];
@@ -102,11 +95,13 @@ client.onload = function() {
continue;
}
features.push(new Feature({
mass: parseFloat(line[1]) || 0,
year: parseInt(line[2]) || 0,
geometry: new Point(coords)
}));
features.push(
new Feature({
mass: parseFloat(line[1]) || 0,
year: parseInt(line[2]) || 0,
geometry: new Point(coords),
})
);
}
vectorSource.addFeatures(features);
@@ -117,20 +112,20 @@ const map = new Map({
layers: [
new TileLayer({
source: new Stamen({
layer: 'toner'
})
layer: 'toner',
}),
}),
new WebGLPointsLayer({
style: style,
source: vectorSource,
disableHitDetection: true
})
disableHitDetection: true,
}),
],
target: document.getElementById('map'),
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
// animate the map

92
examples/flight-animation.js
View File

@@ -1,79 +1,81 @@
import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import LineString from '../src/ol/geom/LineString.js';
import {Tile as TileLayer, Vector as VectorLayer} 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 {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';
const tileLayer = new TileLayer({
source: new Stamen({
layer: 'toner'
})
layer: 'toner',
}),
});
const map = new Map({
layers: [
tileLayer
],
layers: [tileLayer],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
const style = new Style({
stroke: new Stroke({
color: '#EAE911',
width: 2
})
width: 2,
}),
});
const flightsSource = new VectorSource({
wrapX: false,
attributions: 'Flight data by ' +
'<a href="http://openflights.org/data.html">OpenFlights</a>,',
loader: function() {
attributions:
'Flight data by ' +
'<a href="http://openflights.org/data.html">OpenFlights</a>,',
loader: function () {
const url = 'data/openflights/flights.json';
fetch(url).then(function(response) {
return response.json();
}).then(function(json) {
const flightsData = json.flights;
for (let i = 0; i < flightsData.length; i++) {
const flight = flightsData[i];
const from = flight[0];
const to = flight[1];
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
const flightsData = json.flights;
for (let i = 0; i < flightsData.length; i++) {
const flight = flightsData[i];
const from = flight[0];
const to = flight[1];
// create an arc circle between the two locations
const arcGenerator = new arc.GreatCircle(
{x: from[1], y: from[0]},
{x: to[1], y: to[0]});
// create an arc circle between the two locations
const arcGenerator = new arc.GreatCircle(
{x: from[1], y: from[0]},
{x: to[1], y: to[0]}
);
const arcLine = arcGenerator.Arc(100, {offset: 10});
if (arcLine.geometries.length === 1) {
const line = new LineString(arcLine.geometries[0].coords);
line.transform('EPSG:4326', 'EPSG:3857');
const arcLine = arcGenerator.Arc(100, {offset: 10});
if (arcLine.geometries.length === 1) {
const line = new LineString(arcLine.geometries[0].coords);
line.transform('EPSG:4326', 'EPSG:3857');
const feature = new Feature({
geometry: line,
finished: false
});
// add the feature with a delay so that the animation
// for all features does not start at the same time
addLater(feature, i * 50);
const feature = new Feature({
geometry: line,
finished: false,
});
// add the feature with a delay so that the animation
// for all features does not start at the same time
addLater(feature, i * 50);
}
}
}
tileLayer.on('postrender', animateFlights);
});
}
tileLayer.on('postrender', animateFlights);
});
},
});
const flightsLayer = new VectorLayer({
source: flightsSource,
style: function(feature) {
style: function (feature) {
// if the animation is still active for a feature, do not
// render the feature with the layer style
if (feature.get('finished')) {
@@ -81,7 +83,7 @@ const flightsLayer = new VectorLayer({
} else {
return null;
}
}
},
});
map.addLayer(flightsLayer);
@@ -117,7 +119,7 @@ function animateFlights(event) {
}
function addLater(feature, timeout) {
window.setTimeout(function() {
window.setTimeout(function () {
feature.set('start', new Date().getTime());
flightsSource.addFeature(feature);
}, timeout);

31
examples/fractal.js
View File

@@ -1,9 +1,9 @@
import Feature from '../src/ol/Feature.js';
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import LineString from '../src/ol/geom/LineString.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';
const radius = 10e6;
const cos30 = Math.cos(Math.PI / 6);
@@ -12,15 +12,18 @@ const rise = radius * sin30;
const run = radius * cos30;
const triangle = new LineString([
[0, radius], [run, -rise], [-run, -rise], [0, radius]
[0, radius],
[run, -rise],
[-run, -rise],
[0, radius],
]);
const feature = new Feature(triangle);
const layer = new VectorLayer({
source: new VectorSource({
features: [feature]
})
features: [feature],
}),
});
const map = new Map({
@@ -28,8 +31,8 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 1
})
zoom: 1,
}),
});
function makeFractal(depth) {
@@ -59,19 +62,19 @@ function injectNodes(startNode) {
// first point at 1/3 along the segment
const firstNode = {
point: [start[0] + dx / 3, start[1] + dy / 3]
point: [start[0] + dx / 3, start[1] + dy / 3],
};
// second point at peak of _/\_
const r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
const a = Math.atan2(dy, dx) + Math.PI / 6;
const secondNode = {
point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)],
};
// third point at 2/3 along the segment
const thirdNode = {
point: [end[0] - dx / 3, end[1] - dy / 3]
point: [end[0] - dx / 3, end[1] - dy / 3],
};
startNode.next = firstNode;
@@ -80,15 +83,14 @@ function injectNodes(startNode) {
thirdNode.next = endNode;
}
function coordsToGraph(coordinates) {
const graph = {
point: coordinates[0]
point: coordinates[0],
};
const length = coordinates.length;
for (let level = 0, node = graph; level < length - 1; ++level) {
node.next = {
point: coordinates[level + 1]
point: coordinates[level + 1],
};
node = node.next;
}
@@ -111,12 +113,11 @@ function update() {
let updateTimer;
/**
* Regenerate fractal on depth change. Change events are debounced so updates
* only occur every 200ms.
*/
depthInput.onchange = function() {
depthInput.onchange = function () {
window.clearTimeout(updateTimer);
updateTimer = window.setTimeout(update, 200);
};

34
examples/full-screen-drag-rotate-and-zoom.js
View File

@@ -1,35 +1,35 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
import {defaults as defaultInteractions, DragRotateAndZoom} from '../src/ol/interaction.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
import XYZ from '../src/ol/source/XYZ.js';
import {
DragRotateAndZoom,
defaults as defaultInteractions,
} from '../src/ol/interaction.js';
import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
const map = new Map({
controls: defaultControls().extend([
new FullScreen()
]),
interactions: defaultInteractions().extend([
new DragRotateAndZoom()
]),
controls: defaultControls().extend([new FullScreen()]),
interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
layers: [
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: [-33519607, 5616436],
rotation: -Math.PI / 8,
zoom: 8
})
zoom: 8,
}),
});

19
examples/full-screen-source.js
View File

@@ -1,26 +1,25 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {defaults as defaultControls, FullScreen} 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 {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
const view = new View({
center: [-9101767, 2822912],
zoom: 14
zoom: 14,
});
const map = new Map({
controls: defaultControls().extend([
new FullScreen({
source: 'fullscreen'
})
source: 'fullscreen',
}),
]),
layers: [
new TileLayer({
source: new OSM()
})
source: new OSM(),
}),
],
target: 'map',
view: view
view: view,
});

25
examples/full-screen.js
View File

@@ -1,32 +1,31 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import {defaults as defaultControls, FullScreen} from '../src/ol/control.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
import XYZ from '../src/ol/source/XYZ.js';
import {FullScreen, defaults as defaultControls} from '../src/ol/control.js';
const view = new View({
center: [-9101767, 2822912],
zoom: 14
zoom: 14,
});
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
const map = new Map({
controls: defaultControls().extend([
new FullScreen()
]),
controls: defaultControls().extend([new FullScreen()]),
layers: [
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: view
view: view,
});

38
examples/geographic.js
View File

@@ -1,9 +1,9 @@
import {useGeographic} from '../src/ol/proj.js';
import {Map, View, Feature, Overlay} from '../src/ol/index.js';
import {Point} from '../src/ol/geom.js';
import {Vector as VectorLayer, Tile as TileLayer} from '../src/ol/layer.js';
import {Circle, Fill, Style} from '../src/ol/style.js';
import {Feature, Map, Overlay, View} from '../src/ol/index.js';
import {OSM, Vector as VectorSource} from '../src/ol/source.js';
import {Style, Circle, Fill} from '../src/ol/style.js';
import {Point} from '../src/ol/geom.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {useGeographic} from '../src/ol/proj.js';
useGeographic();
@@ -15,26 +15,24 @@ const map = new Map({
target: 'map',
view: new View({
center: place,
zoom: 8
zoom: 8,
}),
layers: [
new TileLayer({
source: new OSM()
source: new OSM(),
}),
new VectorLayer({
source: new VectorSource({
features: [
new Feature(point)
]
features: [new Feature(point)],
}),
style: new Style({
image: new Circle({
radius: 9,
fill: new Fill({color: 'red'})
})
})
})
]
fill: new Fill({color: 'red'}),
}),
}),
}),
],
});
const element = document.getElementById('popup');
@@ -43,7 +41,7 @@ const popup = new Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
offset: [0, -10]
offset: [0, -10],
});
map.addOverlay(popup);
@@ -58,13 +56,13 @@ function formatCoordinate(coordinate) {
}
const info = document.getElementById('info');
map.on('moveend', function() {
map.on('moveend', function () {
const view = map.getView();
const center = view.getCenter();
info.innerHTML = formatCoordinate(center);
});
map.on('click', function(event) {
map.on('click', function (event) {
const feature = map.getFeaturesAtPixel(event.pixel)[0];
if (feature) {
const coordinate = feature.getGeometry().getCoordinates();
@@ -72,7 +70,7 @@ map.on('click', function(event) {
$(element).popover({
placement: 'top',
html: true,
content: formatCoordinate(coordinate)
content: formatCoordinate(coordinate),
});
$(element).popover('show');
} else {
@@ -80,7 +78,7 @@ map.on('click', function(event) {
}
});
map.on('pointermove', function(event) {
map.on('pointermove', function (event) {
if (map.hasFeatureAtPixel(event.pixel)) {
map.getViewport().style.cursor = 'pointer';
} else {

92
examples/geojson-vt.js
View File

@@ -1,13 +1,16 @@
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 OSM from '../src/ol/source/OSM.js';
import VectorTileSource from '../src/ol/source/VectorTile.js';
import {Tile as TileLayer, VectorTile as VectorTileLayer} from '../src/ol/layer.js';
import Projection from '../src/ol/proj/Projection.js';
import VectorTileSource from '../src/ol/source/VectorTile.js';
import View from '../src/ol/View.js';
import {
Tile as TileLayer,
VectorTile as VectorTileLayer,
} from '../src/ol/layer.js';
// Converts geojson-vt data to GeoJSON
const replacer = function(key, value) {
const replacer = function (key, value) {
if (value.geometry) {
let type;
const rawType = value.type;
@@ -37,9 +40,9 @@ const replacer = function(key, value) {
'type': 'Feature',
'geometry': {
'type': type,
'coordinates': geometry
'coordinates': geometry,
},
'properties': value.tags
'properties': value.tags,
};
} else {
return value;
@@ -49,44 +52,53 @@ const replacer = function(key, value) {
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,
}),
});
const url = 'data/geojson/countries.geojson';
fetch(url).then(function(response) {
return response.json();
}).then(function(json) {
const tileIndex = geojsonvt(json, {
extent: 4096,
debug: 1
fetch(url)
.then(function (response) {
return response.json();
})
.then(function (json) {
const tileIndex = geojsonvt(json, {
extent: 4096,
debug: 1,
});
const vectorSource = new VectorTileSource({
format: new GeoJSON({
// Data returned from geojson-vt is in tile pixel units
dataProjection: new Projection({
code: 'TILE_PIXELS',
units: 'tile-pixels',
extent: [0, 0, 4096, 4096],
}),
}),
tileUrlFunction: function (tileCoord) {
const data = tileIndex.getTile(
tileCoord[0],
tileCoord[1],
tileCoord[2]
);
const geojson = JSON.stringify(
{
type: 'FeatureCollection',
features: data ? data.features : [],
},
replacer
);
return 'data:application/json;charset=UTF-8,' + geojson;
},
});
const vectorLayer = new VectorTileLayer({
source: vectorSource,
});
map.addLayer(vectorLayer);
});
const vectorSource = new VectorTileSource({
format: new GeoJSON({
// Data returned from geojson-vt is in tile pixel units
dataProjection: new Projection({
code: 'TILE_PIXELS',
units: 'tile-pixels',
extent: [0, 0, 4096, 4096]
})
}),
tileUrlFunction: function(tileCoord) {
const data = tileIndex.getTile(tileCoord[0], tileCoord[1], tileCoord[2]);
const geojson = JSON.stringify({
type: 'FeatureCollection',
features: data ? data.features : []
}, replacer);
return 'data:application/json;charset=UTF-8,' + geojson;
}
});
const vectorLayer = new VectorTileLayer({
source: vectorSource
});
map.addLayer(vectorLayer);
});

255
examples/geojson.js
View File

@@ -1,85 +1,84 @@
import Circle from '../src/ol/geom/Circle.js';
import Feature from '../src/ol/Feature.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 Circle from '../src/ol/geom/Circle.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';
const image = new CircleStyle({
radius: 5,
fill: null,
stroke: new Stroke({color: 'red', width: 1})
stroke: new Stroke({color: 'red', width: 1}),
});
const styles = {
'Point': new Style({
image: image
image: image,
}),
'LineString': new Style({
stroke: new Stroke({
color: 'green',
width: 1
})
width: 1,
}),
}),
'MultiLineString': new Style({
stroke: new Stroke({
color: 'green',
width: 1
})
width: 1,
}),
}),
'MultiPoint': new Style({
image: image
image: image,
}),
'MultiPolygon': new Style({
stroke: new Stroke({
color: 'yellow',
width: 1
width: 1,
}),
fill: new Fill({
color: 'rgba(255, 255, 0, 0.1)'
})
color: 'rgba(255, 255, 0, 0.1)',
}),
}),
'Polygon': new Style({
stroke: new Stroke({
color: 'blue',
lineDash: [4],
width: 3
width: 3,
}),
fill: new Fill({
color: 'rgba(0, 0, 255, 0.1)'
})
color: 'rgba(0, 0, 255, 0.1)',
}),
}),
'GeometryCollection': new Style({
stroke: new Stroke({
color: 'magenta',
width: 2
width: 2,
}),
fill: new Fill({
color: 'magenta'
color: 'magenta',
}),
image: new CircleStyle({
radius: 10,
fill: null,
stroke: new Stroke({
color: 'magenta'
})
})
color: 'magenta',
}),
}),
}),
'Circle': new Style({
stroke: new Stroke({
color: 'red',
width: 2
width: 2,
}),
fill: new Fill({
color: 'rgba(255,0,0,0.2)'
})
})
color: 'rgba(255,0,0,0.2)',
}),
}),
};
const styleFunction = function(feature) {
const styleFunction = function (feature) {
return styles[feature.getGeometry().getType()];
};
@@ -88,93 +87,159 @@ const geojsonObject = {
'crs': {
'type': 'name',
'properties': {
'name': 'EPSG:3857'
}
'name': 'EPSG:3857',
},
},
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, -2e6], [8e6, 2e6]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, 2e6], [8e6, -2e6]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, -1e6], [-4e6, 1e6], [-3e6, -1e6]]]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiLineString',
'coordinates': [
[[-1e6, -7.5e5], [-1e6, 7.5e5]],
[[1e6, -7.5e5], [1e6, 7.5e5]],
[[-7.5e5, -1e6], [7.5e5, -1e6]],
[[-7.5e5, 1e6], [7.5e5, 1e6]]
]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiPolygon',
'coordinates': [
[[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6], [-3e6, 6e6]]],
[[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6], [0, 6e6]]],
[[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
]
}
}, {
'type': 'Feature',
'geometry': {
'type': 'GeometryCollection',
'geometries': [{
'type': 'LineString',
'coordinates': [[-5e6, -5e6], [0, -5e6]]
}, {
'features': [
{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [4e6, -5e6]
}, {
'coordinates': [0, 0],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [
[4e6, -2e6],
[8e6, 2e6],
],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [
[4e6, 2e6],
[8e6, -2e6],
],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
}]
}
}]
'coordinates': [
[
[-5e6, -1e6],
[-4e6, 1e6],
[-3e6, -1e6],
],
],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'MultiLineString',
'coordinates': [
[
[-1e6, -7.5e5],
[-1e6, 7.5e5],
],
[
[1e6, -7.5e5],
[1e6, 7.5e5],
],
[
[-7.5e5, -1e6],
[7.5e5, -1e6],
],
[
[-7.5e5, 1e6],
[7.5e5, 1e6],
],
],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'MultiPolygon',
'coordinates': [
[
[
[-5e6, 6e6],
[-5e6, 8e6],
[-3e6, 8e6],
[-3e6, 6e6],
],
],
[
[
[-2e6, 6e6],
[-2e6, 8e6],
[0, 8e6],
[0, 6e6],
],
],
[
[
[1e6, 6e6],
[1e6, 8e6],
[3e6, 8e6],
[3e6, 6e6],
],
],
],
},
},
{
'type': 'Feature',
'geometry': {
'type': 'GeometryCollection',
'geometries': [
{
'type': 'LineString',
'coordinates': [
[-5e6, -5e6],
[0, -5e6],
],
},
{
'type': 'Point',
'coordinates': [4e6, -5e6],
},
{
'type': 'Polygon',
'coordinates': [
[
[1e6, -6e6],
[2e6, -4e6],
[3e6, -6e6],
],
],
},
],
},
},
],
};
const vectorSource = new VectorSource({
features: (new GeoJSON()).readFeatures(geojsonObject)
features: new GeoJSON().readFeatures(geojsonObject),
});
vectorSource.addFeature(new Feature(new Circle([5e6, 7e6], 1e6)));
const vectorLayer = new VectorLayer({
source: vectorSource,
style: styleFunction
style: styleFunction,
});
const map = new Map({
layers: [
new TileLayer({
source: new OSM()
source: new OSM(),
}),
vectorLayer
vectorLayer,
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});

105
examples/geolocation-orientation.js
View File

@@ -1,27 +1,27 @@
import Geolocation from '../src/ol/Geolocation.js';
import Map from '../src/ol/Map.js';
import Overlay from '../src/ol/Overlay.js';
import View from '../src/ol/View.js';
import LineString from '../src/ol/geom/LineString.js';
import TileLayer from '../src/ol/layer/Tile.js';
import {fromLonLat} from '../src/ol/proj.js';
import Map from '../src/ol/Map.js';
import OSM from '../src/ol/source/OSM.js';
import Overlay from '../src/ol/Overlay.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
import {fromLonLat} from '../src/ol/proj.js';
// creating the view
const view = new View({
center: fromLonLat([5.8713, 45.6452]),
zoom: 19
zoom: 19,
});
const tileLayer = new TileLayer({
source: new OSM()
source: new OSM(),
});
// creating the map
const map = new Map({
layers: [tileLayer],
target: 'map',
view: view
view: view,
});
// Geolocation marker
@@ -29,7 +29,7 @@ const markerEl = document.getElementById('geolocation_marker');
const marker = new Overlay({
positioning: 'center-center',
element: markerEl,
stopEvent: false
stopEvent: false,
});
map.addOverlay(marker);
@@ -44,14 +44,14 @@ const geolocation = new Geolocation({
trackingOptions: {
maximumAge: 10000,
enableHighAccuracy: true,
timeout: 600000
}
timeout: 600000,
},
});
let deltaMean = 500; // the geolocation sampling period mean in ms
// Listen to position changes
geolocation.on('change', function() {
geolocation.on('change', function () {
const position = geolocation.getPosition();
const accuracy = geolocation.getAccuracy();
const heading = geolocation.getHeading() || 0;
@@ -71,27 +71,27 @@ geolocation.on('change', function() {
'Accuracy: ' + accuracy,
'Heading: ' + Math.round(radToDeg(heading)) + '&deg;',
'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
'Delta: ' + Math.round(deltaMean) + 'ms'
'Delta: ' + Math.round(deltaMean) + 'ms',
].join('<br />');
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,
];
}
@@ -153,56 +153,63 @@ function updateView() {
// 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;

57
examples/geolocation.js
View File

@@ -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],
}),
});

26
examples/getfeatureinfo-image.js
View File

@@ -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' : '';

42
examples/getfeatureinfo-layers.js
View File

@@ -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();
});

24
examples/getfeatureinfo-tile.js
View File

@@ -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' : '';

51
examples/gpx.js
View File

@@ -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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
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);
});

21
examples/graticule.js
View File

@@ -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,
}),
});

26
examples/heatmap-earthquakes.js
View File

@@ -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-violating <magnitude> tag 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);

44
examples/here-maps.js
View File

@@ -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 &copy; ' + new Date().getFullYear() + ' ' +
'<a href="http://developer.here.com">HERE</a>'
layers.push(
new TileLayer({
visible: false,
preload: Infinity,
source: new XYZ({
url: createUrl(urlTpl, layerDesc),
attributions:
'Map Tiles &copy; ' +
new Date().getFullYear() +
' ' +
'<a href="http://developer.here.com">HERE</a>',
}),
})
}));
);
}
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) {

55
examples/hit-tolerance.js
View File

@@ -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 = '&nbsp;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();
};

53
examples/hitdetect-vector.js
View File

@@ -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);
});

72
examples/icon-color.js
View File

@@ -1,72 +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',
imgSize: [20, 20],
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,
}),
});

32
examples/icon-negative.js
View File

@@ -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'
: '';
});

115
examples/icon-sprite-webgl.js
View File

@@ -1,34 +1,37 @@
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 TileJSON from '../src/ol/source/TileJSON.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 {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 =
'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
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'
})
})
url:
'https://api.tiles.mapbox.com/v4/mapbox.world-dark.json?secure&access_token=' +
key,
crossOrigin: 'anonymous',
}),
}),
],
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 +40,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 +56,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 +110,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 +132,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 +150,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.';
});
});

38
examples/icon.js
View File

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

80
examples/igc.js
View File

@@ -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 © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
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');

74
examples/iiif.js
View File

@@ -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);
});

80
examples/image-filter.js
View File

@@ -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 = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
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;

42
examples/image-load-events.js
View File

@@ -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,
}),
});

76
examples/image-vector-layer.js
View File

@@ -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 = '&nbsp;';
}
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 = '&nbsp;';
}
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);
});

22
examples/immediate-geographic.js
View File

@@ -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) {

75
examples/jsts.js
View File

@@ -1,43 +1,62 @@
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 {fromLonLat} from '../src/ol/proj.js';
import LinearRing from '../src/ol/geom/LinearRing.js';
import Map from '../src/ol/Map.js';
import OSM from '../src/ol/source/OSM.js';
import VectorSource from '../src/ol/source/Vector.js';
import LinearRing from '../src/ol/geom/LinearRing.js';
import {Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon} from '../src/ol/geom.js';
import View from '../src/ol/View.js';
import {
LineString,
MultiLineString,
MultiPoint,
MultiPolygon,
Point,
Polygon,
} from '../src/ol/geom.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
import {fromLonLat} from '../src/ol/proj.js';
const source = new VectorSource();
fetch('data/geojson/roads-seoul.geojson').then(function(response) {
return response.json();
}).then(function(json) {
const format = new GeoJSON();
const features = format.readFeatures(json, {featureProjection: 'EPSG:3857'});
fetch('data/geojson/roads-seoul.geojson')
.then(function (response) {
return response.json();
})
.then(function (json) {
const format = new GeoJSON();
const features = format.readFeatures(json, {
featureProjection: 'EPSG:3857',
});
const parser = new jsts.io.OL3Parser();
parser.inject(Point, LineString, LinearRing, Polygon, MultiPoint, MultiLineString, MultiPolygon);
const parser = new jsts.io.OL3Parser();
parser.inject(
Point,
LineString,
LinearRing,
Polygon,
MultiPoint,
MultiLineString,
MultiPolygon
);
for (let i = 0; i < features.length; i++) {
const feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
const jstsGeom = parser.read(feature.getGeometry());
for (let i = 0; i < features.length; i++) {
const feature = features[i];
// convert the OpenLayers geometry to a JSTS geometry
const jstsGeom = parser.read(feature.getGeometry());
// create a buffer of 40 meters around each line
const buffered = jstsGeom.buffer(40);
// create a buffer of 40 meters around each line
const buffered = jstsGeom.buffer(40);
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
// convert back from JSTS and replace the geometry on the feature
feature.setGeometry(parser.write(buffered));
}
source.addFeatures(features);
});
source.addFeatures(features);
});
const vectorLayer = new VectorLayer({
source: source
source: source,
});
const rasterLayer = new TileLayer({
source: new OSM()
source: new OSM(),
});
const map = new Map({
@@ -45,6 +64,6 @@ const map = new Map({
target: document.getElementById('map'),
view: new View({
center: fromLonLat([126.979293, 37.528787]),
zoom: 15
})
zoom: 15,
}),
});

46
examples/kml-earthquakes.js
View File

@@ -1,14 +1,13 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import KML from '../src/ol/format/KML.js';
import {Tile as TileLayer, Vector as VectorLayer} 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 {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
const styleCache = {};
const styleFunction = function(feature) {
const styleFunction = function (feature) {
// 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
// standards-violating <magnitude> tag in each Placemark. We extract it from
// the Placemark's name instead.
@@ -21,13 +20,13 @@ const styleFunction = function(feature) {
image: new CircleStyle({
radius: radius,
fill: new Fill({
color: 'rgba(255, 153, 0, 0.4)'
color: 'rgba(255, 153, 0, 0.4)',
}),
stroke: new Stroke({
color: 'rgba(255, 204, 0, 0.2)',
width: 1
})
})
width: 1,
}),
}),
});
styleCache[radius] = style;
}
@@ -38,16 +37,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({
@@ -55,26 +54,27 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
const info = $('#info');
info.tooltip({
animation: false,
trigger: 'manual'
trigger: 'manual',
});
const displayFeatureInfo = function(pixel) {
const displayFeatureInfo = function (pixel) {
info.css({
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
top: pixel[1] - 15 + 'px',
});
const feature = map.forEachFeatureAtPixel(pixel, function(feature) {
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) {
info.tooltip('hide')
info
.tooltip('hide')
.attr('data-original-title', feature.get('name'))
.tooltip('fixTitle')
.tooltip('show');
@@ -83,7 +83,7 @@ const displayFeatureInfo = function(pixel) {
}
};
map.on('pointermove', function(evt) {
map.on('pointermove', function (evt) {
if (evt.dragging) {
info.tooltip('hide');
return;
@@ -91,6 +91,6 @@ map.on('pointermove', function(evt) {
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
map.on('click', function(evt) {
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});

51
examples/kml-timezones.js
View File

@@ -1,11 +1,10 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import KML from '../src/ol/format/KML.js';
import {Tile as TileLayer, Vector as VectorLayer} 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 {Fill, Stroke, Style} from '../src/ol/style.js';
import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
/*
* Compute the style of the feature. Here we want the opacity of polygons to
@@ -14,7 +13,7 @@ import {Fill, Stroke, Style} from '../src/ol/style.js';
* currently midnight would have an opacity of 0. This doesn't account for
* daylight savings, so don't use it to plan your vacation.
*/
const styleFunction = function(feature) {
const styleFunction = function (feature) {
let offset = 0;
const name = feature.get('name'); // e.g. GMT -08:30
const match = name.match(/([\-+]\d{2}):(\d{2})$/);
@@ -24,21 +23,22 @@ const styleFunction = function(feature) {
offset = 60 * hours + minutes;
}
const date = new Date();
const local = new Date(date.getTime() +
(date.getTimezoneOffset() + offset) * 60000);
const local = new Date(
date.getTime() + (date.getTimezoneOffset() + offset) * 60000
);
// offset from local noon (in hours)
let delta = Math.abs(12 - local.getHours() + (local.getMinutes() / 60));
let delta = Math.abs(12 - local.getHours() + local.getMinutes() / 60);
if (delta > 12) {
delta = 24 - delta;
}
const opacity = 0.75 * (1 - delta / 12);
return new Style({
fill: new Fill({
color: [0xff, 0xff, 0x33, opacity]
color: [0xff, 0xff, 0x33, opacity],
}),
stroke: new Stroke({
color: '#ffffff'
})
color: '#ffffff',
}),
});
};
@@ -46,16 +46,16 @@ const vector = new VectorLayer({
source: new VectorSource({
url: 'data/kml/timezones.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({
@@ -63,26 +63,27 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
const info = $('#info');
info.tooltip({
animation: false,
trigger: 'manual'
trigger: 'manual',
});
const displayFeatureInfo = function(pixel) {
const displayFeatureInfo = function (pixel) {
info.css({
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
top: pixel[1] - 15 + 'px',
});
const feature = map.forEachFeatureAtPixel(pixel, function(feature) {
const feature = map.forEachFeatureAtPixel(pixel, function (feature) {
return feature;
});
if (feature) {
info.tooltip('hide')
info
.tooltip('hide')
.attr('data-original-title', feature.get('name'))
.tooltip('fixTitle')
.tooltip('show');
@@ -91,7 +92,7 @@ const displayFeatureInfo = function(pixel) {
}
};
map.on('pointermove', function(evt) {
map.on('pointermove', function (evt) {
if (evt.dragging) {
info.tooltip('hide');
return;
@@ -99,6 +100,6 @@ map.on('pointermove', function(evt) {
displayFeatureInfo(map.getEventPixel(evt.originalEvent));
});
map.on('click', function(evt) {
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});

31
examples/kml.js
View File

@@ -1,27 +1,28 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import KML from '../src/ol/format/KML.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 {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
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 vector = new VectorLayer({
source: new VectorSource({
url: 'data/kml/2012-02-10.kml',
format: new KML()
})
format: new KML(),
}),
});
const map = new Map({
@@ -30,13 +31,13 @@ const map = new Map({
view: new View({
center: [876970.8463461736, 5859807.853963373],
projection: 'EPSG:3857',
zoom: 10
})
zoom: 10,
}),
});
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) {
@@ -53,7 +54,7 @@ const displayFeatureInfo = function(pixel) {
}
};
map.on('pointermove', function(evt) {
map.on('pointermove', function (evt) {
if (evt.dragging) {
return;
}
@@ -61,6 +62,6 @@ map.on('pointermove', function(evt) {
displayFeatureInfo(pixel);
});
map.on('click', function(evt) {
map.on('click', function (evt) {
displayFeatureInfo(evt.pixel);
});

31
examples/layer-clipping-vector.js
View File

@@ -1,36 +1,35 @@
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 VectorSource from '../src/ol/source/Vector.js';
import GeoJSON from '../src/ol/format/GeoJSON.js';
import Map from '../src/ol/Map.js';
import OSM from '../src/ol/source/OSM.js';
import VectorSource from '../src/ol/source/Vector.js';
import View from '../src/ol/View.js';
import {Fill, Style} from '../src/ol/style.js';
import {getVectorContext} from '../src/ol/render.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 base = new TileLayer({
source: new OSM()
source: new OSM(),
});
const clipLayer = new VectorLayer({
style: null,
source: new VectorSource({
url:
'./data/geojson/switzerland.geojson',
format: new GeoJSON()
})
url: './data/geojson/switzerland.geojson',
format: new GeoJSON(),
}),
});
const style = new Style({
fill: new Fill({
color: 'black'
})
color: 'black',
}),
});
base.on('postrender', function(e) {
base.on('postrender', function (e) {
e.context.globalCompositeOperation = 'destination-in';
const vectorContext = getVectorContext(e);
clipLayer.getSource().forEachFeature(function(feature) {
clipLayer.getSource().forEachFeature(function (feature) {
vectorContext.drawFeature(feature, style);
});
e.context.globalCompositeOperation = 'source-over';
@@ -41,6 +40,6 @@ const map = new Map({
target: 'map',
view: new View({
center: fromLonLat([8.23, 46.86]),
zoom: 7
})
zoom: 7,
}),
});

18
examples/layer-clipping.js
View File

@@ -1,10 +1,10 @@
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 osm = new TileLayer({
source: new OSM()
source: new OSM(),
});
const map = new Map({
@@ -12,16 +12,18 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
osm.on('prerender', function(event) {
osm.on('prerender', function (event) {
const ctx = event.context;
// calculate the pixel ratio and rotation of the canvas
const matrix = event.inversePixelTransform;
const canvasPixelRatio = Math.sqrt(matrix[0] * matrix[0] + matrix[1] * matrix[1]);
const canvasPixelRatio = Math.sqrt(
matrix[0] * matrix[0] + matrix[1] * matrix[1]
);
const canvasRotation = -Math.atan2(matrix[1], matrix[0]);
ctx.save();
// center the canvas and remove rotation to position clipping
@@ -47,7 +49,7 @@ osm.on('prerender', function(event) {
ctx.translate(-ctx.canvas.width / 2, -ctx.canvas.height / 2);
});
osm.on('postrender', function(event) {
osm.on('postrender', function (event) {
const ctx = event.context;
ctx.restore();
});

33
examples/layer-extent.js
View File

@@ -1,8 +1,8 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import {transformExtent} from '../src/ol/proj.js';
import TileJSON from '../src/ol/source/TileJSON.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
import {transformExtent} from '../src/ol/proj.js';
function transform(extent) {
return transformExtent(extent, 'EPSG:4326', 'EPSG:3857');
@@ -12,24 +12,29 @@ const extents = {
India: transform([68.17665, 7.96553, 97.40256, 35.49401]),
Argentina: transform([-73.41544, -55.25, -53.62835, -21.83231]),
Nigeria: transform([2.6917, 4.24059, 14.57718, 13.86592]),
Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625])
Sweden: transform([11.02737, 55.36174, 23.90338, 69.10625]),
};
const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
const key =
'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
const base = new TileLayer({
source: new TileJSON({
url: 'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' + key,
crossOrigin: 'anonymous'
})
url:
'https://api.tiles.mapbox.com/v4/mapbox.world-light.json?secure&access_token=' +
key,
crossOrigin: 'anonymous',
}),
});
const overlay = new TileLayer({
extent: extents.India,
source: new TileJSON({
url: 'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' + key,
crossOrigin: 'anonymous'
})
url:
'https://api.tiles.mapbox.com/v4/mapbox.world-black.json?secure&access_token=' +
key,
crossOrigin: 'anonymous',
}),
});
const map = new Map({
@@ -37,12 +42,12 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 1
})
zoom: 1,
}),
});
for (const key in extents) {
document.getElementById(key).onclick = function(event) {
document.getElementById(key).onclick = function (event) {
overlay.setExtent(extents[event.target.id]);
};
}

57
examples/layer-group.js
View File

@@ -1,62 +1,71 @@
import Map from '../src/ol/Map.js';
import OSM from '../src/ol/source/OSM.js';
import TileJSON from '../src/ol/source/TileJSON.js';
import View from '../src/ol/View.js';
import {Group as LayerGroup, Tile as TileLayer} from '../src/ol/layer.js';
import {fromLonLat} from '../src/ol/proj.js';
import OSM from '../src/ol/source/OSM.js';
import TileJSON from '../src/ol/source/TileJSON.js';
const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
const key =
'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
const map = new Map({
layers: [
new TileLayer({
source: new OSM()
}), new LayerGroup({
source: new OSM(),
}),
new LayerGroup({
layers: [
new TileLayer({
source: new TileJSON({
url: 'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' + key,
crossOrigin: 'anonymous'
})
url:
'https://api.tiles.mapbox.com/v4/mapbox.20110804-hoa-foodinsecurity-3month.json?secure&access_token=' +
key,
crossOrigin: 'anonymous',
}),
}),
new TileLayer({
source: new TileJSON({
url: 'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' + key,
crossOrigin: 'anonymous'
})
})
]
})
url:
'https://api.tiles.mapbox.com/v4/mapbox.world-borders-light.json?secure&access_token=' +
key,
crossOrigin: 'anonymous',
}),
}),
],
}),
],
target: 'map',
view: new View({
center: fromLonLat([37.40570, 8.81566]),
zoom: 4
})
center: fromLonLat([37.4057, 8.81566]),
zoom: 4,
}),
});
function bindInputs(layerid, layer) {
const visibilityInput = $(layerid + ' input.visible');
visibilityInput.on('change', function() {
visibilityInput.on('change', function () {
layer.setVisible(this.checked);
});
visibilityInput.prop('checked', layer.getVisible());
const opacityInput = $(layerid + ' input.opacity');
opacityInput.on('input change', function() {
opacityInput.on('input change', function () {
layer.setOpacity(parseFloat(this.value));
});
opacityInput.val(String(layer.getOpacity()));
}
map.getLayers().forEach(function(layer, i) {
map.getLayers().forEach(function (layer, i) {
bindInputs('#layer' + i, layer);
if (layer instanceof LayerGroup) {
layer.getLayers().forEach(function(sublayer, j) {
layer.getLayers().forEach(function (sublayer, j) {
bindInputs('#layer' + i + j, sublayer);
});
}
});
$('#layertree li > span').click(function() {
$(this).siblings('fieldset').toggle();
}).siblings('fieldset').hide();
$('#layertree li > span')
.click(function () {
$(this).siblings('fieldset').toggle();
})
.siblings('fieldset')
.hide();

40
examples/layer-spy.js
View File

@@ -1,12 +1,13 @@
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';
import {getRenderPixel} from '../src/ol/render.js';
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
const roads = new TileLayer({
@@ -14,16 +15,16 @@ const roads = new TileLayer({
attributions: attributions,
url: 'https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=' + key,
tileSize: 512,
maxZoom: 22
})
maxZoom: 22,
}),
});
const imagery = 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 container = document.getElementById('map');
@@ -33,12 +34,12 @@ const map = new Map({
target: container,
view: new View({
center: fromLonLat([-109, 46.5]),
zoom: 6
})
zoom: 6,
}),
});
let radius = 75;
document.addEventListener('keydown', function(evt) {
document.addEventListener('keydown', function (evt) {
if (evt.which === 38) {
radius = Math.min(radius + 5, 150);
map.render();
@@ -53,28 +54,33 @@ document.addEventListener('keydown', function(evt) {
// get the pixel position with every move
let mousePosition = null;
container.addEventListener('mousemove', function(event) {
container.addEventListener('mousemove', function (event) {
mousePosition = map.getEventPixel(event);
map.render();
});
container.addEventListener('mouseout', function() {
container.addEventListener('mouseout', function () {
mousePosition = null;
map.render();
});
// before rendering the layer, do some clipping
imagery.on('prerender', function(event) {
imagery.on('prerender', function (event) {
const ctx = event.context;
ctx.save();
ctx.beginPath();
if (mousePosition) {
// only show a circle around the mouse
const pixel = getRenderPixel(event, mousePosition);
const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
const canvasRadius = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
const offset = getRenderPixel(event, [
mousePosition[0] + radius,
mousePosition[1],
]);
const canvasRadius = Math.sqrt(
Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
);
ctx.arc(pixel[0], pixel[1], canvasRadius, 0, 2 * Math.PI);
ctx.lineWidth = 5 * canvasRadius / radius;
ctx.lineWidth = (5 * canvasRadius) / radius;
ctx.strokeStyle = 'rgba(0,0,0,0.5)';
ctx.stroke();
}
@@ -82,7 +88,7 @@ imagery.on('prerender', function(event) {
});
// after rendering the layer, restore the canvas context
imagery.on('postrender', function(event) {
imagery.on('postrender', function (event) {
const ctx = event.context;
ctx.restore();
});

31
examples/layer-swipe.js
View File

@@ -1,24 +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';
import XYZ from '../src/ol/source/XYZ.js';
import {getRenderPixel} from '../src/ol/render.js';
const osm = new TileLayer({
source: new OSM()
source: new OSM(),
});
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
const aerial = 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 map = new Map({
@@ -26,13 +27,13 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
const swipe = document.getElementById('swipe');
aerial.on('prerender', function(event) {
aerial.on('prerender', function (event) {
const ctx = event.context;
const mapSize = map.getSize();
const width = mapSize[0] * (swipe.value / 100);
@@ -51,11 +52,15 @@ aerial.on('prerender', function(event) {
ctx.clip();
});
aerial.on('postrender', function(event) {
aerial.on('postrender', function (event) {
const ctx = event.context;
ctx.restore();
});
swipe.addEventListener('input', function() {
map.render();
}, false);
swipe.addEventListener(
'input',
function () {
map.render();
},
false
);

29
examples/layer-z-index.js
View File

@@ -1,12 +1,11 @@
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 VectorLayer from '../src/ol/layer/Vector.js';
import VectorSource from '../src/ol/source/Vector.js';
import View from '../src/ol/View.js';
import {Fill, RegularShape, Stroke, Style} from '../src/ol/style.js';
const stroke = new Stroke({color: 'black', width: 1});
const styles = {
@@ -16,8 +15,8 @@ const styles = {
stroke: stroke,
points: 4,
radius: 80,
angle: Math.PI / 4
})
angle: Math.PI / 4,
}),
}),
'triangle': new Style({
image: new RegularShape({
@@ -26,8 +25,8 @@ const styles = {
points: 3,
radius: 80,
rotation: Math.PI / 4,
angle: 0
})
angle: 0,
}),
}),
'star': new Style({
image: new RegularShape({
@@ -36,22 +35,21 @@ const styles = {
points: 5,
radius: 80,
radius2: 4,
angle: 0
})
})
angle: 0,
}),
}),
};
function createLayer(coordinates, style, zIndex) {
const feature = new Feature(new Point(coordinates));
feature.setStyle(style);
const source = new VectorSource({
features: [feature]
features: [feature],
});
const vectorLayer = new VectorLayer({
source: source
source: source,
});
vectorLayer.setZIndex(zIndex);
@@ -71,16 +69,15 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 18
})
zoom: 18,
}),
});
layer0.setMap(map);
function bindInputs(id, layer) {
const idxInput = document.getElementById('idx' + id);
idxInput.onchange = function() {
idxInput.onchange = function () {
layer.setZIndex(parseInt(this.value, 10) || 0);
};
idxInput.value = String(layer.getZIndex());

23
examples/layer-zoom-limits.js
View File

@@ -1,9 +1,9 @@
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';
import XYZ from '../src/ol/source/XYZ.js';
import {transformExtent, fromLonLat} from '../src/ol/proj.js';
import {fromLonLat, transformExtent} from '../src/ol/proj.js';
const mapExtent = [-112.261791, 35.983744, -112.113981, 36.132062];
@@ -12,22 +12,23 @@ const map = new Map({
layers: [
new TileLayer({
maxZoom: 14, // visible at zoom levels 14 and below
source: new OSM()
source: new OSM(),
}),
new TileLayer({
minZoom: 14, // visible at zoom levels above 14
source: new XYZ({
attributions: 'Tiles © USGS, rendered with ' +
'<a href="http://www.maptiler.com/">MapTiler</a>',
url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png'
})
})
attributions:
'Tiles © USGS, rendered with ' +
'<a href="http://www.maptiler.com/">MapTiler</a>',
url: 'https://tileserver.maptiler.com/grandcanyon/{z}/{x}/{y}.png',
}),
}),
],
view: new View({
center: fromLonLat([-112.18688965, 36.057944835]),
zoom: 15,
maxZoom: 18,
extent: transformExtent(mapExtent, 'EPSG:4326', 'EPSG:3857'),
constrainOnlyCenter: true
})
constrainOnlyCenter: true,
}),
});

12
examples/lazy-source.js
View File

@@ -1,7 +1,7 @@
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 source = new OSM();
@@ -12,14 +12,14 @@ const map = new Map({
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});
document.getElementById('set-source').onclick = function() {
document.getElementById('set-source').onclick = function () {
layer.setSource(source);
};
document.getElementById('unset-source').onclick = function() {
document.getElementById('unset-source').onclick = function () {
layer.setSource(null);
};

56
examples/line-arrows.js
View File

@@ -1,50 +1,52 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import Point from '../src/ol/geom/Point.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 Map from '../src/ol/Map.js';
import Point from '../src/ol/geom/Point.js';
import View from '../src/ol/View.js';
import {Icon, 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 raster = new TileLayer({
source: new OSM()
source: new OSM(),
});
const source = new VectorSource();
const styleFunction = function(feature) {
const styleFunction = function (feature) {
const geometry = feature.getGeometry();
const styles = [
// linestring
new Style({
stroke: new Stroke({
color: '#ffcc33',
width: 2
})
})
width: 2,
}),
}),
];
geometry.forEachSegment(function(start, end) {
geometry.forEachSegment(function (start, end) {
const dx = end[0] - start[0];
const dy = end[1] - start[1];
const rotation = Math.atan2(dy, dx);
// arrows
styles.push(new Style({
geometry: new Point(end),
image: new Icon({
src: 'data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation
styles.push(
new Style({
geometry: new Point(end),
image: new Icon({
src: 'data/arrow.png',
anchor: [0.75, 0.5],
rotateWithView: true,
rotation: -rotation,
}),
})
}));
);
});
return styles;
};
const vector = new VectorLayer({
source: source,
style: styleFunction
style: styleFunction,
});
const map = new Map({
@@ -52,11 +54,13 @@ const map = new Map({
target: 'map',
view: new View({
center: [-11000000, 4600000],
zoom: 4
})
zoom: 4,
}),
});
map.addInteraction(new Draw({
source: source,
type: 'LineString'
}));
map.addInteraction(
new Draw({
source: source,
type: 'LineString',
})
);

30
examples/localized-openstreetmap.js
View File

@@ -1,41 +1,37 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import TileLayer from '../src/ol/layer/Tile.js';
import OSM, {ATTRIBUTION} from '../src/ol/source/OSM.js';
import TileLayer from '../src/ol/layer/Tile.js';
import View from '../src/ol/View.js';
const openCycleMapLayer = new TileLayer({
source: new OSM({
attributions: [
'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
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',
}),
});
const openSeaMapLayer = new TileLayer({
source: new OSM({
attributions: [
'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>',
ATTRIBUTION
ATTRIBUTION,
],
opaque: false,
url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
})
url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png',
}),
});
const map = new Map({
layers: [
openCycleMapLayer,
openSeaMapLayer
],
layers: [openCycleMapLayer, openSeaMapLayer],
target: 'map',
view: new View({
maxZoom: 18,
center: [-244780.24508882355, 5986452.183179816],
zoom: 15
})
zoom: 15,
}),
});

34
examples/magnify.js
View File

@@ -1,12 +1,13 @@
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';
import {getRenderPixel} from '../src/ol/render.js';
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
const attributions = '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
const attributions =
'<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> ' +
'<a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>';
const imagery = new TileLayer({
@@ -14,8 +15,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 container = document.getElementById('map');
@@ -25,12 +26,12 @@ const map = new Map({
target: container,
view: new View({
center: fromLonLat([-109, 46.5]),
zoom: 6
})
zoom: 6,
}),
});
let radius = 75;
document.addEventListener('keydown', function(evt) {
document.addEventListener('keydown', function (evt) {
if (evt.which === 38) {
radius = Math.min(radius + 5, 150);
map.render();
@@ -45,22 +46,27 @@ document.addEventListener('keydown', function(evt) {
// get the pixel position with every move
let mousePosition = null;
container.addEventListener('mousemove', function(event) {
container.addEventListener('mousemove', function (event) {
mousePosition = map.getEventPixel(event);
map.render();
});
container.addEventListener('mouseout', function() {
container.addEventListener('mouseout', function () {
mousePosition = null;
map.render();
});
// after rendering the layer, show an oversampled version around the pointer
imagery.on('postrender', function(event) {
imagery.on('postrender', function (event) {
if (mousePosition) {
const pixel = getRenderPixel(event, mousePosition);
const offset = getRenderPixel(event, [mousePosition[0] + radius, mousePosition[1]]);
const half = Math.sqrt(Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2));
const offset = getRenderPixel(event, [
mousePosition[0] + radius,
mousePosition[1],
]);
const half = Math.sqrt(
Math.pow(offset[0] - pixel[0], 2) + Math.pow(offset[1] - pixel[1], 2)
);
const context = event.context;
const centerX = pixel[0];
const centerY = pixel[1];
@@ -91,7 +97,7 @@ imagery.on('postrender', function(event) {
}
context.beginPath();
context.arc(centerX, centerY, half, 0, 2 * Math.PI);
context.lineWidth = 3 * half / radius;
context.lineWidth = (3 * half) / radius;
context.strokeStyle = 'rgba(255,255,255,0.5)';
context.putImageData(dest, originX, originY);
context.stroke();

34
examples/mapbox-layer.js
View File

@@ -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 Layer from '../src/ol/layer/Layer.js';
import {toLonLat, fromLonLat} from '../src/ol/proj.js';
import {Stroke, Style} from '../src/ol/style.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 GeoJSON from '../src/ol/format/GeoJSON.js';
import View from '../src/ol/View.js';
import {Stroke, Style} from '../src/ol/style.js';
import {fromLonLat, toLonLat} from '../src/ol/proj.js';
const center = [-98.8, 37.9];
const key = 'get_your_own_D6rA4zTHduk6KOKTXzGB';
@@ -23,11 +23,11 @@ const mbMap = new mapboxgl.Map({
keyboard: false,
pitchWithRotate: false,
scrollZoom: false,
touchZoomRotate: false
touchZoomRotate: false,
});
const mbLayer = new Layer({
render: function(frameState) {
render: function (frameState) {
const canvas = mbMap.getCanvas();
const viewState = frameState.viewState;
@@ -40,14 +40,14 @@ const mbLayer = new Layer({
// adjust view parameters in mapbox
const rotation = viewState.rotation;
if (rotation) {
mbMap.rotateTo(-rotation * 180 / Math.PI, {
animate: false
mbMap.rotateTo((-rotation * 180) / Math.PI, {
animate: false,
});
}
mbMap.jumpTo({
center: toLonLat(viewState.center),
zoom: viewState.zoom - 1,
animate: false
animate: false,
});
// cancel the scheduled update & trigger synchronous redraw
@@ -60,29 +60,29 @@ const mbLayer = new Layer({
mbMap._render();
return canvas;
}
},
});
const style = new Style({
stroke: new Stroke({
color: '#319FD3',
width: 2
})
width: 2,
}),
});
const vectorLayer = new VectorLayer({
source: new VectorSource({
url: 'data/geojson/countries.geojson',
format: new GeoJSON()
format: new GeoJSON(),
}),
style: style
style: style,
});
const map = new Map({
target: 'map',
view: new View({
center: fromLonLat(center),
zoom: 4
zoom: 4,
}),
layers: [mbLayer, vectorLayer]
layers: [mbLayer, vectorLayer],
});

7
examples/mapbox-style.js
View File

@@ -1,6 +1,9 @@
import apply from 'ol-mapbox-style';
import FullScreen from '../src/ol/control/FullScreen.js';
import apply from 'ol-mapbox-style';
apply('map', 'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB').then(function(map) {
apply(
'map',
'https://api.maptiler.com/maps/topo/style.json?key=get_your_own_D6rA4zTHduk6KOKTXzGB'
).then(function (map) {
map.addControl(new FullScreen());
});

44
examples/mapbox-vector-tiles-advanced.js
View File

@@ -1,14 +1,14 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import MVT from '../src/ol/format/MVT.js';
import VectorTileLayer from '../src/ol/layer/VectorTile.js';
import {get as getProjection} from '../src/ol/proj.js';
import VectorTileSource from '../src/ol/source/VectorTile.js';
import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
import Map from '../src/ol/Map.js';
import TileGrid from '../src/ol/tilegrid/TileGrid.js';
import VectorTileLayer from '../src/ol/layer/VectorTile.js';
import VectorTileSource from '../src/ol/source/VectorTile.js';
import View from '../src/ol/View.js';
import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
import {get as getProjection} from '../src/ol/proj.js';
const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
const key =
'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
// Calculation of resolutions that match zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
const resolutions = [];
@@ -17,37 +17,43 @@ for (let i = 0; i <= 8; ++i) {
}
// Calculation of tile urls for zoom levels 1, 3, 5, 7, 9, 11, 13, 15.
function tileUrlFunction(tileCoord) {
return ('https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
'{z}/{x}/{y}.vector.pbf?access_token=' + key)
return (
'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
'{z}/{x}/{y}.vector.pbf?access_token=' +
key
)
.replace('{z}', String(tileCoord[0] * 2 - 1))
.replace('{x}', String(tileCoord[1]))
.replace('{y}', String(tileCoord[2]))
.replace('{a-d}', 'abcd'.substr(
((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1));
.replace(
'{a-d}',
'abcd'.substr(((tileCoord[1] << tileCoord[0]) + tileCoord[2]) % 4, 1)
);
}
const map = new Map({
layers: [
new VectorTileLayer({
source: new VectorTileSource({
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
attributions:
'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
'© <a href="https://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>',
format: new MVT(),
tileGrid: new TileGrid({
extent: getProjection('EPSG:3857').getExtent(),
resolutions: resolutions,
tileSize: 512
tileSize: 512,
}),
tileUrlFunction: tileUrlFunction
tileUrlFunction: tileUrlFunction,
}),
style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
})
style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
}),
],
target: 'map',
view: new View({
center: [0, 0],
minZoom: 1,
zoom: 2
})
zoom: 2,
}),
});

25
examples/mapbox-vector-tiles.js
View File

@@ -1,31 +1,34 @@
import Map from '../src/ol/Map.js';
import View from '../src/ol/View.js';
import MVT from '../src/ol/format/MVT.js';
import Map from '../src/ol/Map.js';
import VectorTileLayer from '../src/ol/layer/VectorTile.js';
import VectorTileSource from '../src/ol/source/VectorTile.js';
import View from '../src/ol/View.js';
import {Fill, Icon, Stroke, Style, Text} from '../src/ol/style.js';
const key = 'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
const key =
'pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q';
const map = new Map({
layers: [
new VectorTileLayer({
declutter: true,
source: new VectorTileSource({
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
attributions:
'© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
'© <a href="https://www.openstreetmap.org/copyright">' +
'OpenStreetMap contributors</a>',
format: new MVT(),
url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
'{z}/{x}/{y}.vector.pbf?access_token=' + key
url:
'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' +
'{z}/{x}/{y}.vector.pbf?access_token=' +
key,
}),
style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
})
style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text),
}),
],
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
zoom: 2,
}),
});

Some files were not shown because too many files have changed in this diff Show More