Update links to external resources
This commit is contained in:
Maximilian Krög
@@ -4,7 +4,7 @@ title: Animated GIF
|
||||
shortdesc: Example of using an animated GIF as an icon.
|
||||
docs: >
|
||||
Example of using an animated GIF as an icon.
|
||||
Animation is achieved using the <a href="http://themadcreator.github.io/gifler/" target="_blank">Gifler</a> library.
|
||||
Animation is achieved using the <a href="https://themadcreator.github.io/gifler/" target="_blank">Gifler</a> library.
|
||||
tags: "animation, vector, style, icon, gif"
|
||||
resources:
|
||||
- https://unpkg.com/gifler@0.1.0/gifler.min.js
|
||||
|
||||
@@ -7,7 +7,7 @@ docs: >
|
||||
tags: "bing, bing-maps"
|
||||
cloak:
|
||||
- key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
|
||||
value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||
value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
<select id="layer-select">
|
||||
|
||||
@@ -7,8 +7,8 @@ docs: >
|
||||
animate flights. A great circle arc between two airports is calculated using
|
||||
<a href="https://github.com/springmeyer/arc.js">arc.js</a> and then the flight
|
||||
paths are animated with <b>postrender</b>. The flight data is provided by
|
||||
<a href="http://openflights.org/data.html">OpenFlights</a> (a simplified data
|
||||
set from the <a href="https://www.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/">
|
||||
<a href="https://openflights.org/data.html">OpenFlights</a> (a simplified data
|
||||
set from the <a href="https://docs.mapbox.com/mapbox.js/example/v1.0.0/animating-flight-paths/">
|
||||
Mapbox.js documentation</a> is used).
|
||||
tags: "animation, vector, feature, flights, arc"
|
||||
resources:
|
||||
|
||||
@@ -34,7 +34,7 @@ const flightsSource = new VectorSource({
|
||||
wrapX: false,
|
||||
attributions:
|
||||
'Flight data by ' +
|
||||
'<a href="http://openflights.org/data.html">OpenFlights</a>,',
|
||||
'<a href="https://openflights.org/data.html">OpenFlights</a>,',
|
||||
loader: function () {
|
||||
const url = 'data/openflights/flights.json';
|
||||
fetch(url)
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Full Screen Drag, Rotate, and Zoom
|
||||
shortdesc: Example of drag rotate and zoom control with full screen effect.
|
||||
docs: >
|
||||
<p>Hold down <code>Shift+Drag</code> to rotate and zoom. Click the button in the top right corner to go full screen. Then do the <code>Shift+Drag</code> 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>
|
||||
<p>If there is no button on the map, your browser does not support the <a href="https://caniuse.com/fullscreen">Full Screen API</a>.</p>
|
||||
tags: "full-screen, drag, rotate, zoom, xyz, maptiler"
|
||||
cloak:
|
||||
- key: get_your_own_D6rA4zTHduk6KOKTXzGB
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Full Screen Control with extended source element
|
||||
shortdesc: Example of a full screen control with a source option definition.
|
||||
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>
|
||||
<p>If there is no button on the map, your browser does not support the <a href="https://caniuse.com/fullscreen">Full Screen API</a>.</p>
|
||||
tags: "full-screen, source, fullScreenSource, osm, osm-maps"
|
||||
---
|
||||
<div id="fullscreen" class="fullscreen">
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Full Screen Control
|
||||
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>
|
||||
<p>If there is no button on the map, your browser does not support the <a href="https://caniuse.com/fullscreen">Full Screen API</a>.</p>
|
||||
tags: "full-screen, xyz, maptiler"
|
||||
cloak:
|
||||
- key: get_your_own_D6rA4zTHduk6KOKTXzGB
|
||||
|
||||
@@ -60,7 +60,7 @@ for (i = 0, ii = hereLayers.length; i < ii; ++i) {
|
||||
'Map Tiles © ' +
|
||||
new Date().getFullYear() +
|
||||
' ' +
|
||||
'<a href="http://developer.here.com" target="_blank">HERE</a>',
|
||||
'<a href="https://developer.here.com/" target="_blank">HERE</a>',
|
||||
}),
|
||||
})
|
||||
);
|
||||
|
||||
@@ -7,7 +7,7 @@ docs: >
|
||||
tags: "complex-geometry, closest-feature, igc, opencyclemap"
|
||||
cloak:
|
||||
- key: 0e6fc415256d4fbb9b5166a718591d71
|
||||
value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
|
||||
value: Your API key from https://www.thunderforest.com/docs/apikeys/ here
|
||||
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -3,11 +3,11 @@ layout: example.html
|
||||
title: Localized OpenStreetMap
|
||||
shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
|
||||
docs: >
|
||||
<p>The base layer is <a href="https://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>.
|
||||
<p>The base layer is <a href="https://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="https://www.openseamap.org/">OpenSeaMap</a>.
|
||||
tags: "localized-openstreetmap, openseamap, openstreetmap"
|
||||
cloak:
|
||||
- key: 0e6fc415256d4fbb9b5166a718591d71
|
||||
value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
|
||||
value: Your API key from https://www.thunderforest.com/docs/apikeys/ here
|
||||
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -18,7 +18,7 @@ const openCycleMapLayer = new TileLayer({
|
||||
const openSeaMapLayer = new TileLayer({
|
||||
source: new OSM({
|
||||
attributions: [
|
||||
'All maps © <a href="http://www.openseamap.org/">OpenSeaMap</a>',
|
||||
'All maps © <a href="https://www.openseamap.org/">OpenSeaMap</a>',
|
||||
ATTRIBUTION,
|
||||
],
|
||||
opaque: false,
|
||||
|
||||
@@ -4,8 +4,8 @@ title: Full-Screen Mobile
|
||||
shortdesc: Example of a full screen map.
|
||||
tags: "fullscreen, geolocation, mobile"
|
||||
cloak:
|
||||
- key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
|
||||
value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||
- key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
|
||||
value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
@@ -13,7 +13,7 @@ resources:
|
||||
<div id="map" class="map"></div>
|
||||
<div style="display: none;">
|
||||
<!-- Clickable label for Vienna -->
|
||||
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
||||
<a class="overlay" id="vienna" target="_blank" href="https://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
||||
<div id="marker" title="Marker"></div>
|
||||
<!-- Popup -->
|
||||
<div id="popup" title="Welcome to OpenLayers"></div>
|
||||
|
||||
@@ -7,7 +7,7 @@ docs: >
|
||||
tags: "overview, overviewmap"
|
||||
cloak:
|
||||
- key: 0e6fc415256d4fbb9b5166a718591d71
|
||||
value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
|
||||
value: Your API key from https://www.thunderforest.com/docs/apikeys/ here
|
||||
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -6,7 +6,7 @@ docs: >
|
||||
In this example the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history"
|
||||
target="_blank">HTML 5 History API</a> is used to update the browser URL
|
||||
with the current zoom-level, center and rotation when the map is moved.
|
||||
Note that the History API is not supported in <a href="http://caniuse.com/#feat=history"
|
||||
Note that the History API is not supported in <a href="https://caniuse.com/history"
|
||||
target="_blank">all browsers</a>, one might consider to use a <a
|
||||
href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#html5-history-api-pushstate-replacestate-popstate"
|
||||
target="_blank">a polyfill</a>.
|
||||
|
||||
@@ -7,7 +7,7 @@ docs: >
|
||||
tags: "preload, bing"
|
||||
cloak:
|
||||
- key: ApTJzdkyN1DdFKkRAE6QIDtzihNaf6IWJsT-nQ_2eMoO4PN__0Tzhl2-WgJtXFSp
|
||||
value: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||
value: Your Bing Maps Key from https://www.bingmapsportal.com/ here
|
||||
---
|
||||
<div id="map1" class="map"></div>
|
||||
<div id="map2" class="map"></div>
|
||||
|
||||
@@ -13,7 +13,7 @@ docs: >
|
||||
<p>
|
||||
In this case, a single tiled source of imagery is used as input.
|
||||
For each pixel, the Vegetation Greenness Index
|
||||
(<a href="http://www.tandfonline.com/doi/abs/10.1080/10106040108542184#.Vb90ITBViko">VGI</a>)
|
||||
(<a href="https://www.tandfonline.com/doi/abs/10.1080/10106040108542184#.Vb90ITBViko">VGI</a>)
|
||||
is calculated from the input pixels. A second operation colors
|
||||
those pixels based on a threshold value (values above the
|
||||
threshold are green and those below are transparent).
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
# Code examples
|
||||
|
||||
The `.html` files in this folder are built by applying the templates in the `templates` folder. Examples have [YAML front-matter](http://www.metalsmith.io) headers with the following properties:
|
||||
The `.html` files in this folder are built by applying the templates in the `templates` folder. Examples have [YAML front-matter](https://metalsmith.io/) headers with the following properties:
|
||||
|
||||
* layout: The template from the `templates` directory to use for this example
|
||||
* title: The title of the example
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// Styles for the mapbox-streets-v6 vector tile data set. Loosely based on
|
||||
// http://a.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6.json
|
||||
// https://docs.mapbox.com/vector-tiles/reference/mapbox-streets-v6/
|
||||
|
||||
function createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text) {
|
||||
var fill = new Fill({color: ''});
|
||||
|
||||
@@ -4,7 +4,7 @@ title: Static Image
|
||||
shortdesc: Example of a static image layer.
|
||||
docs: >
|
||||
<p>
|
||||
This example uses a <a href="http://xkcd.com/256/">static image</a>
|
||||
This example uses a <a href="https://xkcd.com/256/">static image</a>
|
||||
as a layer source. The map view is configured with a custom
|
||||
projection that translates image coordinates directly into map
|
||||
coordinates.
|
||||
|
||||
@@ -19,7 +19,7 @@ const map = new Map({
|
||||
layers: [
|
||||
new ImageLayer({
|
||||
source: new Static({
|
||||
attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
|
||||
attributions: '© <a href="https://xkcd.com/license.html">xkcd</a>',
|
||||
url: 'https://imgs.xkcd.com/comics/online_communities.png',
|
||||
projection: projection,
|
||||
imageExtent: extent,
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: example.html
|
||||
title: Tissot Indicatrix
|
||||
shortdesc: Draw Tissot's indicatrices on maps.
|
||||
docs: >
|
||||
Example of [Tissot indicatrix](http://en.wikipedia.org/wiki/Tissot's_indicatrix) maps. The map on the top is an `EPSG:4326` map. The one on the bottom is `EPSG:3857`.
|
||||
Example of [Tissot indicatrix](https://en.wikipedia.org/wiki/Tissot's_indicatrix) maps. The map on the top is an `EPSG:4326` map. The one on the bottom is `EPSG:3857`.
|
||||
tags: "tissot, circle"
|
||||
---
|
||||
<h4>EPSG:4326</h4>
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: example.html
|
||||
title: turf.js
|
||||
shortdesc: Example on how to use turf.js with OpenLayers.
|
||||
docs: >
|
||||
Example showing the integration of <a href="http://turfjs.org">turf.js</a>
|
||||
Example showing the integration of <a href="https://turfjs.org/">turf.js</a>
|
||||
with OpenLayers. The turf.js function <code>along</code> is used to
|
||||
display a marker every 200 meters along a street.
|
||||
tags: "vector, turfjs, along, distance"
|
||||
|
||||
@@ -4,7 +4,7 @@ title: UTFGrid
|
||||
shortdesc: This example shows how to read data from a UTFGrid source.
|
||||
docs: >
|
||||
<p>Point to a country to see its name and flag.</p>
|
||||
Tiles made with <a href="http://tilemill.com">TileMill</a>. Hosting on <a href="mapbox.com">mapbox.com</a> or with open-source <a href="https://github.com/klokantech/tileserver-php/">TileServer</a>.
|
||||
Tiles made with <a href="https://tilemill-project.github.io/tilemill/">TileMill</a>. Hosting on <a href="https://www.mapbox.com/">mapbox.com</a> or with open-source <a href="https://github.com/maptiler/tileserver-php">TileServer</a>.
|
||||
tags: "utfgrid, tilejson"
|
||||
cloak:
|
||||
- key: pk.eyJ1IjoiYWhvY2V2YXIiLCJhIjoiY2pzbmg0Nmk5MGF5NzQzbzRnbDNoeHJrbiJ9.7_-_gL8ur7ZtEiNwRfCy7Q
|
||||
|
||||
@@ -234,7 +234,7 @@ String.prototype.trunc =
|
||||
return this.length > n ? this.substr(0, n - 1) + '...' : this.substr(0);
|
||||
};
|
||||
|
||||
// http://stackoverflow.com/questions/14484787/wrap-text-in-javascript
|
||||
// https://stackoverflow.com/questions/14484787/wrap-text-in-javascript
|
||||
function stringDivider(str, width, spaceReplacer) {
|
||||
if (str.length > width) {
|
||||
let p = width;
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: example.html
|
||||
title: OSM XML
|
||||
shortdesc: Example of using the OSM XML source.
|
||||
docs: >
|
||||
OSM XML vector data is loaded dynamically from a the [Overpass API](http://overpass-api.de) using a bbox strategy. Note that panning and zooming will eventually lead to "Too many requests" errors from the Overpass API.
|
||||
OSM XML vector data is loaded dynamically from a the [Overpass API](https://overpass-api.de/) using a bbox strategy. Note that panning and zooming will eventually lead to "Too many requests" errors from the Overpass API.
|
||||
tags: "vector, osmxml, loading, server, strategy, bbox, maptiler"
|
||||
cloak:
|
||||
- key: get_your_own_D6rA4zTHduk6KOKTXzGB
|
||||
|
||||
@@ -3,7 +3,7 @@ layout: example.html
|
||||
title: WMTS Tile Transitions
|
||||
shortdesc: Example of smooth tile transitions when changing the dimension of a WMTS layer.
|
||||
docs: >
|
||||
Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from <a href="http://scalgo.com">SCALGO</a>, underlying data from <a href="https://cgiarcsi.community/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
|
||||
Demonstrates smooth reloading of layers when changing a dimension continuously. The demonstration layer is a global sea-level computation (flooding computation from <a href="https://scalgo.com/">SCALGO</a>, underlying data from <a href="https://cgiarcsi.community/data/srtm-90m-digital-elevation-database-v4-1">CGIAR-CSI SRTM</a>) where cells that are flooded if the sea-level rises to more than <em>x</em> m are colored blue. The user selects the sea-level dimension using a slider.
|
||||
tags: "wmts, parameter, transition"
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
@@ -42,7 +42,7 @@ const ign_source = new WMTS({
|
||||
tileGrid: tileGrid,
|
||||
style: 'normal',
|
||||
attributions:
|
||||
'<a href="http://www.ign.fr" target="_blank">' +
|
||||
'<a href="https://www.ign.fr/" target="_blank">' +
|
||||
'<img src="https://wxs.ign.fr/static/logos/IGN/IGN.gif" title="Institut national de l\'' +
|
||||
'information géographique et forestière" alt="IGN"></a>',
|
||||
});
|
||||
|
||||
@@ -7,7 +7,7 @@ docs: >
|
||||
tags: "xyz"
|
||||
cloak:
|
||||
- key: 0e6fc415256d4fbb9b5166a718591d71
|
||||
value: Your API key from http://www.thunderforest.com/docs/apikeys/ here
|
||||
value: Your API key from https://www.thunderforest.com/docs/apikeys/ here
|
||||
|
||||
---
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
Reference in New Issue
Block a user