Converted examples
This commit is contained in:
Björn Harrtell
committed by
Andreas Hocevar
Andreas Hocevar
parent
b9074342a6
commit
9880a860a3
@@ -1,56 +1,19 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Navigation controls example</title>
|
||||
</head>
|
||||
<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">Navigation controls example</h4>
|
||||
<p id="shortdesc">Shows how to add navigation controls.</p>
|
||||
The following navigation controls are added to the map:
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Navigation controls example"
|
||||
shortdesc: "Shows how to add navigation controls."
|
||||
docs: >
|
||||
<p>This example shows how to use the beforeRender function on the Map to run one
|
||||
or more animations.</p>
|
||||
<p>The following navigation controls are added to the map:</p>
|
||||
<ul>
|
||||
<li><code>ol.control.Zoom</code> (added by default)</li>
|
||||
<li><code>ol.control.ZoomToExtent</code></li>
|
||||
</ul>
|
||||
<div id="docs">
|
||||
<p>See the <a href="navigation-controls.js" target="_blank">navigation-controls.js source</a> to see how this is done.</p>
|
||||
tags: "control, navigation, extent"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div id="tags">control, navigation, extent</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=navigation-controls" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
18
examples_src/overlay.css
Normal file
18
examples_src/overlay.css
Normal file
@@ -0,0 +1,18 @@
|
||||
#marker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #088;
|
||||
border-radius: 10px;
|
||||
background-color: #0FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#vienna {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
text-shadow: black 0.1em 0.1em 0.2em;
|
||||
}
|
||||
.popover-content {
|
||||
min-width: 180px;
|
||||
}
|
||||
@@ -1,82 +1,21 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<style type="text/css">
|
||||
#marker {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 1px solid #088;
|
||||
border-radius: 10px;
|
||||
background-color: #0FF;
|
||||
opacity: 0.5;
|
||||
}
|
||||
#vienna {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 11pt;
|
||||
font-weight: bold;
|
||||
text-shadow: black 0.1em 0.1em 0.2em;
|
||||
}
|
||||
.popover-content {
|
||||
min-width: 180px;
|
||||
}
|
||||
</style>
|
||||
<title>Overlay example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Overlay example"
|
||||
shortdesc: "Demonstrates overlays."
|
||||
docs: >
|
||||
<p>The popups are created using <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
|
||||
tags: "overlay, popup, bootstrap, popover, mapquest, openaerial"
|
||||
resources: overlay.css
|
||||
---
|
||||
<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">Overlay example</h4>
|
||||
<p id="shortdesc">Demonstrates overlays.</p>
|
||||
<div id="docs">
|
||||
<p>The popups are created using
|
||||
<a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
|
||||
<p>See the <a href="overlay.js" target="_blank">overlay.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">overlay, popup, bootstrap, popover, mapquest, openaerial</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div style="display: none;">
|
||||
</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>
|
||||
<div id="marker" title="Marker"></div>
|
||||
<!-- Popup -->
|
||||
<div id="popup" title="Welcome to ol3"></div>
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=overlay" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
32
examples_src/overviewmap-custom.css
Normal file
32
examples_src/overviewmap-custom.css
Normal file
@@ -0,0 +1,32 @@
|
||||
.ol-custom-overviewmap,
|
||||
.ol-custom-overviewmap.ol-uncollapsible {
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap:not(.ol-collapsed) {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap .ol-overviewmap-map {
|
||||
border: none;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap .ol-overviewmap-box {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap:not(.ol-collapsed) button{
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.ol-rotate {
|
||||
top: 170px;
|
||||
right: 0;
|
||||
}
|
||||
@@ -1,77 +1,14 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<style type="text/css">
|
||||
.ol-custom-overviewmap,
|
||||
.ol-custom-overviewmap.ol-uncollapsible {
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap:not(.ol-collapsed) {
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap .ol-overviewmap-map {
|
||||
border: none;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap .ol-overviewmap-box {
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
.ol-custom-overviewmap:not(.ol-collapsed) button{
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
.ol-rotate {
|
||||
top: 170px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
<title>ol3 OverviewMap control with advanced customization example</title>
|
||||
</head>
|
||||
<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">
|
||||
<h4 id="title">OverviewMap control, advanced</h4>
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<p id="shortdesc">Example of OverviewMap control with advanced customization.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="overviewmap-custom.js" target="_blank">overviewmap-custom.js source</a> to see how this is done.</p>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "OverviewMap control example advanced"
|
||||
shortdesc: "Example of OverviewMap control with advanced customization."
|
||||
docs: >
|
||||
<p>This example demonstrates how you can customize the overviewmap control using its supported options as well as defining custom CSS. You can also rotate the map using the shift key to see how the overview map reacts.</p>
|
||||
tags: "overview, overviewmap"
|
||||
resources: overviewmap-custom.css
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div id="tags">overview, overviewmap</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=overviewmap-custom" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,41 +1,13 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>ol3 OverviewMap control example</title>
|
||||
</head>
|
||||
<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">
|
||||
<h4 id="title">OverviewMap control</h4>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "OverviewMap control example"
|
||||
shortdesc: "Example of OverviewMap control."
|
||||
docs: >
|
||||
This example demonstrates the use of the OverviewMap control.
|
||||
tags: "overview, overviewmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
|
||||
<div class="row-fluid">
|
||||
<p id="shortdesc">Example of OverviewMap control.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="overviewmap.js" target="_blank">overviewmap.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">overview, overviewmap</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=overviewmap" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
0
examples_src/polygon-styles.css
Normal file
0
examples_src/polygon-styles.css
Normal file
@@ -1,57 +1,16 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Custom styles for polygons</title>
|
||||
<style>
|
||||
.map {
|
||||
background: grey;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Custom styles for polygons"
|
||||
shortdesc: "Showing the vertices of a polygon with a custom style geometry."
|
||||
docs: >
|
||||
In this example two different styles are created for the polygons:
|
||||
* The first style is for the polygons themselves.
|
||||
* The second style is to draw the vertices of the polygons.
|
||||
tags: "polygon, vector, style, GeometryFunction"
|
||||
resources: polygon-styles.css
|
||||
---
|
||||
<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">Custom styles for polygons</h4>
|
||||
<p id="shortdesc">Showing the vertices of a polygon with a custom style geometry.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="polygon-styles.js" target="_blank">polygon-styles.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">polygon, vector, style, GeometryFunction</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=polygon-styles" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
41
examples_src/popup.css
Normal file
41
examples_src/popup.css
Normal file
@@ -0,0 +1,41 @@
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
||||
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
}
|
||||
.ol-popup:after, .ol-popup:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ol-popup:after {
|
||||
border-top-color: white;
|
||||
border-width: 10px;
|
||||
left: 48px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.ol-popup:before {
|
||||
border-top-color: #cccccc;
|
||||
border-width: 11px;
|
||||
left: 48px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: "✖";
|
||||
}
|
||||
@@ -1,104 +1,20 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<style type="text/css">
|
||||
.ol-popup {
|
||||
position: absolute;
|
||||
background-color: white;
|
||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
||||
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
||||
padding: 15px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 12px;
|
||||
left: -50px;
|
||||
}
|
||||
.ol-popup:after, .ol-popup:before {
|
||||
top: 100%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ol-popup:after {
|
||||
border-top-color: white;
|
||||
border-width: 10px;
|
||||
left: 48px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.ol-popup:before {
|
||||
border-top-color: #cccccc;
|
||||
border-width: 11px;
|
||||
left: 48px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
.ol-popup-closer {
|
||||
text-decoration: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 8px;
|
||||
}
|
||||
.ol-popup-closer:after {
|
||||
content: "✖";
|
||||
}
|
||||
</style>
|
||||
<title>Popup example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Popup example"
|
||||
shortdesc: "Uses an overlay to create a popup."
|
||||
docs: >
|
||||
<p>
|
||||
Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container. A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
|
||||
</p>
|
||||
tags: "overlay, popup, mapquest, openaerial"
|
||||
resources: popup.css
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map">
|
||||
<div id="map" class="map"></div>
|
||||
<div id="popup" class="ol-popup">
|
||||
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||||
<div id="popup-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Popup example</h4>
|
||||
<p id="shortdesc">Uses an overlay to create a popup.</p>
|
||||
<div id="docs">
|
||||
<p>
|
||||
Click on the map to get a popup. The popup is composed of a few basic elements: a container, a close button, and a place for the content. To anchor the popup to the map, an <code>ol.Overlay</code> is created with the popup container. A listener is registered for the map's <code>click</code> event to display the popup, and another listener is set as the <code>click</code> handler for the close button to hide the popup.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="popup.js" target="_blank">popup.js source</a> to see how this is done.
|
||||
</p>
|
||||
</div>
|
||||
<div id="tags">overlay, popup, mapquest, openaerial</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=popup" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,55 +1,17 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Preload example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Preload example"
|
||||
shortdesc: "Example of tile preloading."
|
||||
docs: >
|
||||
<p>The map on the left preloads low resolution tiles. The map on the right does not use any preloading. Try zooming out and panning to see the difference.</p>
|
||||
tags: "preload, bing"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span6">
|
||||
<div id="map1" class="map"></div>
|
||||
</div>
|
||||
<div class="span6">
|
||||
<div id="map2" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Preload example</h4>
|
||||
<p id="shortdesc">Example of tile preloading.</p>
|
||||
<div id="docs">
|
||||
<p>The map on the left preloads low resolution tiles. The map on the right does not use any preloading. Try zooming out and panning to see the difference.</p>
|
||||
<p>See the <a href="preload.js" target="_blank">preload.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">preload, bing</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=preload" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,51 +1,13 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Regular Shape example</title>
|
||||
</head>
|
||||
<body>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Regular Shape example"
|
||||
shortdesc: "Example of some Regular Shape styles."
|
||||
docs: >
|
||||
|
||||
<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">
|
||||
tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
|
||||
---
|
||||
<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">Regular Shape example</h4>
|
||||
<p id="shortdesc">Example of some Regular Shape styles.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="regularshape.js" target="_blank">regularshape.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector, symbol, regularshape, style, square, cross, star, triangle, x</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=regularshape" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +1,13 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Rotation example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Rotation example"
|
||||
shortdesc: "Example of a rotated map."
|
||||
docs: >
|
||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||
tags: "rotation, openstreetmap"
|
||||
---
|
||||
<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">Rotation example</h4>
|
||||
<p id="shortdesc">Example of a rotated map.</p>
|
||||
<div id="docs">
|
||||
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||
<p>See the <a href="rotation.js" target="_blank">rotation.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">rotation, 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=rotation" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,12 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Scale line example</title>
|
||||
</head>
|
||||
<body>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Scale line example"
|
||||
shortdesc: "Example of a scale line."
|
||||
docs: >
|
||||
|
||||
<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">
|
||||
tags: "scale-line, openstreetmap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
<select id="units">
|
||||
@@ -33,26 +17,4 @@
|
||||
<option value="metric">metric</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Scale line example</h4>
|
||||
<p id="shortdesc">Example of a scale line.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="scale-line.js" target="_blank">scale-line.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">scale-line, 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=scale-line" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,44 +1,14 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Select features example</title>
|
||||
</head>
|
||||
<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">Select features example</h4>
|
||||
<p id="shortdesc">Example of using the Select interaction. Choose between <code>Single-click</code>, <code>Click</code> and <code>Hover</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Select features example"
|
||||
shortdesc: "Example of using the Select interaction."
|
||||
docs: >
|
||||
Choose between <code>Single-click</code>, <code>Click</code> and <code>Hover</code> as the event type for selection in the combobox below. When using <code>Single-click</code> or <code>Click</code> you can hold do <code>Shift</code> key to toggle the feature in the selection.</p>
|
||||
<p>Note: when <code>Single-click</code> is used double-clicks won't select features. This in contrast to <code>Click</code>, where a double-click will both select the feature and zoom the map (because of the <code>DoubleClickZoom</code> interaction). Note that <code>Single-click</code> is less responsive than <code>Click</code> because of the delay it uses to detect double-clicks.</p>
|
||||
<p>In this example, a listener is registered for the Select interaction's <code>select</code> event in order to update the selection status below.
|
||||
<form class="form-inline">
|
||||
<label>Action type </label>
|
||||
<select id="type">
|
||||
<select id="type" class="form-control">
|
||||
<option value="none" selected>None</option>
|
||||
<option value="singleclick">Single-click</option>
|
||||
<option value="click">Click</option>
|
||||
@@ -46,19 +16,10 @@
|
||||
</select>
|
||||
<span id="status"> 0 selected features</span>
|
||||
</form>
|
||||
<div id="docs">
|
||||
<p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p>
|
||||
tags: "select, vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div id="tags">select, vector</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=select-features" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,13 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Semi-transparent layer example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Semi-transparent layer example"
|
||||
shortdesc: "Example of a map with a semi-transparent layer."
|
||||
docs: >
|
||||
This example will display a tiled MaxBox layer semi-transparently over a MapQuest background.
|
||||
tags: "transparent, mapquest, tilejson"
|
||||
---
|
||||
<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">Semi-transparent layer example</h4>
|
||||
<p id="shortdesc">Example of a map with a semi-transparent layer.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="semi-transparent-layer.js" target="_blank">semi-transparent-layer.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">transparent, mapquest, tilejson</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=semi-transparent-layer" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,28 +1,12 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Side-by-side example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Side-by-side example"
|
||||
shortdesc: "The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers."
|
||||
docs: >
|
||||
The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
|
||||
tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span4">
|
||||
<h4>Canvas</h4>
|
||||
<div id="canvasMap" class="map"></div>
|
||||
@@ -38,26 +22,4 @@
|
||||
<h4>DOM</h4>
|
||||
<div id="domMap" class="map"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row-fluid">
|
||||
|
||||
<div class="span12">
|
||||
<h4 id="title">Side-by-side example</h4>
|
||||
<p id="shortdesc">The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="side-by-side.js" target="_blank">side-by-side.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">side-by-side, canvas, webgl, dom, canvas, sync, object</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=side-by-side" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,38 +1,9 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title> Snap example </title>
|
||||
</head>
|
||||
<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">Snap interaction example</h4>
|
||||
<p id="shortdesc">Example of using the snap interaction together with
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Snap interaction example"
|
||||
shortdesc: "Example of using the snap interaction together with draw and modify interactions."
|
||||
docs: >
|
||||
Example of using the snap interaction together with
|
||||
draw and modify interactions. The snap interaction must be added
|
||||
last, as it needs to be the first to handle the
|
||||
<code>pointermove</code> event.</p>
|
||||
@@ -58,20 +29,10 @@
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="docs">
|
||||
<p>See the <a href="snap.js" target="_blank">snap.js source</a> to see how this is done.</p>
|
||||
tags: "draw, edit, modify, vector, featureoverlay, snap"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div id="tags">draw, edit, modify, vector, featureoverlay, snap</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=snap" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +1,14 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Sphere Mollweide example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Sphere Mollweide example"
|
||||
shortdesc: "Example of a Sphere Mollweide map with a Graticule component."
|
||||
docs: >
|
||||
Example of a Sphere Mollweide map with a Graticule component.
|
||||
tags: "graticule, Mollweide, projection, proj4js"
|
||||
resources: http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js
|
||||
---
|
||||
<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">Sphere Mollweide example</h4>
|
||||
<p id="shortdesc">Example of a Sphere Mollweide map with a Graticule component.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="sphere-mollweide.js" target="_blank">sphere-mollweide.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">graticule, Mollweide, projection, proj4js</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="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=sphere-mollweide" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,51 +1,13 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Stamen example</title>
|
||||
</head>
|
||||
<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">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Stamen example"
|
||||
shortdesc: "Example of a Stamen tile source."
|
||||
docs: >
|
||||
Two layers are composed: the watercolor base layer with the terrain labels.
|
||||
tags: "stamen, watercolor, terrain-labels, two-layers"
|
||||
---
|
||||
<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">Stamen example</h4>
|
||||
<p id="shortdesc">Example of a Stamen tile source. Two layers are composed: the watercolor base layer with the terrain labels.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="stamen.js" target="_blank">stamen.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">stamen, watercolor, terrain-labels, two-layers</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=stamen" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,60 +1,18 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Static image example</title>
|
||||
</head>
|
||||
<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">Static image example</h4>
|
||||
<p id="shortdesc">Example of a static image layer.</p>
|
||||
<div id="docs">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Static image example"
|
||||
shortdesc: "Example of a static image layer."
|
||||
docs: >
|
||||
<p>
|
||||
This example uses a <a href="http://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.
|
||||
</p>
|
||||
<p>
|
||||
See the <a href="static-image.js" target="_blank">static-image.js source</a>
|
||||
for details on how this is done.
|
||||
</p>
|
||||
tags: "static image, xkcd"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div id="tags">static image, xkcd</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=static-image" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,58 +1,18 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Symbols with WebGL example</title>
|
||||
</head>
|
||||
<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">Symbols with WebGL example</h4>
|
||||
<p id="shortdesc">Using symbols in an atlas with WebGL.</p>
|
||||
<div id="docs">
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Symbols with WebGL example"
|
||||
shortdesc: "Using symbols in an atlas with WebGL."
|
||||
docs: >
|
||||
<p>When using symbol styles with WebGL, OpenLayers would render the symbol
|
||||
on a temporary image and would create a WebGL texture for each image. For a
|
||||
better performance, it is recommended to use atlas images (similar to
|
||||
image sprites with CSS), so that the number of textures is reduced. OpenLayers
|
||||
provides an <code>AtlasManager</code>, which when passed to the constructor
|
||||
of a symbol style, will create atlases for the symbols.</p>
|
||||
<p>See the <a href="symbol-atlas-webgl.js" target="_blank">symbol-atlas-webgl.js source</a> to see how this is done.</p>
|
||||
tags: "webgl, symbol, atlas, vector, point"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div id="tags">webgl, symbol, atlas, vector, point</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=symbol-atlas-webgl" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,40 +1,8 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Synthetic lines example</title>
|
||||
</head>
|
||||
<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">Synthetic lines example</h4>
|
||||
<p id="shortdesc">Synthetic lines example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="synthetic-lines.js" target="_blank">synthetic-lines.js source</a> to see how this is done.</p>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Synthetic lines example"
|
||||
shortdesc: "Synthetic lines example."
|
||||
docs: >
|
||||
<p>Performance results:</p>
|
||||
<table border="1">
|
||||
<thead>
|
||||
@@ -92,19 +60,10 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
tags: "vector"
|
||||
---
|
||||
<div class="row-fluid">
|
||||
<div class="span12">
|
||||
<div id="map" class="map"></div>
|
||||
</div>
|
||||
<div id="tags">vector</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=synthetic-lines" type="text/javascript"></script>
|
||||
<script src="../resources/display-frame-rate.js" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
@@ -1,52 +1,13 @@
|
||||
<!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="../css/ol.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
||||
<title>Synthetic points example</title>
|
||||
</head>
|
||||
<body>
|
||||
---
|
||||
template: "example.html"
|
||||
title: "Synthetic points example"
|
||||
shortdesc: "Synthetic points example."
|
||||
docs: >
|
||||
|
||||
<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">
|
||||
tags: "vector"
|
||||
---
|
||||
<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">Synthetic points example</h4>
|
||||
<p id="shortdesc">Synthetic points example.</p>
|
||||
<div id="docs">
|
||||
<p>See the <a href="synthetic-points.js" target="_blank">synthetic-points.js source</a> to see how this is done.</p>
|
||||
</div>
|
||||
<div id="tags">vector</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
|
||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
||||
<script src="loader.js?id=synthetic-points" type="text/javascript"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user