Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][MySQL][PHP] Markery z bazy danych na mapie OpenStreetMaps Leaflet
brzanek
post 14.06.2019, 14:48:36
Post #1





Grupa: Zarejestrowani
Postów: 363
Pomógł: 0
Dołączył: 8.11.2012

Ostrzeżenie: (0%)
-----


Witam mam problem z zaimportowaniem danych o markerach z bazy danych mysql na mapie OpenStreetMaps Leaflet
Do tej pory zrobiłem tak, że z bazy danych pobieram współrzędne markerów i wstawiam je do tablicy.
Potem mam mapę ale jak dodać te markery?
Tak wygląda kod.
  1. <?
  2. ?>
  3. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  4. integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9
    wQ=="
  5. crossorigin=""/>
  6. <!-- Make sure you put this AFTER Leaflet's CSS -->
  7. <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  8. integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  9. crossorigin=""></script>
  10. <?
  11. require('db.php');
  12.  
  13. $data=date("Y-m-d H:i");
  14. $dwadziecia = date('Y-m-d H:i', strtotime("-20 minutes"));
  15. $czterdziesci = date('Y-m-d H:i', strtotime("-40 minutes"));
  16. $szecdziesiac = date('Y-m-d H:i', strtotime("-60 minutes"));
  17. $osiemdziesiat = date('Y-m-d H:i', strtotime("-80 minutes"));
  18. $sto = date('Y-m-d H:i', strtotime("-100 minutes"));
  19. $stodwadziescia = date('Y-m-d H:i', strtotime("-120 minutes"));
  20.  
  21. echo "Teraz: $data";
  22. echo '<br>';
  23. echo "teraz / -20 minut: $dwadziecia";
  24. echo '<br>';
  25. echo '<br>';
  26. echo "-20 / -40 minut: $czterdziesci";
  27. echo '<br>';
  28.  
  29.  
  30. //tablica
  31. $result = $mysqli->query("SELECT time, lat, lon FROM mybo_strikes WHERE `time` BETWEEN '".$dwadziecia."' AND '".$data."' AND `lat` BETWEEN 48.571000 AND 55.622000 AND `lon` BETWEEN 10.121000 AND 27.983000 ORDER BY `time` DESC");
  32. $data = array();
  33. echo "var planes = [";
  34.  
  35. for ($x = 0; $x < mysqli_num_rows($result); $x++) {
  36. $data[] = mysqli_fetch_assoc($result);
  37. echo "[",$data[$x]['lat'],",",$data[$x]['lon'],"]";
  38. if ($x <= (mysqli_num_rows($result)-2) ) {
  39. echo ",";
  40. }
  41. }
  42. echo "];";
  43. // mapa
  44. echo '<div id="mapid" style="width: 1000px; height: 500px;"></div>';
  45. ?>
  46. <script>
  47.  
  48. var mymap = L.map('mapid').setView([53.48, 15.46], 5);
  49.  
  50. L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.r
    JcFIG214AriISLbB6B5aw', {
  51. maxZoom: 18,
  52. attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  53. '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  54. 'Imagery Š <a href="https://www.mapbox.com/">Mapbox</a>',
  55. id: 'mapbox.dark'
  56. }).addTo(mymap);
  57.  
  58. //L.marker([53.5, 15.09]).addTo(mymap);
  59.  
  60. //ikony
  61. var bialy = L.icon({
  62. iconUrl: 'http://brzanek.webd.pl/2019/czas/images/00.png',
  63. iconSize: [7, 7], // size of the icon
  64. });
  65. var zulty = L.icon({
  66. iconUrl: 'http://brzanek.webd.pl/2019/czas/images/20.png',
  67. iconSize: [7, 7], // size of the icon
  68. });
  69. var pomaranczowy = L.icon({
  70. iconUrl: 'http://brzanek.webd.pl/2019/czas/images/40.png',
  71. iconSize: [7, 7], // size of the icon
  72. });
  73. //var twojazmienna = $("").val();
  74.  
  75. L.marker([49.053873, 17.030497], {icon: bialy}).addTo(mymap);
  76. //L.marker([53.5, 13.09], {icon: bialy}).addTo(mymap).bindPopup("I am a green leaf.");
  77. //L.marker([53.5, 14.09], {icon: zulty}).addTo(mymap).bindPopup("I am a green leaf.");
  78. //L.marker([54.5, 14.09], {icon: pomaranczowy}).addTo(mymap).bindPopup("I am a green leaf.");
  79. </script>
Go to the top of the page
+Quote Post
tjakob
post 14.06.2019, 18:03:37
Post #2





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 8.06.2015

Ostrzeżenie: (0%)
-----


spróbuj po wywołaniu mapy dodać
  1. for (var i = 0; i < planes.length; i++) {
  2. marker = new L.marker([planes[i][0],planes[i][1]])
  3. .addTo(map);
  4. }

Go to the top of the page
+Quote Post
brzanek
post 14.06.2019, 20:04:14
Post #3





Grupa: Zarejestrowani
Postów: 363
Pomógł: 0
Dołączył: 8.11.2012

Ostrzeżenie: (0%)
-----


Niestety nie działa.
Go to the top of the page
+Quote Post
tjakob
post 14.06.2019, 22:16:12
Post #4





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 8.06.2015

Ostrzeżenie: (0%)
-----


sorki
  1. for (var i = 0; i < planes.length; i++) {
  2. marker = new L.marker([planes[i][0],planes[i][1]])
  3. .addTo(mymap);
  4. }


wczytanie z bazy wrzuć do skryptu mapy

  1. <div id="mapid" style="width: 1000px; height: 500px;"></div>
  2.  
  3. <script>
  4.  
  5. <?php
  6.  
  7. $myquery = "SELECT ......";
  8. $query = mysql_query($myquery);
  9.  
  10. if ( ! $query ) {
  11. die;
  12. }
  13.  
  14. $data = array();
  15.  
  16. echo "var planes = [";
  17.  
  18. for ($x = 0; $x < mysql_num_rows($query); $x++) {
  19. $data[] = mysql_fetch_assoc($query);
  20. echo "[",$data[$x]['lat'],",",$data[$x]['lng'],"]";
  21. if ($x <= (mysql_num_rows($query)-2) ) {
  22. echo ",";
  23. }
  24. }
  25.  
  26. echo "];";
  27.  
  28. mysql_close($server);
  29.  
  30. ?>
  31.  
  32.  
  33. var mymap = L.map('mapid').setView([53.48, 15.46], 5);
  34.  
  35. L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.r
    JcFIG214AriISLbB6B5aw', {
  36. maxZoom: 18,
  37. attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  38. '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  39. 'Imagery Š <a href="https://www.mapbox.com/">Mapbox</a>',
  40. id: 'mapbox.dark'
  41. }).addTo(mymap);
  42.  
  43.  
  44. for (var i = 0; i < planes.length; i++) {
  45. marker = new L.marker([planes[i][0],planes[i][1]])
  46. // .bindPopup(planes[i][0])
  47. .addTo(mymap);
  48. }
  49.  
  50. </script>
  51. sprawdź tylko na razie tą część pozostałe rzeczy pomiń, zobacz czy markery zostaną wczytane na mapę
Go to the top of the page
+Quote Post
brzanek
post 18.06.2019, 05:27:57
Post #5





Grupa: Zarejestrowani
Postów: 363
Pomógł: 0
Dołączył: 8.11.2012

Ostrzeżenie: (0%)
-----


Teraz zadziałało takim kodem
  1. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  2. integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9
    wQ=="
  3. crossorigin=""/>
  4. <!-- Make sure you put this AFTER Leaflet's CSS -->
  5. <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  6. integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  7. crossorigin=""></script>
  8. <div id="mapid" style="width: 1000px; height: 500px;"></div>
  9.  
  10. <script>
  11.  
  12. <?php
  13. require('db.php');
  14.  
  15. $data=date("Y-m-d H:i");
  16. $dwadziecia = date('Y-m-d H:i', strtotime("-20 minutes"));
  17. $czterdziesci = date('Y-m-d H:i', strtotime("-40 minutes"));
  18. $szecdziesiac = date('Y-m-d H:i', strtotime("-60 minutes"));
  19. $osiemdziesiat = date('Y-m-d H:i', strtotime("-80 minutes"));
  20. $sto = date('Y-m-d H:i', strtotime("-100 minutes"));
  21. $stodwadziescia = date('Y-m-d H:i', strtotime("-120 minutes"));
  22.  
  23. $result = $mysqli->query("SELECT time, lat, lon FROM mybo_strikes WHERE `time` BETWEEN '".$dwadziecia."' AND '".$data."' AND `lat` BETWEEN 48.571000 AND 55.622000 AND `lon` BETWEEN 10.121000 AND 27.983000 ORDER BY `time` DESC");
  24. $data = array();
  25. echo "var planes = [";
  26.  
  27. for ($x = 0; $x < mysqli_num_rows($result); $x++) {
  28. $data[] = mysqli_fetch_assoc($result);
  29. echo "[",$data[$x]['lat'],",",$data[$x]['lon'],"]";
  30. if ($x <= (mysqli_num_rows($result)-2) ) {
  31. echo ",";
  32. }
  33. }
  34. echo "];";
  35.  
  36. ?>
  37.  
  38.  
  39. var mymap = L.map('mapid').setView([53.48, 15.46], 5);
  40.  
  41. L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.r
    JcFIG214AriISLbB6B5aw', {
  42. maxZoom: 18,
  43. attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
  44. '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
  45. 'Imagery Š <a href="https://www.mapbox.com/">Mapbox</a>',
  46. id: 'mapbox.dark'
  47. }).addTo(mymap);
  48.  
  49.  
  50. for (var i = 0; i < planes.length; i++) {
  51. marker = new L.marker([planes[i][0],planes[i][1]])
  52. // .bindPopup(planes[i][0])
  53. .addTo(mymap);
  54. }
  55.  
  56. </script>

Problem jest tylko taki, że strasznie długo to się wczytuje.
Można coś z tym zrobić?
Jak zamienić ten standardowy marker na coś zrobione w css np. zwykła kropka.

Teraz marker waży jakieś 1000B ale jak wczytuje się ponad 300 takich markerów to trochę to zaczyna ważyć. Jak mogę to poprawić?
Jak zastąpić ikonę markera jakimś znakiem napisanym w css - myślę że to by poprawiło działanie.
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 24.10.2019 - 04:20