mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
229 lines
7.6 KiB
HTML
229 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2016 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>ol-ext: dialog</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="Display dialogs on a map." />
|
|
<meta name="keywords" content="openlayers,control, dialog, overlay, form" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
|
<!-- FontAwesome -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
|
|
<!-- Openlayers -->
|
|
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
|
|
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
|
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
|
|
|
|
<!-- ol-ext -->
|
|
<link rel="stylesheet" href="../../dist/ol-ext.css" />
|
|
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
|
|
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
|
|
<script src="https://unpkg.com/elm-pep"></script>
|
|
|
|
<link rel="stylesheet" href="../style.css" />
|
|
<style>
|
|
.center {
|
|
text-align: center;
|
|
}
|
|
.alert > form {
|
|
border: 5px dashed #f80;
|
|
background-color: #ff6;
|
|
color: #800;
|
|
}
|
|
.alert > form:before {
|
|
content: '\f071';
|
|
font-family: fontawesome;
|
|
float: left;
|
|
margin: 0 .2em 0 0;
|
|
font-size: 3em;
|
|
margin-top: -.1em;
|
|
}
|
|
.autoclose {
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
}
|
|
.autoclose span {
|
|
font-size: 2em;
|
|
color: #369;
|
|
vertical-align: sub;
|
|
font-family: sans-serif;
|
|
font-weight: bold;
|
|
padding: 0 .1em;
|
|
}
|
|
.ol-ext-dialog.ol-visible > form {
|
|
overflow: visible;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
|
|
|
|
<a href="../../index.html">
|
|
<h1>ol-ext: Dialog</h1>
|
|
</a>
|
|
<div class="info">
|
|
<i>ol/control/Dialog</i> is a convenient vay to display dialog on a map.
|
|
<ul>
|
|
<li>
|
|
Dialog has a dropdown or zoom effect
|
|
</li>
|
|
<li>
|
|
You can add your own buttons, listen to the <i>button</i> event to get the one is clicked.
|
|
</li>
|
|
<li>
|
|
A <i>button</i> event with a <i>sumbit</i> button is fired on submit.
|
|
</li>
|
|
<li>
|
|
A <i>button</i> event with a <i>cancel</i> button is fired on closebox hit.
|
|
</li>
|
|
<li>
|
|
The <i>button</i> event returns a list of inputs based on there classes.
|
|
</li>
|
|
<li>
|
|
Use <i>hideOnClick</i> option to close the dialog when clicking the background.
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- DIV pour la carte -->
|
|
<div id="map" style="width:600px; height:400px;"></div>
|
|
|
|
<div class="options">
|
|
<h2>Options:</h2>
|
|
<ul><li>
|
|
<button onclick="dialog.show({ content: 'Hello World!', title: 'Hello'})">Show dialog Hello World!</button>
|
|
</li><li>
|
|
<button onclick="dialogZoom.show({ content: 'Hello World!', title: 'Hello', buttons:{ ok:'hello', cancel:'nope' }})">Show dialog + zoom effect</button>
|
|
</li><li>
|
|
<button onclick="dialogMap.show('I\'m insde the map!<br/><i>click outside to close</i>')">Show dialog inside map</button>
|
|
</li><li>
|
|
<button onclick="dialogPrompt.show()">Show a prompt dialog...</button>
|
|
</li><li>
|
|
<button onclick="if (!dialogProgress.isOpen()) dialogProgress.show({ progress : 0 })">Show a progress dialog...</button>
|
|
</li><li>
|
|
<button onclick="alert.show('This is an alert!<br/>Nothing goes wrong...')">Show an alert!</button>
|
|
</li><li>
|
|
<button onclick="showAutoClose()">Autoclose dialog</button>
|
|
</li><li>
|
|
<button onclick="dlarg.show({ content: lorem, title: 'Large dialog', closeBox: true, buttons:['ok','cancel'] })">Large dialog</button>
|
|
</li></ul>
|
|
<p>
|
|
</p>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// Layers
|
|
var layer = new ol.layer.Tile({
|
|
title:'terrain-background',
|
|
source: new ol.source.Stamen({ layer: 'terrain' })
|
|
});
|
|
|
|
// The map
|
|
var map = new ol.Map ({
|
|
target: 'map',
|
|
view: new ol.View ({
|
|
zoom: 5,
|
|
center: [166326, 5992663]
|
|
}),
|
|
layers: [layer]
|
|
});
|
|
|
|
// Notification
|
|
var notification = new ol.control.Notification({});
|
|
map.addControl(notification);
|
|
|
|
// Dialog outside the map
|
|
var dialog = new ol.control.Dialog({ fullscreen: true, closeBox: true });
|
|
map.addControl(dialog);
|
|
|
|
// Dialog with zoom option
|
|
var dialogZoom = new ol.control.Dialog({ fullscreen: true, zoom: true, closeBox: true });
|
|
dialogZoom.on('button', function(e) {
|
|
notification.show(e.button)
|
|
});
|
|
map.addControl(dialogZoom);
|
|
|
|
// A dialog inside a map
|
|
var dialogMap = new ol.control.Dialog({ hideOnClick: true, className: 'center' });
|
|
map.addControl(dialogMap);
|
|
|
|
// Prompt dialog
|
|
var dialogPrompt = new ol.control.Dialog({
|
|
content: 'Enter a value:<br/><input class="value" type="text" placeholder="Enter a value" />',
|
|
title: 'Prompt',
|
|
buttons:{ submit:'ok', cancel:'cancel' }
|
|
});
|
|
dialogPrompt.on('button', function(e) {
|
|
if (e.button === 'submit') {
|
|
dialogMap.show ('Your enter: "'+e.inputs['value'].value+'"');
|
|
}
|
|
});
|
|
dialogPrompt.on('show', function() {
|
|
dialogMap.close();
|
|
});
|
|
map.addControl(dialogPrompt);
|
|
|
|
// Progress dialog
|
|
var dialogProgress = new ol.control.Dialog();
|
|
dialogProgress.setContent({
|
|
content: 'Processing...',
|
|
title: 'Progress',
|
|
max: 10
|
|
});
|
|
dialogProgress.on('show', function() {
|
|
dialogMap.close();
|
|
function step(i) {
|
|
dialogProgress.setProgress(i);
|
|
if (i<10) {
|
|
setTimeout(function() {
|
|
step(i+1);
|
|
}, 500);
|
|
} else {
|
|
dialogMap.show('End of progress...');
|
|
dialogProgress.hide();
|
|
}
|
|
}
|
|
step(0);
|
|
});
|
|
map.addControl(dialogProgress);
|
|
|
|
|
|
// Alert
|
|
var alert = new ol.control.Dialog({ className: 'alert', hideOnClick: true, closeBox: true });
|
|
map.addControl(alert);
|
|
|
|
// Large dialog
|
|
var aclose = new ol.control.Dialog({ className: "autoclose", fullscreen: true, zoom: true, closeBox: true });
|
|
map.addControl(aclose);
|
|
function showAutoClose() {
|
|
var delay = 5;
|
|
var content = document.createElement('DIV');
|
|
content.innerHTML = 'The dialog will close <br/> in <span></span> s.';
|
|
var dspan = content.querySelector('SPAN');
|
|
aclose.show({ content: content, autoclose: delay * 1000 });
|
|
function setTime(d) {
|
|
dspan.innerText = d--;
|
|
if (d>0) setTimeout(function() { setTime(d); }, 1000);
|
|
}
|
|
setTime(delay);
|
|
}
|
|
|
|
// Large dialog
|
|
var dlarg = new ol.control.Dialog({ fullscreen: true, zoom: true, closeBox: true });
|
|
map.addControl(dlarg);
|
|
var lorem = "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis massa leo. Sed tempor tristique ligula non tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In eget varius urna. Maecenas dapibus, metus vitae pellentesque gravida, dolor nisi vehicula arcu, vel tincidunt metus arcu tincidunt lectus. Praesent id auctor risus. Nam id molestie tellus, id aliquam ante. Proin imperdiet, velit sed aliquet tempor, libero felis lobortis nisl, vel pretium purus lectus ut velit. Pellentesque vitae luctus mauris. Suspendisse eros magna, vulputate eu ornare id, dictum at mi. Etiam et viverra erat. Maecenas sed elementum lorem, eget posuere quam.</p>";
|
|
lorem = lorem+lorem+lorem+lorem+lorem+lorem+lorem+lorem+lorem+lorem;
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |