feat: leaflet und leaflet-locationpicker hinzufügen

This commit is contained in:
Developer 02
2024-10-21 18:10:45 +02:00
parent 8a0fe70a88
commit 173b691e56
23 changed files with 11178 additions and 0 deletions

View File

@@ -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> &bull; <a rel="author" href="https://opengeo.tech/stefano-cudini/">Stefano Cudini</a></div>
<script src="/labs-common.js"></script>
</body>
</html>

View File

@@ -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;
}