[JavaScript] Mapbox filtr markerów Opcje

[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:

[PHP] pobierz, plaintext 
<script>
 
var addressPoints = [
[x, y, "nazwa"]
];  
 
 
var map = L.mapbox.map('map')
    .setView([53.121383962598664,  18.00912380218506], 5)
    .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>
[PHP] pobierz, plaintext 

Ten post edytował mazyl 4.04.2014, 10:48:05

[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?