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">
|
template: "example.html"
|
||||||
<head>
|
title: "Navigation controls example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Shows how to add navigation 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">
|
<p>This example shows how to use the beforeRender function on the Map to run one
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
or more animations.</p>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
<p>The following navigation controls are added to the map:</p>
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<ul>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<li><code>ol.control.Zoom</code> (added by default)</li>
|
||||||
<title>Navigation controls example</title>
|
<li><code>ol.control.ZoomToExtent</code></li>
|
||||||
</head>
|
</ul>
|
||||||
<body>
|
tags: "control, navigation, extent"
|
||||||
|
---
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="row-fluid">
|
||||||
<div class="navbar-inner">
|
<div class="span12">
|
||||||
<div class="container">
|
<div id="map" class="map"></div>
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
</div>
|
||||||
</div>
|
</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:
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|||||||
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">
|
template: "example.html"
|
||||||
<head>
|
title: "Overlay example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Demonstrates overlays."
|
||||||
<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 popups are created using <a href="http://twitter.github.com/bootstrap/javascript.html#popovers">Popovers</a> from Bootstrap.</p>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "overlay, popup, bootstrap, popover, mapquest, openaerial"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
resources: overlay.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">
|
<div class="row-fluid">
|
||||||
<style type="text/css">
|
<div class="span12">
|
||||||
#marker {
|
<div id="map" class="map"></div>
|
||||||
width: 20px;
|
</div>
|
||||||
height: 20px;
|
</div>
|
||||||
border: 1px solid #088;
|
<div style="display: none;">
|
||||||
border-radius: 10px;
|
<!-- Clickable label for Vienna -->
|
||||||
background-color: #0FF;
|
<a class="overlay" id="vienna" target="_blank" href="http://en.wikipedia.org/wiki/Vienna">Vienna</a>
|
||||||
opacity: 0.5;
|
<div id="marker" title="Marker"></div>
|
||||||
}
|
<!-- Popup -->
|
||||||
#vienna {
|
<div id="popup" title="Welcome to ol3"></div>
|
||||||
text-decoration: none;
|
</div>
|
||||||
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">
|
|
||||||
<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;">
|
|
||||||
<!-- 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>
|
|
||||||
|
|||||||
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">
|
template: "example.html"
|
||||||
<head>
|
title: "OverviewMap control example advanced"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of OverviewMap control with advanced customization."
|
||||||
<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>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>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "overview, overviewmap"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
resources: overviewmap-custom.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">
|
<div class="row-fluid">
|
||||||
<style type="text/css">
|
<div class="span12">
|
||||||
.ol-custom-overviewmap,
|
<div id="map" class="map"></div>
|
||||||
.ol-custom-overviewmap.ol-uncollapsible {
|
</div>
|
||||||
bottom: auto;
|
</div>
|
||||||
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>
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|||||||
@@ -1,41 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "OverviewMap control example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of OverviewMap control."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
This example demonstrates the use of the OverviewMap control.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "overview, overviewmap"
|
||||||
<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>ol3 OverviewMap control 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">
|
|
||||||
<h4 id="title">OverviewMap control</h4>
|
|
||||||
<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>
|
|
||||||
|
|||||||
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">
|
template: "example.html"
|
||||||
<head>
|
title: "Custom styles for polygons"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Showing the vertices of a polygon with a custom style geometry."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
In this example two different styles are created for the polygons:
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
* The first style is for the polygons themselves.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
* The second style is to draw the vertices of the polygons.
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
tags: "polygon, vector, style, GeometryFunction"
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
resources: polygon-styles.css
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
---
|
||||||
<title>Custom styles for polygons</title>
|
<div class="row-fluid">
|
||||||
<style>
|
<div class="span12">
|
||||||
.map {
|
<div id="map" class="map"></div>
|
||||||
background: grey;
|
</div>
|
||||||
}
|
</div>
|
||||||
</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">
|
|
||||||
<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>
|
|
||||||
|
|||||||
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">
|
template: "example.html"
|
||||||
<head>
|
title: "Popup example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Uses an overlay to create a popup."
|
||||||
<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>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
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.
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
</p>
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
tags: "overlay, popup, mapquest, openaerial"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
resources: popup.css
|
||||||
<style type="text/css">
|
---
|
||||||
.ol-popup {
|
<div class="row-fluid">
|
||||||
position: absolute;
|
<div class="span12">
|
||||||
background-color: white;
|
<div id="map" class="map"></div>
|
||||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
<div id="popup" class="ol-popup">
|
||||||
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
|
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
|
||||||
padding: 15px;
|
<div id="popup-content"></div>
|
||||||
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>
|
||||||
|
</div>
|
||||||
<div class="container-fluid">
|
</div>
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map">
|
|
||||||
<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>
|
|
||||||
|
|||||||
@@ -1,55 +1,17 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Preload example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of tile preloading."
|
||||||
<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 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>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "preload, bing"
|
||||||
<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="span6">
|
||||||
<title>Preload example</title>
|
<div id="map1" class="map"></div>
|
||||||
</head>
|
</div>
|
||||||
<body>
|
<div class="span6">
|
||||||
|
<div id="map2" class="map"></div>
|
||||||
|
</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="span6">
|
|
||||||
<div id="map1" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="span6">
|
|
||||||
<div id="map2" class="map"></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">
|
template: "example.html"
|
||||||
<head>
|
title: "Regular Shape example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of some Regular Shape styles."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "vector, symbol, regularshape, style, square, cross, star, triangle, x"
|
||||||
<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>Regular Shape 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">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>
|
|
||||||
|
|||||||
@@ -1,52 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Rotation example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a rotated 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">
|
<p>Use <code>Alt</code>+<code>Shift</code>+drag to rotate the map.</p>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "rotation, openstreetmap"
|
||||||
<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>Rotation 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">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>
|
|
||||||
|
|||||||
@@ -1,58 +1,20 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Scale line example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a scale line."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "scale-line, openstreetmap"
|
||||||
<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>Scale line example</title>
|
<div id="map" class="map"></div>
|
||||||
</head>
|
<select id="units">
|
||||||
<body>
|
<option value="degrees">degrees</option>
|
||||||
|
<option value="imperial">imperial inch</option>
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<option value="us">us inch</option>
|
||||||
<div class="navbar-inner">
|
<option value="nautical">nautical mile</option>
|
||||||
<div class="container">
|
<option value="metric">metric</option>
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="container-fluid">
|
|
||||||
|
|
||||||
<div class="row-fluid">
|
|
||||||
<div class="span12">
|
|
||||||
<div id="map" class="map"></div>
|
|
||||||
<select id="units">
|
|
||||||
<option value="degrees">degrees</option>
|
|
||||||
<option value="imperial">imperial inch</option>
|
|
||||||
<option value="us">us inch</option>
|
|
||||||
<option value="nautical">nautical mile</option>
|
|
||||||
<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>
|
|
||||||
|
|||||||
@@ -1,64 +1,25 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Select features example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of using the Select interaction."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
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>
|
||||||
<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>
|
|
||||||
<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>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.
|
<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">
|
<form class="form-inline">
|
||||||
<label>Action type </label>
|
<label>Action type </label>
|
||||||
<select id="type">
|
<select id="type" class="form-control">
|
||||||
<option value="none" selected>None</option>
|
<option value="none" selected>None</option>
|
||||||
<option value="singleclick">Single-click</option>
|
<option value="singleclick">Single-click</option>
|
||||||
<option value="click">Click</option>
|
<option value="click">Click</option>
|
||||||
<option value="pointermove">Hover</option>
|
<option value="pointermove">Hover</option>
|
||||||
</select>
|
</select>
|
||||||
<span id="status"> 0 selected features</span>
|
<span id="status"> 0 selected features</span>
|
||||||
</form>
|
</form>
|
||||||
<div id="docs">
|
tags: "select, vector"
|
||||||
<p>See the <a href="select-features.js" target="_blank">select-features.js source</a> to see how this is done.</p>
|
---
|
||||||
</div>
|
<div class="row-fluid">
|
||||||
<div id="tags">select, vector</div>
|
<div class="span12">
|
||||||
</div>
|
<div id="map" class="map"></div>
|
||||||
|
</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>
|
|
||||||
|
|||||||
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Semi-transparent layer example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a map with a semi-transparent layer."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
This example will display a tiled MaxBox layer semi-transparently over a MapQuest background.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "transparent, mapquest, tilejson"
|
||||||
<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>Semi-transparent layer 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">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>
|
|
||||||
|
|||||||
@@ -1,63 +1,25 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Side-by-side example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
The three maps, one WebGL, one Canvas, one DOM, share the same center, resolution, rotation and layers.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "side-by-side, canvas, webgl, dom, canvas, sync, object"
|
||||||
<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="span4">
|
||||||
<title>Side-by-side example</title>
|
<h4>Canvas</h4>
|
||||||
</head>
|
<div id="canvasMap" class="map"></div>
|
||||||
<body>
|
</div>
|
||||||
|
<div class="span4">
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<h4>WebGL</h4>
|
||||||
<div class="navbar-inner">
|
<div id="webglMap" class="map"></div>
|
||||||
<div class="container">
|
<div id="no-webgl" class="alert alert-error" style="display: none">
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div class="container-fluid">
|
<div class="span4">
|
||||||
|
<h4>DOM</h4>
|
||||||
<div class="row-fluid">
|
<div id="domMap" class="map"></div>
|
||||||
<div class="span4">
|
</div>
|
||||||
<h4>Canvas</h4>
|
</div>
|
||||||
<div id="canvasMap" class="map"></div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<h4>WebGL</h4>
|
|
||||||
<div id="webglMap" class="map"></div>
|
|
||||||
<div id="no-webgl" class="alert alert-error" style="display: none">
|
|
||||||
This map requires a browser that supports <a href="http://get.webgl.org/">WebGL</a>.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="span4">
|
|
||||||
<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>
|
|
||||||
|
|||||||
@@ -1,77 +1,38 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Snap interaction example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of using the snap interaction together with draw and modify interactions."
|
||||||
<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 using the snap interaction together with
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
draw and modify interactions. The snap interaction must be added
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
last, as it needs to be the first to handle the
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<code>pointermove</code> event.</p>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<form id="options-form" automplete="off">
|
||||||
<title> Snap example </title>
|
<div class="radio">
|
||||||
</head>
|
<label>
|
||||||
<body>
|
<input type="radio" name="interaction" value="draw" id="draw" checked>
|
||||||
|
Draw
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
</label>
|
||||||
<div class="navbar-inner">
|
|
||||||
<div class="container">
|
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="radio">
|
||||||
<div class="container-fluid">
|
<label>
|
||||||
|
<input type="radio" name="interaction" value="modify">
|
||||||
<div class="row-fluid">
|
Modify
|
||||||
<div class="span12">
|
</label>
|
||||||
<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
|
|
||||||
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>
|
|
||||||
<form id="options-form" automplete="off">
|
|
||||||
<div class="radio">
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="interaction" value="draw" id="draw" checked>
|
|
||||||
Draw
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="radio">
|
|
||||||
<label>
|
|
||||||
<input type="radio" name="interaction" value="modify">
|
|
||||||
Modify
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="form-group">
|
|
||||||
<label>Draw type </label>
|
|
||||||
<select name="draw-type" id="draw-type">
|
|
||||||
<option value="Point">Point</option>
|
|
||||||
<option value="LineString">LineString</option>
|
|
||||||
<option value="Polygon">Polygon</option>
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
<div id="tags">draw, edit, modify, vector, featureoverlay, snap</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
<script src="../resources/jquery.min.js" type="text/javascript"></script>
|
<label>Draw type </label>
|
||||||
<script src="../resources/example-behaviour.js" type="text/javascript"></script>
|
<select name="draw-type" id="draw-type">
|
||||||
<script src="loader.js?id=snap" type="text/javascript"></script>
|
<option value="Point">Point</option>
|
||||||
|
<option value="LineString">LineString</option>
|
||||||
</body>
|
<option value="Polygon">Polygon</option>
|
||||||
</html>
|
</select>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
tags: "draw, edit, modify, vector, featureoverlay, snap"
|
||||||
|
---
|
||||||
|
<div class="row-fluid">
|
||||||
|
<div class="span12">
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
@@ -1,52 +1,14 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Sphere Mollweide example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a Sphere Mollweide map with a Graticule component."
|
||||||
<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 Sphere Mollweide map with a Graticule component.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "graticule, Mollweide, projection, proj4js"
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
resources: http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.1/proj4.js
|
||||||
<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>Sphere Mollweide 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">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>
|
|
||||||
|
|||||||
@@ -1,51 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Stamen example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a Stamen tile source."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
Two layers are composed: the watercolor base layer with the terrain labels.
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "stamen, watercolor, terrain-labels, two-layers"
|
||||||
<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>Stamen 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">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>
|
|
||||||
|
|||||||
@@ -1,60 +1,18 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Static image example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Example of a static image layer."
|
||||||
<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>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
This example uses a <a href="http://xkcd.com/256/">static image</a>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
as a layer source. The map view is configured with a custom
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
projection that translates image coordinates directly into map
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
coordinates.
|
||||||
<title>Static image example</title>
|
</p>
|
||||||
</head>
|
tags: "static image, xkcd"
|
||||||
<body>
|
---
|
||||||
|
<div class="row-fluid">
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="span12">
|
||||||
<div class="navbar-inner">
|
<div id="map" class="map"></div>
|
||||||
<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>
|
|
||||||
</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">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|||||||
@@ -1,58 +1,18 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Symbols with WebGL example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Using symbols in an atlas with WebGL."
|
||||||
<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>When using symbol styles with WebGL, OpenLayers would render the symbol
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
on a temporary image and would create a WebGL texture for each image. For a
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
better performance, it is recommended to use atlas images (similar to
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
image sprites with CSS), so that the number of textures is reduced. OpenLayers
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
provides an <code>AtlasManager</code>, which when passed to the constructor
|
||||||
<title>Symbols with WebGL example</title>
|
of a symbol style, will create atlases for the symbols.</p>
|
||||||
</head>
|
tags: "webgl, symbol, atlas, vector, point"
|
||||||
<body>
|
---
|
||||||
|
<div class="row-fluid">
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<div class="span12">
|
||||||
<div class="navbar-inner">
|
<div id="map" class="map"></div>
|
||||||
<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>
|
|
||||||
</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">
|
|
||||||
<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>
|
|
||||||
</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>
|
|
||||||
|
|||||||
@@ -1,110 +1,69 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Synthetic lines example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Synthetic lines example."
|
||||||
<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>Performance results:</p>
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
<table border="1">
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css" type="text/css">
|
<thead>
|
||||||
<link rel="stylesheet" href="../resources/layout.css" type="text/css">
|
<tr>
|
||||||
<link rel="stylesheet" href="../resources/bootstrap/css/bootstrap-responsive.min.css" type="text/css">
|
<th>Device/Browser</th>
|
||||||
<title>Synthetic lines example</title>
|
<th>200 lines</th>
|
||||||
</head>
|
<th>500 lines</th>
|
||||||
<body>
|
<th>1000 lines</th>
|
||||||
|
<th>2000 lines</th>
|
||||||
<div class="navbar navbar-inverse navbar-fixed-top">
|
<th>5000 lines</th>
|
||||||
<div class="navbar-inner">
|
<th>10000 lines</th>
|
||||||
<div class="container">
|
<th>20000 lines</th>
|
||||||
<a class="brand" href="./"><img src="../resources/logo.png"> OpenLayers 3 Examples</a>
|
</tr>
|
||||||
</div>
|
</thead>
|
||||||
</div>
|
<tbody>
|
||||||
</div>
|
<tr>
|
||||||
|
<td>Mac Book Air / Chrome 33 canary</td>
|
||||||
<div class="container-fluid">
|
<td>60 fps</td>
|
||||||
|
<td>60 fps</td>
|
||||||
<div class="row-fluid">
|
<td>60 fps</td>
|
||||||
<div class="span12">
|
<td>60 fps</td>
|
||||||
<div id="map" class="map"></div>
|
<td>60 fps</td>
|
||||||
</div>
|
<td>60 fps</td>
|
||||||
</div>
|
<td>60 fps</td>
|
||||||
|
</tr>
|
||||||
<div class="row-fluid">
|
<tr>
|
||||||
|
<td>Mac Book Air / FireFox 25</td>
|
||||||
<div class="span12">
|
<td>60 fps</td>
|
||||||
<h4 id="title">Synthetic lines example</h4>
|
<td>60 fps</td>
|
||||||
<p id="shortdesc">Synthetic lines example.</p>
|
<td>60 fps</td>
|
||||||
<div id="docs">
|
<td>60 fps</td>
|
||||||
<p>See the <a href="synthetic-lines.js" target="_blank">synthetic-lines.js source</a> to see how this is done.</p>
|
<td>60 fps</td>
|
||||||
<p>Performance results:</p>
|
<td>22 fps</td>
|
||||||
<table border="1">
|
<td>6 fps</td>
|
||||||
<thead>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Device/Browser</th>
|
<td>Mac Book Air / Safari 7</td>
|
||||||
<th>200 lines</th>
|
<td>60 fps</td>
|
||||||
<th>500 lines</th>
|
<td>60 fps</td>
|
||||||
<th>1000 lines</th>
|
<td>60 fps</td>
|
||||||
<th>2000 lines</th>
|
<td>40 fps</td>
|
||||||
<th>5000 lines</th>
|
<td>10 fps</td>
|
||||||
<th>10000 lines</th>
|
<td>N/A</td>
|
||||||
<th>20000 lines</th>
|
<td>N/A</td>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
<tr>
|
||||||
<tbody>
|
<td>iPhone 4S / iOS 7 / Safari</td>
|
||||||
<tr>
|
<td>60 fps</td>
|
||||||
<td>Mac Book Air / Chrome 33 canary</td>
|
<td>33 fps</td>
|
||||||
<td>60 fps</td>
|
<td>15 fps</td>
|
||||||
<td>60 fps</td>
|
<td>5 fps</td>
|
||||||
<td>60 fps</td>
|
<td>N/A</td>
|
||||||
<td>60 fps</td>
|
<td>N/A</td>
|
||||||
<td>60 fps</td>
|
<td>N/A</td>
|
||||||
<td>60 fps</td>
|
</tr>
|
||||||
<td>60 fps</td>
|
</tbody>
|
||||||
</tr>
|
</table>
|
||||||
<tr>
|
tags: "vector"
|
||||||
<td>Mac Book Air / FireFox 25</td>
|
---
|
||||||
<td>60 fps</td>
|
<div class="row-fluid">
|
||||||
<td>60 fps</td>
|
<div class="span12">
|
||||||
<td>60 fps</td>
|
<div id="map" class="map"></div>
|
||||||
<td>60 fps</td>
|
</div>
|
||||||
<td>60 fps</td>
|
</div>
|
||||||
<td>22 fps</td>
|
|
||||||
<td>6 fps</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Mac Book Air / Safari 7</td>
|
|
||||||
<td>60 fps</td>
|
|
||||||
<td>60 fps</td>
|
|
||||||
<td>60 fps</td>
|
|
||||||
<td>40 fps</td>
|
|
||||||
<td>10 fps</td>
|
|
||||||
<td>N/A</td>
|
|
||||||
<td>N/A</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>iPhone 4S / iOS 7 / Safari</td>
|
|
||||||
<td>60 fps</td>
|
|
||||||
<td>33 fps</td>
|
|
||||||
<td>15 fps</td>
|
|
||||||
<td>5 fps</td>
|
|
||||||
<td>N/A</td>
|
|
||||||
<td>N/A</td>
|
|
||||||
<td>N/A</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
</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>
|
|
||||||
|
|||||||
@@ -1,52 +1,13 @@
|
|||||||
<!doctype html>
|
---
|
||||||
<html lang="en">
|
template: "example.html"
|
||||||
<head>
|
title: "Synthetic points example"
|
||||||
<meta charset="utf-8">
|
shortdesc: "Synthetic points example."
|
||||||
<meta http-equiv="X-UA-Compatible" content="chrome=1">
|
docs: >
|
||||||
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
||||||
<link rel="stylesheet" href="../css/ol.css" type="text/css">
|
tags: "vector"
|
||||||
<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>Synthetic points 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">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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user