From 4bcda39aeae66b838c79e953e98c54055c3ecb70 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Wed, 6 Mar 2019 23:07:12 -0500 Subject: Added functionality so that whenever a point is clicked it opens up a Details sidebar which shows information about that point. --- web/public/javascripts/map.js | 85 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) (limited to 'web/public/javascripts') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 190307d..2ca45d0 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -19,5 +19,90 @@ L.geoJson(points, { } }).bindPopup(function (layer) { // layer.feature.geometry gives you access to all the fields + showDetails(layer) + return "

" + JSON.stringify(layer.feature.geometry) + "

"; }).addTo(map) + + +function showDetails(layer) { + let sideBar + + if (document.getElementById('sidebar') === null) { + sideBar = document.createElement('div') + let notificationsHeaderElement = document.createElement('h1') + notificationsHeaderElement.appendChild(document.createTextNode('Details')) + sideBar.appendChild(notificationsHeaderElement) + sideBar.id = "sidebar" + } + else { + sideBar = document.getElementById('sidebar') + } + + let point + + if (document.getElementById('point') !== null) { + point = document.getElementById('point') + point.parentNode.removeChild(point) + } + + point = document.createElement('div') + point.id = 'point' + + let strongElement = document.createElement('strong') + let ageRangeText = document.createTextNode('Age range: ') + strongElement.appendChild(ageRangeText) + point.appendChild(strongElement) + point.appendChild(document.createTextNode(layer.feature.geometry['ageRange'])) + point.appendChild(document.createElement('br')) + + let strongElement2 = document.createElement('strong') + let clothingDescText = document.createTextNode('Clothing description: ') + strongElement2.appendChild(clothingDescText) + point.appendChild(strongElement2) + point.appendChild(document.createTextNode(layer.feature.geometry['clothingDescription'])) + point.appendChild(document.createElement('br')) + + let strongElement3 = document.createElement('strong') + let injuryStatusText = document.createTextNode('Injury status: ') + strongElement3.appendChild(injuryStatusText) + point.appendChild(strongElement3) + + let isInjured = layer.feature.geometry['isInjured'] + let injurySpan = document.createElement('span') + if (isInjured) { + injurySpan.appendChild(document.createTextNode('Injured')) + injurySpan.style.color = 'red' + } + else { + injurySpan.appendChild(document.createTextNode('Not injured')) + injurySpan.style.color = 'green' + } + point.appendChild(injurySpan) + point.appendChild(document.createElement('br')) + + let strongElement4 = document.createElement('strong') + let helpReasonText = document.createTextNode('Reason for help: ') + strongElement4.appendChild(helpReasonText) + point.appendChild(strongElement4) + point.appendChild(document.createTextNode(layer.feature.geometry['reasonForHelp'])) + + sideBar.appendChild(point) + + let closeBtn = document.createElement('button') + let closeBtnText = document.createTextNode('Close') + closeBtn.id = 'close-btn' + closeBtn.appendChild(closeBtnText) + + sideBar.appendChild(closeBtn) + + let insertBefore = document.getElementById('map') + insertBefore.parentNode.insertBefore(sideBar, insertBefore) + + closeBtn.addEventListener('click', closeDetails) +} + +function closeDetails(e) { + let details = document.getElementById('sidebar') + details.parentNode.removeChild(details) +} \ No newline at end of file -- cgit v1.2.3 From 2b7c39ed65c6652c24f1f5140214bae7f3438960 Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Thu, 7 Mar 2019 13:54:28 -0500 Subject: Added comments and made DOM easier to work with. --- web/public/javascripts/map.js | 94 ++++++++++++++++++------------------------- 1 file changed, 39 insertions(+), 55 deletions(-) (limited to 'web/public/javascripts') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 2ca45d0..fe33d73 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -19,57 +19,52 @@ L.geoJson(points, { } }).bindPopup(function (layer) { // layer.feature.geometry gives you access to all the fields + + // show the details of the point in a sidebar showDetails(layer) return "

" + JSON.stringify(layer.feature.geometry) + "

"; }).addTo(map) - +// show details about point +// layer is the dictionary that holds info about the point function showDetails(layer) { - let sideBar - - if (document.getElementById('sidebar') === null) { - sideBar = document.createElement('div') - let notificationsHeaderElement = document.createElement('h1') - notificationsHeaderElement.appendChild(document.createTextNode('Details')) - sideBar.appendChild(notificationsHeaderElement) - sideBar.id = "sidebar" - } - else { - sideBar = document.getElementById('sidebar') + let sideBar = document.getElementById('sidebar') + + if (getComputedStyle(sideBar).visibility === 'hidden') { + sideBar.style.visibility = 'visible' } - let point + let point = document.getElementById('point') - if (document.getElementById('point') !== null) { - point = document.getElementById('point') - point.parentNode.removeChild(point) - } + //get the previous input text from the previous point + let prevUserInput = point.getElementsByClassName('user-input') - point = document.createElement('div') - point.id = 'point' + // remove the previous point text + while (prevUserInput.length !== 0) { + prevUserInput[0].parentNode.removeChild(prevUserInput[0]) + } - let strongElement = document.createElement('strong') - let ageRangeText = document.createTextNode('Age range: ') - strongElement.appendChild(ageRangeText) - point.appendChild(strongElement) - point.appendChild(document.createTextNode(layer.feature.geometry['ageRange'])) - point.appendChild(document.createElement('br')) + let pointBreaks = point.getElementsByClassName('point-break') - let strongElement2 = document.createElement('strong') - let clothingDescText = document.createTextNode('Clothing description: ') - strongElement2.appendChild(clothingDescText) - point.appendChild(strongElement2) - point.appendChild(document.createTextNode(layer.feature.geometry['clothingDescription'])) - point.appendChild(document.createElement('br')) + // put age range of person + let ageRangeTextSpan = document.createElement('span') + ageRangeTextSpan.className = 'user-input' + let ageRangeText = document.createTextNode(layer.feature.geometry['ageRange']) + ageRangeTextSpan.appendChild(ageRangeText) + pointBreaks[0].parentNode.insertBefore(ageRangeTextSpan, pointBreaks[0]) - let strongElement3 = document.createElement('strong') - let injuryStatusText = document.createTextNode('Injury status: ') - strongElement3.appendChild(injuryStatusText) - point.appendChild(strongElement3) + // put clothing description of person + let clothingDescTextSpan = document.createElement('span') + clothingDescTextSpan.className = 'user-input' + let clothingDescText = document.createTextNode(layer.feature.geometry['clothingDescription']) + clothingDescTextSpan.appendChild(clothingDescText) + pointBreaks[1].parentNode.insertBefore(clothingDescTextSpan, pointBreaks[1]) + // put whether person is injured or not let isInjured = layer.feature.geometry['isInjured'] let injurySpan = document.createElement('span') + injurySpan.className = 'user-input' if (isInjured) { injurySpan.appendChild(document.createTextNode('Injured')) injurySpan.style.color = 'red' @@ -78,31 +73,20 @@ function showDetails(layer) { injurySpan.appendChild(document.createTextNode('Not injured')) injurySpan.style.color = 'green' } - point.appendChild(injurySpan) - point.appendChild(document.createElement('br')) - - let strongElement4 = document.createElement('strong') - let helpReasonText = document.createTextNode('Reason for help: ') - strongElement4.appendChild(helpReasonText) - point.appendChild(strongElement4) - point.appendChild(document.createTextNode(layer.feature.geometry['reasonForHelp'])) - - sideBar.appendChild(point) - - let closeBtn = document.createElement('button') - let closeBtnText = document.createTextNode('Close') - closeBtn.id = 'close-btn' - closeBtn.appendChild(closeBtnText) - - sideBar.appendChild(closeBtn) + pointBreaks[2].parentNode.insertBefore(injurySpan, pointBreaks[2]) - let insertBefore = document.getElementById('map') - insertBefore.parentNode.insertBefore(sideBar, insertBefore) + // put reason for help + let helpReasonTextSpan = document.createElement('span') + helpReasonTextSpan.className = 'user-input' + let helpReasonText = document.createTextNode(layer.feature.geometry['reasonForHelp']) + helpReasonTextSpan.appendChild(helpReasonText) + point.appendChild(helpReasonTextSpan) + let closeBtn = document.getElementById('close-btn') closeBtn.addEventListener('click', closeDetails) } function closeDetails(e) { let details = document.getElementById('sidebar') - details.parentNode.removeChild(details) + details.style.visibility = 'hidden' } \ No newline at end of file -- cgit v1.2.3 From 66900f8cb8b7edec0ad2c5f4a4ebd21b70a3e86a Mon Sep 17 00:00:00 2001 From: Samarth Agarwal Date: Fri, 8 Mar 2019 15:59:58 -0500 Subject: Changed code so that the popup doesn't show up when the marker is clicked. --- web/public/javascripts/map.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) (limited to 'web/public/javascripts') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index fe33d73..4a1e697 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -17,18 +17,14 @@ L.geoJson(points, { //return L.circleMarker(latlng); return L.marker(latlng); } -}).bindPopup(function (layer) { - // layer.feature.geometry gives you access to all the fields - - // show the details of the point in a sidebar - showDetails(layer) - - return "

" + JSON.stringify(layer.feature.geometry) + "

"; -}).addTo(map) +}).on('click', showDetails).addTo(map) // show details about point -// layer is the dictionary that holds info about the point -function showDetails(layer) { +// e is the event info +function showDetails(e) { + // layer.feature.geometry gives you access to all the fields + let layer = e.layer + let sideBar = document.getElementById('sidebar') if (getComputedStyle(sideBar).visibility === 'hidden') { -- cgit v1.2.3