feat: leaflet und leaflet-locationpicker hinzufügen
This commit is contained in:
@@ -0,0 +1,148 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="https://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Leaflet Location Picker Demo</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
|
||||
<link rel="stylesheet" href="//unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
|
||||
|
||||
<link rel="stylesheet" href="../dist/leaflet-locationpicker.src.css" />
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h3><a href="../index.html"><big>◄</big> Leaflet Location Picker</a></h3>
|
||||
|
||||
<h4>Simple Example: <em></em></h4>
|
||||
|
||||
<form id="insert">
|
||||
<label>Insert new geographic location:</label><br />
|
||||
<input class="geolocs" type="text" value="" size="20" />
|
||||
<pre>
|
||||
$('.geolocs').leafletLocationPicker();
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<form id="default">
|
||||
Change default geographic location: <br />
|
||||
<input class="geolocs" type="text" value="17.9787,81.0352" size="20" />
|
||||
</form>
|
||||
|
||||
<form id="format">
|
||||
Custom location format: <br />
|
||||
<input id="geoloc2" type="text" value="" size="20" /> <br />
|
||||
<pre>
|
||||
$('#geoloc2').leafletLocationPicker({
|
||||
locationFormat: '{lat}@{lng}#WGS84',
|
||||
position: 'bottomleft'
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<form id="callback">
|
||||
Custom callback: <br />
|
||||
<input id="geoloc4" type="text" value="" size="20" />
|
||||
<br /><br />
|
||||
<i>Value from callback:</i><br />
|
||||
<em style="color:blue"></em><br />
|
||||
<pre>
|
||||
$('#geoloc4').leafletLocationPicker(function(e) {
|
||||
$(this).siblings('em').text(e.location);
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<form id="events">
|
||||
Events: <em style="color:red"></em><br />
|
||||
<input id="geoloc3" type="text" value="" size="20" />
|
||||
<br />
|
||||
<br /><input id="geolat" type="text" value="" size="20" />
|
||||
<br /><input id="geolng" type="text" value="" size="20" />
|
||||
<br /><i>string location</i><br />
|
||||
<pre>
|
||||
$('#geoloc3').leafletLocationPicker({
|
||||
locationSep: ' - '
|
||||
})
|
||||
.on('show', function(e) {
|
||||
$(this).siblings('em').text('click on map for insert the location');
|
||||
})
|
||||
.on('hide', function(e) {
|
||||
$(this).siblings('em').text('');
|
||||
})
|
||||
.on('changeLocation', function(e) {
|
||||
$(this)
|
||||
.siblings('#geolat').val( e.latlng.lat )
|
||||
.siblings('#geolng').val( e.latlng.lng )
|
||||
.siblings('i').text('"'+e.location+'"');
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
<script src="//unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
|
||||
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
|
||||
|
||||
<form id="fixedContAlwaysOpen">
|
||||
Fixed container and always open map: <br />
|
||||
<div style="min-height: 140;min-width: 200;">
|
||||
<input id="geoloc5" type="text" value="" size="20" />
|
||||
<div id="fixedMapCont" style="border: 1px solid black; min-height: 140;min-width: 200;"></div>
|
||||
</div>
|
||||
<pre>
|
||||
$('#geoloc5').leafletLocationPicker({
|
||||
alwaysOpen: true,
|
||||
mapContainer: "#fixedMapCont"
|
||||
});
|
||||
</pre>
|
||||
</form>
|
||||
|
||||
|
||||
<script src="../../leaflet/dist/leaflet.js"></script>
|
||||
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
||||
<script src="../dist/leaflet-locationpicker.min.js"></script>
|
||||
<script>
|
||||
|
||||
//multiple istances
|
||||
$('.geolocs').leafletLocationPicker();
|
||||
|
||||
//custom location format
|
||||
$('#geoloc2').leafletLocationPicker({
|
||||
locationFormat: '{lat}@{lng}#WGS84',
|
||||
position: 'bottomleft'
|
||||
});
|
||||
|
||||
//events
|
||||
$('#geoloc3').leafletLocationPicker({
|
||||
locationSep: ' - '
|
||||
})
|
||||
.on('show', function(e) {
|
||||
$(this).siblings('em').text('click on map for insert the location');
|
||||
})
|
||||
.on('hide', function(e) {
|
||||
$(this).siblings('em').text('');
|
||||
})
|
||||
.on('changeLocation', function(e) {
|
||||
$(this)
|
||||
.siblings('#geolat').val( e.latlng.lat )
|
||||
.siblings('#geolng').val( e.latlng.lng )
|
||||
.siblings('i').text('"'+e.location+'"');
|
||||
});
|
||||
|
||||
//callback
|
||||
$('#geoloc4').leafletLocationPicker(function(e) {
|
||||
$(this).siblings('em').text(e.location);
|
||||
});
|
||||
|
||||
//fix n alwaysOpen
|
||||
$('#geoloc5').leafletLocationPicker({
|
||||
alwaysOpen: true,
|
||||
mapContainer: "#fixedMapCont"
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<div id="copy"><a href="https://opengeo.tech/">Opengeo.tech</a> • <a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
|
||||
|
||||
<script src="/labs-common.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
body {
|
||||
background:#b5d0d0;
|
||||
color:#285585;
|
||||
font-family:Arial;
|
||||
}
|
||||
body#home {
|
||||
background:url('images/leaflet-panel.png') no-repeat top left #b5d0d0;
|
||||
margin-left:200px;
|
||||
}
|
||||
|
||||
a {
|
||||
color:#1978cf;
|
||||
}
|
||||
a:hover {
|
||||
color:#fff;
|
||||
}
|
||||
h2, h3, h4 {
|
||||
white-space:nowrap;
|
||||
margin:1em 0 0 0;
|
||||
}
|
||||
h3 a,
|
||||
h3 a:hover {
|
||||
text-decoration:none;
|
||||
}
|
||||
#desc {
|
||||
float: left;
|
||||
margin-bottom: 1em;
|
||||
position: relative;
|
||||
white-space:nowrap;
|
||||
font-size:1em;
|
||||
}
|
||||
#map {
|
||||
border:2px solid #1978cf;
|
||||
box-shadow: 0 0 8px #999;
|
||||
float:left;
|
||||
width:800px;
|
||||
height:400px;
|
||||
}
|
||||
label {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
pre {
|
||||
font-family: "Courier New";
|
||||
font-size: .85em;
|
||||
color: #333;
|
||||
float: left;
|
||||
clear: both;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
background-color: #fff;
|
||||
box-shadow: inset 2px 2px 3px rgba(100,100,100,0.2);
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
#copy {
|
||||
position:fixed;
|
||||
z-index:1000;
|
||||
right:150px;
|
||||
top:-8px;
|
||||
font-size:.85em;
|
||||
padding:8px 8px 2px 8px;
|
||||
background: #323b44;
|
||||
border: 2px solid #737c85;
|
||||
border-radius:.7em;
|
||||
opacity: 0.9;
|
||||
box-shadow:0 0 8px #5f7182;
|
||||
color:#eee
|
||||
}
|
||||
#copy a {
|
||||
color:#ccc;
|
||||
text-decoration:none
|
||||
}
|
||||
#copy a:hover {
|
||||
color:#fff
|
||||
}
|
||||
#ribbon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: 0;
|
||||
filter: alpha(opacity=80);
|
||||
-khtml-opacity: .8;
|
||||
-moz-opacity: .8;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
#comments {
|
||||
margin-top:50px;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
form {
|
||||
margin: 20px;
|
||||
padding: 20px;
|
||||
background: #eee;
|
||||
float: left;
|
||||
min-height: 160px;
|
||||
min-width: 400px
|
||||
}
|
||||
input {
|
||||
margin: 5px 0;
|
||||
}
|
||||
Reference in New Issue
Block a user