mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
188 lines
5.6 KiB
HTML
188 lines
5.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/latest/css/ol.css" />
|
|
<script type="text/javascript" src="https://openlayers.org/en/latest/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;
|
|
}
|
|
</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">
|
|
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></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({ target: document.body, closeBox: true });
|
|
map.addControl(dialog);
|
|
|
|
// Dialog with zoom option
|
|
var dialogZoom = new ol.control.Dialog({ target: document.body, 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();
|
|
dialogPrompt.setContent({
|
|
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);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |