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

Lint free examples

Browse Source
This commit is contained in:
Tim Schaub
2016-01-09 16:31:58 -07:00
parent 0555bb081a
commit 8c38d22b60
64 changed files with 429 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore Normal file
View File

@@ -0,0 +1,2 @@
examples/Jugl.js
examples/resources/

17
examples/.eslintrc Normal file
View File

@@ -0,0 +1,17 @@
{
"globals": {
"FastClick": false,
"$": false,
"arc": false,
"common": false,
"createMapboxStreetsV6Style": false,
"d3": false,
"jsPDF": false,
"jsts": false,
"topojson": false,
"turf": false
},
"rules": {
"no-unused-vars": [2, {"varsIgnorePattern": "^map"}]
}
}

13
examples/blend-modes.js
View File

@@ -85,8 +85,13 @@ var map = new ol.Map({
})
});
// Get the form elements and bind the listeners
var select = document.getElementById('blend-mode');
var affectRed = document.getElementById('affect-red');
var affectGreen = document.getElementById('affect-green');
var affectBlue = document.getElementById('affect-blue');
// Various helper methods and event handlers
/**
* This method sets the globalCompositeOperation to the value of the select
* field and it is bound to the precompose event of the layers.
@@ -154,12 +159,6 @@ var affectLayerClicked = function() {
};
// Get the form elements and bind the listeners
var select = document.getElementById('blend-mode');
var affectRed = document.getElementById('affect-red');
var affectGreen = document.getElementById('affect-green');
var affectBlue = document.getElementById('affect-blue');
// Rerender map when blend mode changes
select.addEventListener('change', function() {
map.render();

4
examples/box-selection.js
View File

@@ -48,7 +48,7 @@ map.addInteraction(dragBox);
var infoBox = document.getElementById('info');
dragBox.on('boxend', function(e) {
dragBox.on('boxend', function() {
// features that intersect the box are added to the collection of
// selected features, and their names are displayed in the "info"
// div
@@ -64,7 +64,7 @@ dragBox.on('boxend', function(e) {
});
// clear selection when drawing a new box and when clicking on the map
dragBox.on('boxstart', function(e) {
dragBox.on('boxstart', function() {
selectedFeatures.clear();
infoBox.innerHTML = ' ';
});

41
examples/center.js
View File

@@ -65,14 +65,7 @@ zoomtoswitzerlandbest.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(
polygon,
size,
{
padding: [170, 50, 30, 150],
constrainResolution: false
}
);
view.fit(polygon, size, {padding: [170, 50, 30, 150], constrainResolution: false});
}, false);
var zoomtoswitzerlandconstrained =
@@ -81,13 +74,7 @@ zoomtoswitzerlandconstrained.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(
polygon,
size,
{
padding: [170, 50, 30, 150]
}
);
view.fit(polygon, size, {padding: [170, 50, 30, 150]});
}, false);
var zoomtoswitzerlandnearest =
@@ -96,14 +83,7 @@ zoomtoswitzerlandnearest.addEventListener('click', function() {
var feature = source.getFeatures()[0];
var polygon = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(
polygon,
size,
{
padding: [170, 50, 30, 150],
nearest: true
}
);
view.fit(polygon, size, {padding: [170, 50, 30, 150], nearest: true});
}, false);
var zoomtolausanne = document.getElementById('zoomtolausanne');
@@ -111,14 +91,7 @@ zoomtolausanne.addEventListener('click', function() {
var feature = source.getFeatures()[1];
var point = /** @type {ol.geom.SimpleGeometry} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.fit(
point,
size,
{
padding: [170, 50, 30, 150],
minResolution: 50
}
);
view.fit(point, size, {padding: [170, 50, 30, 150], minResolution: 50});
}, false);
var centerlausanne = document.getElementById('centerlausanne');
@@ -126,9 +99,5 @@ centerlausanne.addEventListener('click', function() {
var feature = source.getFeatures()[1];
var point = /** @type {ol.geom.Point} */ (feature.getGeometry());
var size = /** @type {ol.Size} */ (map.getSize());
view.centerOn(
point.getCoordinates(),
size,
[570, 500]
);
view.centerOn(point.getCoordinates(), size, [570, 500]);
}, false);

6
examples/cluster.js
View File

