mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
112 lines
4.1 KiB
HTML
112 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!--
|
|
Copyright (c) 2015-2021 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
-->
|
|
<title>ol-ext: inputs!</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<meta name="description" content="Animated canvas Overlay for Openlayers" />
|
|
<meta name="keywords" content="openlayers, ol, input, color, checkbox, width, pattern" />
|
|
|
|
<meta name="msapplication-tap-highlight" content="no" />
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
|
|
|
|
<!-- 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>
|
|
body {
|
|
user-select: none;
|
|
}
|
|
</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: input!</h1>
|
|
</a>
|
|
|
|
<p>
|
|
<input class='switch' type="checkbox" />
|
|
</p><p>
|
|
<input class='check' type="checkbox" />
|
|
</p>
|
|
<input class='radio' type="radio" name="radio" />
|
|
<input class='radio' type="radio" name="radio" />
|
|
</p><p>
|
|
Color: <input class='color1' />
|
|
</p><p style="border: 1px solid #999; border-width: 1px 0; padding: .5em 0;">
|
|
Color (fixed):
|
|
<span class="color" style="display: inline-block; background-color: red; width: 2.5em; height: 1.5em; vertical-align: middle;"></span>
|
|
<input class='color2' />
|
|
</p><p>
|
|
Slider:
|
|
<span class="opacity" style="display: inline-block; background-color: red; width: 2.5em; height: 1.5em; vertical-align: middle;"></span>
|
|
<input class='slider' type='number' style="width: 3em" value=25 min=0 max=100 />
|
|
</p><p>
|
|
Size:
|
|
<i class="fa fa-map-marker" style="line-height: 60px; width: 60px; text-align: center; vertical-align: middle;"></i>
|
|
<input class='size' type='number' style="width: 3em" value=50 min=20 max=80 />
|
|
</p><p>
|
|
Width: <input class='width' type='number' style="width: 3em" value=25 min=0 max=100 />
|
|
</p>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var switcher = new ol.ext.input.Switch($('.switch').get(0), { html: 'Switch: off', after: 'on' });
|
|
new ol.ext.input.Checkbox($('.check').get(0), { html: 'Checkbox:', after: 'on' });
|
|
$('.radio').each(function(i) {
|
|
new ol.ext.input.Radio(this, { html: i? '' : 'Radio:', after: 'radio '+(i+1), checked: !i });
|
|
});
|
|
|
|
var slider = new ol.ext.input.Slider($('.slider').get(0));
|
|
slider.on('change:value', function(e) {
|
|
$('.opacity').css('opacity', e.value/100);
|
|
});
|
|
slider.setValue(25);
|
|
|
|
var size = new ol.ext.input.Slider($('.size').get(0), { type: 'size' });
|
|
size.on('change:value', function(e) {
|
|
$('.fa-map-marker').css('font-size', e.value+'px');
|
|
});
|
|
size.setValue(50);
|
|
|
|
var cpicker = new ol.ext.input.Color($('.color1').get(0), { color: 'red', fixed: false });
|
|
cpicker.on('color', function(e) { console.log('Color:', e.color) })
|
|
|
|
var cpicker2 = new ol.ext.input.Color($('.color2').get(0), { fixed: true });
|
|
cpicker2.on('color', function(e) {
|
|
$('.color').css('background-color', ol.color.asString(e.color));
|
|
});
|
|
cpicker2.setColor('#f90');
|
|
|
|
var width = new ol.ext.input.Size($('.width').get(0));
|
|
size.on('change:value', function(e) {
|
|
$('.fa-map-marker').css('font-size', e.value+'px');
|
|
});
|
|
width.setValue(8);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |