mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
140 lines
5.1 KiB
HTML
140 lines
5.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;
|
|
}
|
|
.ol-input-popup.marker li > * {
|
|
background-color: transparent;
|
|
width: .6em;
|
|
}
|
|
.marker li > *:before {
|
|
content: "\f041";
|
|
font-family: FontAwesome;
|
|
color: #369;
|
|
}
|
|
</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>
|
|
Switch: <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='slide2' type='number' style="width: 3em" value=50 min=20 max=80 />
|
|
</p><p>
|
|
Size:
|
|
<i class="fa fa-map-pin" style="line-height: 60px; width: 60px; text-align: center; vertical-align: middle;"></i>
|
|
<input class='size' type='number' style="width: 3em" />
|
|
</p><p>
|
|
Size (styled):
|
|
<input class='size2' type='number' style="width: 3em" />
|
|
</p><p>
|
|
Width:
|
|
<span class="line" style="display: inline-block; background-color: red; width: 2.5em; vertical-align: middle;"></span>
|
|
<input class='width' type='number' style="width: 3em" />
|
|
</p>
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
var switcher = new ol.ext.input.Switch({ input: $('.switch').get(0), html: 'off', after: 'on' });
|
|
|
|
new ol.ext.input.Checkbox({ input: $('.check').get(0), html: 'Checkbox:', after: 'on' });
|
|
$('.radio').each(function(i) {
|
|
new ol.ext.input.Radio({ input: this, html: i? '' : 'Radio:', after: 'radio '+(i+1), checked: !i });
|
|
});
|
|
|
|
var slider = new ol.ext.input.Slider({ input: $('.slider').get(0) });
|
|
slider.on('change:value', function(e) {
|
|
$('.opacity').css('opacity', e.value/100);
|
|
});
|
|
slider.setValue(25);
|
|
|
|
var slide2 = new ol.ext.input.Slider({ input: $('.slide2').get(0), type: 'size' });
|
|
slide2.on('change:value', function(e) {
|
|
$('.fa-map-marker').css('font-size', e.value+'px');
|
|
});
|
|
slide2.setValue(50);
|
|
|
|
var cpicker = new ol.ext.input.Color({ input: $('.color1').get(0), color: 'red', fixed: false });
|
|
cpicker.on('color', function(e) { console.log('Color:', e.color) })
|
|
|
|
var cpicker2 = new ol.ext.input.Color({ input: $('.color2').get(0), fixed: true });
|
|
cpicker2.on('color', function(e) {
|
|
$('.color').css('background-color', ol.color.asString(e.color));
|
|
});
|
|
cpicker2.setColor('#f90');
|
|
|
|
var size = new ol.ext.input.Size({ input: $('.size').get(0) });
|
|
size.on('change:value', function(e) {
|
|
$('.fa-map-pin').css('font-size', e.value+'px');
|
|
});
|
|
size.setValue(8);
|
|
|
|
var size2 = new ol.ext.input.Size({ input: $('.size2').get(0), className: 'marker' });
|
|
size2.setValue(8);
|
|
|
|
var width = new ol.ext.input.Width({ input: $('.width').get(0) });
|
|
width.on('change:value', function(e) {
|
|
$('.line').height(e.value)
|
|
})
|
|
width.setValue(8);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |