index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>MikroMapa UI v0.1</title>
  5. <meta charset="UTF-8">
  6. <link rel="apple-touch-icon" type="image/png" href="icon.png">
  7. <link rel="icon" type="image/png" sizes="144x144" href="icon.png">
  8. <!-- Leaflet css -->
  9. <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
  10. integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
  11. crossorigin=""/>
  12. <!-- Leaflet js -->
  13. <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
  14. integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
  15. crossorigin=""></script>
  16. <!-- Leaflet clustering -->
  17. <script src="https://unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js"></script>
  18. <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css">
  19. <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css">
  20. <!-- jQuery -->
  21. <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  22. <style>
  23. * {
  24. margin: 0 0;
  25. padding: 0 0;
  26. }
  27. #mapid {
  28. height: 100vh;
  29. width: 100vw;
  30. }
  31. .leaflet-marker-icon {
  32. border-radius: 50%;
  33. background-color: #fff;
  34. box-shadow: 0 0 1px 1px #000000;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div id="mapid"></div>
  40. <script>
  41. var map = L.map('mapid').setView([51.85, 18], 7);
  42. var markers = L.markerClusterGroup();
  43. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  44. attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  45. }).addTo(map);
  46. $.getJSON("users.json", function(data){
  47. for(var i=0; i<data.length; i++){
  48. var tmpIcon = L.icon({
  49. iconUrl: 'https://motomirko.pl' + data[i]["avatar"],
  50. iconSize: [32, 32],
  51. iconAnchor: [16, 16],
  52. popupAnchor: [0, -16],
  53. });
  54. var tmpMarker = L.marker([data[i]["location"]["lat"], data[i]["location"]["lon"]],
  55. {icon: tmpIcon}); //.addTo(map);
  56. tmpMarker.bindPopup("<b>" + data[i]["username"] + "</b><br><a href='https://motomirko.pl/u/"
  57. + data[i]["username"] + "'>pokaż profil</a><br><i>" + data[i]["location"]["name"] + "</i>");
  58. markers.addLayer(tmpMarker);
  59. //tmpMarker.addTo(map);
  60. }
  61. });
  62. map.addLayer(markers);
  63. // var mariomIcon = L.icon({
  64. // iconUrl: 'https://motomirko.pl/user_avatar/motomirko.pl/mariom/45/24_1.png',
  65. // iconSize: [32, 32],
  66. // iconAnchor: [16, 16]
  67. // });
  68. //
  69. // var blubiIcon = L.icon({
  70. // iconUrl: 'https://motomirko.pl/user_avatar/motomirko.pl/blubi_su/45/511_1.png',
  71. // iconSize: [32, 32],
  72. // iconAnchor: [16, 16]
  73. // });
  74. //
  75. // L.marker([53.3949, 14.4930], {icon: mariomIcon}).addTo(map);
  76. // L.marker([52.23, 21.02], {icon: blubiIcon}).addTo(map);
  77. </script>
  78. </body>
  79. </html>