Port over lazy-source, line-arrows, localized-openstreetmap, mapguide-untiled and mapquest examples
This commit is contained in:
Bart van den Eijnden
committed by
Andreas Hocevar
Andreas Hocevar
parent
c75c704e9f
commit
440832146e
@@ -0,0 +1,6 @@
|
|||||||
|
button.code {
|
||||||
|
font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 5px;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
@@ -1,73 +1,20 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Lazy Source"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of setting a layer source after construction."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<p>Typically, the source for a layer is provided to the layer constructor.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
If you need to set a layer source after construction, this can be
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
done with the <code>layer.setSource()</code> method.</p>
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<p>The layer in the map above is constructed with no source. Use the
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
links below to set/unset the layer source. A layer is not rendered
|
||||||
<title>Lazy Source</title>
|
until its source is set.</p>
|
||||||
<style>
|
tags: "source"
|
||||||
button.code {
|
---
|
||||||
font-family: Monaco,Menlo,Consolas,"Courier New",monospace;
|
<div class="row-fluid">
|
||||||
font-size: 12px;
|
<div class="span12">
|
||||||
padding: 5px;
|
<div id="map" class="map"></div>
|
||||||
margin: 0 5px;
|
</div>
|
||||||
}
|
</div>
|
||||||
</style>
|
<button id="set-source" class="code">layer.setSource(source)</button>
|
||||||
</head>
|
<button id="unset-source" class="code">layer.setSource(null)</button>
|
||||||
<body>
|
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Lazy source example</h4>
|
|
||||||
<p id="shortdesc">Example of setting a layer source after construction.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>
|
|
||||||
Typically, the source for a layer is provided to the layer constructor.
|
|
||||||
If you need to set a layer source after construction, this can be
|
|
||||||
done with the <code>layer.setSource()</code> method.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
The layer in the map above is constructed with no source. Use the
|
|
||||||
links below to set/unset the layer source. A layer is not rendered
|
|
||||||
until its source is set.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<button id="set-source" class="code">layer.setSource(source)</button>
|
|
||||||
<button id="unset-source" class="code">layer.setSource(null)</button>
|
|
||||||
</p>
|
|
||||||
<p>See the <a href="lazy-source.js" target="_blank">lazy-source.js source</a> for details on how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">source</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=lazy-source" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "LineString arrows example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of drawing arrows for each line string segment."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
Example of drawing arrows for each line string segment.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "draw, vector, arrow"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="span12">
|
||||||
<title>LineString arrows example</title>
|
<div id="map" class="map"></div>
|
||||||
</head>
|
</div>
|
||||||
<body>
|
</div>
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">LineString arrows example</h4>
|
|
||||||
<p id="shortdesc">Example of drawing arrows for each line string segment.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="line-arrows.js" target="_blank">line-arrows.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">draw, vector, arrow</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=line-arrows" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,52 +1,14 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Localized OpenStreetMap example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a localized OpenStreetMap map with a custom tile server and a custom attribution."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
<p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
tags: "cors, localized-openstreetmap, openseamap, openstreetmap"
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<title>Localized OpenStreetMap example</title>
|
<div class="span12">
|
||||||
</head>
|
<div id="map" class="map"></div>
|
||||||
<body>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">Localized OpenStreetMap example</h4>
|
|
||||||
<p id="shortdesc">Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>. The OpenSeaMap tile server does not support <a href="http://enable-cors.org/">CORS</a> headers.</p>
|
|
||||||
<p>See the <a href="localized-openstreetmap.js" target="_blank">localized-openstreetmap.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">cors, localized-openstreetmap, openseamap, openstreetmap</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=localized-openstreetmap" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "MapGuide untiled example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a untiled MapGuide map."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
Example of a untiled MapGuide map.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "mapguide"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="span12">
|
||||||
<title>MapGuide untiled example</title>
|
<div id="map" class="map"></div>
|
||||||
</head>
|
</div>
|
||||||
<body>
|
</div>
|
||||||
|
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">MapGuide untiled example</h4>
|
|
||||||
<p id="shortdesc">Example of a untiled MapGuide map.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="mapguide-untiled.js" target="_blank">mapguide-untiled.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">mapguide</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=mapguide-untiled" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|||||||
+18
-56
@@ -1,56 +1,18 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "MapQuest example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a MapQuest map.Shows how to create custom controls."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
Example of a MapQuest map.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "mapquest"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
---
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<div class="row-fluid">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<div class="span12">
|
||||||
<title>MapQuest example</title>
|
<div id="map" class="map"></div>
|
||||||
</head>
|
<select id="layer-select">
|
||||||
<body>
|
<option value="Aerial">Aerial</option>
|
||||||
|
<option value="AerialWithLabels">Aerial with labels</option>
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<option value="Road" selected>Road</option>
|
||||||
<div class="navbar-inner">
|
</select>
|
||||||
<div class="container">
|
</div>
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<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">Aerial with labels</option>
|
|
||||||
<option value="Road" selected>Road</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
|
|
||||||
<div class="span12">
|
|
||||||
<h4 id="title">MapQuest example</h4>
|
|
||||||
<p id="shortdesc">Example of a MapQuest map.</p>
|
|
||||||
<div id="docs">
|
|
||||||
<p>See the <a href="mapquest.js" target="_blank">mapquest.js source</a> to see how this is done.</p>
|
|
||||||
</div>
|
|
||||||
<div id="tags">mapquest</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
|
||||||
<script src="loader.js?id=mapquest" type="text/javascript"></script>
|
|
||||||
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user