summaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/style.css13
-rw-r--r--assets/mapper.js55
2 files changed, 59 insertions, 9 deletions
diff --git a/assets/css/style.css b/assets/css/style.css
index eb5548c..12a9b8d 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -48,6 +48,18 @@ h1, h2, h3, h4, h5, h6 {
}
body > aside > nav > ul h3 { font-size: 1.6rem; }
+body > aside > nav > ul h3 span {
+ position: relative;
+ border: 0.4rem solid #0009;
+ display: inline-block;
+ float: right;
+ width: 0.5rem;
+ height: 0.5rem;
+}
+body > aside > nav > ul h3 span.selected {
+ border-color: transparent;
+ background-color: #0009;
+}
body > aside > nav > ul > li ul { display: none; }
body > aside > nav > ul > li.active ul { display: block; }
@@ -110,3 +122,4 @@ body > aside nav > ul > li#c-9 { background-color: #D3A9B5; }
.marker.popup .change.c-2 { border-color: #7E8A0E; }
.marker.popup .change.c-13 { border-color: #677362; }
.marker.popup .change.c-9 { border-color: #D3A9B5; }
+
diff --git a/assets/mapper.js b/assets/mapper.js
index f549c5c..39cd713 100644
--- a/assets/mapper.js
+++ b/assets/mapper.js
@@ -109,6 +109,9 @@ const Categories = [
], "color":"#D3A9B5"}
]
+// Store known sections (refs #3)
+const KnownSections = []
+
// Our map
const map = L.map('map')
const mcg = L.markerClusterGroup({
@@ -125,7 +128,8 @@ const SectionLayers = []
// Prepare Markers for lazy-loading
Categories.forEach(function(c) {
c.subcategories.forEach(function(s) {
- Markers[s.id] = {}
+ KnownSections.push(s.id) // refs #3
+ Markers[s.id] = []
if (USE_GEOJSON === true) {
SectionLayers[s.id] = L.geoJSON([], {
filter: function(feature, layer) {
@@ -166,7 +170,14 @@ function navSetup() {
Categories.forEach(function(c, i) {
var li = $('<li>')
var h3 = $('<h3>')
+ var cs = $('<span>')
+ cs.click(function(e) {
+ $(this).toggleClass('selected')
+ toggleAllSections(c.id, $(this).hasClass('selected'))
+ return false
+ })
h3.html(c.name)
+ .append(cs)
li.append(h3)
.attr('id', 'c-' + c.id)
.click(function(e) {
@@ -217,6 +228,29 @@ function toggleMarkers(sec_id) {
}
/**
+ * Select or deselect all sections in the navbar for a given category
+**/
+function toggleAllSections(cat_id, active) {
+ console.log('toggleAllSections(' + cat_id + ', ' + active + ')')
+ categorySections(cat_id).forEach(function(s) {
+ var section = $('#s-' + s.id)
+ if (active) {
+ sectionOnMap(s.id)
+ section.addClass('active')
+ } else {
+ sectionOffMap(s.id)
+ section.removeClass('active')
+ }
+ })
+}
+
+function categorySections(cat_id) {
+ return Categories.find(function(c) { return c.id == cat_id }).subcategories
+}
+
+
+
+/**
* Retrieve markers for given section from the JSON API
*
* @param String sec_id HTML attribute id for the wanted section
@@ -359,9 +393,16 @@ function markerFor(data) {
const asset_uri = $('script[src$="mapper.js"]' ).attr( 'src' ).replace( 'mapper.js', '' )
-function iconFor(data) {
+// Find parent Category ID from data.subcategories (fixes #3)
+function categoryIdFromData(data) {
+ var section = data.subcategories.find(function(s) {
+ return KnownSections.includes(s.id)
+ })
+ return $('#s-' + section.id).parents('li').attr('id').substr(2)
+}
- var cat_id = $('#s-' + data.subcategories[0].id).parents('li').attr('id').substr(2)
+function iconFor(data) {
+ var cat_id = categoryIdFromData(data)
var color = Categories.find(function(el){ return el.id == cat_id }).color
// console.log(asset_uri + 'img/')
@@ -373,14 +414,10 @@ function iconFor(data) {
function markerPopupFor(data) {
var template = $('#popup-template').html()
- try {
- var cat_id = $('#s-' + data.subcategories[0].id).parents('li').attr('id')
- } catch(e) {
- var cat_id = 'c-0'
- }
+ var cat_id = categoryIdFromData(data)
return Mustache.render(template, {
marker: data,
- cat_id: cat_id
+ cat_id: 'c-' + cat_id
})
}