- <!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>
- <!-- TODO: Missing CoffeeScript 2 -->
- <script type="text/javascript">
- //<![CDATA[
- window.onload=function(){
- }
- //]]></script>
- </head>
- <body>
- <title>Geosearch + marker example</title>
- <!-- Leaflet CSS -->
- <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