我使用mapbox.js API和several examples they have on their site后面制作了一个简单的地图集地图。要显示标记位置,我调用.geojson文件,但是标记看起来相当不合适,甚至到了海洋顶部的一些负载。
有人说我已经两次调用geojson文件,但我检查了它并且它被加载了一次。
您可以find the map here(cobertura侧边栏标签)和JS代码:
// Mapbox
L.mapbox.accessToken = 'token_here';
var mapCol = L.mapbox.map('map', 'mapbox.streets').setView([5.5, -73.249], 6);
var filters = document.getElementById('filters');
var markers = L.mapbox.featureLayer().loadURL('regions.geojson');
markers.on('ready', function(e) {
var typesObj = {},
types = [];
var features = e.target._geojson.features;
for (var i = 0; i < features.length; i++) {
typesObj[features[i].properties['description']] = true;
}
for (var key in typesObj) {
if ({}.hasOwnProperty.call(typesObj, key)) {
types.push(key);
}
}
var checkboxes = [];
for (var j = 0; j < types.length; j++) {
var item = filters.appendChild(document.createElement('div'));
var checkbox = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox.type = 'checkbox';
checkbox.id = types[j];
checkbox.checked = true;
label.innerHTML = types[j];
label.setAttribute('for', types[j]);
checkbox.addEventListener('change', update);
checkboxes.push(checkbox);
}
function update() {
var enabled = {};
for (var k = 0; k < checkboxes.length; k++) {
if (checkboxes[k].checked) enabled[checkboxes[k].id] = true;
}
markers.setFilter(function(feature) {
return feature.properties['description'] in enabled;
});
}
}).addTo(mapCol);
mapCol.scrollWheelZoom.disable();
&#13;