Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] Mapbox filtr markerów
Forum PHP.pl > Forum > Przedszkole
mazyl
Witam!

Mam mały problem z JS, mianowicie nie mogę dodać filtrów do mapbox (pewnie robie cos zle)
chodzi dokładniej o to:
https://www.mapbox.com/mapbox.js/example/v1...marker-filters/

dokładny problem to brak checkboxów na mapie.
czy mógłby ktos napisac jak je dodać, ewentualnie prosty przykład.

Z góry dzięki
nospor
Jak je dodac to masz pokazane w linku co sam udostepniles....

Jaki zas robisz blad to bedziemy mogli stwierdzic po tym, jak podasz swoj kod
mazyl
własnie za chiny nie wiem jak zacząć. wstawie mój kod by pokazać jak aktualnie to wygląda:

  1. <script>
  2.  
  3. var addressPoints = [
  4. [x, y, "nazwa"]
  5. ];
  6.  
  7.  
  8. var map = L.mapbox.map('map')
  9. .setView([53.121383962598664, 18.00912380218506], 5)
  10. .addLayer(L.mapbox.tileLayer('examples.map-9ijuk24y'))
  11.  
  12. var filters = document.getElementById('filters');
  13.  
  14.  
  15. map.featureLayer.on('click', function(e) {
  16. map.panTo(e.layer.getLatLng());
  17. });
  18.  
  19. map.featureLayer.on('ready', function() {
  20. // collect the types of symbols in this layer. you can also just
  21. // hardcode an array of types if you know what you want to filter on,
  22. // like
  23. var types = addressPoints;
  24. var typesObj = {}, types = [];
  25. var features = map.featureLayer.getGeoJSON().features;
  26. for (var i = 0; i < features.length; i++) {
  27. typesObj[features[i].properties['marker-symbol']] = true;
  28. }
  29. for (var k in typesObj) types.push(k);
  30.  
  31. var checkboxes = [];
  32. // create a filter interface
  33. for (var i = 0; i < types.length; i++) {
  34. // create an <li> list element for each type, and add an input checkbox
  35. // and label inside
  36. var li = filters.appendChild(document.createElement('li'));
  37. var checkbox = li.appendChild(document.createElement('input'));
  38. var label = li.appendChild(document.createElement('label'));
  39. checkbox.type = 'checkbox';
  40. checkbox.id = types[i];
  41. checkbox.checked = true;
  42. // create a label to the right of the checkbox with explanatory text
  43. label.innerHTML = types[i];
  44. label.setAttribute('for', types[i]);
  45. // whenever a person clicks on this checkbox, call the update() function
  46. // below
  47. checkbox.addEventListener('change', update);
  48. checkboxes.push(checkbox);
  49. }
  50.  
  51. // this function is called whenever someone clicks on a checkbox and changes
  52. // the selection of markers to be displayed
  53. function update() {
  54. var enabled = {};
  55. // run through each checkbox and record whether it is checked. If it is,
  56. // add it to the object of types to display, otherwise do not.
  57. for (var i = 0; i < checkboxes.length; i++) {
  58. if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
  59. }
  60. map.featureLayer.setFilter(function(feature) {
  61. // if this symbol is in the list, return true. if not, return false.
  62. // the 'in' operator in javascript does exactly that: given a string
  63. // or number, it says if that is in a object
  64. // 2 in { 2: true } // true
  65. // 2 in { } // false
  66. return (feature.properties['marker-symbol'] in enabled);
  67. });
  68. }
  69. });
  70. L.control.zoomslider().addTo(map);
  71. L.control.fullscreen().addTo(map);
  72. var markers = new L.MarkerClusterGroup();
  73.  
  74. for (var i = 0; i < addressPoints.length; i++) {
  75.  
  76.  
  77.  
  78. var a = addressPoints[i];
  79. var title = a[2];
  80. var bindLabel = a[3];
  81. var marker = L.marker(new L.LatLng(a[0], a[1]), {
  82.  
  83. icon: L.divIcon({
  84. // specify a class name that we can refer to in styles, as we
  85. // do above.
  86. className: 'count-icon',
  87. // html here defines what goes in the div created for each marker
  88. html: ' <img width="35px" alt="" height="35px" src="https://cdn1.iconfinder.com/data/icons/BRILLIANT/3d_graphics/png/128/camera.png"/>',
  89. // and the marker width and height
  90. iconSize: [35, 35]
  91. }),
  92. //icon: L.mapbox.marker.icon({'marker-symbol': 'camera', 'marker-color': '0044FF'}),
  93. // title: title,
  94. bindLabel: bindLabel,
  95.  
  96.  
  97. });
  98.  
  99.  
  100.  
  101.  
  102. marker.bindLabel(bindLabel);
  103. marker.bindPopup(title);
  104. markers.addLayer(marker);
  105. }
  106.  
  107. map.addLayer(markers);
  108.  
  109. </script>
nospor
Do js uzywa sie bbcode CODE a nie PHP

Zeby wyswietlic filtry, to musisz miec jeszcze odpowiedni KOD HTML, ktory jest podany na stronie z instrukcjami, którą nam sam podales
mazyl
wybacz nie to bbcode, tak wiem ze jest html i również mam je dodane
i do tego momentu działa (tworzy się mała ramka w prawym górym rogu) lecz nie ma żadnej opcji wyboru
nospor
POkaz caly kod jaki masz. No jak mamy wiedziec co zle zrobiles, nie majac calego kodu??

Kod podany na stronie dziala. Jest poprawny.
Twoj nie dziala, wiec cos zle zrobiles. zrozum, ze wrozek nie ma. Masz podac caly kod od poczatku do konca jako calosc.
A najlepiej daj linka do strony gdzie to masz wystawione
mazyl


