PHP 551
Pare! By Guest on 2nd August 2019 06:02:51 AM
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.   <title></title>
  6.   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  7.   <meta name="robots" content="noindex, nofollow">
  8.   <meta name="googlebot" content="noindex, nofollow">
  9.   <meta name="viewport" content="width=device-width, initial-scale=1">
  10.  
  11.     <link rel="stylesheet" type="text/css" href="result-light.css">
  12. <?php /*
  13.       <script type="text/javascript" src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
  14.       <link rel="stylesheet" type="text/css" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
  15.       <script type="text/javascript" src="https://unpkg.com/leaflet-geosearch@2.2.0/dist/bundle.min.js"></script>
  16. */ ?>
  17.  
  18.  
  19.  
  20.       <script type="text/javascript" src="leaflet-src.js"></script>
  21.       <link rel="stylesheet" type="text/css" href="leaflet.css">
  22.       <script type="text/javascript" src="bundle.min.js"></script>
  23.      
  24.  
  25.   <style id="compiled-css" type="text/css">
  26.       #map {
  27.   width: 600px;
  28.   height: 400px;
  29. }
  30.  
  31.   </style>
  32.  
  33.  
  34.   <!-- TODO: Missing CoffeeScript 2 -->
  35.  
  36.   <script type="text/javascript">
  37. //<![CDATA[
  38.  
  39.     window.onload=function(){
  40.      
  41.  
  42.  
  43.     }
  44.  
  45. //]]></script>
  46.  
  47. </head>
  48. <body>
  49.     <title>Geosearch + marker example</title>
  50. <!--  Leaflet CSS  -->
  51. <body>
  52.        
  53.        
  54.        
  55.         <script language="javascript" type="text/javascript">
  56.  
  57. var map;
  58.  
  59. function DelayedSubmission(address) {
  60.         addr = address ;
  61.         console.log("DeSub: "+ addr) ;
  62.     var date = new Date();
  63.     initial_time = date.getTime();
  64.     if (typeof setInverval_Variable == 'undefined') {
  65.             setInverval_Variable = setInterval(DelayedSubmission_Check, 50);
  66.     }
  67. }
  68.  
  69. function DelayedSubmission_Check() {
  70.     var date = new Date();
  71.     check_time = date.getTime();
  72.     var limit_ms=check_time-initial_time;
  73.     if (limit_ms > 800) { //Change value in milliseconds
  74.       //  alert("insert your function ktbr.., "); //Insert your function
  75.       console.log("da alert"+ addr) ;
  76.       genmap(addr) ;
  77.         clearInterval(setInverval_Variable);
  78.         delete setInverval_Variable;
  79.     }
  80. }
  81.  
  82.  
  83. </script>
  84.  
  85. <input type="search" onkeyup="DelayedSubmission(this.value)" id="field_id" style="WIDTH: 100px; HEIGHT: 25px;" />
  86.  
  87.  
  88. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ακαδημίας
  89. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ακαδημίας 100
  90. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ακαδημίας 10
  91.        
  92.        
  93.        
  94.        
  95.        
  96. <hr /> 
  97.        
  98.   <div id="map"></div>
  99.  
  100.  
  101.   <script>
  102.          
  103. function initMap(){
  104.         // Initialize map to specified coordinates
  105.     var map = L.map('map', {
  106.       center: [21.5, -0.1], // CAREFULL!!! The first position corresponds to the lat (y) and the second to the lon (x)
  107.       zoom: 15
  108.     });
  109.  
  110.     // Add tiles (streets, etc)
  111.     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  112.       attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  113.       subdomains: ['a', 'b', 'c']
  114.     }).addTo(map);
  115.     return map;
  116. }
  117.            
  118.                 var mapinit = 0;
  119.                
  120. function genmap(addr) {
  121.        
  122.                 console.log(typeof map) ;
  123.     if( mapinit === 0 ){
  124.                 var map = initMap();
  125.                 mapinit = 1;
  126.        console.log("NEW MAP init") ;
  127.         } else {
  128.                 console.log("NO NEW MAP!" ) ;
  129.           group.clearLayers();
  130.         }
  131.  
  132. //n/    var query_addr = "99 Southwark St, London SE1 0JF, UK";
  133.   //  var query_addr = "Ακαδημίας 100";
  134.     var query_addr = addr;
  135.  
  136.     // 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
  137.     const provider = new window.GeoSearch.OpenStreetMapProvider()
  138.     var query_promise = provider.search({
  139.       query: query_addr
  140.     });
  141.     // It's a promise because we have to wait for the geosearch results. It may be more than one. Be careful.
  142.     // These results have the following properties:
  143.     // const result = {
  144.     //   x: Number,                      // lon,
  145.     //   y: Number,                      // lat,
  146.     //   label: String,                  // formatted address
  147.     //   bounds: [
  148.     //     [Number, Number],             // s, w - lat, lon
  149.     //     [Number, Number],             // n, e - lat, lon
  150.     //   ],
  151.     //   raw: {},                        // raw provider result
  152.     // }
  153.  
  154.  
  155.     query_promise.then(value => {
  156.           var markerArray = [];
  157.       for (i = 0; i < value.length; i++) {
  158.         // Success!
  159.         var x_coor = value[i].x;
  160.         var y_coor = value[i].y;
  161.        
  162.         console.log("CORDS: x: "+ x_coor+"  y: "+y_coor + " i:" + value.length) ;
  163.         var label = value[i].label;
  164.         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)
  165.        
  166.        
  167.         marker.bindPopup("<b>Found location</b><br>" + label).openPopup(); // note the "openPopup()" method. It only works on the marker
  168.        
  169.        markerArray.push(L.marker([y_coor, x_coor]));
  170.        
  171.       };
  172.      
  173.       group = L.featureGroup(markerArray) ;
  174.       map.fitBounds(group.getBounds());
  175.        
  176.      
  177.     }, reason => {
  178.       console.log(reason); // Error!
  179.     });
  180.  
  181.  
  182. }
  183.  
  184.   </script>
  185.  
  186.  
  187.  
  188.  
  189.  
  190.  
  191.  
  192. </body>
  193. </html>

Paste is for source code and general debugging text.

Login or Register to delete or keep track of your pastes.

Recent Pastes

I am looking for a[...]

DebFed

Untitled

Untitled

Pare!

Untitled

Untitled

Untitled

Souvlakia[...]

Untitled

Copyright © 2020 Paste. All rights reserved.
;)