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