Kod
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />

<style>

  #map {width:100%; height:600px; }
  
  
  
.count-icon {
    text-align:center;
    vertical-align:middle;
   width: 50px;
   height: 50px;
}

iframe.noScrolling{
           width: 270px;
           height: 250px;
           overflow: hidden;
        }
</style>
</head>
<body>
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.css' rel='stylesheet' />
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/MarkerCluster.Default.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.2/Leaflet.fullscreen.min.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v0.0.2/leaflet.fullscreen.css' rel='stylesheet' />
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-label/v0.2.1/leaflet.label.css' rel='stylesheet' />
<!-- Example data. -->
<script src='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-zoomslider/v0.7.0/L.Control.Zoomslider.js'></script>
<link href='//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-zoomslider/v0.7.0/L.Control.Zoomslider.css' rel='stylesheet' />
<style>
/* Adjustments to account for mapbox.css box-sizing rules */
.leaflet-control-zoomslider-knob { width:14px; height:6px; }
.leaflet-container .leaflet-control-zoomslider-body {
  -webkit-box-sizing:content-box;
     -moz-box-sizing:content-box;
          box-sizing:content-box;
  }

#map-ui {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  padding:10px;
  background:#fff;
}

#map-ui ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
</style>
<div id='map-ui'>
  <ul id='filters'>
  </ul>
</div>
<div id='map'></div>
<script>
var addressPoints = [
[x, y, "nazwa"]
];  


var map = L.mapbox.map('map')
    .setView([53.121383962598664,  18.00912380218506], 12)
    .addLayer(L.mapbox.tileLayer('examples.map-9ijuk24y'))

var filters = document.getElementById('filters');
        
    
  map.featureLayer.on('click', function(e) {
        map.panTo(e.layer.getLatLng());
    });

    map.featureLayer.on('ready', function() {
  // collect the types of symbols in this layer. you can also just
  // hardcode an array of types if you know what you want to filter on,
  // like
    var types = addressPoints;
  var typesObj = {}, types = [];
  var features = map.featureLayer.getGeoJSON().features;
  for (var i = 0; i < features.length; i++) {
    typesObj[features[i].properties['marker-symbol']] = true;
  }
  for (var k in typesObj) types.push(k);

  var checkboxes = [];
  // create a filter interface
  for (var i = 0; i < types.length; i++) {
    // create an <li> list element for each type, and add an input checkbox
    // and label inside
    var li = filters.appendChild(document.createElement('li'));
    var checkbox = li.appendChild(document.createElement('input'));
    var label = li.appendChild(document.createElement('label'));
    checkbox.type = 'checkbox';
    checkbox.id = types[i];
    checkbox.checked = true;
    // create a label to the right of the checkbox with explanatory text
    label.innerHTML = types[i];
    label.setAttribute('for', types[i]);
    // whenever a person clicks on this checkbox, call the update() function
    // below
    checkbox.addEventListener('change', update);
    checkboxes.push(checkbox);
  }

  // this function is called whenever someone clicks on a checkbox and changes
  // the selection of markers to be displayed
  function update() {
    var enabled = {};
    // run through each checkbox and record whether it is checked. If it is,
    // add it to the object of types to display, otherwise do not.
    for (var i = 0; i < checkboxes.length; i++) {
      if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
    }
    map.featureLayer.setFilter(function(feature) {
      // if this symbol is in the list, return true. if not, return false.
      // the 'in' operator in javascript does exactly that: given a string
      // or number, it says if that is in a object
      // 2 in { 2: true } // true
      // 2 in { } // false
      return (feature.properties['marker-symbol'] in enabled);
    });
  }
});
    L.control.zoomslider().addTo(map);
    L.control.fullscreen().addTo(map);
var markers = new L.MarkerClusterGroup();

    for (var i = 0; i < addressPoints.length; i++) {
    
    
    
        var a = addressPoints[i];
        var title = a[2];
         var bindLabel = a[3];
        var marker = L.marker(new L.LatLng(a[0], a[1]), {
                  
         icon: L.divIcon({
            // specify a class name that we can refer to in styles, as we
            // do above.
            className: 'count-icon',
            // html here defines what goes in the div created for each marker
            html: ' <img  width="35px" alt="" height="35px" src="https://cdn1.iconfinder.com/data/icons/BRILLIANT/3d_graphics/png/128/camera.png"/>',
            // and the marker width and height
       iconSize: [35, 35]
        }),
            //icon: L.mapbox.marker.icon({'marker-symbol': 'camera', 'marker-color': '0044FF'}),
            //   title: title,
            bindLabel: bindLabel,
            
            
        });
        
        
    

    marker.bindLabel(bindLabel);
    marker.bindPopup(title);
    markers.addLayer(marker);
    }

    map.addLayer(markers);

</script>
nospor
Takie linki
//api.tiles.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js
sa niepoprawne
Powinno byc
https://api.tiles.mapbox.com/mapbox.js/plug...arkercluster.js

Odpal konsole js i patrz czy nie masz jakis bledow
mazyl
pluginy działają bez problemu z tymi linkami.

jedyna rzecz to brak tych filtrów
nospor
Napisalem
Odpal konsole js i patrz czy nie masz jakis bledow

Oraz druga metoda:
wstaw podstawowy kod jaki masz w instrukcji. On dziala. I dopiero do niego dodawaj kolejne swoje rzeczy. Zobaczysz ktora twoja rzecz psuje ci filtry
mazyl
podstawowy kod działa bo jest generowany z gotowej mapy. problemem jest dla mnie tylko i wyłącznie dodanie do tego kodu co posiadam własnych filtrów.

czy jest szansa aby ktos mi napisał jak dodać do tego kodu filtry?
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.