Skip to content

Commit

Permalink
Merge pull request #49 from spraakbanken/41-multi-layer
Browse files Browse the repository at this point in the history 
fix: use multi-layer instead of single-layer
  • Loading branch information
@kod-kristoff
kod-kristoff authored May 13, 2024
2 parents 2662227 + 0b24620 commit d57d50a
Showing 1 changed file with 90 additions and 89 deletions.
179 changes: 90 additions & 89 deletions skbl/templates/map.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,111 +5,112 @@
<h1>{{ headline }} <span id="years"></span></h1>

<p>{{ infotext | safe }}</p>
<br/>
<br />
<div id="mapid" style="height: 460px;width: 100%"></div>
</div>
{% endblock %}
{% block foot %}
{{ super() }}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script>
jQuery(document).ready(function() {
var indata = {{hits.hits|tojson}};
{{ super() }}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script>
jQuery(document).ready(function () {
var indata = {{ hits.hits| tojson
}};

var skblmap = L.map('mapid').setView([57.70887, 11.97456], 6);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2tibCIsImEiOiJjbGpjeGd3cWMybnRyM3J0ZXhrM200cTh2In0.jzg4ChfBoHR3PiqG286U3Q', {
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>',
tileSize: 512,
maxZoom: 18,
zoomOffset: -1,
id: 'mapbox/streets-v11'
}).addTo(skblmap);
var skblmap = L.map('mapid').setView([57.70887, 11.97456], 6);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic2tibCIsImEiOiJjbGpjeGd3cWMybnRyM3J0ZXhrM200cTh2In0.jzg4ChfBoHR3PiqG286U3Q', {
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>',
tileSize: 512,
maxZoom: 18,
zoomOffset: -1,
id: 'mapbox/streets-v11'
}).addTo(skblmap);


window.mapInstance = skblmap;
window.mapInstance = skblmap;

var markersBorn = L.markerClusterGroup({singleMarkerMode: true, maxClusterRadius: 50});
var markersDeath = L.markerClusterGroup({singleMarkerMode: true, maxClusterRadius: 50});
var markersEducation = L.markerClusterGroup({singleMarkerMode: true, maxClusterRadius: 50});
var markersOccupation = L.markerClusterGroup({singleMarkerMode: true, maxClusterRadius: 50});
var markersPlaces = L.markerClusterGroup({singleMarkerMode: true, maxClusterRadius: 50});
var markersBorn = L.markerClusterGroup({ singleMarkerMode: true, maxClusterRadius: 50 });
var markersDeath = L.markerClusterGroup({ singleMarkerMode: true, maxClusterRadius: 50 });
var markersEducation = L.markerClusterGroup({ singleMarkerMode: true, maxClusterRadius: 50 });
var markersOccupation = L.markerClusterGroup({ singleMarkerMode: true, maxClusterRadius: 50 });
var markersPlaces = L.markerClusterGroup({ singleMarkerMode: true, maxClusterRadius: 50 });

$("#show-map-button").click(function() {
$("#mapid").show();
window.mapInstance.invalidateSize();
});
$("#show-map-button").click(function () {
$("#mapid").show();
window.mapInstance.invalidateSize();
});

var gotoURL = function(url) {
var currURL = window.location.href;
var path = "/en/article/"
if (currURL.indexOf('/sv/') !== -1) {
path = "/sv/artikel/";
}
window.location.href = path + url;
}
var gotoURL = function (url) {
var currURL = window.location.href;
var path = "/en/article/"
if (currURL.indexOf('/sv/') !== -1) {
path = "/sv/artikel/";
}
window.location.href = path + url;
}

for (var hit of indata) {
let s = hit._source;
let url = hit._source.url;
let name;
if (s.name.lastname) {
name = s.name.lastname + ", " + s.name.firstname.replace(/\//g, '');
} else {
name = s.name.firstname.replace(/\//g, '');
}
if (s.lifespan && s.lifespan.from && s.lifespan.from.place && s.lifespan.from.place.pin) {
var pin = s.lifespan.from.place.pin;
markersBorn.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function() { gotoURL(url); })).addTo(skblmap);
}
if (s.lifespan && s.lifespan.to && s.lifespan.to.place && s.lifespan.to.place.pin) {
var pin = s.lifespan.to.place.pin;
markersDeath.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function() { gotoURL(url); }));
for (var hit of indata) {
let s = hit._source;
let url = hit._source.url;
let name;
if (s.name.lastname) {
name = s.name.lastname + ", " + s.name.firstname.replace(/\//g, '');
} else {
name = s.name.firstname.replace(/\//g, '');
}
if (s.lifespan && s.lifespan.from && s.lifespan.from.place && s.lifespan.from.place.pin) {
var pin = s.lifespan.from.place.pin;
markersBorn.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function () { gotoURL(url); })).addTo(skblmap);
}
if (s.lifespan && s.lifespan.to && s.lifespan.to.place && s.lifespan.to.place.pin) {
var pin = s.lifespan.to.place.pin;
markersDeath.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function () { gotoURL(url); })).addTo(skblmap);
}
if (s.education) {
if (!$.isArray(s.education)) s.education = [s.education];
for (edu of s.education) {
if (edu.place && edu.place.pin) {
var pin = edu.place.pin;
markersEducation.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function () { gotoURL(url); })).addTo(skblmap);
}
if (s.education) {
if (! $.isArray(s.education)) s.education = [s.education];
for (edu of s.education) {
if (edu.place && edu.place.pin) {
var pin = edu.place.pin;
markersEducation.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function() { gotoURL(url); }));
}
}
}
if (s.occupation) {
if (! $.isArray(s.occupation)) s.occupation = [s.occupation];
for (occ of s.occupation) {
if (occ.place && occ.place.pin) {
var pin = occ.place.pin;
markersOccupation.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function() { gotoURL(url); }));
}
}
}
}
if (s.occupation) {
if (!$.isArray(s.occupation)) s.occupation = [s.occupation];
for (occ of s.occupation) {
if (occ.place && occ.place.pin) {
var pin = occ.place.pin;
markersOccupation.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function () { gotoURL(url); })).addTo(skblmap);
}
if (s.places) {
if (! $.isArray(s.places)) s.places = [s.places];
for (p of s.places) {
if (p.place && p.place.pin) {
var pin = p.place.pin;
markersPlaces.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function() { gotoURL(url); }));
}
}
}
}
if (s.places) {
if (!$.isArray(s.places)) s.places = [s.places];
for (p of s.places) {
if (p.place && p.place.pin) {
var pin = p.place.pin;
markersPlaces.addLayer(L.marker([pin.lat, pin.lon]).bindTooltip(name).on('click', function () { gotoURL(url); })).addTo(skblmap);
}
}
var makerLayers = {
"Födelseorter": markersBorn,
"Dödsorter": markersDeath,
"Utbildningsorter": markersEducation,
"Verksamhetsorter": markersOccupation,
"Bostadsorter": markersPlaces,
};
L.control.layers(makerLayers, null).addTo(skblmap);
}
}
var makerLayers = {
"Födelseorter": markersBorn,
"Dödsorter": markersDeath,
"Utbildningsorter": markersEducation,
"Verksamhetsorter": markersOccupation,
"Bostadsorter": markersPlaces,
};
L.control.layers(null, makerLayers).addTo(skblmap);
});
</script>
</script>

<style>
<style>

</style>
</style>

{% endblock %}
{% endblock %}

0 comments on commit d57d50a

Please sign in to comment.