Example sources in the examples dir
This commit is contained in:
Tim Schaub
File diff suppressed because one or more lines are too long
@@ -1,16 +0,0 @@
|
||||
a.skiplink {
|
||||
position: absolute;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
a.skiplink:focus {
|
||||
clip: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
background-color: #fff;
|
||||
padding: 0.3em;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Accessibility example
|
||||
shortdesc: Example of an accessible map.
|
||||
docs: >
|
||||
This page's `map` element has its `tabindex` attribute set to `"0"`, that makes it focusable. To focus the map element you can either navigate to it using the "tab" key or use the skip link. When the `map` element is focused the + and - keys can be used to zoom in and out and the arrow keys can be used to pan.
|
||||
|
||||
|
||||
Clicking on the "Zoom in" and "Zoom out" buttons below the map zooms the map in and out. You can navigate to the buttons using the "tab" key, and press the "enter" key to trigger the zooming action.
|
||||
|
||||
tags: "accessibility, tabindex"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<a class="skiplink" href="#map">Go to map</a>
|
||||
<div id="map" class="map" tabindex="0"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,32 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
jQuery('#map').after('<button type="button" ' +
|
||||
'onclick="map.getView().setZoom(map.getView().getZoom() - 1);">' +
|
||||
'Zoom out</button>');
|
||||
jQuery('#map').after('<button type="button" ' +
|
||||
'onclick="map.getView().setZoom(map.getView().getZoom() + 1);">' +
|
||||
'Zoom in</button>');
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Animation example
|
||||
shortdesc: Demonstrates animated pan, zoom, and rotation.
|
||||
docs: >
|
||||
This example shows how to use the beforeRender function on the Map to run one
|
||||
or more animations.
|
||||
tags: "animation"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<button id="rotate-left"><i class="icon-arrow-left"></i></button>
|
||||
<button id="rotate-right"><i class="icon-arrow-right"></i></button>
|
||||
<button id="rotate-around-rome">Rotate around Rome</button>
|
||||
<button id="pan-to-london">Pan to London</button>
|
||||
<button id="elastic-to-moscow">Elastic to Moscow</button>
|
||||
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
|
||||
<button id="spin-to-rome">Spin to Rome</button>
|
||||
<button id="fly-to-bern">Fly to Bern</button>
|
||||
<button id="spiral-to-madrid">Spiral to Madrid</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,188 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.animation');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
|
||||
// from https://github.com/DmitryBaranovskiy/raphael
|
||||
function bounce(t) {
|
||||
var s = 7.5625, p = 2.75, l;
|
||||
if (t < (1 / p)) {
|
||||
l = s * t * t;
|
||||
} else {
|
||||
if (t < (2 / p)) {
|
||||
t -= (1.5 / p);
|
||||
l = s * t * t + 0.75;
|
||||
} else {
|
||||
if (t < (2.5 / p)) {
|
||||
t -= (2.25 / p);
|
||||
l = s * t * t + 0.9375;
|
||||
} else {
|
||||
t -= (2.625 / p);
|
||||
l = s * t * t + 0.984375;
|
||||
}
|
||||
}
|
||||
}
|
||||
return l;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
|
||||
var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
|
||||
var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
|
||||
var rome = ol.proj.fromLonLat([12.5, 41.9]);
|
||||
var bern = ol.proj.fromLonLat([7.4458, 46.95]);
|
||||
var madrid = ol.proj.fromLonLat([-3.683333, 40.4]);
|
||||
|
||||
var view = new ol.View({
|
||||
// the view's initial state
|
||||
center: istanbul,
|
||||
zoom: 6
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
preload: 4,
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
// Improve user experience by loading tiles while animating. Will make
|
||||
// animations stutter on mobile or slow devices.
|
||||
loadTilesWhileAnimating: true,
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var rotateLeft = document.getElementById('rotate-left');
|
||||
rotateLeft.addEventListener('click', function() {
|
||||
var rotateLeft = ol.animation.rotate({
|
||||
duration: 2000,
|
||||
rotation: -4 * Math.PI
|
||||
});
|
||||
map.beforeRender(rotateLeft);
|
||||
}, false);
|
||||
var rotateRight = document.getElementById('rotate-right');
|
||||
rotateRight.addEventListener('click', function() {
|
||||
var rotateRight = ol.animation.rotate({
|
||||
duration: 2000,
|
||||
rotation: 4 * Math.PI
|
||||
});
|
||||
map.beforeRender(rotateRight);
|
||||
}, false);
|
||||
|
||||
var rotateAroundRome = document.getElementById('rotate-around-rome');
|
||||
rotateAroundRome.addEventListener('click', function() {
|
||||
var currentRotation = view.getRotation();
|
||||
var rotateAroundRome = ol.animation.rotate({
|
||||
anchor: rome,
|
||||
duration: 1000,
|
||||
rotation: currentRotation
|
||||
});
|
||||
map.beforeRender(rotateAroundRome);
|
||||
view.rotate(currentRotation + (Math.PI / 2), rome);
|
||||
}, false);
|
||||
|
||||
var panToLondon = document.getElementById('pan-to-london');
|
||||
panToLondon.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
view.setCenter(london);
|
||||
}, false);
|
||||
|
||||
var elasticToMoscow = document.getElementById('elastic-to-moscow');
|
||||
elasticToMoscow.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
easing: elastic,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
view.setCenter(moscow);
|
||||
}, false);
|
||||
|
||||
var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
|
||||
bounceToIstanbul.addEventListener('click', function() {
|
||||
var pan = ol.animation.pan({
|
||||
duration: 2000,
|
||||
easing: bounce,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
||||
});
|
||||
map.beforeRender(pan);
|
||||
view.setCenter(istanbul);
|
||||
}, false);
|
||||
|
||||
var spinToRome = document.getElementById('spin-to-rome');
|
||||
spinToRome.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
||||
start: start
|
||||
});
|
||||
var rotate = ol.animation.rotate({
|
||||
duration: duration,
|
||||
rotation: 2 * Math.PI,
|
||||
start: start
|
||||
});
|
||||
map.beforeRender(pan, rotate);
|
||||
view.setCenter(rome);
|
||||
}, false);
|
||||
|
||||
var flyToBern = document.getElementById('fly-to-bern');
|
||||
flyToBern.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
||||
start: start
|
||||
});
|
||||
var bounce = ol.animation.bounce({
|
||||
duration: duration,
|
||||
resolution: 4 * view.getResolution(),
|
||||
start: start
|
||||
});
|
||||
map.beforeRender(pan, bounce);
|
||||
view.setCenter(bern);
|
||||
}, false);
|
||||
|
||||
var spiralToMadrid = document.getElementById('spiral-to-madrid');
|
||||
spiralToMadrid.addEventListener('click', function() {
|
||||
var duration = 2000;
|
||||
var start = +new Date();
|
||||
var pan = ol.animation.pan({
|
||||
duration: duration,
|
||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
||||
start: start
|
||||
});
|
||||
var bounce = ol.animation.bounce({
|
||||
duration: duration,
|
||||
resolution: 2 * view.getResolution(),
|
||||
start: start
|
||||
});
|
||||
var rotate = ol.animation.rotate({
|
||||
duration: duration,
|
||||
rotation: -4 * Math.PI,
|
||||
start: start
|
||||
});
|
||||
map.beforeRender(pan, bounce, rotate);
|
||||
view.setCenter(madrid);
|
||||
}, false);
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Tiled ArcGIS MapServer example
|
||||
shortdesc: Example of a tiled ArcGIS layer.
|
||||
docs: >
|
||||
This example shows how to use an ArcGIS REST MapService as tiles.
|
||||
This source type supports Map and Image Services. For cached ArcGIS
|
||||
services, better performance is available by using
|
||||
<code>ol.source.XYZ</code> instead.
|
||||
tags: arcgis, tile, tilelayer"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,28 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.TileArcGISRest');
|
||||
|
||||
var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
|
||||
'Specialty/ESRI_StateCityHighway_USA/MapServer';
|
||||
|
||||
var layers = [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
extent: [-13884991, 2870341, -7455066, 6338219],
|
||||
source: new ol.source.TileArcGISRest({
|
||||
url: url
|
||||
})
|
||||
})
|
||||
];
|
||||
var map = new ol.Map({
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-10997148, 4569099],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
@@ -1,15 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Attributions example
|
||||
shortdesc: Example of a attributions visibily change on map resize, to collapse them on small maps.
|
||||
docs: >
|
||||
When the map gets too small because of a resize, the attribution will be collapsed.
|
||||
This is because the <code>collapsible</code> option is set to true if the width
|
||||
of the map gets smaller than 600 pixels.
|
||||
tags: "attributions, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.Attribution');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var attribution = new ol.control.Attribution({
|
||||
collapsible: false
|
||||
});
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
controls: ol.control.defaults({ attribution: false }).extend([attribution]),
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
function checkSize() {
|
||||
var small = map.getSize()[0] < 600;
|
||||
attribution.setCollapsible(small);
|
||||
attribution.setCollapsed(small);
|
||||
}
|
||||
|
||||
$(window).on('resize', checkSize);
|
||||
checkSize();
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Bing Maps example
|
||||
shortdesc: Example of a Bing Maps layer.
|
||||
docs: >
|
||||
<p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
|
||||
tags: "bing, bing-maps"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<select id="layer-select">
|
||||
<option value="Aerial">Aerial</option>
|
||||
<option value="AerialWithLabels" selected>Aerial with labels</option>
|
||||
<option value="Road">Road</option>
|
||||
<option value="collinsBart">Collins Bart</option>
|
||||
<option value="ordnanceSurvey">Ordnance Survey</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,49 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var styles = [
|
||||
'Road',
|
||||
'Aerial',
|
||||
'AerialWithLabels',
|
||||
'collinsBart',
|
||||
'ordnanceSurvey'
|
||||
];
|
||||
var layers = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = styles.length; i < ii; ++i) {
|
||||
layers.push(new ol.layer.Tile({
|
||||
visible: false,
|
||||
preload: Infinity,
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: styles[i]
|
||||
// use maxZoom 19 to see stretched tiles instead of the BingMaps
|
||||
// "no photos at this zoom level" tiles
|
||||
// maxZoom: 19
|
||||
})
|
||||
}));
|
||||
}
|
||||
var map = new ol.Map({
|
||||
layers: layers,
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
// Improve user experience by loading tiles while dragging/zooming. Will make
|
||||
// zooming choppy on mobile or slow devices.
|
||||
loadTilesWhileInteracting: true,
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-6655.5402445057125, 6709968.258934638],
|
||||
zoom: 13
|
||||
})
|
||||
});
|
||||
|
||||
$('#layer-select').change(function() {
|
||||
var style = $(this).find(':selected').val();
|
||||
var i, ii;
|
||||
for (i = 0, ii = layers.length; i < ii; ++i) {
|
||||
layers[i].setVisible(styles[i] == style);
|
||||
}
|
||||
});
|
||||
$('#layer-select').trigger('change');
|
||||
@@ -1,20 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Box selection example
|
||||
shortdesc: Using a DragBox interaction to select features.
|
||||
docs: >
|
||||
<p>This example shows how to use a <code>DragBox</code> interaction to select features. Selected features are added
|
||||
to the feature overlay of a select interaction (<code>ol.interaction.Select</code>) for highlighting.</p>
|
||||
<p>Use <code>SHIFT+drag</code> to draw boxes.</p>
|
||||
tags: "DragBox, feature, selection, box"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div class="span4 offset4 pull-right">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,81 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.events.condition');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.interaction.DragBox');
|
||||
goog.require('ol.interaction.Select');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var vectorSource = new ol.source.Vector({
|
||||
url: 'data/geojson/countries.geojson',
|
||||
format: new ol.format.GeoJSON()
|
||||
});
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: vectorSource
|
||||
})
|
||||
],
|
||||
renderer: 'canvas',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
// a normal select interaction to handle click
|
||||
var select = new ol.interaction.Select();
|
||||
map.addInteraction(select);
|
||||
|
||||
var selectedFeatures = select.getFeatures();
|
||||
|
||||
// a DragBox interaction used to select features by drawing boxes
|
||||
var dragBox = new ol.interaction.DragBox({
|
||||
condition: ol.events.condition.shiftKeyOnly,
|
||||
style: new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: [0, 0, 255, 1]
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
map.addInteraction(dragBox);
|
||||
|
||||
var infoBox = document.getElementById('info');
|
||||
|
||||
dragBox.on('boxend', function(e) {
|
||||
// features that intersect the box are added to the collection of
|
||||
// selected features, and their names are displayed in the "info"
|
||||
// div
|
||||
var info = [];
|
||||
var extent = dragBox.getGeometry().getExtent();
|
||||
vectorSource.forEachFeatureIntersectingExtent(extent, function(feature) {
|
||||
selectedFeatures.push(feature);
|
||||
info.push(feature.get('name'));
|
||||
});
|
||||
if (info.length > 0) {
|
||||
infoBox.innerHTML = info.join(', ');
|
||||
}
|
||||
});
|
||||
|
||||
// clear selection when drawing a new box and when clicking on the map
|
||||
dragBox.on('boxstart', function(e) {
|
||||
selectedFeatures.clear();
|
||||
infoBox.innerHTML = ' ';
|
||||
});
|
||||
map.on('click', function() {
|
||||
selectedFeatures.clear();
|
||||
infoBox.innerHTML = ' ';
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
#reset-brightness {
|
||||
min-width: 138px;
|
||||
}
|
||||
#reset-contrast {
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Brightness/contrast example
|
||||
shortdesc: Example of brightness/contrast control on the client (WebGL only).
|
||||
docs: >
|
||||
This example shows how to control brightness/contrast on the client,
|
||||
the example is limited to WebGL.
|
||||
tags: "brightness, contrast, webgl"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div id="no-webgl" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-brightness"><i class="icon-plus"></i></button>
|
||||
<button id="reset-brightness">Brightness</button>
|
||||
<button id="decrease-brightness"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button id="increase-contrast"><i class="icon-plus"></i></button>
|
||||
<button id="reset-contrast">Contrast</button>
|
||||
<button id="decrease-contrast"><i class="icon-minus"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,75 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.has');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
|
||||
|
||||
function setResetBrightnessButtonHTML() {
|
||||
resetBrightness.innerHTML = 'Brightness (' +
|
||||
layer.getBrightness().toFixed(3) + ')';
|
||||
}
|
||||
|
||||
function setResetContrastButtonHTML() {
|
||||
resetContrast.innerHTML = 'Contrast (' + layer.getContrast().toFixed(3) + ')';
|
||||
}
|
||||
|
||||
if (!ol.has.WEBGL) {
|
||||
var info = document.getElementById('no-webgl');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
} else {
|
||||
var layer = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
renderer: 'webgl',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var increaseBrightness = document.getElementById('increase-brightness');
|
||||
var resetBrightness = document.getElementById('reset-brightness');
|
||||
var decreaseBrightness = document.getElementById('decrease-brightness');
|
||||
|
||||
setResetBrightnessButtonHTML();
|
||||
|
||||
increaseBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(Math.min(layer.getBrightness() + 0.125, 1));
|
||||
setResetBrightnessButtonHTML();
|
||||
}, false);
|
||||
resetBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(0);
|
||||
setResetBrightnessButtonHTML();
|
||||
}, false);
|
||||
decreaseBrightness.addEventListener('click', function() {
|
||||
layer.setBrightness(Math.max(layer.getBrightness() - 0.125, -1));
|
||||
setResetBrightnessButtonHTML();
|
||||
}, false);
|
||||
|
||||
var increaseContrast = document.getElementById('increase-contrast');
|
||||
var resetContrast = document.getElementById('reset-contrast');
|
||||
var decreaseContrast = document.getElementById('decrease-contrast');
|
||||
|
||||
setResetContrastButtonHTML();
|
||||
|
||||
increaseContrast.addEventListener('click', function() {
|
||||
layer.setContrast(layer.getContrast() + 0.125);
|
||||
setResetContrastButtonHTML();
|
||||
}, false);
|
||||
resetContrast.addEventListener('click', function() {
|
||||
layer.setContrast(1);
|
||||
setResetContrastButtonHTML();
|
||||
}, false);
|
||||
decreaseContrast.addEventListener('click', function() {
|
||||
layer.setContrast(Math.max(layer.getContrast() - 0.125, 0));
|
||||
setResetContrastButtonHTML();
|
||||
}, false);
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
.tooltip-inner {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Custom tooltips example
|
||||
shortdesc: This example shows how to customize the buttons tooltips with Bootstrap.
|
||||
docs: >
|
||||
This example shows how to customize the buttons tooltips with <a href="http://getbootstrap.com/javascript/#tooltips">Bootstrap</a>.
|
||||
tags: "custom, tooltip"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,27 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-8730000, 5930000],
|
||||
rotation: Math.PI / 5,
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
$('.ol-zoom-in, .ol-zoom-out').tooltip({
|
||||
placement: 'right'
|
||||
});
|
||||
$('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
|
||||
placement: 'left'
|
||||
});
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Canvas tiles example
|
||||
shortdesc: Renders tiles with coordinates for debugging.
|
||||
docs: >
|
||||
<p>The black grid tiles are generated on the client with an HTML5 canvas. Note that the tile coordinates are ol3 normalized tile coordinates (origin bottom left), not
|
||||
OSM tile coordinates (origin top left).</p>
|
||||
tags: "layers, openstreetmap, canvas"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,37 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.TileDebug');
|
||||
goog.require('ol.tilegrid.XYZ');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileDebug({
|
||||
projection: 'EPSG:3857',
|
||||
tileGrid: new ol.tilegrid.XYZ({
|
||||
maxZoom: 22
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: ol.proj.transform(
|
||||
[-0.1275, 51.507222], 'EPSG:4326', 'EPSG:3857'),
|
||||
zoom: 10
|
||||
})
|
||||
});
|
||||
@@ -1,56 +0,0 @@
|
||||
.mapcontainer {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.map {
|
||||
width: 1000px;
|
||||
height: 600px;
|
||||
}
|
||||
div.ol-zoom {
|
||||
top: 178px;
|
||||
left: 158px;
|
||||
}
|
||||
div.ol-attribution {
|
||||
bottom: 30px;
|
||||
right: 50px;
|
||||
}
|
||||
.padding-top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
width: 1000px;
|
||||
height: 170px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-left {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 400px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-right {
|
||||
position: absolute;
|
||||
top: 170px;
|
||||
left: 950px;
|
||||
width: 50px;
|
||||
height: 400px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.padding-bottom {
|
||||
position: absolute;
|
||||
top: 570px;
|
||||
left: 0px;
|
||||
width: 1000px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.center {
|
||||
position: absolute;
|
||||
border: solid 1px black;
|
||||
top: 490px;
|
||||
left: 560px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Advanced View Positioning example
|
||||
shortdesc: This example demonstrates how a map's view can be adjusted so a geometry or coordinate is positioned at a specific pixel location.
|
||||
docs: >
|
||||
This example demonstrates how a map's view can be
|
||||
adjusted so a geometry or coordinate is positioned at a specific
|
||||
pixel location. The map above has top, right, bottom, and left
|
||||
padding applied inside the viewport. The view's <code>fitGeometry</code> method
|
||||
is used to fit a geometry in the view with the same padding. The
|
||||
view's <code>centerOn</code> method is used to position a coordinate (Lausanne)
|
||||
at a specific pixel location (the center of the black box).
|
||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||
tags: "center, rotation, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12 mapcontainer">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="padding-top"></div>
|
||||
<div class="padding-left"></div>
|
||||
<div class="padding-right"></div>
|
||||
<div class="padding-bottom"></div>
|
||||
<div class="center"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<button id="zoomtoswitzerlandbest">Zoom to Switzerland</button> (best fit),<br/>
|
||||
<button id="zoomtoswitzerlandconstrained">Zoom to Switzerland</button> (respect resolution constraint).<br/>
|
||||
<button id="zoomtoswitzerlandnearest">Zoom to Switzerland</button> (nearest),<br/>
|
||||
<button id="zoomtolausanne">Zoom to Lausanne</button> (with min resolution),<br/>
|
||||
<button id="centerlausanne">Center on Lausanne</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,134 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.geom.SimpleGeometry');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var source = new ol.source.Vector({
|
||||
url: 'data/geojson/switzerland.geojson',
|
||||
format: new ol.format.GeoJSON()
|
||||
});
|
||||
var style = new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.6)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#319FD3',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
});
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: source,
|
||||
style: style
|
||||
});
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
vectorLayer
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var zoomtoswitzerlandbest = document.getElementById('zoomtoswitzerlandbest');
|
||||
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.fitGeometry(
|
||||
polygon,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150],
|
||||
constrainResolution: false
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var zoomtoswitzerlandconstrained =
|
||||
document.getElementById('zoomtoswitzerlandconstrained');
|
||||
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.fitGeometry(
|
||||
polygon,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150]
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var zoomtoswitzerlandnearest =
|
||||
document.getElementById('zoomtoswitzerlandnearest');
|
||||
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.fitGeometry(
|
||||
polygon,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150],
|
||||
nearest: true
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var zoomtolausanne = document.getElementById('zoomtolausanne');
|
||||
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.fitGeometry(
|
||||
point,
|
||||
size,
|
||||
{
|
||||
padding: [170, 50, 30, 150],
|
||||
minResolution: 50
|
||||
}
|
||||
);
|
||||
}, false);
|
||||
|
||||
var centerlausanne = document.getElementById('centerlausanne');
|
||||
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]
|
||||
);
|
||||
}, false);
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Clustering example
|
||||
shortdesc: Example of using <code>ol.source.Cluster</code>.
|
||||
docs: >
|
||||
This example shows how to do clustering on point features.
|
||||
tags: "cluster, vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,80 +0,0 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Cluster');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
goog.require('ol.style.Text');
|
||||
|
||||
|
||||
var count = 20000;
|
||||
var features = new Array(count);
|
||||
var e = 4500000;
|
||||
for (var i = 0; i < count; ++i) {
|
||||
var coordinates = [2 * e * Math.random() - e, 2 * e * Math.random() - e];
|
||||
features[i] = new ol.Feature(new ol.geom.Point(coordinates));
|
||||
}
|
||||
|
||||
var source = new ol.source.Vector({
|
||||
features: features
|
||||
});
|
||||
|
||||
var clusterSource = new ol.source.Cluster({
|
||||
distance: 40,
|
||||
source: source
|
||||
});
|
||||
|
||||
var styleCache = {};
|
||||
var clusters = new ol.layer.Vector({
|
||||
source: clusterSource,
|
||||
style: function(feature, resolution) {
|
||||
var size = feature.get('features').length;
|
||||
var style = styleCache[size];
|
||||
if (!style) {
|
||||
style = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#fff'
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#3399CC'
|
||||
})
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
text: size.toString(),
|
||||
fill: new ol.style.Fill({
|
||||
color: '#fff'
|
||||
})
|
||||
})
|
||||
})];
|
||||
styleCache[size] = style;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
});
|
||||
|
||||
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',
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
.rotate-north {
|
||||
top: 65px;
|
||||
left: .5em;
|
||||
}
|
||||
.ol-touch .rotate-north {
|
||||
top: 80px;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Custom control example
|
||||
shortdesc: Shows how to create custom controls.
|
||||
docs: >
|
||||
This example creates a "rotate to north" button.
|
||||
tags: "custom, control"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,81 +0,0 @@
|
||||
goog.require('ol');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.Control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
|
||||
/**
|
||||
* Define a namespace for the application.
|
||||
*/
|
||||
window.app = {};
|
||||
var app = window.app;
|
||||
|
||||
|
||||
//
|
||||
// Define rotate to north control.
|
||||
//
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.control.Control}
|
||||
* @param {Object=} opt_options Control options.
|
||||
*/
|
||||
app.RotateNorthControl = function(opt_options) {
|
||||
|
||||
var options = opt_options || {};
|
||||
|
||||
var button = document.createElement('button');
|
||||
button.innerHTML = 'N';
|
||||
|
||||
var this_ = this;
|
||||
var handleRotateNorth = function(e) {
|
||||
this_.getMap().getView().setRotation(0);
|
||||
};
|
||||
|
||||
button.addEventListener('click', handleRotateNorth, false);
|
||||
button.addEventListener('touchstart', handleRotateNorth, false);
|
||||
|
||||
var element = document.createElement('div');
|
||||
element.className = 'rotate-north ol-unselectable ol-control';
|
||||
element.appendChild(button);
|
||||
|
||||
ol.control.Control.call(this, {
|
||||
element: element,
|
||||
target: options.target
|
||||
});
|
||||
|
||||
};
|
||||
ol.inherits(app.RotateNorthControl, ol.control.Control);
|
||||
|
||||
|
||||
//
|
||||
// Create map, giving it a rotate to north control.
|
||||
//
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}).extend([
|
||||
new app.RotateNorthControl()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2,
|
||||
rotation: 1
|
||||
})
|
||||
});
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: d3 integration example
|
||||
shortdesc: Example of using ol3 and d3 together.
|
||||
docs: >
|
||||
<p>The example loads TopoJSON geometries and uses d3 (<code>d3.geo.path</code>) to render these geometries to a canvas element that is then used as the image of an ol3 image layer.</p>
|
||||
tags: "d3"
|
||||
resources:
|
||||
- http://d3js.org/d3.v3.min.js
|
||||
- http://d3js.org/topojson.v1.min.js
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
96
examples_src/d3.js
vendored
96
examples_src/d3.js
vendored
@@ -1,96 +0,0 @@
|
||||
// NOCOMPILE
|
||||
// this example uses d3 for which we don't have an externs file.
|
||||
goog.require('ol');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.ImageCanvas');
|
||||
goog.require('ol.source.Stamen');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'watercolor'
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: ol.proj.fromLonLat([-97, 38]),
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Load the topojson data and create an ol.layer.Image for that data.
|
||||
*/
|
||||
d3.json('data/topojson/us.json', function(error, us) {
|
||||
var features = topojson.feature(us, us.objects.counties);
|
||||
|
||||
/**
|
||||
* This function uses d3 to render the topojson features to a canvas.
|
||||
* @param {ol.Extent} extent Extent.
|
||||
* @param {number} resolution Resolution.
|
||||
* @param {number} pixelRatio Pixel ratio.
|
||||
* @param {ol.Size} size Size.
|
||||
* @param {ol.proj.Projection} projection Projection.
|
||||
* @return {HTMLCanvasElement}
|
||||
*/
|
||||
var canvasFunction = function(extent, resolution, pixelRatio,
|
||||
size, projection) {
|
||||
var canvasWidth = size[0];
|
||||
var canvasHeight = size[1];
|
||||
|
||||
var canvas = d3.select(document.createElement('canvas'));
|
||||
canvas.attr('width', canvasWidth).attr('height', canvasHeight);
|
||||
|
||||
var context = canvas.node().getContext('2d');
|
||||
|
||||
var d3Projection = d3.geo.mercator().scale(1).translate([0, 0]);
|
||||
var d3Path = d3.geo.path().projection(d3Projection);
|
||||
|
||||
var pixelBounds = d3Path.bounds(features);
|
||||
var pixelBoundsWidth = pixelBounds[1][0] - pixelBounds[0][0];
|
||||
var pixelBoundsHeight = pixelBounds[1][1] - pixelBounds[0][1];
|
||||
|
||||
var geoBounds = d3.geo.bounds(features);
|
||||
var geoBoundsLeftBottom = ol.proj.transform(
|
||||
geoBounds[0], 'EPSG:4326', projection);
|
||||
var geoBoundsRightTop = ol.proj.transform(
|
||||
geoBounds[1], 'EPSG:4326', projection);
|
||||
var geoBoundsWidth = geoBoundsRightTop[0] - geoBoundsLeftBottom[0];
|
||||
if (geoBoundsWidth < 0) {
|
||||
geoBoundsWidth += ol.extent.getWidth(projection.getExtent());
|
||||
}
|
||||
var geoBoundsHeight = geoBoundsRightTop[1] - geoBoundsLeftBottom[1];
|
||||
|
||||
var widthResolution = geoBoundsWidth / pixelBoundsWidth;
|
||||
var heightResolution = geoBoundsHeight / pixelBoundsHeight;
|
||||
var r = Math.max(widthResolution, heightResolution);
|
||||
var scale = r / (resolution / pixelRatio);
|
||||
|
||||
var center = ol.proj.transform(ol.extent.getCenter(extent),
|
||||
projection, 'EPSG:4326');
|
||||
d3Projection.scale(scale).center(center)
|
||||
.translate([canvasWidth / 2, canvasHeight / 2]);
|
||||
d3Path = d3Path.projection(d3Projection).context(context);
|
||||
d3Path(features);
|
||||
context.stroke();
|
||||
|
||||
return canvas[0][0];
|
||||
};
|
||||
|
||||
var layer = new ol.layer.Image({
|
||||
source: new ol.source.ImageCanvas({
|
||||
canvasFunction: canvasFunction,
|
||||
projection: 'EPSG:3857'
|
||||
})
|
||||
});
|
||||
map.addLayer(layer);
|
||||
});
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB |
File diff suppressed because one or more lines are too long
@@ -1,279 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<Capabilities version="1.0.0" xmlns="http://www.opengis.net/wmts/1.0" xmlns:gml="http://www.opengis.net/gml" xmlns:ows="http://www.opengis.net/ows/1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wmts/1.0 http://schemas.opengis.net/wmts/1.0/wmtsGetCapabilities_response.xsd">
|
||||
<ows:ServiceIdentification>
|
||||
<ows:Title>Koordinates Labs</ows:Title>
|
||||
<ows:ServiceType>OGC WMTS</ows:ServiceType>
|
||||
<ows:ServiceTypeVersion>1.0.0</ows:ServiceTypeVersion>
|
||||
</ows:ServiceIdentification>
|
||||
<ows:ServiceProvider>
|
||||
<ows:ProviderName>Koordinates</ows:ProviderName>
|
||||
<ows:ProviderSite xlink:href="http://labs.koordinates.com"/>
|
||||
<ows:ServiceContact/>
|
||||
</ows:ServiceProvider>
|
||||
<ows:OperationsMetadata>
|
||||
<ows:Operation name="GetCapabilities">
|
||||
<ows:DCP>
|
||||
<ows:HTTP>
|
||||
<ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml?">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>KVP</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
</ows:HTTP>
|
||||
</ows:DCP>
|
||||
</ows:Operation>
|
||||
<ows:Operation name="GetFeatureInfo">
|
||||
<ows:DCP>
|
||||
<ows:HTTP>
|
||||
<ows:Get xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/?">
|
||||
<ows:Constraint name="GetEncoding">
|
||||
<ows:AllowedValues>
|
||||
<ows:Value>KVP</ows:Value>
|
||||
</ows:AllowedValues>
|
||||
</ows:Constraint>
|
||||
</ows:Get>
|
||||
</ows:HTTP>
|
||||
</ows:DCP>
|
||||
</ows:Operation>
|
||||
</ows:OperationsMetadata>
|
||||
<Contents>
|
||||
<Layer>
|
||||
<ows:Title>New Zealand Earthquakes</ows:Title>
|
||||
<ows:Abstract>Historical earthquake data, accessed via the [GeoNet WFS feed](http://info.geonet.org.nz/display/appdata/Advanced+Queries). The data has been filtered to only include quakes in proximity to New Zealand with an `eventtype` of "Earthquake" or "none" per the [GeoNet catalogue](http://info.geonet.org.nz/display/appdata/Catalogue+Output). Most fields have been removed. Please also note the excluded data per this [GeoNet page](http://info.geonet.org.nz/display/appdata/The+Gap). We acknowledge the New Zealand GeoNet project and its sponsors EQC, GNS Science and LINZ, for providing data used in this layer.</ows:Abstract>
|
||||
<ows:Identifier>layer-7328</ows:Identifier>
|
||||
<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
|
||||
<ows:LowerCorner>-20037508.342789 -6406581.708337</ows:LowerCorner>
|
||||
<ows:UpperCorner>20037508.342789 -3653545.667928</ows:UpperCorner>
|
||||
</ows:BoundingBox>
|
||||
<ows:WGS84BoundingBox crs="urn:ogc:def:crs:OGC:2:84">
|
||||
<ows:LowerCorner>-180.000000 -49.454297</ows:LowerCorner>
|
||||
<ows:UpperCorner>180.000000 -31.160000</ows:UpperCorner>
|
||||
</ows:WGS84BoundingBox>
|
||||
<Style isDefault="true">
|
||||
<ows:Title>Weighted point styles</ows:Title>
|
||||
<ows:Identifier>style=39</ows:Identifier>
|
||||
</Style>
|
||||
<Format>image/png</Format>
|
||||
<InfoFormat>application/json</InfoFormat>
|
||||
<InfoFormat>text/html</InfoFormat>
|
||||
<TileMatrixSetLink>
|
||||
<TileMatrixSet>EPSG:3857</TileMatrixSet>
|
||||
</TileMatrixSetLink>
|
||||
<ResourceURL format="image/png" resourceType="tile" template="https://koordinates-tiles-a.global.ssl.fastly.net/services;key=d740ea02e0c44cafb70dce31a774ca10/tiles/v4/layer=7328,{style}/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}.png"/>
|
||||
<ResourceURL format="application/json" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.json"/>
|
||||
<ResourceURL format="text/html" resourceType="FeatureInfo" template="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/featureinfo/{TileMatrixSet}/{TileMatrix}/{TileCol}/{TileRow}/{I}/{J}.html"/>
|
||||
</Layer>
|
||||
<TileMatrixSet>
|
||||
<ows:Title>GoogleMapsCompatible</ows:Title>
|
||||
<ows:Abstract>The well-known 'GoogleMapsCompatible' tile matrix set defined by the OGC WMTS specification</ows:Abstract>
|
||||
<ows:Identifier>EPSG:3857</ows:Identifier>
|
||||
<ows:BoundingBox crs="urn:ogc:def:crs:EPSG::3857">
|
||||
<ows:LowerCorner>-20037508.342789 -20037508.342789</ows:LowerCorner>
|
||||
<ows:UpperCorner>20037508.342789 20037508.342789</ows:UpperCorner>
|
||||
</ows:BoundingBox>
|
||||
<ows:SupportedCRS>urn:ogc:def:crs:EPSG::3857</ows:SupportedCRS>
|
||||
<WellKnownScaleSet>urn:ogc:def:wkss:OGC:1.0:GoogleMapsCompatible</WellKnownScaleSet>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>0</ows:Identifier>
|
||||
<ScaleDenominator>559082264.029</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>1</MatrixWidth>
|
||||
<MatrixHeight>1</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>1</ows:Identifier>
|
||||
<ScaleDenominator>279541132.014</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>2</MatrixWidth>
|
||||
<MatrixHeight>2</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>2</ows:Identifier>
|
||||
<ScaleDenominator>139770566.007</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>4</MatrixWidth>
|
||||
<MatrixHeight>4</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>3</ows:Identifier>
|
||||
<ScaleDenominator>69885283.0036</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>8</MatrixWidth>
|
||||
<MatrixHeight>8</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>4</ows:Identifier>
|
||||
<ScaleDenominator>34942641.5018</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>16</MatrixWidth>
|
||||
<MatrixHeight>16</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>5</ows:Identifier>
|
||||
<ScaleDenominator>17471320.7509</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>32</MatrixWidth>
|
||||
<MatrixHeight>32</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>6</ows:Identifier>
|
||||
<ScaleDenominator>8735660.37545</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>64</MatrixWidth>
|
||||
<MatrixHeight>64</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>7</ows:Identifier>
|
||||
<ScaleDenominator>4367830.18772</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>128</MatrixWidth>
|
||||
<MatrixHeight>128</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>8</ows:Identifier>
|
||||
<ScaleDenominator>2183915.09386</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>256</MatrixWidth>
|
||||
<MatrixHeight>256</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>9</ows:Identifier>
|
||||
<ScaleDenominator>1091957.54693</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>512</MatrixWidth>
|
||||
<MatrixHeight>512</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>10</ows:Identifier>
|
||||
<ScaleDenominator>545978.773466</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>1024</MatrixWidth>
|
||||
<MatrixHeight>1024</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>11</ows:Identifier>
|
||||
<ScaleDenominator>272989.386733</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>2048</MatrixWidth>
|
||||
<MatrixHeight>2048</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>12</ows:Identifier>
|
||||
<ScaleDenominator>136494.693366</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>4096</MatrixWidth>
|
||||
<MatrixHeight>4096</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>13</ows:Identifier>
|
||||
<ScaleDenominator>68247.3466832</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>8192</MatrixWidth>
|
||||
<MatrixHeight>8192</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>14</ows:Identifier>
|
||||
<ScaleDenominator>34123.6733416</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>16384</MatrixWidth>
|
||||
<MatrixHeight>16384</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>15</ows:Identifier>
|
||||
<ScaleDenominator>17061.8366708</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>32768</MatrixWidth>
|
||||
<MatrixHeight>32768</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>16</ows:Identifier>
|
||||
<ScaleDenominator>8530.9183354</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>65536</MatrixWidth>
|
||||
<MatrixHeight>65536</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>17</ows:Identifier>
|
||||
<ScaleDenominator>4265.4591677</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>131072</MatrixWidth>
|
||||
<MatrixHeight>131072</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>18</ows:Identifier>
|
||||
<ScaleDenominator>2132.72958385</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>262144</MatrixWidth>
|
||||
<MatrixHeight>262144</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>19</ows:Identifier>
|
||||
<ScaleDenominator>1066.36479192</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>524288</MatrixWidth>
|
||||
<MatrixHeight>524288</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>20</ows:Identifier>
|
||||
<ScaleDenominator>533.182395962</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>1048576</MatrixWidth>
|
||||
<MatrixHeight>1048576</MatrixHeight>
|
||||
</TileMatrix>
|
||||
<TileMatrix>
|
||||
<ows:Identifier>21</ows:Identifier>
|
||||
<ScaleDenominator>266.591197981</ScaleDenominator>
|
||||
<TopLeftCorner>-20037508.3428 20037508.3428</TopLeftCorner>
|
||||
<TileWidth>256</TileWidth>
|
||||
<TileHeight>256</TileHeight>
|
||||
<MatrixWidth>2097152</MatrixWidth>
|
||||
<MatrixHeight>2097152</MatrixHeight>
|
||||
</TileMatrix>
|
||||
</TileMatrixSet>
|
||||
</Contents>
|
||||
<ServiceMetadataURL xlink:href="https://labs.koordinates.com/services;key=d740ea02e0c44cafb70dce31a774ca10/wmts/1.0.0/layer/7328/WMTSCapabilities.xml"/>
|
||||
</Capabilities>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 398 B |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "name": "Roussel" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.317812426119204, 48.287712285170407 ], [ -73.965445435101188, 48.287712285170407 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de la Grande-Décharge Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.890274359943689, 47.66777849648031 ], [ -73.03935270229745, 47.552045722357249 ], [ -73.03483517677158, 47.743778832463107 ], [ -72.750231068641639, 47.749854072477497 ], [ -72.754748594167509, 47.552045722357249 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "du Saguenay Ouest" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.007730023616347, 48.07082744644633 ], [ -72.894791885469544, 47.889388912080449 ], [ -72.727643441012276, 48.082900678850329 ], [ -72.560494996555022, 47.895447137861773 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Anicet" }, "geometry": { "type": "LineString", "coordinates": [ [ -72.985142395986983, 48.338787334581873 ], [ -72.980624870461128, 48.161307640513321 ], [ -72.885756834417805, 48.164320903012829 ], [ -72.894791885469544, 48.338787334581873 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.459482576203527, 47.53679865861892 ], [ -73.454965050677686, 47.719470781160837 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Sainte-Geneviève" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.716981531178234, 47.889388912080449 ], [ -73.423342371996569, 48.091953743979651 ], [ -73.242641350961676, 47.883329977544491 ], [ -73.685358852497131, 47.862118125007399 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de Lombard" }, "geometry": { "type": "LineString", "coordinates": [ [ -73.631148546186679, 48.323770568268507 ], [ -73.626631020660795, 48.185408784389622 ], [ -73.55435061224685, 48.188420630879783 ], [ -73.55435061224685, 48.320766684325278 ], [ -73.473035152781165, 48.317762623483489 ], [ -73.482070203832905, 48.19745510840756 ], [ -73.400754744367205, 48.206487993065075 ], [ -73.396237218841335, 48.323770568268507 ], [ -73.301369182798027, 48.317762623483489 ], [ -73.319439284901506, 48.191432300378096 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de la Grande-Baie Sud" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.439785615317746, 47.564240180362376 ], [ -74.227461915601779, 47.716431476953346 ], [ -74.055795945618627, 47.552045722357249 ], [ -73.879612450109633, 47.710352336655504 ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "de Tadoussac" }, "geometry": { "type": "LineString", "coordinates": [ [ -74.313294900593348, 48.091953743979651 ], [ -74.313294900593348, 47.880300244488787 ], [ -73.974480486152942, 47.877270334238752 ], [ -73.978998011678812, 48.076864416783366 ] ] } }
|
||||
]
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "name": "Saguenay (Arrondissement Latterière)" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 47.6434349837781 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Canton Tremblay" }, "geometry": { "type": "Point", "coordinates": [ -75.840218528338056, 47.971115165183342 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Félix-d'Otis" }, "geometry": { "type": "Point", "coordinates": [ -75.849253579389796, 48.278693733790902 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "La Baie" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 47.649521925935176 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-David-de-Falardeau" }, "geometry": { "type": "Point", "coordinates": [ -74.801187657387501, 47.977163824275436 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Honoré-de-Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -74.792152606335762, 48.284706278302295 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Alma" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.6434349837781 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Jonquière" }, "geometry": { "type": "Point", "coordinates": [ -75.298115465233423, 47.971115165183342 ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Chicoutimi" }, "geometry": { "type": "Point", "coordinates": [ -75.289080414181669, 48.284706278302295 ] } }
|
||||
]
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
{
|
||||
"type": "FeatureCollection",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "name": "Parc de la Colline" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 47.72858763003908 ], [ -71.86027854004486, 47.527648291638172 ], [ -72.37075892446839, 47.539848426151735 ], [ -72.357206347890767, 47.72858763003908 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Centre Paul-Étienne Simard" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.357206347890767, 48.013440900213297 ], [ -72.239750684218109, 48.013440900213297 ], [ -72.253303260795718, 47.856056000888501 ], [ -72.027426984502114, 47.856056000888501 ], [ -72.036462035553868, 48.013440900213297 ], [ -71.905453795303586, 48.01646283861713 ], [ -71.891901218725963, 47.801464984333364 ], [ -72.361723873416651, 47.810567474765456 ], [ -72.357206347890767, 48.013440900213297 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs Rivière du Moulin" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -72.194575428959382, 48.33278115872843 ], [ -72.018391933450374, 48.33278115872843 ], [ -71.846725963467236, 48.251628525276693 ], [ -71.950629050562299, 48.107038644740094 ], [ -72.203610480011122, 48.107038644740094 ], [ -72.397864077623623, 48.221539261269051 ], [ -72.194575428959382, 48.33278115872843 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "L'Étoile-du-Nord" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.589227008492543, 47.649521925935176 ], [ -71.525981651130337, 47.734664642855655 ], [ -71.48532392139748, 47.649521925935169 ], [ -71.295587849310877, 47.637347332276697 ], [ -71.462736293768117, 47.585573652777313 ], [ -71.390455885354172, 47.475766052599219 ], [ -71.535016702182091, 47.552045722357242 ], [ -71.702165146639345, 47.491030857179695 ], [ -71.616332161647762, 47.591667334264848 ], [ -71.787998131630914, 47.655608158761908 ], [ -71.589227008492543, 47.649521925935176 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs Lavoie et St-Jean-Baptiste" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.729270299794578, 48.010418784700107 ], [ -71.291070323784993, 48.004374022337799 ], [ -71.291070323784993, 47.777183877693901 ], [ -71.729270299794578, 47.786290622064854 ], [ -71.729270299794578, 48.010418784700107 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs Diamant" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.693130095587605, 48.341790157179155 ], [ -71.286552798259123, 48.344792802893032 ], [ -71.449183717190522, 48.224548983994914 ], [ -71.277517747207369, 48.070827446446337 ], [ -71.751857927423927, 48.085918544287573 ], [ -71.507911549026844, 48.21551928490868 ], [ -71.693130095587605, 48.341790157179155 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Sydenham" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.051641470913779, 47.710352336655504 ], [ -70.911598179611758, 47.710352336655504 ], [ -70.925150756189367, 47.619080121567436 ], [ -70.712827056473373, 47.616034965734443 ], [ -70.721862107525112, 47.448278226184989 ], [ -70.857387873301292, 47.448278226184989 ], [ -70.852870347775408, 47.552045722357249 ], [ -71.056158996439635, 47.552045722357249 ], [ -71.051641470913779, 47.710352336655504 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Saint-Luc" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -71.110369302750115, 47.798430466372736 ], [ -70.902563128560018, 47.983211774835986 ], [ -70.699274479895777, 47.789325849015306 ], [ -71.110369302750115, 47.798430466372736 ] ] ] } },
|
||||
{ "type": "Feature", "properties": { "name": "Loisirs du Fjord du Saguenay" }, "geometry": { "type": "Polygon", "coordinates": [ [ [ -70.988396113551573, 48.32977780546792 ], [ -70.812212618042579, 48.32977780546792 ], [ -70.807695092516681, 48.209498600656133 ], [ -70.631511597007702, 48.209498600656147 ], [ -70.636029122533571, 48.079882636349602 ], [ -71.146509506957088, 48.082900678850329 ], [ -71.151027032482972, 48.212509031269981 ], [ -70.983878588025689, 48.209498600656133 ], [ -70.988396113551573, 48.32977780546792 ] ] ] } }
|
||||
]
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
{"type":"FeatureCollection","features":[
|
||||
{"type":"Feature","id":"CHE","properties":{"name":"Switzerland"},"geometry":{"type":"Polygon","coordinates":[[[9.594226,47.525058],[9.632932,47.347601],[9.47997,47.10281],[9.932448,46.920728],[10.442701,46.893546],[10.363378,46.483571],[9.922837,46.314899],[9.182882,46.440215],[8.966306,46.036932],[8.489952,46.005151],[8.31663,46.163642],[7.755992,45.82449],[7.273851,45.776948],[6.843593,45.991147],[6.5001,46.429673],[6.022609,46.27299],[6.037389,46.725779],[6.768714,47.287708],[6.736571,47.541801],[7.192202,47.449766],[7.466759,47.620582],[8.317301,47.61358],[8.522612,47.830828],[9.594226,47.525058]]]}},
|
||||
{"type":"Feature","id":"LSNE","properties":{"name":"Lausanne"},"geometry":{"type":"Point","coordinates":[6.6339863,46.5193823]}}
|
||||
]}
|
||||
@@ -1,729 +0,0 @@
|
||||
{
|
||||
"data": [{
|
||||
"coords": {
|
||||
"speed": 1.7330950498580933,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 238,
|
||||
"longitude": 5.868668798362713,
|
||||
"heading": 67.5,
|
||||
"latitude": 45.64444874417562
|
||||
},
|
||||
"timestamp": 1394788264972
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 1.9535436630249023,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 238,
|
||||
"longitude": 5.868715401744348,
|
||||
"heading": 69.609375,
|
||||
"latitude": 45.64446391542036
|
||||
},
|
||||
"timestamp": 1394788266115
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 2.1882569789886475,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 238,
|
||||
"longitude": 5.868768962105614,
|
||||
"heading": 67.5,
|
||||
"latitude": 45.644484995906836
|
||||
},
|
||||
"timestamp": 1394788267107
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 2.4942498207092285,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 237,
|
||||
"longitude": 5.868825791409117,
|
||||
"heading": 68.5546875,
|
||||
"latitude": 45.64450435810316
|
||||
},
|
||||
"timestamp": 1394788267959
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 2.7581217288970947,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 237,
|
||||
"longitude": 5.868881698703271,
|
||||
"heading": 69.609375,
|
||||
"latitude": 45.64452149909515
|
||||
},
|
||||
"timestamp": 1394788268964
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.3746347427368164,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.868938528006774,
|
||||
"heading": 70.3125,
|
||||
"latitude": 45.644536712249405
|
||||
},
|
||||
"timestamp": 1394788270116
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.597411870956421,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.868992004549009,
|
||||
"heading": 74.8828125,
|
||||
"latitude": 45.644547943999655
|
||||
},
|
||||
"timestamp": 1394788271158
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.6382505893707275,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869038775568706,
|
||||
"heading": 73.828125,
|
||||
"latitude": 45.64456005584974
|
||||
},
|
||||
"timestamp": 1394788271893
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.65671443939209,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869091162463528,
|
||||
"heading": 73.4765625,
|
||||
"latitude": 45.644572335337884
|
||||
},
|
||||
"timestamp": 1394788272903
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.7153592109680176,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869144219910604,
|
||||
"heading": 73.125,
|
||||
"latitude": 45.64458671030182
|
||||
},
|
||||
"timestamp": 1394788273914
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.8041043281555176,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869205072527629,
|
||||
"heading": 72.421875,
|
||||
"latitude": 45.64460313883204
|
||||
},
|
||||
"timestamp": 1394788274901
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.9588162899017334,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869268858810765,
|
||||
"heading": 72.421875,
|
||||
"latitude": 45.64461990263838
|
||||
},
|
||||
"timestamp": 1394788276140
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.152309417724609,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869351252918941,
|
||||
"heading": 78.046875,
|
||||
"latitude": 45.64466122542102
|
||||
},
|
||||
"timestamp": 1394788276948
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.49971866607666,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 236,
|
||||
"longitude": 5.869433479389054,
|
||||
"heading": 79.8046875,
|
||||
"latitude": 45.64467040360499
|
||||
},
|
||||
"timestamp": 1394788277892
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.824056148529053,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869504055013758,
|
||||
"heading": 91.40625,
|
||||
"latitude": 45.64466089014489
|
||||
},
|
||||
"timestamp": 1394788279211
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.269814491271973,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869575049733621,
|
||||
"heading": 91.40625,
|
||||
"latitude": 45.64465967476893
|
||||
},
|
||||
"timestamp": 1394788279898
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.4861016273498535,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.86963213049422,
|
||||
"heading": 95.2734375,
|
||||
"latitude": 45.64465091568012
|
||||
},
|
||||
"timestamp": 1394788280935
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.380503177642822,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.869714859878523,
|
||||
"heading": 75.5859375,
|
||||
"latitude": 45.64468792178262
|
||||
},
|
||||
"timestamp": 1394788281930
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.276519775390625,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.869746124377353,
|
||||
"heading": 55.1953125,
|
||||
"latitude": 45.64467706721801
|
||||
},
|
||||
"timestamp": 1394788282909
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.212399482727051,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 232,
|
||||
"longitude": 5.8697939850444625,
|
||||
"heading": 49.5703125,
|
||||
"latitude": 45.64467899505574
|
||||
},
|
||||
"timestamp": 1394788284221
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.174651622772217,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869789123540623,
|
||||
"heading": 18.984375,
|
||||
"latitude": 45.64469378911484
|
||||
},
|
||||
"timestamp": 1394788284924
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.211904525756836,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869806222623093,
|
||||
"heading": 10.1953125,
|
||||
"latitude": 45.64473896757294
|
||||
},
|
||||
"timestamp": 1394788286251
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.254780292510986,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 233,
|
||||
"longitude": 5.86982952431391,
|
||||
"heading": 18.6328125,
|
||||
"latitude": 45.64478381075491
|
||||
},
|
||||
"timestamp": 1394788286927
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.329030513763428,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869875792419417,
|
||||
"heading": 33.75,
|
||||
"latitude": 45.644830078860416
|
||||
},
|
||||
"timestamp": 1394788288221
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.384955883026123,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869927508761985,
|
||||
"heading": 46.7578125,
|
||||
"latitude": 45.64486025371183
|
||||
},
|
||||
"timestamp": 1394788288935
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.309582233428955,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 232,
|
||||
"longitude": 5.869972854858143,
|
||||
"heading": 47.109375,
|
||||
"latitude": 45.644890596201314
|
||||
},
|
||||
"timestamp": 1394788290178
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.250724792480469,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870029265066488,
|
||||
"heading": 46.40625,
|
||||
"latitude": 45.644932673355235
|
||||
},
|
||||
"timestamp": 1394788290890
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.3057990074157715,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870077712466819,
|
||||
"heading": 39.375,
|
||||
"latitude": 45.644970224281444
|
||||
},
|
||||
"timestamp": 1394788291884
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.431822299957275,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870133116846783,
|
||||
"heading": 43.59375,
|
||||
"latitude": 45.6450097449549
|
||||
},
|
||||
"timestamp": 1394788292885
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.542125225067139,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870186509569986,
|
||||
"heading": 43.59375,
|
||||
"latitude": 45.645047421609654
|
||||
},
|
||||
"timestamp": 1394788294100
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.647174835205078,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.870246104901535,
|
||||
"heading": 42.890625,
|
||||
"latitude": 45.645093647805645
|
||||
},
|
||||
"timestamp": 1394788295157
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.735793590545654,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.870298156520231,
|
||||
"heading": 42.5390625,
|
||||
"latitude": 45.64514368776758
|
||||
},
|
||||
"timestamp": 1394788296124
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.809989929199219,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.870346436282499,
|
||||
"heading": 43.59375,
|
||||
"latitude": 45.64519154843469
|
||||
},
|
||||
"timestamp": 1394788296960
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.877871036529541,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.87034755932109,
|
||||
"heading": 42.75193405151367,
|
||||
"latitude": 45.645270362475216
|
||||
},
|
||||
"timestamp": 1394788298177
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.937166690826416,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.870402806867787,
|
||||
"heading": 42.75193405151367,
|
||||
"latitude": 45.645312142096095
|
||||
},
|
||||
"timestamp": 1394788298898
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.071393966674805,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870464520921814,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64535851937182
|
||||
},
|
||||
"timestamp": 1394788299897
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.329115390777588,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.8705368384107715,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.645412389093565
|
||||
},
|
||||
"timestamp": 1394788300957
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.581554889678955,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870600162706978,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64545955929912
|
||||
},
|
||||
"timestamp": 1394788302211
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.605470180511475,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.870657211053185,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64550205482465
|
||||
},
|
||||
"timestamp": 1394788302917
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.623170375823975,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870713613403495,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64554406917767
|
||||
},
|
||||
"timestamp": 1394788303929
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.645580768585205,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870773011629353,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64558831489415
|
||||
},
|
||||
"timestamp": 1394788304902
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.663600444793701,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 4,
|
||||
"altitude": 229,
|
||||
"longitude": 5.87083890910435,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.645637401898654
|
||||
},
|
||||
"timestamp": 1394788306035
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.664675712585449,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.870890033475007,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64567548463474
|
||||
},
|
||||
"timestamp": 1394788307080
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.6489081382751465,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.870943189474929,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.645715080460064
|
||||
},
|
||||
"timestamp": 1394788308211
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.551820755004883,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 228,
|
||||
"longitude": 5.871005613698799,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64576158014743
|
||||
},
|
||||
"timestamp": 1394788308904
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.467689514160156,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.871058030061249,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64580062501799
|
||||
},
|
||||
"timestamp": 1394788310161
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 6.3997955322265625,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 229,
|
||||
"longitude": 5.871062579208228,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64580401381376
|
||||
},
|
||||
"timestamp": 1394788310957
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.799798488616943,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.8710817079554545,
|
||||
"heading": 43.183074951171875,
|
||||
"latitude": 45.64581826277647
|
||||
},
|
||||
"timestamp": 1394788312036
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.424941062927246,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 230,
|
||||
"longitude": 5.871121835629857,
|
||||
"heading": 175.4296875,
|
||||
"latitude": 45.645828271551544
|
||||
},
|
||||
"timestamp": 1394788312951
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.3496222496032715,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.8710026017471595,
|
||||
"heading": 176.484375,
|
||||
"latitude": 45.645752236602775
|
||||
},
|
||||
"timestamp": 1394788315227
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.076380252838135,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 232,
|
||||
"longitude": 5.871189236646398,
|
||||
"heading": 176.1328125,
|
||||
"latitude": 45.64553692475487
|
||||
},
|
||||
"timestamp": 1394788316970
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 5.102786064147949,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.871200384577616,
|
||||
"heading": 171.2109375,
|
||||
"latitude": 45.64548554368843
|
||||
},
|
||||
"timestamp": 1394788317965
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.705626964569092,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.871210945775612,
|
||||
"heading": 164.1796875,
|
||||
"latitude": 45.645453105723156
|
||||
},
|
||||
"timestamp": 1394788318956
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.378190040588379,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 231,
|
||||
"longitude": 5.87124749087344,
|
||||
"heading": 126.2109375,
|
||||
"latitude": 45.645433282522156
|
||||
},
|
||||
"timestamp": 1394788320197
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.208680152893066,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 233,
|
||||
"longitude": 5.871283365419014,
|
||||
"heading": 125.859375,
|
||||
"latitude": 45.6454103999265
|
||||
},
|
||||
"timestamp": 1394788320894
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 4.072604179382324,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 233,
|
||||
"longitude": 5.871314043184622,
|
||||
"heading": 103.359375,
|
||||
"latitude": 45.645410819021656
|
||||
},
|
||||
"timestamp": 1394788322169
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.7680623531341553,
|
||||
"accuracy": 5,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.871355114510163,
|
||||
"heading": 92.4609375,
|
||||
"latitude": 45.645418111277415
|
||||
},
|
||||
"timestamp": 1394788322898
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.537794351577759,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.871393922721847,
|
||||
"heading": 92.4609375,
|
||||
"latitude": 45.64541693781097
|
||||
},
|
||||
"timestamp": 1394788323968
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.3741507530212402,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 234,
|
||||
"longitude": 5.8714455552453835,
|
||||
"heading": 75.5859375,
|
||||
"latitude": 45.645444011358215
|
||||
},
|
||||
"timestamp": 1394788324896
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.3729660511016846,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.87150791660498,
|
||||
"heading": 70.3125,
|
||||
"latitude": 45.64547209073384
|
||||
},
|
||||
"timestamp": 1394788325971
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.463883876800537,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.871554352348551,
|
||||
"heading": 70.3125,
|
||||
"latitude": 45.64548374157925
|
||||
},
|
||||
"timestamp": 1394788327122
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.5247886180877686,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.871567260479435,
|
||||
"heading": 67.1484375,
|
||||
"latitude": 45.645496733529164
|
||||
},
|
||||
"timestamp": 1394788328164
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.455146551132202,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 6,
|
||||
"altitude": 235,
|
||||
"longitude": 5.871608583262071,
|
||||
"heading": 68.90625,
|
||||
"latitude": 45.64550293613751
|
||||
},
|
||||
"timestamp": 1394788328985
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.382997989654541,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 236,
|
||||
"longitude": 5.871640518313154,
|
||||
"heading": 78.75,
|
||||
"latitude": 45.6454965658911
|
||||
},
|
||||
"timestamp": 1394788329900
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.242330312728882,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 236,
|
||||
"longitude": 5.871667759498462,
|
||||
"heading": 92.4609375,
|
||||
"latitude": 45.64548562750746
|
||||
},
|
||||
"timestamp": 1394788331120
|
||||
}, {
|
||||
"coords": {
|
||||
"speed": 3.074465274810791,
|
||||
"accuracy": 10,
|
||||
"altitudeAccuracy": 8,
|
||||
"altitude": 236,
|
||||
"longitude": 5.871691312646374,
|
||||
"heading": 110.0390625,
|
||||
"latitude": 45.645468402696444
|
||||
},
|
||||
"timestamp": 1394788332219
|
||||
}]
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 829 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,284 +0,0 @@
|
||||
<?xml version='1.0' encoding="UTF-8"?>
|
||||
<WMS_Capabilities version="1.3.0" xmlns="http://www.opengis.net/wms"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="http://www.opengis.net/wms http://schemas.opengis.net/wms/1.3.0/capabilities_1_3_0.xsd">
|
||||
<Service>
|
||||
<Name>WMS</Name>
|
||||
<Title>Acme Corp. Map Server</Title>
|
||||
<Abstract>Map Server maintained by Acme Corporation. Contact: webmaster@wmt.acme.com. High-quality maps showing roadrunner nests and possible ambush locations.</Abstract>
|
||||
|
||||
<KeywordList>
|
||||
<Keyword>bird</Keyword>
|
||||
<Keyword>roadrunner</Keyword>
|
||||
<Keyword>ambush</Keyword>
|
||||
</KeywordList>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://hostname/" />
|
||||
|
||||
|
||||
<ContactInformation>
|
||||
<ContactPersonPrimary>
|
||||
<ContactPerson>Jeff Smith</ContactPerson>
|
||||
<ContactOrganization>NASA</ContactOrganization>
|
||||
</ContactPersonPrimary>
|
||||
<ContactPosition>Computer Scientist</ContactPosition>
|
||||
|
||||
<ContactAddress>
|
||||
<AddressType>postal</AddressType>
|
||||
<Address>NASA Goddard Space Flight Center</Address>
|
||||
<City>Greenbelt</City>
|
||||
<StateOrProvince>MD</StateOrProvince>
|
||||
<PostCode>20771</PostCode>
|
||||
|
||||
<Country>USA</Country>
|
||||
</ContactAddress>
|
||||
<ContactVoiceTelephone>+1 301 555-1212</ContactVoiceTelephone>
|
||||
<ContactElectronicMailAddress>user@host.com</ContactElectronicMailAddress>
|
||||
</ContactInformation>
|
||||
|
||||
<Fees>none</Fees>
|
||||
|
||||
<AccessConstraints>none</AccessConstraints>
|
||||
<LayerLimit>16</LayerLimit>
|
||||
<MaxWidth>2048</MaxWidth>
|
||||
<MaxHeight>2048</MaxHeight>
|
||||
</Service>
|
||||
<Capability>
|
||||
<Request>
|
||||
<GetCapabilities>
|
||||
|
||||
<Format>text/xml</Format>
|
||||
<DCPType>
|
||||
<HTTP>
|
||||
<Get>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
</Get>
|
||||
<Post>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
|
||||
</Post>
|
||||
</HTTP>
|
||||
</DCPType>
|
||||
</GetCapabilities>
|
||||
<GetMap>
|
||||
<Format>image/gif</Format>
|
||||
<Format>image/png</Format>
|
||||
<Format>image/jpeg</Format>
|
||||
|
||||
<DCPType>
|
||||
<HTTP>
|
||||
<Get>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
</Get>
|
||||
</HTTP>
|
||||
</DCPType>
|
||||
</GetMap>
|
||||
|
||||
<GetFeatureInfo>
|
||||
<Format>text/xml</Format>
|
||||
<Format>text/plain</Format>
|
||||
<Format>text/html</Format>
|
||||
<DCPType>
|
||||
<HTTP>
|
||||
<Get>
|
||||
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://hostname/path?" />
|
||||
</Get>
|
||||
</HTTP>
|
||||
</DCPType>
|
||||
</GetFeatureInfo>
|
||||
</Request>
|
||||
<Exception>
|
||||
<Format>XML</Format>
|
||||
|
||||
<Format>INIMAGE</Format>
|
||||
<Format>BLANK</Format>
|
||||
</Exception>
|
||||
<Layer>
|
||||
<Title>Acme Corp. Map Server</Title>
|
||||
<CRS>CRS:84</CRS>
|
||||
|
||||
<AuthorityURL name="DIF_ID">
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://gcmd.gsfc.nasa.gov/difguide/whatisadif.html" />
|
||||
</AuthorityURL>
|
||||
<BoundingBox CRS="CRS:84"
|
||||
minx="-1" miny="-1" maxx="1" maxy="1" resx="0.0" resy="0.0"/>
|
||||
<Layer>
|
||||
|
||||
<Name>ROADS_RIVERS</Name>
|
||||
<Title>Roads and Rivers</Title>
|
||||
|
||||
<CRS>EPSG:26986</CRS>
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-71.63</westBoundLongitude>
|
||||
<eastBoundLongitude>-70.78</eastBoundLongitude>
|
||||
<southBoundLatitude>41.75</southBoundLatitude>
|
||||
<northBoundLatitude>42.90</northBoundLatitude>
|
||||
|
||||
</EX_GeographicBoundingBox>
|
||||
<BoundingBox CRS="CRS:84"
|
||||
minx="-71.63" miny="41.75" maxx="-70.78" maxy="42.90" resx="0.01" resy="0.01"/>
|
||||
<BoundingBox CRS="EPSG:26986"
|
||||
minx="189000" miny="834000" maxx="285000" maxy="962000" resx="1" resy="1" />
|
||||
<Attribution>
|
||||
<Title>State College University</Title>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/" />
|
||||
|
||||
<LogoURL width="100" height="100">
|
||||
<Format>image/gif</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/icons/logo.gif" />
|
||||
</LogoURL>
|
||||
</Attribution>
|
||||
<Identifier authority="DIF_ID">123456</Identifier>
|
||||
<FeatureListURL>
|
||||
|
||||
<Format>XML</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink" xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/data/roads_rivers.gml" />
|
||||
</FeatureListURL>
|
||||
<Style>
|
||||
<Name>USGS</Name>
|
||||
<Title>USGS Topo Map Style</Title>
|
||||
<Abstract>Features are shown in a style like that used in USGS topographic maps.</Abstract>
|
||||
|
||||
<LegendURL width="72" height="72">
|
||||
<Format>image/gif</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/legends/usgs.gif" />
|
||||
</LegendURL>
|
||||
<StyleSheetURL>
|
||||
<Format>text/xsl</Format>
|
||||
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/stylesheets/usgs.xsl" />
|
||||
</StyleSheetURL>
|
||||
</Style>
|
||||
<MinScaleDenominator>1000</MinScaleDenominator>
|
||||
<MaxScaleDenominator>250000</MaxScaleDenominator>
|
||||
<Layer queryable="1">
|
||||
<Name>ROADS_1M</Name>
|
||||
<Title>Roads at 1:1M scale</Title>
|
||||
<Abstract>Roads at a scale of 1 to 1 million.</Abstract>
|
||||
|
||||
<KeywordList>
|
||||
<Keyword>road</Keyword>
|
||||
<Keyword>transportation</Keyword>
|
||||
<Keyword>atlas</Keyword>
|
||||
</KeywordList>
|
||||
<Identifier authority="DIF_ID">123456</Identifier>
|
||||
<MetadataURL type="FGDC:1998">
|
||||
|
||||
<Format>text/plain</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/metadata/roads.txt" />
|
||||
</MetadataURL>
|
||||
<MetadataURL type="ISO19115:2003">
|
||||
<Format>text/xml</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/metadata/roads.xml" />
|
||||
</MetadataURL>
|
||||
|
||||
<Style>
|
||||
<Name>ATLAS</Name>
|
||||
<Title>Road atlas style</Title>
|
||||
<Abstract>Roads are shown in a style like that used in a commercial road atlas.</Abstract>
|
||||
<LegendURL width="72" height="72">
|
||||
<Format>image/gif</Format>
|
||||
<OnlineResource xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xlink:type="simple"
|
||||
xlink:href="http://www.university.edu/legends/atlas.gif" />
|
||||
|
||||
</LegendURL>
|
||||
</Style>
|
||||
</Layer>
|
||||
<Layer queryable="1">
|
||||
<Name>RIVERS_1M</Name>
|
||||
<Title>Rivers at 1:1M scale</Title>
|
||||
<Abstract>Rivers at a scale of 1 to 1 million.</Abstract>
|
||||
|
||||
<KeywordList>
|
||||
<Keyword>river</Keyword>
|
||||
<Keyword>canal</Keyword>
|
||||
<Keyword>waterway</Keyword>
|
||||
</KeywordList>
|
||||
</Layer>
|
||||
</Layer>
|
||||
|
||||
<Layer queryable="1">
|
||||
<Title>Weather Forecast Data</Title>
|
||||
<CRS>CRS:84</CRS>
|
||||
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-180</westBoundLongitude>
|
||||
<eastBoundLongitude>180</eastBoundLongitude>
|
||||
|
||||
<southBoundLatitude>-90</southBoundLatitude>
|
||||
<northBoundLatitude>90</northBoundLatitude>
|
||||
</EX_GeographicBoundingBox>
|
||||
<Dimension name="time" units="ISO8601" default="2000-08-22">1999-01-01/2000-08-22/P1D</Dimension>
|
||||
<Layer>
|
||||
|
||||
<Name>Clouds</Name>
|
||||
<Title>Forecast cloud cover</Title>
|
||||
</Layer>
|
||||
<Layer>
|
||||
<Name>Temperature</Name>
|
||||
<Title>Forecast temperature</Title>
|
||||
</Layer>
|
||||
|
||||
<Layer>
|
||||
<Name>Pressure</Name>
|
||||
<Title>Forecast barometric pressure</Title>
|
||||
<Dimension name="elevation" units="EPSG:5030" />
|
||||
<Dimension name="time" units="ISO8601" default="2000-08-22">
|
||||
1999-01-01/2000-08-22/P1D</Dimension>
|
||||
|
||||
<Dimension name="elevation" units="CRS:88" default="0" nearestValue="1">0,1000,3000,5000,10000</Dimension>
|
||||
</Layer>
|
||||
</Layer>
|
||||
<Layer opaque="1" noSubsets="1" fixedWidth="512" fixedHeight="256">
|
||||
<Name>ozone_image</Name>
|
||||
<Title>Global ozone distribution (1992)</Title>
|
||||
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-180</westBoundLongitude>
|
||||
<eastBoundLongitude>180</eastBoundLongitude>
|
||||
<southBoundLatitude>-90</southBoundLatitude>
|
||||
<northBoundLatitude>90</northBoundLatitude>
|
||||
</EX_GeographicBoundingBox>
|
||||
<Dimension name="time" units="ISO8601" default="1992">1992</Dimension>
|
||||
|
||||
</Layer>
|
||||
<Layer cascaded="1">
|
||||
<Name>population</Name>
|
||||
<Title>World population, annual</Title>
|
||||
<EX_GeographicBoundingBox>
|
||||
<westBoundLongitude>-180</westBoundLongitude>
|
||||
|
||||
<eastBoundLongitude>180</eastBoundLongitude>
|
||||
<southBoundLatitude>-90</southBoundLatitude>
|
||||
<northBoundLatitude>90</northBoundLatitude>
|
||||
</EX_GeographicBoundingBox>
|
||||
<Dimension name="time" units="ISO8601" default="2000">1990/2000/P1Y</Dimension>
|
||||
</Layer>
|
||||
</Layer>
|
||||
|
||||
</Capability>
|
||||
</WMS_Capabilities>
|
||||
@@ -1,43 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<sld:StyledLayerDescriptor xmlns="http://www.opengis.net/sld" xmlns:sld="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" version="1.0.0">
|
||||
<sld:NamedLayer>
|
||||
<sld:Name>countries</sld:Name>
|
||||
<sld:UserStyle>
|
||||
<sld:Name>countries</sld:Name>
|
||||
<sld:Title>A sample style for countries</sld:Title>
|
||||
<sld:IsDefault>1</sld:IsDefault>
|
||||
<sld:Abstract>A sample style for countries</sld:Abstract>
|
||||
<sld:FeatureTypeStyle>
|
||||
<sld:Name>name</sld:Name>
|
||||
<sld:Rule>
|
||||
<sld:Name>Sample</sld:Name>
|
||||
<sld:Title>Sample</sld:Title>
|
||||
<sld:PolygonSymbolizer>
|
||||
<sld:Fill>
|
||||
<sld:CssParameter name="fill">#ff0000</sld:CssParameter>
|
||||
<sld:CssParameter name="fill-opacity">0.6</sld:CssParameter>
|
||||
</sld:Fill>
|
||||
<sld:Stroke>
|
||||
<sld:CssParameter name="stroke">#00FF00</sld:CssParameter>
|
||||
<sld:CssParameter name="stroke-opacity">0.5</sld:CssParameter>
|
||||
<sld:CssParameter name="stroke-width">4</sld:CssParameter>
|
||||
</sld:Stroke>
|
||||
</sld:PolygonSymbolizer>
|
||||
</sld:Rule>
|
||||
<sld:Rule>
|
||||
<sld:MaxScaleDenominator>20000000</sld:MaxScaleDenominator>
|
||||
<sld:TextSymbolizer>
|
||||
<sld:Label>
|
||||
<ogc:PropertyName>name</ogc:PropertyName>
|
||||
</sld:Label>
|
||||
<sld:Font>
|
||||
<sld:CssParameter name="font-family">Arial</sld:CssParameter>
|
||||
<sld:CssParameter name="font-size">10</sld:CssParameter>
|
||||
<sld:CssParameter name="font-style">Normal</sld:CssParameter>
|
||||
</sld:Font>
|
||||
</sld:TextSymbolizer>
|
||||
</sld:Rule>
|
||||
</sld:FeatureTypeStyle>
|
||||
</sld:UserStyle>
|
||||
</sld:NamedLayer>
|
||||
</sld:StyledLayerDescriptor>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,23 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Device-Orientation example
|
||||
shortdesc: Listen to DeviceOrientation events.
|
||||
docs: >
|
||||
This example shows how to track changes in device orientation.
|
||||
tags: "orientation, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="span12">
|
||||
<h4 id="title">Device orientation example</h4>
|
||||
<label class="checkbox" for="track">
|
||||
<input id="track" type="checkbox"/>track changes
|
||||
</label>
|
||||
<p>α : <code id="alpha"></code></p>
|
||||
<p>β : <code id="beta"></code></p>
|
||||
<p>γ : <code id="gamma"></code></p>
|
||||
<p>heading : <code id="heading"></code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,56 +0,0 @@
|
||||
goog.require('ol.DeviceOrientation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
var projection = ol.proj.get('EPSG:3857');
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
projection: projection,
|
||||
extent: projection.getExtent(),
|
||||
zoom: 2
|
||||
});
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var deviceOrientation = new ol.DeviceOrientation();
|
||||
|
||||
$('#track').on('change', function() {
|
||||
deviceOrientation.setTracking(this.checked);
|
||||
});
|
||||
|
||||
deviceOrientation.on('change', function(event) {
|
||||
$('#alpha').text(deviceOrientation.getAlpha() + ' [rad]');
|
||||
$('#beta').text(deviceOrientation.getBeta() + ' [rad]');
|
||||
$('#gamma').text(deviceOrientation.getGamma() + ' [rad]');
|
||||
$('#heading').text(deviceOrientation.getHeading() + ' [rad]');
|
||||
});
|
||||
|
||||
// tilt the map
|
||||
deviceOrientation.on(['change:beta', 'change:gamma'], function(event) {
|
||||
var center = view.getCenter();
|
||||
var resolution = view.getResolution();
|
||||
var beta = event.target.getBeta() || 0;
|
||||
var gamma = event.target.getGamma() || 0;
|
||||
|
||||
center[0] -= resolution * gamma * 25;
|
||||
center[1] += resolution * beta * 25;
|
||||
|
||||
view.setCenter(view.constrainCenter(center));
|
||||
});
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Drag-and-Drop image vector example
|
||||
shortdesc: Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
|
||||
docs: >
|
||||
Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to
|
||||
an image on the client.
|
||||
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="span4 offset4 pull-right">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,158 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.format.GPX');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.format.IGC');
|
||||
goog.require('ol.format.KML');
|
||||
goog.require('ol.format.TopoJSON');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragAndDrop');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.ImageVector');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var defaultStyle = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,255,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0ff',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,255,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f0f',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,0,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#00f',
|
||||
width: 1
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
var featureStyleFunction = feature.getStyleFunction();
|
||||
if (featureStyleFunction) {
|
||||
return featureStyleFunction.call(feature, resolution);
|
||||
} else {
|
||||
return defaultStyle[feature.getGeometry().getType()];
|
||||
}
|
||||
};
|
||||
|
||||
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
|
||||
formatConstructors: [
|
||||
ol.format.GPX,
|
||||
ol.format.GeoJSON,
|
||||
ol.format.IGC,
|
||||
ol.format.KML,
|
||||
ol.format.TopoJSON
|
||||
]
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
dragAndDropInteraction.on('addfeatures', function(event) {
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: event.features,
|
||||
projection: event.projection
|
||||
});
|
||||
map.getLayers().push(new ol.layer.Image({
|
||||
source: new ol.source.ImageVector({
|
||||
source: vectorSource,
|
||||
style: styleFunction
|
||||
})
|
||||
}));
|
||||
var view = map.getView();
|
||||
view.fitExtent(
|
||||
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
}
|
||||
};
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
displayFeatureInfo(evt.pixel);
|
||||
});
|
||||
@@ -1,19 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Drag-and-Drop example
|
||||
shortdesc: Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
|
||||
docs: >
|
||||
Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will
|
||||
only work with data in EPSG:4326 and EPSG:3857.
|
||||
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="span4 offset4 pull-right">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,154 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.format.GPX');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.format.IGC');
|
||||
goog.require('ol.format.KML');
|
||||
goog.require('ol.format.TopoJSON');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragAndDrop');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.BingMaps');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var defaultStyle = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,255,0,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ff0',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f00',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,255,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0ff',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,255,0.5)'
|
||||
}),
|
||||
radius: 5,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#f0f',
|
||||
width: 1
|
||||
})
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#0f0',
|
||||
width: 3
|
||||
})
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0,0,255,0.5)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#00f',
|
||||
width: 1
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
var featureStyleFunction = feature.getStyleFunction();
|
||||
if (featureStyleFunction) {
|
||||
return featureStyleFunction.call(feature, resolution);
|
||||
} else {
|
||||
return defaultStyle[feature.getGeometry().getType()];
|
||||
}
|
||||
};
|
||||
|
||||
var dragAndDropInteraction = new ol.interaction.DragAndDrop({
|
||||
formatConstructors: [
|
||||
ol.format.GPX,
|
||||
ol.format.GeoJSON,
|
||||
ol.format.IGC,
|
||||
ol.format.KML,
|
||||
ol.format.TopoJSON
|
||||
]
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([dragAndDropInteraction]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
imagerySet: 'Aerial',
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3'
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
dragAndDropInteraction.on('addfeatures', function(event) {
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: event.features,
|
||||
projection: event.projection
|
||||
});
|
||||
map.getLayers().push(new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
style: styleFunction
|
||||
}));
|
||||
var view = map.getView();
|
||||
view.fitExtent(
|
||||
vectorSource.getExtent(), /** @type {ol.Size} */ (map.getSize()));
|
||||
});
|
||||
|
||||
var displayFeatureInfo = function(pixel) {
|
||||
var features = [];
|
||||
map.forEachFeatureAtPixel(pixel, function(feature, layer) {
|
||||
features.push(feature);
|
||||
});
|
||||
if (features.length > 0) {
|
||||
var info = [];
|
||||
var i, ii;
|
||||
for (i = 0, ii = features.length; i < ii; ++i) {
|
||||
info.push(features[i].get('name'));
|
||||
}
|
||||
document.getElementById('info').innerHTML = info.join(', ') || ' ';
|
||||
} else {
|
||||
document.getElementById('info').innerHTML = ' ';
|
||||
}
|
||||
};
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
displayFeatureInfo(pixel);
|
||||
});
|
||||
|
||||
map.on('click', function(evt) {
|
||||
displayFeatureInfo(evt.pixel);
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Drag features example
|
||||
shortdesc: Example of a drag features interaction.
|
||||
docs: >
|
||||
The drag features interaction can be used to drag features to a new position.
|
||||
tags: "drag, feature, vector, editing"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,192 +0,0 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.geom.Polygon');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.Pointer');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.TileJSON');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Icon');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
/**
|
||||
* Define a namespace for the application.
|
||||
*/
|
||||
window.app = {};
|
||||
var app = window.app;
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* @constructor
|
||||
* @extends {ol.interaction.Pointer}
|
||||
*/
|
||||
app.Drag = function() {
|
||||
|
||||
ol.interaction.Pointer.call(this, {
|
||||
handleDownEvent: app.Drag.prototype.handleDownEvent,
|
||||
handleDragEvent: app.Drag.prototype.handleDragEvent,
|
||||
handleMoveEvent: app.Drag.prototype.handleMoveEvent,
|
||||
handleUpEvent: app.Drag.prototype.handleUpEvent
|
||||
});
|
||||
|
||||
/**
|
||||
* @type {ol.Pixel}
|
||||
* @private
|
||||
*/
|
||||
this.coordinate_ = null;
|
||||
|
||||
/**
|
||||
* @type {string|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.cursor_ = 'pointer';
|
||||
|
||||
/**
|
||||
* @type {ol.Feature}
|
||||
* @private
|
||||
*/
|
||||
this.feature_ = null;
|
||||
|
||||
/**
|
||||
* @type {string|undefined}
|
||||
* @private
|
||||
*/
|
||||
this.previousCursor_ = undefined;
|
||||
|
||||
};
|
||||
ol.inherits(app.Drag, ol.interaction.Pointer);
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.MapBrowserEvent} evt Map browser event.
|
||||
* @return {boolean} `true` to start the drag sequence.
|
||||
*/
|
||||
app.Drag.prototype.handleDownEvent = function(evt) {
|
||||
var map = evt.map;
|
||||
|
||||
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
||||
function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
|
||||
if (feature) {
|
||||
this.coordinate_ = evt.coordinate;
|
||||
this.feature_ = feature;
|
||||
}
|
||||
|
||||
return !!feature;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @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];
|
||||
|
||||
var geometry = /** @type {ol.geom.SimpleGeometry} */
|
||||
(this.feature_.getGeometry());
|
||||
geometry.translate(deltaX, deltaY);
|
||||
|
||||
this.coordinate_[0] = evt.coordinate[0];
|
||||
this.coordinate_[1] = evt.coordinate[1];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.MapBrowserEvent} evt Event.
|
||||
*/
|
||||
app.Drag.prototype.handleMoveEvent = function(evt) {
|
||||
if (this.cursor_) {
|
||||
var map = evt.map;
|
||||
var feature = map.forEachFeatureAtPixel(evt.pixel,
|
||||
function(feature, layer) {
|
||||
return feature;
|
||||
});
|
||||
var element = evt.map.getTargetElement();
|
||||
if (feature) {
|
||||
if (element.style.cursor != this.cursor_) {
|
||||
this.previousCursor_ = element.style.cursor;
|
||||
element.style.cursor = this.cursor_;
|
||||
}
|
||||
} else if (this.previousCursor_ !== undefined) {
|
||||
element.style.cursor = this.previousCursor_;
|
||||
this.previousCursor_ = undefined;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @param {ol.MapBrowserEvent} evt Map browser event.
|
||||
* @return {boolean} `false` to stop the drag sequence.
|
||||
*/
|
||||
app.Drag.prototype.handleUpEvent = function(evt) {
|
||||
this.coordinate_ = null;
|
||||
this.feature_ = null;
|
||||
return false;
|
||||
};
|
||||
|
||||
|
||||
var pointFeature = new ol.Feature(new ol.geom.Point([0, 0]));
|
||||
|
||||
var lineFeature = new ol.Feature(
|
||||
new ol.geom.LineString([[-1e7, 1e6], [-1e6, 3e6]]));
|
||||
|
||||
var polygonFeature = new ol.Feature(
|
||||
new ol.geom.Polygon([[[-3e6, -1e6], [-3e6, 1e6],
|
||||
[-1e6, 1e6], [-1e6, -1e6], [-3e6, -1e6]]]));
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([new app.Drag()]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileJSON({
|
||||
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
|
||||
})
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [pointFeature, lineFeature, polygonFeature]
|
||||
}),
|
||||
style: new ol.style.Style({
|
||||
image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
|
||||
anchor: [0.5, 46],
|
||||
anchorXUnits: 'fraction',
|
||||
anchorYUnits: 'pixels',
|
||||
opacity: 0.95,
|
||||
src: 'data/icon.png'
|
||||
})),
|
||||
stroke: new ol.style.Stroke({
|
||||
width: 3,
|
||||
color: [255, 0, 0, 1]
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: [0, 0, 255, 0.6]
|
||||
})
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Drag rotate and zoom example
|
||||
shortdesc: A single interaction to drag, rotate, and zoom.
|
||||
docs: >
|
||||
<p><code>Shift</code> + Drag to rotate and zoom the map around its center.</p>
|
||||
tags: "drag, rotate, zoom, interaction"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,24 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragRotateAndZoom');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
interactions: ol.interaction.defaults().extend([
|
||||
new ol.interaction.DragRotateAndZoom()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -1,21 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Draw and modify features example
|
||||
shortdesc: Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
|
||||
docs: >
|
||||
Example of using the ol.interaction.Draw interaction together with the ol.interaction.Modify interaction.
|
||||
tags: "draw, edit, modify, vector, featureoverlay"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<form class="form-inline">
|
||||
<label>Geometry type </label>
|
||||
<select id="type">
|
||||
<option value="Point">Point</option>
|
||||
<option value="LineString">LineString</option>
|
||||
<option value="Polygon">Polygon</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
@@ -1,83 +0,0 @@
|
||||
goog.require('ol.FeatureOverlay');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.events.condition');
|
||||
goog.require('ol.interaction.Draw');
|
||||
goog.require('ol.interaction.Modify');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-11000000, 4600000],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
// The features are not added to a regular vector layer/source,
|
||||
// but to a feature overlay which holds a collection of features.
|
||||
// This collection is passed to the modify and also the draw
|
||||
// interaction, so that both can add or modify features.
|
||||
var featureOverlay = new ol.FeatureOverlay({
|
||||
style: new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc33',
|
||||
width: 2
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 7,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ffcc33'
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
featureOverlay.setMap(map);
|
||||
|
||||
var modify = new ol.interaction.Modify({
|
||||
features: featureOverlay.getFeatures(),
|
||||
// the SHIFT key must be pressed to delete vertices, so
|
||||
// that new vertices can be drawn at the same position
|
||||
// of existing vertices
|
||||
deleteCondition: function(event) {
|
||||
return ol.events.condition.shiftKeyOnly(event) &&
|
||||
ol.events.condition.singleClick(event);
|
||||
}
|
||||
});
|
||||
map.addInteraction(modify);
|
||||
|
||||
var draw; // global so we can remove it later
|
||||
function addInteraction() {
|
||||
draw = new ol.interaction.Draw({
|
||||
features: featureOverlay.getFeatures(),
|
||||
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
|
||||
});
|
||||
map.addInteraction(draw);
|
||||
}
|
||||
|
||||
var typeSelect = document.getElementById('type');
|
||||
|
||||
|
||||
/**
|
||||
* Let user change the geometry type.
|
||||
* @param {Event} e Change event.
|
||||
*/
|
||||
typeSelect.onchange = function(e) {
|
||||
map.removeInteraction(draw);
|
||||
addInteraction();
|
||||
};
|
||||
|
||||
addInteraction();
|
||||
@@ -1,23 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Draw features example
|
||||
shortdesc: Example of using the ol.interaction.Draw interaction.
|
||||
docs: >
|
||||
Example of using the ol.interaction.Draw interaction.
|
||||
tags: "draw, edit, vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<form class="form-inline">
|
||||
<label>Geometry type </label>
|
||||
<select id="type">
|
||||
<option value="None">None</option>
|
||||
<option value="Point">Point</option>
|
||||
<option value="LineString">LineString</option>
|
||||
<option value="Polygon">Polygon</option>
|
||||
<option value="Circle">Circle</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,72 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.interaction.Draw');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
});
|
||||
|
||||
var source = new ol.source.Vector();
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: source,
|
||||
style: new ol.style.Style({
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.2)'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#ffcc33',
|
||||
width: 2
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 7,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#ffcc33'
|
||||
})
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-11000000, 4600000],
|
||||
zoom: 4
|
||||
})
|
||||
});
|
||||
|
||||
var typeSelect = document.getElementById('type');
|
||||
|
||||
var draw; // global so we can remove it later
|
||||
function addInteraction() {
|
||||
var value = typeSelect.value;
|
||||
if (value !== 'None') {
|
||||
draw = new ol.interaction.Draw({
|
||||
source: source,
|
||||
type: /** @type {ol.geom.GeometryType} */ (value)
|
||||
});
|
||||
map.addInteraction(draw);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Let user change the geometry type.
|
||||
* @param {Event} e Change event.
|
||||
*/
|
||||
typeSelect.onchange = function(e) {
|
||||
map.removeInteraction(draw);
|
||||
addInteraction();
|
||||
};
|
||||
|
||||
addInteraction();
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Dynamic data example
|
||||
shortdesc: Example of dynamic data.
|
||||
docs: >
|
||||
Example of dynamic data.
|
||||
tags: "dynamic-data"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,79 +0,0 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.MultiPoint');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.MapQuest');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.MapQuest({layer: 'sat'})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var imageStyle = new ol.style.Circle({
|
||||
radius: 5,
|
||||
snapToPixel: false,
|
||||
fill: new ol.style.Fill({color: 'yellow'}),
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
});
|
||||
|
||||
var headInnerImageStyle = new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 2,
|
||||
snapToPixel: false,
|
||||
fill: new ol.style.Fill({color: 'blue'})
|
||||
})
|
||||
});
|
||||
|
||||
var headOuterImageStyle = new ol.style.Circle({
|
||||
radius: 5,
|
||||
snapToPixel: false,
|
||||
fill: new ol.style.Fill({color: 'black'})
|
||||
});
|
||||
|
||||
var n = 200;
|
||||
var omegaTheta = 30000; // Rotation period in ms
|
||||
var R = 7e6;
|
||||
var r = 2e6;
|
||||
var p = 2e6;
|
||||
map.on('postcompose', function(event) {
|
||||
var vectorContext = event.vectorContext;
|
||||
var frameState = event.frameState;
|
||||
var theta = 2 * Math.PI * frameState.time / omegaTheta;
|
||||
var coordinates = [];
|
||||
var i;
|
||||
for (i = 0; i < n; ++i) {
|
||||
var t = theta + 2 * Math.PI * i / n;
|
||||
var x = (R + r) * Math.cos(t) + p * Math.cos((R + r) * t / r);
|
||||
var y = (R + r) * Math.sin(t) + p * Math.sin((R + r) * t / r);
|
||||
coordinates.push([x, y]);
|
||||
}
|
||||
vectorContext.setImageStyle(imageStyle);
|
||||
vectorContext.drawMultiPointGeometry(
|
||||
new ol.geom.MultiPoint(coordinates), null);
|
||||
|
||||
var headPoint = new ol.geom.Point(coordinates[coordinates.length - 1]);
|
||||
var headFeature = new ol.Feature(headPoint);
|
||||
vectorContext.drawFeature(headFeature, headInnerImageStyle);
|
||||
|
||||
vectorContext.setImageStyle(headOuterImageStyle);
|
||||
vectorContext.drawMultiPointGeometry(headPoint, null);
|
||||
|
||||
map.render();
|
||||
});
|
||||
map.render();
|
||||
@@ -1,19 +0,0 @@
|
||||
#map {
|
||||
position: relative;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
z-index: 100;
|
||||
}
|
||||
.tooltip.in {
|
||||
opacity: 1;
|
||||
filter: alpha(opacity=100);
|
||||
}
|
||||
.tooltip.top .tooltip-arrow {
|
||||
border-top-color: white;
|
||||
}
|
||||
.tooltip-inner {
|
||||
border: 2px solid white;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Earthquake Clusters
|
||||
shortdesc: Demonstrates the use of style geometries to render source features of a cluster.
|
||||
docs: >
|
||||
<p>This example parses a KML file and renders the features as clusters on a vector layer. The styling in this example is quite involved. Single earthquake locations
|
||||
(rendered as stars) have a size relative to their magnitude. Clusters have an opacity relative to the number of features in the cluster, and a size that represents
|
||||
the extent of the features that make up the cluster. When clicking or hovering on a cluster, the individual features that make up the cluster will be shown.</p>
|
||||
<p>To achieve this, we make heavy use of style functions and <code>ol.style.Style#geometry</code>.</p>
|
||||
tags: "KML, vector, style, geometry, cluster"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,156 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.extent');
|
||||
goog.require('ol.format.KML');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.Select');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Cluster');
|
||||
goog.require('ol.source.Stamen');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.RegularShape');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
goog.require('ol.style.Text');
|
||||
|
||||
|
||||
var earthquakeFill = new ol.style.Fill({
|
||||
color: 'rgba(255, 153, 0, 0.8)'
|
||||
});
|
||||
var earthquakeStroke = new ol.style.Stroke({
|
||||
color: 'rgba(255, 204, 0, 0.2)',
|
||||
width: 1
|
||||
});
|
||||
var textFill = new ol.style.Fill({
|
||||
color: '#fff'
|
||||
});
|
||||
var textStroke = new ol.style.Stroke({
|
||||
color: 'rgba(0, 0, 0, 0.6)',
|
||||
width: 3
|
||||
});
|
||||
var invisibleFill = new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 255, 0.01)'
|
||||
});
|
||||
|
||||
function createEarthquakeStyle(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.
|
||||
var name = feature.get('name');
|
||||
var magnitude = parseFloat(name.substr(2));
|
||||
var radius = 5 + 20 * (magnitude - 5);
|
||||
|
||||
return new ol.style.Style({
|
||||
geometry: feature.getGeometry(),
|
||||
image: new ol.style.RegularShape({
|
||||
radius1: radius,
|
||||
radius2: 3,
|
||||
points: 5,
|
||||
angle: Math.PI,
|
||||
fill: earthquakeFill,
|
||||
stroke: earthquakeStroke
|
||||
})
|
||||
});
|
||||
}
|
||||
|
||||
var maxFeatureCount;
|
||||
function calculateClusterInfo(resolution) {
|
||||
maxFeatureCount = 0;
|
||||
var features = vector.getSource().getFeatures();
|
||||
var feature, radius;
|
||||
for (var i = features.length - 1; i >= 0; --i) {
|
||||
feature = features[i];
|
||||
var originalFeatures = feature.get('features');
|
||||
var extent = ol.extent.createEmpty();
|
||||
for (var j = 0, jj = originalFeatures.length; j < jj; ++j) {
|
||||
ol.extent.extend(extent, originalFeatures[j].getGeometry().getExtent());
|
||||
}
|
||||
maxFeatureCount = Math.max(maxFeatureCount, jj);
|
||||
radius = 0.25 * (ol.extent.getWidth(extent) + ol.extent.getHeight(extent)) /
|
||||
resolution;
|
||||
feature.set('radius', radius);
|
||||
}
|
||||
}
|
||||
|
||||
var currentResolution;
|
||||
function styleFunction(feature, resolution) {
|
||||
if (resolution != currentResolution) {
|
||||
calculateClusterInfo(resolution);
|
||||
currentResolution = resolution;
|
||||
}
|
||||
var style;
|
||||
var size = feature.get('features').length;
|
||||
if (size > 1) {
|
||||
style = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: feature.get('radius'),
|
||||
fill: new ol.style.Fill({
|
||||
color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
|
||||
})
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
text: size.toString(),
|
||||
fill: textFill,
|
||||
stroke: textStroke
|
||||
})
|
||||
})];
|
||||
} else {
|
||||
var originalFeature = feature.get('features')[0];
|
||||
style = [createEarthquakeStyle(originalFeature)];
|
||||
}
|
||||
return style;
|
||||
}
|
||||
|
||||
function selectStyleFunction(feature, resolution) {
|
||||
var styles = [new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: feature.get('radius'),
|
||||
fill: invisibleFill
|
||||
})
|
||||
})];
|
||||
var originalFeatures = feature.get('features');
|
||||
var originalFeature;
|
||||
for (var i = originalFeatures.length - 1; i >= 0; --i) {
|
||||
originalFeature = originalFeatures[i];
|
||||
styles.push(createEarthquakeStyle(originalFeature));
|
||||
}
|
||||
return styles;
|
||||
}
|
||||
|
||||
var vector = new ol.layer.Vector({
|
||||
source: new ol.source.Cluster({
|
||||
distance: 40,
|
||||
source: new ol.source.Vector({
|
||||
url: 'data/kml/2012_Earthquakes_Mag5.kml',
|
||||
format: new ol.format.KML({
|
||||
extractStyles: false
|
||||
})
|
||||
})
|
||||
}),
|
||||
style: styleFunction
|
||||
});
|
||||
|
||||
var raster = new ol.layer.Tile({
|
||||
source: new ol.source.Stamen({
|
||||
layer: 'toner'
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [raster, vector],
|
||||
interactions: ol.interaction.defaults().extend([new ol.interaction.Select({
|
||||
condition: function(evt) {
|
||||
return evt.originalEvent.type == 'mousemove' ||
|
||||
evt.type == 'singleclick';
|
||||
},
|
||||
style: selectStyleFunction
|
||||
})]),
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: EPSG:4326 example
|
||||
shortdesc: Example of a map in EPSG:4326.
|
||||
docs: >
|
||||
This example shows how to create a map in EPSG:4326.
|
||||
tags: "epsg4326"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.ScaleLine');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.TileWMS');
|
||||
|
||||
|
||||
var layers = [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.TileWMS({
|
||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
||||
params: {
|
||||
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
|
||||
}
|
||||
})
|
||||
})
|
||||
];
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.ScaleLine({
|
||||
units: 'degrees'
|
||||
})
|
||||
]),
|
||||
layers: layers,
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
projection: 'EPSG:4326',
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Export map example
|
||||
shortdesc: Example of exporting a map as a PNG image.
|
||||
docs: >
|
||||
Example of exporting a map as a PNG image.
|
||||
tags: "export, png, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div id="no-download" class="alert alert-error" style="display: none">
|
||||
This example requires a browser that supports the
|
||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
||||
</div>
|
||||
<a id="export-png" class="btn" download="map.png"><i class="icon-download"></i> Export PNG</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,50 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.Vector');
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
url: 'data/geojson/countries.geojson',
|
||||
format: new ol.format.GeoJSON()
|
||||
})
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
|
||||
var exportPNGElement = document.getElementById('export-png');
|
||||
|
||||
if ('download' in exportPNGElement) {
|
||||
exportPNGElement.addEventListener('click', function(e) {
|
||||
map.once('postcompose', function(event) {
|
||||
var canvas = event.context.canvas;
|
||||
exportPNGElement.href = canvas.toDataURL('image/png');
|
||||
});
|
||||
map.renderSync();
|
||||
}, false);
|
||||
} else {
|
||||
var info = document.getElementById('no-download');
|
||||
/**
|
||||
* display error message
|
||||
*/
|
||||
info.style.display = '';
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
.map {
|
||||
background: whitesmoke;
|
||||
}
|
||||
#depth {
|
||||
width: 100px;
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Fractal Example
|
||||
shortdesc: Example of a fractal.
|
||||
docs: >
|
||||
Example of a fractal.
|
||||
tags: "fractal, vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<label for="depth">
|
||||
depth:
|
||||
<input id="depth" type="range" min="0" max="9" step="1" value="5">
|
||||
(<span id="count">#</span> points)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,124 +0,0 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.Vector');
|
||||
|
||||
var radius = 10e6;
|
||||
var cos30 = Math.cos(Math.PI / 6);
|
||||
var sin30 = Math.sin(Math.PI / 6);
|
||||
var rise = radius * sin30;
|
||||
var run = radius * cos30;
|
||||
|
||||
var triangle = new ol.geom.LineString([
|
||||
[0, radius], [run, -rise], [-run, -rise], [0, radius]
|
||||
]);
|
||||
|
||||
var feature = new ol.Feature(triangle);
|
||||
|
||||
var layer = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
features: [feature]
|
||||
})
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [layer],
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
})
|
||||
});
|
||||
|
||||
function makeFractal(depth) {
|
||||
var geometry = /** @type {ol.geom.LineString} */ (triangle.clone());
|
||||
var graph = coordsToGraph(geometry.getCoordinates());
|
||||
for (var i = 0; i < depth; ++i) {
|
||||
var node = graph;
|
||||
while (node.next) {
|
||||
var next = node.next;
|
||||
injectNodes(node);
|
||||
node = next;
|
||||
}
|
||||
}
|
||||
var coordinates = graphToCoords(graph);
|
||||
document.getElementById('count').innerHTML = coordinates.length;
|
||||
geometry.setCoordinates(coordinates);
|
||||
feature.setGeometry(geometry);
|
||||
}
|
||||
|
||||
function injectNodes(startNode) {
|
||||
var endNode = startNode.next;
|
||||
|
||||
var start = startNode.point;
|
||||
var end = startNode.next.point;
|
||||
var dx = end[0] - start[0];
|
||||
var dy = end[1] - start[1];
|
||||
|
||||
// first point at 1/3 along the segment
|
||||
var firstNode = {
|
||||
point: [start[0] + dx / 3, start[1] + dy / 3]
|
||||
};
|
||||
|
||||
// second point at peak of _/\_
|
||||
var r = Math.sqrt(dx * dx + dy * dy) / (2 * cos30);
|
||||
var a = Math.atan2(dy, dx) + Math.PI / 6;
|
||||
var secondNode = {
|
||||
point: [start[0] + r * Math.cos(a), start[1] + r * Math.sin(a)]
|
||||
};
|
||||
|
||||
// third point at 2/3 along the segment
|
||||
var thirdNode = {
|
||||
point: [end[0] - dx / 3, end[1] - dy / 3]
|
||||
};
|
||||
|
||||
startNode.next = firstNode;
|
||||
firstNode.next = secondNode;
|
||||
secondNode.next = thirdNode;
|
||||
thirdNode.next = endNode;
|
||||
}
|
||||
|
||||
|
||||
function coordsToGraph(coordinates) {
|
||||
var graph = {
|
||||
point: coordinates[0]
|
||||
};
|
||||
var length = coordinates.length;
|
||||
for (var level = 0, node = graph; level < length - 1; ++level) {
|
||||
node.next = {
|
||||
point: coordinates[level + 1]
|
||||
};
|
||||
node = node.next;
|
||||
}
|
||||
return graph;
|
||||
}
|
||||
|
||||
function graphToCoords(graph) {
|
||||
var coordinates = [graph.point];
|
||||
for (var node = graph, i = 1; node.next; node = node.next, ++i) {
|
||||
coordinates[i] = node.next.point;
|
||||
}
|
||||
return coordinates;
|
||||
}
|
||||
|
||||
var depthInput = document.getElementById('depth');
|
||||
|
||||
function update() {
|
||||
makeFractal(Number(depthInput.value));
|
||||
}
|
||||
|
||||
var updateTimer;
|
||||
|
||||
|
||||
/**
|
||||
* Regenerate fractal on depth change. Change events are debounced so updates
|
||||
* only occur every 200ms.
|
||||
*/
|
||||
depthInput.onchange = function() {
|
||||
window.clearTimeout(updateTimer);
|
||||
updateTimer = window.setTimeout(update, 200);
|
||||
};
|
||||
|
||||
update();
|
||||
@@ -1,13 +0,0 @@
|
||||
.map:-moz-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:-webkit-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:fullscreen {
|
||||
height: 100%;
|
||||
}
|
||||
/* position the rotate control lower than usual */
|
||||
.ol-rotate {
|
||||
top: 3em;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Full screen drag rotate and zoom example
|
||||
shortdesc: Example of drag rotate and zoom control with full screen effect.
|
||||
docs: >
|
||||
<p>Hold down <code>Shift</code> + drag to rotate and zoom. Click the button in the top right corner to go full screen. Then do the <code>Shift</code> + drag thing again.</p>
|
||||
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
||||
tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,33 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.FullScreen');
|
||||
goog.require('ol.interaction');
|
||||
goog.require('ol.interaction.DragRotateAndZoom');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.FullScreen()
|
||||
]),
|
||||
interactions: ol.interaction.defaults().extend([
|
||||
new ol.interaction.DragRotateAndZoom()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: 'Aerial'
|
||||
})
|
||||
})
|
||||
],
|
||||
// Use the canvas renderer because it's currently the fastest
|
||||
target: 'map',
|
||||
view: new ol.View({
|
||||
center: [-33519607, 5616436],
|
||||
rotation: -Math.PI / 8,
|
||||
zoom: 8
|
||||
})
|
||||
});
|
||||
@@ -1,15 +0,0 @@
|
||||
.map:-moz-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:-webkit-full-screen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:-ms-fullscreen {
|
||||
height: 100%;
|
||||
}
|
||||
.map:fullscreen {
|
||||
height: 100%;
|
||||
}
|
||||
.ol-rotate {
|
||||
top: 3em;
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Full screen control example
|
||||
shortdesc: Example of a full screen control.
|
||||
docs: >
|
||||
<p>Click the control in the top right corner to go full screen. Click it again to exit full screen.</p>
|
||||
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
||||
tags: "full-screen, bing, bing-maps"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,29 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.control.FullScreen');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.BingMaps');
|
||||
|
||||
|
||||
var view = new ol.View({
|
||||
center: [-9101767, 2822912],
|
||||
zoom: 14
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
controls: ol.control.defaults().extend([
|
||||
new ol.control.FullScreen()
|
||||
]),
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.BingMaps({
|
||||
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
|
||||
imagerySet: 'Aerial'
|
||||
})
|
||||
})
|
||||
],
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: GeoJSON example
|
||||
shortdesc: Example of GeoJSON features.
|
||||
docs: >
|
||||
Example of GeoJSON features.
|
||||
tags: "geojson, vector, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,203 +0,0 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.format.GeoJSON');
|
||||
goog.require('ol.geom.Circle');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.layer.Vector');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.source.Vector');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
|
||||
var image = new ol.style.Circle({
|
||||
radius: 5,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({color: 'red', width: 1})
|
||||
});
|
||||
|
||||
var styles = {
|
||||
'Point': [new ol.style.Style({
|
||||
image: image
|
||||
})],
|
||||
'LineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'green',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiLineString': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'green',
|
||||
width: 1
|
||||
})
|
||||
})],
|
||||
'MultiPoint': [new ol.style.Style({
|
||||
image: image
|
||||
})],
|
||||
'MultiPolygon': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'yellow',
|
||||
width: 1
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255, 255, 0, 0.1)'
|
||||
})
|
||||
})],
|
||||
'Polygon': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'blue',
|
||||
lineDash: [4],
|
||||
width: 3
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(0, 0, 255, 0.1)'
|
||||
})
|
||||
})],
|
||||
'GeometryCollection': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'magenta',
|
||||
width: 2
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'magenta'
|
||||
}),
|
||||
image: new ol.style.Circle({
|
||||
radius: 10,
|
||||
fill: null,
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'magenta'
|
||||
})
|
||||
})
|
||||
})],
|
||||
'Circle': [new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: 'red',
|
||||
width: 2
|
||||
}),
|
||||
fill: new ol.style.Fill({
|
||||
color: 'rgba(255,0,0,0.2)'
|
||||
})
|
||||
})]
|
||||
};
|
||||
|
||||
var styleFunction = function(feature, resolution) {
|
||||
return styles[feature.getGeometry().getType()];
|
||||
};
|
||||
|
||||
var geojsonObject = {
|
||||
'type': 'FeatureCollection',
|
||||
'crs': {
|
||||
'type': 'name',
|
||||
'properties': {
|
||||
'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]]
|
||||
},
|
||||
{
|
||||
'type': 'Point',
|
||||
'coordinates': [4e6, -5e6]
|
||||
},
|
||||
{
|
||||
'type': 'Polygon',
|
||||
'coordinates': [[[1e6, -6e6], [2e6, -4e6], [3e6, -6e6]]]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var vectorSource = new ol.source.Vector({
|
||||
features: (new ol.format.GeoJSON()).readFeatures(geojsonObject)
|
||||
});
|
||||
|
||||
vectorSource.addFeature(new ol.Feature(new ol.geom.Circle([5e6, 7e6], 1e6)));
|
||||
|
||||
var vectorLayer = new ol.layer.Vector({
|
||||
source: vectorSource,
|
||||
style: styleFunction
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
}),
|
||||
vectorLayer
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
})
|
||||
});
|
||||
@@ -1,55 +0,0 @@
|
||||
---
|
||||
template: "example-verbatim.html"
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
||||
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
|
||||
<title>Mobile Geolocation Tracking with Orientation</title>
|
||||
<style type="text/css">
|
||||
html, body, .map {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#info {
|
||||
position: absolute;
|
||||
font-size: 0.7em;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: lightgrey;
|
||||
padding: 4px;
|
||||
}
|
||||
.button {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" class="map"></div>
|
||||
<div id="info"></div>
|
||||
<img id="geolocation_marker" src="data/geolocation_marker.png" />
|
||||
<div class="button">
|
||||
<button id="geolocate">Geolocate Me!</button>
|
||||
<button id="simulate">Simulate</button>
|
||||
</div>
|
||||
|
||||
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
|
||||
<script src="./resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
|
||||
|
||||
<div style="display: none;">
|
||||
<div id="title">Geolocation tracking with orientation example</div>
|
||||
<div id="shortdesc">Example of a geolocated and oriented map.</div>
|
||||
<div id="tags">fullscreen, geolocation, orientation, mobile</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,229 +0,0 @@
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.Overlay');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.geom.LineString');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.proj');
|
||||
goog.require('ol.source.OSM');
|
||||
|
||||
// creating the view
|
||||
var view = new ol.View({
|
||||
center: ol.proj.fromLonLat([5.8713, 45.6452]),
|
||||
zoom: 19
|
||||
});
|
||||
|
||||
// creating the map
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
// Geolocation marker
|
||||
var markerEl = document.getElementById('geolocation_marker');
|
||||
var marker = new ol.Overlay({
|
||||
positioning: 'center-center',
|
||||
element: markerEl,
|
||||
stopEvent: false
|
||||
});
|
||||
map.addOverlay(marker);
|
||||
|
||||
// LineString to store the different geolocation positions. This LineString
|
||||
// is time aware.
|
||||
// The Z dimension is actually used to store the rotation (heading).
|
||||
var positions = new ol.geom.LineString([],
|
||||
/** @type {ol.geom.GeometryLayout} */ ('XYZM'));
|
||||
|
||||
// Geolocation Control
|
||||
var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
|
||||
projection: view.getProjection(),
|
||||
trackingOptions: {
|
||||
maximumAge: 10000,
|
||||
enableHighAccuracy: true,
|
||||
timeout: 600000
|
||||
}
|
||||
}));
|
||||
|
||||
var deltaMean = 500; // the geolocation sampling period mean in ms
|
||||
|
||||
// Listen to position changes
|
||||
geolocation.on('change', function(evt) {
|
||||
var position = geolocation.getPosition();
|
||||
var accuracy = geolocation.getAccuracy();
|
||||
var heading = geolocation.getHeading() || 0;
|
||||
var speed = geolocation.getSpeed() || 0;
|
||||
var m = Date.now();
|
||||
|
||||
addPosition(position, heading, m, speed);
|
||||
|
||||
var coords = positions.getCoordinates();
|
||||
var len = coords.length;
|
||||
if (len >= 2) {
|
||||
deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
|
||||
}
|
||||
|
||||
var html = [
|
||||
'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
|
||||
'Accuracy: ' + accuracy,
|
||||
'Heading: ' + Math.round(radToDeg(heading)) + '°',
|
||||
'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
|
||||
'Delta: ' + Math.round(deltaMean) + 'ms'
|
||||
].join('<br />');
|
||||
document.getElementById('info').innerHTML = html;
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
// convert degrees to radians
|
||||
function degToRad(deg) {
|
||||
return deg * Math.PI * 2 / 360;
|
||||
}
|
||||
// modulo for negative values
|
||||
function mod(n) {
|
||||
return ((n % (2 * Math.PI)) + (2 * Math.PI)) % (2 * Math.PI);
|
||||
}
|
||||
|
||||
function addPosition(position, heading, m, speed) {
|
||||
var x = position[0];
|
||||
var y = position[1];
|
||||
var fCoords = positions.getCoordinates();
|
||||
var previous = fCoords[fCoords.length - 1];
|
||||
var prevHeading = previous && previous[2];
|
||||
if (prevHeading) {
|
||||
var headingDiff = heading - mod(prevHeading);
|
||||
|
||||
// force the rotation change to be less than 180°
|
||||
if (Math.abs(headingDiff) > Math.PI) {
|
||||
var sign = (headingDiff >= 0) ? 1 : -1;
|
||||
headingDiff = - sign * (2 * Math.PI - Math.abs(headingDiff));
|
||||
}
|
||||
heading = prevHeading + headingDiff;
|
||||
}
|
||||
positions.appendCoordinate([x, y, heading, m]);
|
||||
|
||||
// only keep the 20 last coordinates
|
||||
positions.setCoordinates(positions.getCoordinates().slice(-20));
|
||||
|
||||
// FIXME use speed instead
|
||||
if (heading && speed) {
|
||||
markerEl.src = 'data/geolocation_marker_heading.png';
|
||||
} else {
|
||||
markerEl.src = 'data/geolocation_marker.png';
|
||||
}
|
||||
}
|
||||
|
||||
var previousM = 0;
|
||||
// change center and rotation before render
|
||||
map.beforeRender(function(map, frameState) {
|
||||
if (frameState !== null) {
|
||||
// use sampling period to get a smooth transition
|
||||
var m = frameState.time - deltaMean * 1.5;
|
||||
m = Math.max(m, previousM);
|
||||
previousM = m;
|
||||
// interpolate position along positions LineString
|
||||
var c = positions.getCoordinateAtM(m, true);
|
||||
var view = frameState.viewState;
|
||||
if (c) {
|
||||
view.center = getCenterWithHeading(c, -c[2], view.resolution);
|
||||
view.rotation = -c[2];
|
||||
marker.setPosition(c);
|
||||
}
|
||||
}
|
||||
return true; // Force animation to continue
|
||||
});
|
||||
|
||||
// recenters the view by putting the given coordinates at 3/4 from the top or
|
||||
// the screen
|
||||
function getCenterWithHeading(position, rotation, resolution) {
|
||||
var size = map.getSize();
|
||||
var height = size[1];
|
||||
|
||||
return [
|
||||
position[0] - Math.sin(rotation) * height * resolution * 1 / 4,
|
||||
position[1] + Math.cos(rotation) * height * resolution * 1 / 4
|
||||
];
|
||||
}
|
||||
|
||||
// postcompose callback
|
||||
function render() {
|
||||
map.render();
|
||||
}
|
||||
|
||||
// geolocate device
|
||||
var geolocateBtn = document.getElementById('geolocate');
|
||||
geolocateBtn.addEventListener('click', function() {
|
||||
geolocation.setTracking(true); // Start position tracking
|
||||
|
||||
map.on('postcompose', render);
|
||||
map.render();
|
||||
|
||||
disableButtons();
|
||||
}, false);
|
||||
|
||||
// simulate device move
|
||||
var simulationData;
|
||||
$.getJSON('data/geolocation-orientation.json', function(data) {
|
||||
simulationData = data.data;
|
||||
});
|
||||
var simulateBtn = document.getElementById('simulate');
|
||||
simulateBtn.addEventListener('click', function() {
|
||||
var coordinates = simulationData;
|
||||
|
||||
var first = coordinates.shift();
|
||||
simulatePositionChange(first);
|
||||
|
||||
var prevDate = first.timestamp;
|
||||
function geolocate() {
|
||||
var position = coordinates.shift();
|
||||
if (!position) {
|
||||
return;
|
||||
}
|
||||
var newDate = position.timestamp;
|
||||
simulatePositionChange(position);
|
||||
window.setTimeout(function() {
|
||||
prevDate = newDate;
|
||||
geolocate();
|
||||
}, (newDate - prevDate) / 0.5);
|
||||
}
|
||||
geolocate();
|
||||
|
||||
map.on('postcompose', render);
|
||||
map.render();
|
||||
|
||||
disableButtons();
|
||||
}, false);
|
||||
|
||||
function simulatePositionChange(position) {
|
||||
var coords = position.coords;
|
||||
geolocation.set('accuracy', coords.accuracy);
|
||||
geolocation.set('heading', degToRad(coords.heading));
|
||||
var position_ = [coords.longitude, coords.latitude];
|
||||
var projectedPosition = ol.proj.transform(position_, 'EPSG:4326',
|
||||
'EPSG:3857');
|
||||
geolocation.set('position', projectedPosition);
|
||||
geolocation.set('speed', coords.speed);
|
||||
geolocation.changed();
|
||||
}
|
||||
|
||||
function disableButtons() {
|
||||
geolocateBtn.disabled = 'disabled';
|
||||
simulateBtn.disabled = 'disabled';
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: Geolocation example
|
||||
shortdesc: Example of a geolocation map.
|
||||
docs: >
|
||||
Example of a geolocation map.
|
||||
tags: "geolocation, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="span4 pull-right">
|
||||
<div id="info" class="alert alert-error" style="display: none;"></div>
|
||||
</div>
|
||||
<label class="checkbox" for="track">
|
||||
<input id="track" type="checkbox"/>track position
|
||||
</label>
|
||||
<p>position accuracy : <code id="accuracy"></code></p>
|
||||
<p>altitude : <code id="altitude"></code></p>
|
||||
<p>altitude accuracy : <code id="altitudeAccuracy"></code></p>
|
||||
<p>heading : <code id="heading"></code></p>
|
||||
<p>speed : <code id="speed"></code></p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,87 +0,0 @@
|
||||
goog.require('ol.Feature');
|
||||
goog.require('ol.FeatureOverlay');
|
||||
goog.require('ol.Geolocation');
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.control');
|
||||
goog.require('ol.geom.Point');
|
||||
goog.require('ol.layer.Tile');
|
||||
goog.require('ol.source.OSM');
|
||||
goog.require('ol.style.Circle');
|
||||
goog.require('ol.style.Fill');
|
||||
goog.require('ol.style.Stroke');
|
||||
goog.require('ol.style.Style');
|
||||
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 2
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
layers: [
|
||||
new ol.layer.Tile({
|
||||
source: new ol.source.OSM()
|
||||
})
|
||||
],
|
||||
target: 'map',
|
||||
controls: ol.control.defaults({
|
||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
||||
collapsible: false
|
||||
})
|
||||
}),
|
||||
view: view
|
||||
});
|
||||
|
||||
var geolocation = new ol.Geolocation({
|
||||
projection: view.getProjection()
|
||||
});
|
||||
|
||||
$('#track').on('change', function() {
|
||||
geolocation.setTracking(this.checked);
|
||||
});
|
||||
|
||||
// update the HTML page when the position changes.
|
||||
geolocation.on('change', function() {
|
||||
$('#accuracy').text(geolocation.getAccuracy() + ' [m]');
|
||||
$('#altitude').text(geolocation.getAltitude() + ' [m]');
|
||||
$('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
|
||||
$('#heading').text(geolocation.getHeading() + ' [rad]');
|
||||
$('#speed').text(geolocation.getSpeed() + ' [m/s]');
|
||||
});
|
||||
|
||||
// handle geolocation error.
|
||||
geolocation.on('error', function(error) {
|
||||
var info = document.getElementById('info');
|
||||
info.innerHTML = error.message;
|
||||
info.style.display = '';
|
||||
});
|
||||
|
||||
var accuracyFeature = new ol.Feature();
|
||||
geolocation.on('change:accuracyGeometry', function() {
|
||||
accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
|
||||
});
|
||||
|
||||
var positionFeature = new ol.Feature();
|
||||
positionFeature.setStyle(new ol.style.Style({
|
||||
image: new ol.style.Circle({
|
||||
radius: 6,
|
||||
fill: new ol.style.Fill({
|
||||
color: '#3399CC'
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#fff',
|
||||
width: 2
|
||||
})
|
||||
})
|
||||
}));
|
||||
|
||||
geolocation.on('change:position', function() {
|
||||
var coordinates = geolocation.getPosition();
|
||||
positionFeature.setGeometry(coordinates ?
|
||||
new ol.geom.Point(coordinates) : null);
|
||||
});
|
||||
|
||||
var featuresOverlay = new ol.FeatureOverlay({
|
||||
map: map,
|
||||
features: [accuracyFeature, positionFeature]
|
||||
});
|
||||
@@ -1,18 +0,0 @@
|
||||
---
|
||||
template: example.html
|
||||
title: GetFeatureInfo example (image layer)
|
||||
shortdesc: This example shows how to trigger WMS GetFeatureInfo requests on click for a WMS image layer.
|
||||
docs: >
|
||||
<p>Additionally <code>map.forEachLayerAtPixel</code> is used to change the mouse pointer when hovering a non-transparent pixel on the map.</p>
|
||||
tags: "getfeatureinfo, forEachLayerAtPixel"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<div class="span4 offset4 pull-right">
|
||||
<div id="info" class="alert alert-success">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,51 +0,0 @@
|
||||
goog.require('ol.Map');
|
||||
goog.require('ol.View');
|
||||
goog.require('ol.layer.Image');
|
||||
goog.require('ol.source.ImageWMS');
|
||||
|
||||
|
||||
var wmsSource = new ol.source.ImageWMS({
|
||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
||||
params: {'LAYERS': 'ne:ne'},
|
||||
serverType: 'geoserver',
|
||||
crossOrigin: ''
|
||||
});
|
||||
|
||||
var wmsLayer = new ol.layer.Image({
|
||||
source: wmsSource
|
||||
});
|
||||
|
||||
var view = new ol.View({
|
||||
center: [0, 0],
|
||||
zoom: 1
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
renderer: exampleNS.getRendererFromQueryString(),
|
||||
layers: [wmsLayer],
|
||||
target: 'map',
|
||||
view: view
|
||||
});
|
||||
|
||||
map.on('singleclick', function(evt) {
|
||||
document.getElementById('info').innerHTML = '';
|
||||
var viewResolution = /** @type {number} */ (view.getResolution());
|
||||
var url = wmsSource.getGetFeatureInfoUrl(
|
||||
evt.coordinate, viewResolution, 'EPSG:3857',
|
||||
{'INFO_FORMAT': 'text/html'});
|
||||
if (url) {
|
||||
document.getElementById('info').innerHTML =
|
||||
'<iframe seamless src="' + url + '"></iframe>';
|
||||
}
|
||||
});
|
||||
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
var hit = map.forEachLayerAtPixel(pixel, function(layer) {
|
||||
return true;
|
||||
});
|
||||
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user