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