Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
172 lines (154 sloc) 5.46 KB
<div id="mapid"></div>
<script>
var mymap = L.map('mapid') //.setView([20, 0], 1); // Define map (location, zoom).
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets',
//layers: [layer1] // layers are added later.
}).addTo(mymap);
var oms = new OverlappingMarkerSpiderfier(mymap, {keepSpiderfied: true});
var popup = new L.Popup({closeButton: true, offset: new L.Point(0.5, -24), maxHeight:170, autoPan:false});
// the offset must be for better position of the popup. autoPan moves the map when popup opens to show the popup. It was too distracting on hover.
oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
mymap.openPopup(popup);
marker.off('mouseout'); // this works, but it works for all eternity
// on any mouseover of any (other!) marker, this should reset. Also on any click on any marker.
console.log('Click');
});
oms.addListener('unspiderfy', function(markers) {
//mymap.closePopup();
console.log('Unspiderify');
});
oms.addListener('spiderfy', function(markers) {
mymap.closePopup();
console.log('Spiderify');
});
oms.addListener('mouseover', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
mymap.openPopup(popup);
});
function set_all_mouseout_events(marker){
for (var i = 0; i < data.length; i++){
if (markers[i] == marker){
console.log('Equal');
} else {
markers[i].on('mouseout', function(e){ mymap.closePopup(); });
}
}
}
var markers = [];
var layer_exp = [];
var layer_theor = [];
var layer_exp_theor = [];
var layer_else = [];
for (var i = 0; i < data.length; i++){
switch (data[i]['exp_theor']) {
case "Exp":
ccolor = "rgb(150,0,0)"; /* Where do I set transparency if not here? Default id 0.4, so probably there. */
break;
case "Theory":
ccolor = "rgb(0,0,150)";
break;
case "Exp/Theory":
ccolor = "rgb(100,0,100)";
break;
default:
ccolor = "rgb(0,100,0)";
break;
}
var cmarker = new L.Marker.SVGMarker(
[data[i]['lat'], data[i]['long']], { iconOptions: { color: ccolor }}
);
//console.log(data[i]['index'], i, data[i]['index'] == i)
markers.push(cmarker) ;
markers[i].desc = data[i]['desc']
switch (data[i]['exp_theor']) {
case "Exp":
layer_exp.push(markers[i]);
break;
case "Theory":
layer_theor.push(markers[i]);
break;
case "Exp/Theory":
layer_exp_theor.push(markers[i]);
break;
default:
layer_else.push(markers[i]);
break;
}
mymap.addLayer(markers[i]); // may be obsolete, as adding a layerGroup later also adds this marker.
oms.addMarker(markers[i]);
markers[i].on('mouseover', function(event){
marker = event.target;
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
mymap.openPopup(popup);
//set_all_mouseout_events(marker); // Obsolete. See mymap.on('popupclose'
});
markers[i].on('mouseout', function(e){ mymap.closePopup(); });
}
mymap.on('popupclose', function(e) {
// Todo speedup. Only re-bind the last marker, not all of them.
set_all_mouseout_events({});
})
mymap.on('layeradd', function(layer, layername){
//console.log(layer);
if (typeof layer.layer.options != "undefined" && layer.layer.options.name != null){
console.log('Layer added', layer.layer.options.name, layer.layer);
if (document.getElementById('checkExp')){
if (layer.layer.options.name == 'layer_exp') {
document.getElementById('checkExp').checked = true;
filterAtoms();
}
if (layer.layer.options.name == 'layer_theor') {
document.getElementById('checkTheory').checked = true;
filterAtoms();
}
if (layer.layer.options.name == 'layer_exp_theor') {
document.getElementById('checkExpTheory').checked = true;
filterAtoms();
}
}
}
}
);
mymap.on('layerremove', function(layer, layername){
if (typeof layer.layer.options != "undefined" && layer.layer.options.name != null){
console.log('Layer removed', layer.layer.options.name);
if (document.getElementById('checkExp')){
if (layer.layer.options.name == 'layer_exp') {
document.getElementById('checkExp').checked = false;
filterAtoms();
}
if (layer.layer.options.name == 'layer_theor') {
document.getElementById('checkTheory').checked = false;
filterAtoms();
}
if (layer.layer.options.name == 'layer_exp_theor') {
document.getElementById('checkExpTheory').checked = false;
filterAtoms();
}
}
}
}
);
var layer_exp = L.layerGroup(layer_exp, {name:'layer_exp'}).addTo(mymap);
var layer_theor = L.layerGroup(layer_theor, {name:'layer_theor'}).addTo(mymap);
var layer_exp_theor = L.layerGroup(layer_exp_theor, {name:'layer_exp_theor'}).addTo(mymap);
var layer_else = L.layerGroup(layer_else, {name:'layer_else'}).addTo(mymap);
var group = new L.featureGroup(markers);
//console.log(group.getBounds());
mymap.fitBounds(group.getBounds());
var overlayMaps = {
"Exp": layer_exp,
"Exp+Theor": layer_exp_theor,
"Theor": layer_theor,
};
layers_control = L.control.layers(null, overlayMaps).addTo(mymap);
</script>
You can’t perform that action at this time.