Pare! - Paste

PHP 1474

Pare! By Guest on 2nd August 2019 06:02:51 AM

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="result-light.css">
<?php /*
<script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script type="text/javascript" src="https://unpkg.com/leaflet-geosearch@2.2.0/dist/bundle.min.js"></script>
*/ ?>
<script type="text/javascript" src="leaflet-src.js"></script>
<link rel="stylesheet" type="text/css" href="leaflet.css">
<script type="text/javascript" src="bundle.min.js"></script>
<style id="compiled-css" type="text/css">
#map {
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript">
//<![CDATA[
window.onload=function(){
}
//]]></script>
</head>
<body>
<title>Geosearch + marker example</title>
<body>
<script language="javascript" type="text/javascript">
var map;
function DelayedSubmission(address) {
addr = address ;
console.log("DeSub: "+ addr) ;
var date = new Date();
initial_time = date.getTime();
if (typeof setInverval_Variable == 'undefined') {
setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
}
}
function DelayedSubmission_Check() {
var date = new Date();
check_time = date.getTime();
var limit_ms=check_time-initial_time;
if (limit_ms > 800) { //Change value in milliseconds
// alert("insert your function ktbr.., "); //Insert your function
console.log("da alert"+ addr) ;
genmap(addr) ;
clearInterval(setInverval_Variable);
delete setInverval_Variable;
}
}
</script>
<input type="search" onkeyup="DelayedSubmission(this.value)" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />
       Ακαδημίας
       Ακαδημίας 100
       Ακαδημίας 10
<hr />
<div id="map"></div>
<script>
function initMap(){
// Initialize map to specified coordinates
var map = L.map('map', {
center: [21.5, -0.1], // CAREFULL!!! The first position corresponds to the lat (y) and the second to the lon (x)
zoom: 15
});
// Add tiles (streets, etc)
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
subdomains: ['a', 'b', 'c']
}).addTo(map);
return map;
}
var mapinit = 0;
function genmap(addr) {
console.log(typeof map) ;
if( mapinit === 0 ){
var map = initMap();
mapinit = 1;
console.log("NEW MAP init") ;
} else {
console.log("NO NEW MAP!" ) ;
group.clearLayers();
}
//n/ var query_addr = "99 Southwark St, London SE1 0JF, UK";
// var query_addr = "Ακαδημίας 100";
var query_addr = addr;
// Get the provider, in this case the OpenStreetMap (OSM) provider. For some reason, this is the "wrong" way to instanciate it. Instead, we should be using an import "leaflet-geosearch" but I coulnd't make that work
const provider = new window.GeoSearch.OpenStreetMapProvider()
var query_promise = provider.search({
query: query_addr
});
// It's a promise because we have to wait for the geosearch results. It may be more than one. Be careful.
// These results have the following properties:
// const result = {
// x: Number, // lon,
// y: Number, // lat,
// label: String, // formatted address
// bounds: [
// [Number, Number], // s, w - lat, lon
// [Number, Number], // n, e - lat, lon
// ],
// raw: {}, // raw provider result
// }
query_promise.then(value => {
var markerArray = [];
for (i = 0; i < value.length; i++) {
// Success!
var x_coor = value[i].x;
var y_coor = value[i].y;
console.log("CORDS: x: "+ x_coor+" y: "+y_coor + " i:" + value.length) ;
var label = value[i].label;
var marker = L.marker([y_coor, x_coor]).addTo(map) // CAREFULL!!! The first position corresponds to the lat (y) and the second to the lon (x)
marker.bindPopup("<b>Found location</b><br>" + label).openPopup(); // note the "openPopup()" method. It only works on the marker
markerArray.push(L.marker([y_coor, x_coor]));
};
group = L.featureGroup(markerArray) ;
map.fitBounds(group.getBounds());
}, reason => {
console.log(reason); // Error!
});
}
</script>
</body>
</html>

Recent Pastes