@@ -34,7 +34,7 @@ var clusterSource = new ol.source.Cluster({
var styleCache = {};
var clusters = new ol.layer.Vector({
source: clusterSource,
style: function(feature, resolution) {
style: function(feature) {
var size = feature.get('features').length;
var style = styleCache[size];
if (!style) {
@@ -65,10 +65,6 @@ var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});
var raw = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
layers: [raster, clusters],
renderer: 'canvas',

3
examples/color-manipulation.js
View File

@@ -138,6 +138,8 @@ var raster = new ol.source.Raster({
}
});
var controls = {};
raster.on('beforeoperations', function(event) {
var data = event.data;
for (var id in controls) {
@@ -160,7 +162,6 @@ var map = new ol.Map({
});
var controlIds = ['hue', 'chroma', 'lightness'];
var controls = {};
controlIds.forEach(function(id) {
var control = document.getElementById(id);
var output = document.getElementById(id + 'Out');

2
examples/custom-controls.js
View File

@@ -33,7 +33,7 @@ app.RotateNorthControl = function(opt_options) {
button.innerHTML = 'N';
var this_ = this;
var handleRotateNorth = function(e) {
var handleRotateNorth = function() {
this_.getMap().getView().setRotation(0);
};

14
examples/custom-interactions.js
View File

@@ -72,7 +72,7 @@ app.Drag.prototype.handleDownEvent = function(evt) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
function(feature) {
return feature;
});
@@ -89,13 +89,6 @@ app.Drag.prototype.handleDownEvent = function(evt) {
* @param {ol.MapBrowserEvent} evt Map browser event.
*/
app.Drag.prototype.handleDragEvent = function(evt) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
return feature;
});
var deltaX = evt.coordinate[0] - this.coordinate_[0];
var deltaY = evt.coordinate[1] - this.coordinate_[1];
@@ -115,7 +108,7 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
if (this.cursor_) {
var map = evt.map;
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
function(feature) {
return feature;
});
var element = evt.map.getTargetElement();
@@ -133,10 +126,9 @@ app.Drag.prototype.handleMoveEvent = function(evt) {
/**
* @param {ol.MapBrowserEvent} evt Map browser event.
* @return {boolean} `false` to stop the drag sequence.
*/
app.Drag.prototype.handleUpEvent = function(evt) {
app.Drag.prototype.handleUpEvent = function() {
this.coordinate_ = null;
this.feature_ = null;
return false;

2
examples/d3.js vendored
View File

@@ -39,7 +39,7 @@ d3.json('data/topojson/us.json', function(error, us) {
* @param {number} pixelRatio Pixel ratio.
* @param {ol.Size} size Size.
* @param {ol.proj.Projection} projection Projection.
* @return {HTMLCanvasElement}
* @return {HTMLCanvasElement} A canvas element.
*/
var canvasFunction = function(extent, resolution, pixelRatio,
size, projection) {

2
examples/device-orientation.js
View File

@@ -39,7 +39,7 @@ el('track').addEventListener('change', function() {
deviceOrientation.setTracking(this.checked);
});
deviceOrientation.on('change', function(event) {
deviceOrientation.on('change', function() {
el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]';
el('beta').innerText = deviceOrientation.getBeta() + ' [rad]';
el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]';

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

@@ -128,7 +128,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
map.forEachFeatureAtPixel(pixel, function(feature) {
features.push(feature);
});
if (features.length > 0) {

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

@@ -124,7 +124,7 @@ dragAndDropInteraction.on('addfeatures', function(event) {
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
map.forEachFeatureAtPixel(pixel, function(feature) {
features.push(feature);
});
if (features.length > 0) {

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

@@ -60,6 +60,8 @@ var modify = new ol.interaction.Modify({
map.addInteraction(modify);
var draw; // global so we can remove it later
var typeSelect = document.getElementById('type');
function addInteraction() {
draw = new ol.interaction.Draw({
features: features,
@@ -68,14 +70,11 @@ function addInteraction() {
map.addInteraction(draw);
}
var typeSelect = document.getElementById('type');
/**
* Let user change the geometry type.
* @param {Event} e Change event.
* Handle change event.
*/
typeSelect.onchange = function(e) {
typeSelect.onchange = function() {
map.removeInteraction(draw);
addInteraction();
};

5
examples/draw-features.js
View File

@@ -83,10 +83,9 @@ function addInteraction() {
/**
* Let user change the geometry type.
* @param {Event} e Change event.
* Handle change event.
*/
typeSelect.onchange = function(e) {
typeSelect.onchange = function() {
map.removeInteraction(draw);
addInteraction();
};

9
examples/earthquake-clusters.js
View File

@@ -56,7 +56,7 @@ function createEarthquakeStyle(feature) {
});
}
var maxFeatureCount;
var maxFeatureCount, vector;
function calculateClusterInfo(resolution) {
maxFeatureCount = 0;
var features = vector.getSource().getFeatures();
@@ -65,7 +65,8 @@ function calculateClusterInfo(resolution) {
feature = features[i];
var originalFeatures = feature.get('features');
var extent = ol.extent.createEmpty();
for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
var j, jj;
for (j = 0, jj = originalFeatures.length; j < jj; ++j) {
ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
}
maxFeatureCount = Math.max(maxFeatureCount, jj);
@@ -104,7 +105,7 @@ function styleFunction(feature, resolution) {
return style;
}
function selectStyleFunction(feature, resolution) {
function selectStyleFunction(feature) {
var styles = [new ol.style.Style({
image: new ol.style.Circle({
radius: feature.get('radius'),
@@ -120,7 +121,7 @@ function selectStyleFunction(feature, resolution) {
return styles;
}
var vector = new ol.layer.Vector({
vector = new ol.layer.Vector({
source: new ol.source.Cluster({
distance: 40,
source: new ol.source.Vector({

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

@@ -14,7 +14,7 @@ goog.require('ol.style.Style');
var styleCache = {};
var styleFunction = function(feature, resolution) {
var 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.

2
examples/export-map.js
View File

@@ -34,7 +34,7 @@ var map = new ol.Map({
var exportPNGElement = document.getElementById('export-png');
if ('download' in exportPNGElement) {
exportPNGElement.addEventListener('click', function(e) {
exportPNGElement.addEventListener('click', function() {
map.once('postcompose', function(event) {
var canvas = event.context.canvas;
exportPNGElement.href = canvas.toDataURL('image/png');

4
examples/export-pdf.js
View File

@@ -54,7 +54,7 @@ var loaded = 0;
var exportButton = document.getElementById('export-pdf');
exportButton.addEventListener('click', function(e) {
exportButton.addEventListener('click', function() {
exportButton.disabled = true;
document.body.style.cursor = 'progress';
@@ -73,7 +73,7 @@ exportButton.addEventListener('click', function(e) {
++loading;
};
var tileLoadEnd = function(callback) {
var tileLoadEnd = function() {
++loaded;
if (loading === loaded) {
var canvas = this;

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

@@ -108,11 +108,16 @@ var styles = {
})
};
var animating = false;
var speed, now;
var speedInput = document.getElementById('speed');
var startButton = document.getElementById('start-animation');
var vectorLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [routeFeature, geoMarker, startMarker, endMarker]
}),
style: function(feature, resolution) {
style: function(feature) {
// hide geoMarker if animation is active
if (animating && feature.get('type') === 'geoMarker') {
return null;
@@ -198,8 +203,4 @@ function stopAnimation(ended) {
map.un('postcompose', moveFeature);
}
var speed, now;
var animating = false;
var speedInput = document.getElementById('speed');
var startButton = document.getElementById('start-animation');
startButton.addEventListener('click', startAnimation, false);

21
examples/flight-animation.js
View File

@@ -35,6 +35,14 @@ var defaultStyle = new ol.style.Style({
stroke: defaultStroke
});
var flightsSource;
var addLater = function(feature, timeout) {
window.setTimeout(function() {
feature.set('start', new Date().getTime());
flightsSource.addFeature(feature);
}, timeout);
};
var pointsPerMs = 0.1;
var animateFlights = function(event) {
var vectorContext = event.vectorContext;
@@ -66,20 +74,13 @@ var animateFlights = function(event) {
map.render();
};
var addLater = function(feature, timeout) {
window.setTimeout(function() {
feature.set('start', new Date().getTime());
flightsSource.addFeature(feature);
}, timeout);
};
var flightsSource = new ol.source.Vector({
flightsSource = new ol.source.Vector({
wrapX: false,
attributions: [new ol.Attribution({
html: 'Flight data by ' +
'<a href="http://openflights.org/data.html">OpenFlights</a>,'
})],
loader: function(extent, resolution, projection) {
loader: function() {
var url = 'data/openflights/flights.json';
fetch(url).then(function(response) {
return response.json();
@@ -116,7 +117,7 @@ var flightsSource = new ol.source.Vector({
var flightsLayer = new ol.layer.Vector({
source: flightsSource,
style: function(feature, resolution) {
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')) {

38
examples/geojson.js
View File

@@ -85,7 +85,7 @@ var styles = {
})
};
var styleFunction = function(feature, resolution) {
var styleFunction = function(feature) {
return styles[feature.getGeometry().getType()];
};
@@ -97,36 +97,31 @@ var geojsonObject = {
'name': 'EPSG:3857'
}
},
'features': [
{
'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',
@@ -137,8 +132,7 @@ var geojsonObject = {
[[-7.5e5, 1e6], [7.5e5, 1e6]]
]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiPolygon',
@@ -148,28 +142,22 @@ var geojsonObject = {
[[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6], [3e6, 6e6]]]
]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'GeometryCollection',
'geometries': [
{
'geometries': [{
'type': 'LineString',
'coordinates': [[-5e6, -5e6], [0, -5e6]]
},
{
}, {
'type': 'Point',
'coordinates': [4e6, -5e6]
},
{
}, {
'type': 'Polygon',
'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
}]
}
]
}
}
]
}]
};
var vectorSource = new ol.source.Vector({

2
examples/geolocation-orientation.js
View File

@@ -58,7 +58,7 @@ var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
var deltaMean = 500; // the geolocation sampling period mean in ms
// Listen to position changes
geolocation.on('change', function(evt) {
geolocation.on('change', function() {
var position = geolocation.getPosition();
var accuracy = geolocation.getAccuracy();
var heading = geolocation.getHeading() || 0;

2
examples/geolocation.js
View File

@@ -86,7 +86,7 @@ geolocation.on('change:position', function() {
new ol.geom.Point(coordinates) : null);
});
var featuresOverlay = new ol.layer.Vector({
new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: [accuracyFeature, positionFeature]

2
examples/getfeatureinfo-image.js
View File

@@ -44,7 +44,7 @@ map.on('pointermove', function(evt) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
var hit = map.forEachLayerAtPixel(pixel, function() {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';

2
examples/getfeatureinfo-tile.js
View File

@@ -44,7 +44,7 @@ map.on('pointermove', function(evt) {
return;
}
var pixel = map.getEventPixel(evt.originalEvent);
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
var hit = map.forEachLayerAtPixel(pixel, function() {
return true;
});
map.getTargetElement().style.cursor = hit ? 'pointer' : '';

7
examples/gpx.js
View File

@@ -3,7 +3,6 @@ goog.require('ol.View');
goog.require('ol.format.GPX');
goog.require('ol.layer.Tile');
goog.require('ol.layer.Vector');
goog.require('ol.proj');
goog.require('ol.source.BingMaps');
goog.require('ol.source.Vector');
goog.require('ol.style.Circle');
@@ -11,8 +10,6 @@ goog.require('ol.style.Fill');
goog.require('ol.style.Stroke');
goog.require('ol.style.Style');
var projection = ol.proj.get('EPSG:3857');
var raster = new ol.layer.Tile({
source: new ol.source.BingMaps({
imagerySet: 'Aerial',
@@ -52,7 +49,7 @@ var vector = new ol.layer.Vector({
url: 'data/gpx/fells_loop.gpx',
format: new ol.format.GPX()
}),
style: function(feature, resolution) {
style: function(feature) {
return style[feature.getGeometry().getType()];
}
});
@@ -68,7 +65,7 @@ var map = new ol.Map({
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
map.forEachFeatureAtPixel(pixel, function(feature) {
features.push(feature);
});
if (features.length > 0) {

6
examples/icon-negative.js
View File

@@ -31,7 +31,9 @@ var map = new ol.Map({
source: new ol.source.Stamen({layer: 'watercolor'})
}),
new ol.layer.Vector({
style: function(feature) { return feature.get('style'); },
style: function(feature) {
return feature.get('style');
},
source: new ol.source.Vector({features: [iconFeature]})
})
],
@@ -44,7 +46,7 @@ var map = new ol.Map({
var selectStyle = {};
var select = new ol.interaction.Select({
style: function(feature, resolution) {
style: function(feature) {
var image = feature.get('style').getImage().getImage();
if (!selectStyle[image.src]) {
var canvas = document.createElement('canvas');

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

@@ -95,7 +95,7 @@ for (i = 0; i < featureCount; i += 30) {
overlayFeatures.push(clone);
}
var featureOverlay = new ol.layer.Vector({
new ol.layer.Vector({
map: map,
source: new ol.source.Vector({
features: overlayFeatures
@@ -112,8 +112,8 @@ map.on('click', function(evt) {
window.setTimeout(function() {
var features = [];
map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) {
features.push(features);
map.forEachFeatureAtPixel(evt.pixel, function(feature) {
features.push(feature);
return false;
});

2
examples/icon.js
View File

@@ -66,7 +66,7 @@ map.addOverlay(popup);
// display popup on click
map.on('click', function(evt) {
var feature = map.forEachFeatureAtPixel(evt.pixel,
function(feature, layer) {
function(feature) {
return feature;
});
if (feature) {

2
examples/igc.js
View File

@@ -25,7 +25,7 @@ var colors = {
};
var styleCache = {};
var styleFunction = function(feature, resolution) {
var styleFunction = function(feature) {
var color = colors[feature.get('PLT')];
var style = styleCache[color];
if (!style) {

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

@@ -84,14 +84,14 @@ var source = new ol.source.ImageWMS({
serverType: 'geoserver'
});
source.on('imageloadstart', function(event) {
source.on('imageloadstart', function() {
progress.addLoading();
});
source.on('imageloadend', function(event) {
source.on('imageloadend', function() {
progress.addLoaded();
});
source.on('imageloaderror', function(event) {
source.on('imageloaderror', function() {
progress.addLoaded();
});

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

@@ -59,7 +59,7 @@ var featureOverlay = new ol.layer.Vector({
var highlight;
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});

4
examples/kml-earthquakes.js
View File

@@ -12,7 +12,7 @@ goog.require('ol.style.Style');
var styleCache = {};
var styleFunction = function(feature, resolution) {
var 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.
@@ -74,7 +74,7 @@ var displayFeatureInfo = function(pixel) {
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (feature) {

4
examples/kml-timezones.js
View File

@@ -17,7 +17,7 @@ goog.require('ol.style.Style');
* currently midnight would have an opacity of 0. This doesn't account for
* daylight savings, so don't use it to plan your vacation.
*/
var styleFunction = function(feature, resolution) {
var styleFunction = function(feature) {
var offset = 0;
var name = feature.get('name'); // e.g. GMT -08:30
var match = name.match(/([\-+]\d{2}):(\d{2})$/);
@@ -81,7 +81,7 @@ var displayFeatureInfo = function(pixel) {
left: pixel[0] + 'px',
top: (pixel[1] - 15) + 'px'
});
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});
if (feature) {

2
examples/kml.js
View File

@@ -35,7 +35,7 @@ var map = new ol.Map({
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
map.forEachFeatureAtPixel(pixel, function(feature) {
features.push(feature);
});
if (features.length > 0) {

2
examples/line-arrows.js
View File

@@ -16,7 +16,7 @@ var raster = new ol.layer.Tile({
var source = new ol.source.Vector();
var styleFunction = function(feature, resolution) {
var styleFunction = function(feature) {
var geometry = feature.getGeometry();
var styles = [
// linestring

126
examples/measure.js
View File

@@ -96,7 +96,7 @@ var continueLineMsg = 'Click to continue drawing the line';
/**
* Handle pointer move.
* @param {ol.MapBrowserEvent} evt
* @param {ol.MapBrowserEvent} evt The event.
*/
var pointerMoveHandler = function(evt) {
if (evt.dragging) {
@@ -140,6 +140,66 @@ var typeSelect = document.getElementById('type');
var geodesicCheckbox = document.getElementById('geodesic');
var draw; // global so we can remove it later
/**
* Format length output.
* @param {ol.geom.LineString} line The line.
* @return {string} The formatted length.
*/
var formatLength = function(line) {
var length;
if (geodesicCheckbox.checked) {
var coordinates = line.getCoordinates();
length = 0;
var sourceProj = map.getView().getProjection();
for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
length += wgs84Sphere.haversineDistance(c1, c2);
}
} else {
length = Math.round(line.getLength() * 100) / 100;
}
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +
' ' + 'm';
}
return output;
};
/**
* Format length output.
* @param {ol.geom.Polygon} polygon The polygon.
* @return {string} Formatted area.
*/
var formatArea = function(polygon) {
var area;
if (geodesicCheckbox.checked) {
var sourceProj = map.getView().getProjection();
var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
sourceProj, 'EPSG:4326'));
var coordinates = geom.getLinearRing(0).getCoordinates();
area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
} else {
area = polygon.getArea();
}
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) +
' ' + 'm<sup>2</sup>';
}
return output;
};
function addInteraction() {
var type = (typeSelect.value == 'area' ? 'Polygon' : 'LineString');
draw = new ol.interaction.Draw({
@@ -195,7 +255,7 @@ function addInteraction() {
}, this);
draw.on('drawend',
function(evt) {
function() {
measureTooltipElement.className = 'tooltip tooltip-static';
measureTooltip.setOffset([0, -7]);
// unset sketch
@@ -246,70 +306,10 @@ function createMeasureTooltip() {
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
typeSelect.onchange = function(e) {
typeSelect.onchange = function() {
map.removeInteraction(draw);
addInteraction();
};
/**
* format length output
* @param {ol.geom.LineString} line
* @return {string}
*/
var formatLength = function(line) {
var length;
if (geodesicCheckbox.checked) {
var coordinates = line.getCoordinates();
length = 0;
var sourceProj = map.getView().getProjection();
for (var i = 0, ii = coordinates.length - 1; i < ii; ++i) {
var c1 = ol.proj.transform(coordinates[i], sourceProj, 'EPSG:4326');
var c2 = ol.proj.transform(coordinates[i + 1], sourceProj, 'EPSG:4326');
length += wgs84Sphere.haversineDistance(c1, c2);
}
} else {
length = Math.round(line.getLength() * 100) / 100;
}
var output;
if (length > 100) {
output = (Math.round(length / 1000 * 100) / 100) +
' ' + 'km';
} else {
output = (Math.round(length * 100) / 100) +
' ' + 'm';
}
return output;
};
/**
* format length output
* @param {ol.geom.Polygon} polygon
* @return {string}
*/
var formatArea = function(polygon) {
var area;
if (geodesicCheckbox.checked) {
var sourceProj = map.getView().getProjection();
var geom = /** @type {ol.geom.Polygon} */(polygon.clone().transform(
sourceProj, 'EPSG:4326'));
var coordinates = geom.getLinearRing(0).getCoordinates();
area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
} else {
area = polygon.getArea();
}
var output;
if (area > 10000) {
output = (Math.round(area / 1000000 * 100) / 100) +
' ' + 'km<sup>2</sup>';
} else {
output = (Math.round(area * 100) / 100) +
' ' + 'm<sup>2</sup>';
}
return output;
};
addInteraction();

43
examples/modify-test.js
View File

@@ -54,7 +54,7 @@ var styleFunction = (function() {
}),
image: image
});
return function(feature, resolution) {
return function(feature) {
return styles[feature.getGeometry().getType()] || styles['default'];
};
})();
@@ -67,36 +67,31 @@ var geojsonObject = {
'name': 'EPSG:3857'
}
},
'features': [
{
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Point',
'coordinates': [0, 0]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiPoint',
'coordinates': [[-2e6, 0], [0, -2e6]]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, -2e6], [8e6, 2e6], [9e6, 2e6]]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'LineString',
'coordinates': [[4e6, -2e6], [8e6, 2e6], [8e6, 3e6]]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
@@ -104,8 +99,7 @@ var geojsonObject = {
[-3e6, -1e6], [-5e6, -1e6]], [[-4.5e6, -0.5e6],
[-3.5e6, -0.5e6], [-4e6, 0.5e6], [-4.5e6, -0.5e6]]]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiLineString',
@@ -117,8 +111,7 @@ var geojsonObject = {
[[-7.5e5, 1e6], [7.5e5, 1e6]]
]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'MultiPolygon',
@@ -131,30 +124,24 @@ var geojsonObject = {
[3e6, 6e6], [1e6, 6e6]]]
]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'GeometryCollection',
'geometries': [
{
'geometries': [{
'type': 'LineString',
'coordinates': [[-5e6, -5e6], [0, -5e6]]
},
{
}, {
'type': 'Point',
'coordinates': [4e6, -5e6]
},
{
}, {
'type': 'Polygon',
'coordinates': [
[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6], [1e6, -6e6]]
]
}]
}
]
}
}
]
}]
};
var source = new ol.source.Vector({
@@ -224,7 +211,7 @@ var overlayStyle = (function() {
styles['GeometryCollection'] = styles['Polygon'].concat(styles['Point']);
return function(feature, resolution) {
return function(feature) {
return styles[feature.getGeometry().getType()];
};
})();

4
examples/osm-vector-tiles.js
View File

@@ -51,7 +51,7 @@ var map = new ol.Map({
url: 'http://{a-c}.tile.openstreetmap.us/' +
'vectiles-highroad/{z}/{x}/{y}.topojson'
}),
style: function(feature, resolution) {
style: function(feature) {
var kind = feature.get('kind');
var railway = feature.get('railway');
var sort_key = feature.get('sort_key');
@@ -97,7 +97,7 @@ var map = new ol.Map({
'vectiles-land-usages/{z}/{x}/{y}.topojson'
}),
visible: false,
style: function(feature, resolution) {
style: function(feature) {
var kind = feature.get('kind');
var styleKey = kind;
var style = landuseStyleCache[styleKey];

15
examples/polygon-styles.js
View File

@@ -49,40 +49,35 @@ var geojsonObject = {
'name': 'EPSG:3857'
}
},
'features': [
{
'features': [{
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-5e6, 6e6], [-5e6, 8e6], [-3e6, 8e6],
[-3e6, 6e6], [-5e6, 6e6]]]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-2e6, 6e6], [-2e6, 8e6], [0, 8e6],
[0, 6e6], [-2e6, 6e6]]]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[1e6, 6e6], [1e6, 8e6], [3e6, 8e6],
[3e6, 6e6], [1e6, 6e6]]]
}
},
{
}, {
'type': 'Feature',
'geometry': {
'type': 'Polygon',
'coordinates': [[[-2e6, -1e6], [-1e6, 1e6],
[0, -1e6], [-2e6, -1e6]]]
}
}
]
}]
};
var source = new ol.source.Vector({

22
examples/popup.js
View File

@@ -15,17 +15,6 @@ var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
/**
* Create an overlay to anchor the popup to the map.
*/
@@ -38,6 +27,17 @@ var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
}));
/**
* Add a click handler to hide the popup.
* @return {boolean} Don't follow the href.
*/
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
return false;
};
/**
* Create the map.
*/

6
examples/raster.js
View File

@@ -61,6 +61,12 @@ var bing = new ol.source.BingMaps({
*/
var raster = new ol.source.Raster({
sources: [bing],
/**
* Run calculations on pixel data.
* @param {Array} pixels List of pixels (one per source).
* @param {Object} data User data object.
* @return {Array} The output pixel.
*/
operation: function(pixels, data) {
var pixel = pixels[0];
var value = vgi(pixel);

8
examples/region-growing.js
View File

@@ -31,7 +31,7 @@ function growRegion(inputs, data) {
// As noted in the Raster source constructor, this function is provided
// using the `lib` option. Other functions will NOT be visible unless
// provided using the `lib` option.
var next = nextEdges(edge[i]);
var next = next4Edges(edge[i]);
for (var j = 0, jj = next.length; j < jj; j++) {
var s = next[j][0], t = next[j][1];
if (s >= 0 && s < width && t >= 0 && t < height) {
@@ -85,7 +85,7 @@ var raster = new ol.source.Raster({
// Functions in the `lib` object will be available to the operation run in
// the web worker.
lib: {
nextEdges: next4Edges
next4Edges: next4Edges
}
});
@@ -110,6 +110,8 @@ map.on('click', function(event) {
raster.changed();
});
var thresholdControl = document.getElementById('threshold');
raster.on('beforeoperations', function(event) {
// the event.data object will be passed to operations
var data = event.data;
@@ -119,8 +121,6 @@ raster.on('beforeoperations', function(event) {
}
});
var thresholdControl = document.getElementById('threshold');
function updateControlValue() {
document.getElementById('threshold-value').innerText = thresholdControl.value;
}

11
examples/reprojection-by-code.js
View File

@@ -89,18 +89,19 @@ function search(query) {
/**
* @param {Event} e Change event.
* Handle click event.
* @param {Event} event The event.
*/
searchButton.onclick = function(e) {
searchButton.onclick = function(event) {
search(queryInput.value);
e.preventDefault();
event.preventDefault();
};
/**
* @param {Event} e Change event.
* Handle change event.
*/
renderEdgesCheckbox.onchange = function(e) {
renderEdgesCheckbox.onchange = function() {
map.getLayers().forEach(function(layer) {
if (layer instanceof ol.layer.Tile) {
var source = layer.getSource();

16
examples/reprojection.js
View File

@@ -192,9 +192,9 @@ function updateViewProjection() {
/**
* @param {Event} e Change event.
* Handle change event.
*/
viewProjSelect.onchange = function(e) {
viewProjSelect.onchange = function() {
updateViewProjection();
};
@@ -211,9 +211,9 @@ var updateRenderEdgesOnLayer = function(layer) {
/**
* @param {Event} e Change event.
* Handle change event.
*/
baseLayerSelect.onchange = function(e) {
baseLayerSelect.onchange = function() {
var layer = layers[baseLayerSelect.value];
if (layer) {
layer.setOpacity(1);
@@ -224,9 +224,9 @@ baseLayerSelect.onchange = function(e) {
/**
* @param {Event} e Change event.
* Handle change event.
*/
overlayLayerSelect.onchange = function(e) {
overlayLayerSelect.onchange = function() {
var layer = layers[overlayLayerSelect.value];
if (layer) {
layer.setOpacity(0.7);
@@ -237,9 +237,9 @@ overlayLayerSelect.onchange = function(e) {
/**
* @param {Event} e Change event.
* Handle change event.
*/
renderEdgesCheckbox.onchange = function(e) {
renderEdgesCheckbox.onchange = function() {
renderEdges = renderEdgesCheckbox.checked;
map.getLayers().forEach(function(layer) {
updateRenderEdgesOnLayer(layer);

20
examples/side-by-side.js
View File

@@ -5,7 +5,7 @@ goog.require('ol.layer.Tile');
goog.require('ol.source.MapQuest');
var domMap = new ol.Map({
var map1 = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
@@ -19,12 +19,18 @@ var domMap = new ol.Map({
})
});
var map2 = new ol.Map({
target: 'canvasMap',
layers: map1.getLayers(),
view: map1.getView()
});
if (ol.has.WEBGL) {
var webglMap = new ol.Map({
var map3 = new ol.Map({
renderer: 'webgl',
target: 'webglMap',
layers: domMap.getLayers(),
view: domMap.getView()
layers: map1.getLayers(),
view: map1.getView()
});
} else {
var info = document.getElementById('no-webgl');
@@ -33,9 +39,3 @@ if (ol.has.WEBGL) {
*/
info.style.display = '';
}
var canvasMap = new ol.Map({
target: 'canvasMap',
layers: domMap.getLayers(),
view: domMap.getView()
});

3
examples/snap.js
View File

@@ -72,6 +72,7 @@ var Modify = {
};
Modify.init();
var optionsForm = document.getElementById('options-form');
var Draw = {
init: function() {
@@ -111,8 +112,6 @@ var Draw = {
};
Draw.init();
var optionsForm = document.getElementById('options-form');
/**
* Let user change the geometry type.

2
examples/sphere-mollweide.js
View File

@@ -39,6 +39,6 @@ var map = new ol.Map({
})
});
var graticule = new ol.Graticule({
new ol.Graticule({
map: map
});

2
examples/synthetic-points.js
View File

@@ -45,7 +45,7 @@ var vectorSource = new ol.source.Vector({
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: function(feature, resolution) {
style: function(feature) {
return styles[feature.get('size')];
}
});

6
examples/tile-load-events.js
View File

@@ -83,14 +83,14 @@ var source = new ol.source.TileJSON({
crossOrigin: 'anonymous'
});
source.on('tileloadstart', function(event) {
source.on('tileloadstart', function() {
progress.addLoading();
});
source.on('tileloadend', function(event) {
source.on('tileloadend', function() {
progress.addLoaded();
});
source.on('tileloaderror', function(event) {
source.on('tileloaderror', function() {
progress.addLoaded();
});

2
examples/topojson.js
View File

@@ -31,7 +31,7 @@ var vector = new ol.layer.Vector({
url: 'data/topojson/world-110m.json',
format: new ol.format.TopoJSON()
}),
style: function(feature, resolution) {
style: function(feature) {
// don't want to render the full world polygon, which repeats all countries
return feature.getId() !== undefined ? style : null;
}

49
examples/vector-esri-edit.js
View File

@@ -53,6 +53,19 @@ var vector = new ol.layer.Vector({
source: vectorSource
});
var attribution = new ol.Attribution({
html: 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/' +
'rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
});
var raster = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
});
var draw = new ol.interaction.Draw({
source: vectorSource,
type: /** @type {ol.geom.GeometryType} */ ('Polygon')
@@ -67,14 +80,23 @@ var modify = new ol.interaction.Modify({
});
modify.setActive(false);
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([draw, select, modify]),
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([-122.619, 45.512], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
})
});
var typeSelect = document.getElementById('type');
/**
* Let user change the interaction type.
* @param {Event} e Change event.
*/
typeSelect.onchange = function(e) {
typeSelect.onchange = function() {
draw.setActive(typeSelect.value === 'DRAW');
select.setActive(typeSelect.value === 'MODIFY');
modify.setActive(typeSelect.value === 'MODIFY');
@@ -130,26 +152,3 @@ draw.on('drawend', function(evt) {
}
});
});
var attribution = new ol.Attribution({
html: 'Tiles &copy; <a href="http://services.arcgisonline.com/ArcGIS/' +
'rest/services/World_Topo_Map/MapServer">ArcGIS</a>'
});
var raster = new ol.layer.Tile({
source: new ol.source.XYZ({
attributions: [attribution],
url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
})
});
var map = new ol.Map({
interactions: ol.interaction.defaults().extend([draw, select, modify]),
layers: [raster, vector],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([-122.619, 45.512], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
})
});

4
examples/vector-esri.js
View File

@@ -89,7 +89,7 @@ var vectorSource = new ol.source.Vector({
var vector = new ol.layer.Vector({
source: vectorSource,
style: function(feature, resolution) {
style: function(feature) {
var classify = feature.get('activeprod');
return styleCache[classify];
}
@@ -120,7 +120,7 @@ var map = new ol.Map({
var displayFeatureInfo = function(pixel) {
var features = [];
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
map.forEachFeatureAtPixel(pixel, function(feature) {
features.push(feature);
});
if (features.length > 0) {

3
examples/vector-labels.js
View File

@@ -215,7 +215,8 @@ String.prototype.trunc = String.prototype.trunc ||
function stringDivider(str, width, spaceReplacer) {
if (str.length > width) {
var p = width;
for (; p > 0 && (str[p] != ' ' && str[p] != '-'); p--) {
while (p > 0 && (str[p] != ' ' && str[p] != '-')) {
p--;
}
if (p > 0) {
var left;

2
examples/vector-layer.js
View File

@@ -92,7 +92,7 @@ var featureOverlay = new ol.layer.Vector({
var highlight;
var displayFeatureInfo = function(pixel) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
return feature;
});

2
examples/vector-osm.js
View File

@@ -90,7 +90,7 @@ var vectorSource = new ol.source.Vector({
var vector = new ol.layer.Vector({
source: vectorSource,
style: function(feature, resolution) {
style: function(feature) {
for (var key in styles) {
var value = feature.get(key);
if (value !== undefined) {

2
examples/vector-wfs.js
View File

@@ -13,7 +13,7 @@ goog.require('ol.style.Style');
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function(extent, resolution, projection) {
url: function(extent) {
return 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:water_areas&' +
'outputFormat=application/json&srsname=EPSG:3857&' +

13
examples/wms-custom-proj.js
View File

@@ -202,19 +202,6 @@ function CHtoWGSlng(y, x) {
}
// Convert SEX DMS angle to DEC
function SEXtoDEC(angle) {
// Extract DMS
var deg = parseInt(angle, 10);
var min = parseInt((angle - deg) * 100, 10);
var sec = (((angle - deg) * 100) - min) * 100;
// Result in degrees sex (dd.mmss)
return deg + (sec / 60 + min) / 60;
}
// Convert DEC angle to SEX DMS
function DECtoSEX(angle) {

2
examples/zoomslider.js
View File

@@ -12,7 +12,7 @@ goog.require('ol.source.MapQuest');
* @return {ol.Map} The ol.Map instance.
*/
var createMap = function(divId) {
var source, layer, map, zoomslider, resolutions;
var source, layer, map, zoomslider;
source = new ol.source.MapQuest({layer: 'sat'});
layer = new ol.layer.Tile({

3
package.json
View File

@@ -12,7 +12,7 @@
"install": "node tasks/install.js",
"postinstall": "closure-util update",
"start": "node tasks/serve.js",
"pretest": "eslint tasks test src",
"pretest": "eslint tasks test src examples",
"test": "node tasks/test.js",
"debug-server": "node tasks/serve-lib.js"
},
@@ -78,6 +78,7 @@
"Uint16Array": false,
"Uint32Array": false,
"Uint8Array": false,
"Uint8ClampedArray": false,
"ol": false,
"goog": false,
"proj4": false