diff options
| -rw-r--r-- | assets/css/style.css | 13 | ||||
| -rw-r--r-- | assets/mapper.js | 55 |
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 }) } |