From 536f2c8cbc3cb7521120aaf2f366d4e87e278ceb Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 15 Nov 2024 10:29:23 -0500
Subject: [PATCH 01/59] feat: created draw boundary option on Add Community
 Boundary page

---
 templates/communities/community-boundary.html | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/templates/communities/community-boundary.html b/templates/communities/community-boundary.html
index 9a22c642a..8e68ce308 100644
--- a/templates/communities/community-boundary.html
+++ b/templates/communities/community-boundary.html
@@ -50,7 +50,23 @@ <h2 class="mt-0">Add community boundary</h2>
         </i>
         <p>
                 <form id="radio_btn_select">
-                    <strong>Option 1: Search the Native Land Digital database </strong><br><br>
+                    <strong>Option 1: Drawing boundaries </strong><br><br>
+                    <fieldset>
+
+                        <div class="communityBoundarySelect">
+                            <input type="radio" name="selectBoundary" data-next="{% url 'add-community-boundary' %}"/>
+                            <div class="communityBoundaryLabel">
+                                <strong>Drawing boundaries</strong>
+                            </div>
+                            <div class="communityBoundaryText">
+                                Drawing community boundaries easily through our comprehensive mapping tool.
+                            </div>
+                        </div>
+
+                    </fieldset>
+
+                    <br>
+                    <strong>Option 2: Search the Native Land Digital database </strong><br><br>
                     <fieldset>
 
                         <div class="communityBoundarySelect">
@@ -68,7 +84,7 @@ <h2 class="mt-0">Add community boundary</h2>
                     </fieldset>
 
                     <br>
-                    <strong>Option 2: Upload a shapefile </strong><br><br>
+                    <strong>Option 3: Upload a shapefile </strong><br><br>
                     <fieldset>
 
                         <div class="communityBoundarySelect">

From 1856050869d3a5637a47d008d8fc2ef5b540e8dd Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 15 Nov 2024 10:45:45 -0500
Subject: [PATCH 02/59] feat: created view for drawing boundary

---
 communities/urls.py                           |   1 +
 communities/views.py                          |   6 +
 templates/communities/community-boundary.html |   2 +-
 .../communities/draw-community-boundary.html  | 297 ++++++++++++++++++
 4 files changed, 305 insertions(+), 1 deletion(-)
 create mode 100644 templates/communities/draw-community-boundary.html

diff --git a/communities/urls.py b/communities/urls.py
index acd8f9ef1..fa4797789 100644
--- a/communities/urls.py
+++ b/communities/urls.py
@@ -7,6 +7,7 @@
     path('connect-community/', views.connect_community, name="connect-community"),
     path('create-community/', views.create_community, name="create-community"),
     path('community-boundary/', views.community_boundary, name="community-boundary"),
+    path('draw-community-boundary/', views.add_community_boundary, name="draw-community-boundary"),
     path('add-community-boundary/', views.add_community_boundary, name="add-community-boundary"),
     path('upload-boundary-file/', views.upload_boundary_file, name="upload-boundary-file"),
     path('registration-boundary', views.registration_boundary, name="registration-boundary"),
diff --git a/communities/views.py b/communities/views.py
index bccab2a59..6cd80bb86 100644
--- a/communities/views.py
+++ b/communities/views.py
@@ -163,6 +163,12 @@ def community_boundary(request):
     return render(request, 'communities/community-boundary.html')
 
 
+@has_new_community_id
+@login_required(login_url='login')
+def draw_community_boundary(request):
+    return render(request, 'communities/draw-community-boundary.html')
+
+
 @has_new_community_id
 @login_required(login_url='login')
 def add_community_boundary(request):
diff --git a/templates/communities/community-boundary.html b/templates/communities/community-boundary.html
index 8e68ce308..617a92c6e 100644
--- a/templates/communities/community-boundary.html
+++ b/templates/communities/community-boundary.html
@@ -54,7 +54,7 @@ <h2 class="mt-0">Add community boundary</h2>
                     <fieldset>
 
                         <div class="communityBoundarySelect">
-                            <input type="radio" name="selectBoundary" data-next="{% url 'add-community-boundary' %}"/>
+                            <input type="radio" name="selectBoundary" data-next="{% url 'draw-community-boundary' %}"/>
                             <div class="communityBoundaryLabel">
                                 <strong>Drawing boundaries</strong>
                             </div>
diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
new file mode 100644
index 000000000..18beb5a69
--- /dev/null
+++ b/templates/communities/draw-community-boundary.html
@@ -0,0 +1,297 @@
+{% extends 'register-base.html' %} {% block title %} Add Community {% endblock %} {% load static %} {% block card %} {% load custom_api_tags %}
+    <style>
+        #define-community-top-text{
+            width: 94%;
+        }
+
+        #define-community-body{
+            position: relative;
+            height: 80%;
+        }
+        #navigate-to-option{
+            position: absolute;
+            top: 0px;
+            right: 0px;
+            font-weight: bold;
+        }
+
+        #region-container{
+            margin-top: 20px;
+        }
+        #region-results-wrapper{
+            position: relative;
+        }
+        #region-results{
+            max-height: 150px;
+            overflow-y: scroll;
+            position: absolute;
+            width: 100%;
+            border: solid 1px #d9d1d1;
+            border-radius: 2px;
+            border-top: transparent;
+            z-index: 1;
+        }
+        .result-item{
+            padding-top: 5px;
+            padding-left: 20px;
+            padding-bottom: 5px;
+            background: white;
+            transition: 0.3s;
+            cursor: pointer;
+            user-select: none;
+        }
+        .result-item:hover {
+            background: #d7e7e4;
+        }
+        #selected-title{
+            padding: 12px;
+            border: 3px solid #007385;
+            background: aliceblue;
+            border-radius: 5px;
+            user-select: none;
+        }
+        #share-boundary-publicly-wrapper{
+            padding-top: 12px;
+
+        }
+        #can-change-in-settings-indication{
+            font-style: italic;
+        }
+        #share-boundary-publicly-wrapper input{
+            transform: scale(2);
+        }
+        .selected-title-ellipsis{
+            width: 430px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        #selected-title-wrapper{
+            position: relative;
+        }
+        #nld-link{
+            right: 8px;
+            position: absolute;
+            top: 14px;
+            font-weight: bold;
+            color: #007385;
+            cursor: pointer;
+        }
+
+        #community-boundary-search {
+            position: relative;
+        }
+
+        #community-boundary-search input{
+            width: 100%;
+            padding: 20px;
+        }
+
+        #community-boundary-search i{
+            position: absolute;
+            right: 10px;
+            top: 14px;
+        }
+
+        #buttonRow{
+            margin-top: 20px
+        }
+
+        a.disabled-btn{
+            pointer-events: none;
+            user-select: none;
+        }
+
+        #skip-this-step{
+            margin-left: 20px;
+        }
+
+        .hidden{
+            visibility: hidden;
+        }
+    </style>
+    <div class="w-90" id="define-community-body">
+        <h2 class="mt-0">Search the Native Land Digital database</h2>
+        <p id="define-community-top-text">
+            Search the Native Land Digital database to select your community’s boundary.
+            After making a selection, view the location on Native Land Digital’s website to confirm
+            the selected boundary is appropriate. If your boundary is not appropriate,
+            please contact <a class="default-a" href="https://native-land.ca/contact/" target="_blank">Native Land Digital</a>.
+        </p>
+        <div id="navigate-to-option">
+            Or <a class="default-a" href="{% url 'upload-boundary-file' %}">upload shapefile</a>
+        </div>
+
+        <div id="region-container">
+            <label class="pad-top-1-5">Search the Native Land Digital database</label><br>
+            <div id="community-boundary-search">
+                <input class="input-field search" type="text"
+                       placeholder="Search by address, town, or community name"
+                >
+                <i class="fa fa-search icon"></i>
+            </div>
+            <div id="region-results-wrapper">
+                <div id="region-results"></div>
+            </div>
+
+            <div id="selected-location" class="hidden">
+                <br>
+                <strong>
+                    <label class="pad-top-1-5">Selected location</label>
+                </strong><br>
+
+                <div id="selected-title-wrapper">
+                    <div id="selected-title"></div>
+                    <a id="nld-link" target="_blank">
+                        View Location&nbsp;
+                        <i class="fa fa-arrow-up-right-from-square"></i>
+                    </a>
+                </div>
+
+                <div id="share-boundary-publicly-wrapper">
+                    <input type="checkbox" id="share-boundary-publicly" name="share-boundary-publicly">
+                    <label for="share-boundary-publicly">Share Boundary Publicly</label>
+                </div>
+
+                <p id="can-change-in-settings-indication">
+                    Your boundary and its visibility can be updated or removed in your account's settings.
+                </p>
+
+            </div>
+
+        </div>
+
+    </div>
+
+    <div class="flex-this w-90" id="buttonRow">
+
+        <div class="w-90 flex-this flex-start">
+            <div>
+                <a
+                    id="community-boundary-continue-btn"
+                    class="primary-btn action-btn disabled-btn"
+                    href="{% url 'dashboard' %}"
+                    onclick="setboundary(); event.preventDefault()"
+                >
+                    Confirm location <i class="fa fa-arrow-right"></i>
+                    <i class="fa fa-spinner fa-spin fa-2x spinner"></i>
+                </a>
+            </div>
+            <div class="mr-8" id="skip-this-step">
+                <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        fetch('{% external_api "https://raw.githubusercontent.com/biocodellc/localcontexts_json/main/data/nativeland_slug_name_list.json" %}').
+        then(resp => resp.json()).then(response => {
+
+            document.querySelector('#region-container input.search').addEventListener("keyup", (event) => {
+                let html = ''
+                const textInput = event.target.value
+                const inputLength = textInput.length
+                if (inputLength >= 3) {
+                    var results = response.filter(item => item.name.toLowerCase().indexOf(textInput.toLowerCase()) > -1);
+                    results.forEach(result => {
+                    html += `
+                        <div class="result-item" data-slug="${result.slug}" data-title="${result.name}" onclick="selectSlug()">
+                        ${result.name}</br />
+                        </div>
+                    `
+                    })
+                } else if (inputLength === 0){
+                    html = ''
+                }
+                document.querySelector('#region-results').innerHTML = html
+            })
+
+        })
+
+        const target = document.querySelector('#region-results')
+        document.addEventListener('click', (event) => {
+            const withinboundary = event.composedPath().includes(target)
+            if (!withinboundary) {
+                // click outside element
+                hideSearchDropDown()
+            }
+        })
+
+        function hideSearchDropDown() {
+           document.querySelector('#region-results').innerHTML = ''
+        }
+        function showSelectedSlug() {
+            document.querySelector('#selected-location').classList.remove('hidden')
+        }
+        function enableContinueButton(){
+            document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
+        }
+
+        function selectSlug() {
+            const title = event.target.dataset.title
+            const slug = event.target.dataset.slug
+            const url = `https://native-land.ca/maps/territories/${slug}`
+            document.querySelector('#nld-link').setAttribute('href', url)
+            document.querySelector('#selected-title').innerHTML = `<div class="selected-title-ellipsis">${title}</div>`
+
+            // set selected data for selection
+            document.querySelector('#selected-title').setAttribute('data-slug', slug)
+
+            hideSearchDropDown()
+            showSelectedSlug()
+            enableContinueButton()
+        }
+
+        async function setboundary() {
+            try {
+                document.getElementById("community-boundary-continue-btn").classList.add("disabled-btn");
+                document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.add("spinner-container");
+                // do post call to get boundary
+                const href = document.querySelector('#community-boundary-continue-btn').getAttribute('href')
+                const slug = document.querySelector('#selected-title').getAttribute('data-slug')
+              
+                const url = `{% url 'nld-data' %}?slug=${slug}`
+                const boundaryResponse = await fetch(url)
+                const boundaryData = await boundaryResponse.json()
+                document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.remove("spinner-container");
+                document.getElementById("community-boundary-continue-btn").classList.remove("disabled-btn");
+
+                if (!boundaryData.coordinates[0].length) {
+                    const errorMessage = 'Selected location does not have any Native Land boundary'
+                    alert(errorMessage)
+                    throw new Error(errorMessage)
+                }
+              
+                const boundaryCoordinates = boundaryData.coordinates[0][0]
+                // reorder so (lon, lat)'s become (lat, lon)'s
+                boundaryCoordinates.map(row=>row.reverse())
+
+                const payload = {
+                    source: boundaryData.description,
+                    name: slug,
+                    boundary: boundaryCoordinates,
+                    share_boundary_publicly: document.getElementById("share-boundary-publicly").checked
+                }
+
+                // do post call to set boundary in request
+                const registrationResponse = await fetch("{% url 'registration-boundary' %}", {
+                        method: 'POST',
+                        body: JSON.stringify(payload),
+                        headers: {
+                          'X-CSRFToken': '{{csrf_token}}'
+                        }
+                    })
+
+                if (registrationResponse.status !== 201) {
+                    throw new Error('Error Setting boundary')
+                }
+
+                // relocate to the window href url
+                window.location.href = href
+
+            } catch (error) {
+                console.error('Error Fetching boundary:', error)
+            }
+        }
+    </script>
+{% endblock %}
\ No newline at end of file

From e0a455ef1d9d873d9a440780ecbc0690a8af4d23 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 18 Nov 2024 14:07:22 -0500
Subject: [PATCH 03/59] feat: modified html of drawing boundary page

---
 communities/urls.py                            |  2 +-
 .../communities/draw-community-boundary.html   | 18 ++++++++----------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/communities/urls.py b/communities/urls.py
index fa4797789..89ded79dc 100644
--- a/communities/urls.py
+++ b/communities/urls.py
@@ -7,7 +7,7 @@
     path('connect-community/', views.connect_community, name="connect-community"),
     path('create-community/', views.create_community, name="create-community"),
     path('community-boundary/', views.community_boundary, name="community-boundary"),
-    path('draw-community-boundary/', views.add_community_boundary, name="draw-community-boundary"),
+    path('draw-community-boundary/', views.draw_community_boundary, name="draw-community-boundary"),
     path('add-community-boundary/', views.add_community_boundary, name="add-community-boundary"),
     path('upload-boundary-file/', views.upload_boundary_file, name="upload-boundary-file"),
     path('registration-boundary', views.registration_boundary, name="registration-boundary"),
diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 18beb5a69..9e29a9c1f 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -111,22 +111,20 @@
         }
     </style>
     <div class="w-90" id="define-community-body">
-        <h2 class="mt-0">Search the Native Land Digital database</h2>
+        <h1 class="mt-0">Add Community boundaries</h1>
         <p id="define-community-top-text">
-            Search the Native Land Digital database to select your community’s boundary.
-            After making a selection, view the location on Native Land Digital’s website to confirm
-            the selected boundary is appropriate. If your boundary is not appropriate,
-            please contact <a class="default-a" href="https://native-land.ca/contact/" target="_blank">Native Land Digital</a>.
+            Draw your community boundaries on the map below.
+            Use the search bar to locate your area,
+            and mark your boundaries using the circle or line tools.
         </p>
         <div id="navigate-to-option">
-            Or <a class="default-a" href="{% url 'upload-boundary-file' %}">upload shapefile</a>
+            Or <a class="default-a" href="{% url 'community-boundary' %}">Choose another option</a>
         </div>
 
         <div id="region-container">
-            <label class="pad-top-1-5">Search the Native Land Digital database</label><br>
             <div id="community-boundary-search">
                 <input class="input-field search" type="text"
-                       placeholder="Search by address, town, or community name"
+                       placeholder="Search for a specific location"
                 >
                 <i class="fa fa-search icon"></i>
             </div>
@@ -249,7 +247,7 @@ <h2 class="mt-0">Search the Native Land Digital database</h2>
                 // do post call to get boundary
                 const href = document.querySelector('#community-boundary-continue-btn').getAttribute('href')
                 const slug = document.querySelector('#selected-title').getAttribute('data-slug')
-              
+
                 const url = `{% url 'nld-data' %}?slug=${slug}`
                 const boundaryResponse = await fetch(url)
                 const boundaryData = await boundaryResponse.json()
@@ -261,7 +259,7 @@ <h2 class="mt-0">Search the Native Land Digital database</h2>
                     alert(errorMessage)
                     throw new Error(errorMessage)
                 }
-              
+
                 const boundaryCoordinates = boundaryData.coordinates[0][0]
                 // reorder so (lon, lat)'s become (lat, lon)'s
                 boundaryCoordinates.map(row=>row.reverse())

From 30d3a677a20bd6bd0f250224be9286285960e7ef Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Thu, 21 Nov 2024 15:40:24 -0500
Subject: [PATCH 04/59] feat: created endpoint for geocoding api

---
 helpers/views.py | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/helpers/views.py b/helpers/views.py
index 400b397c7..822b303cf 100644
--- a/helpers/views.py
+++ b/helpers/views.py
@@ -1,4 +1,5 @@
 import json
+import os
 
 from django.core.cache import cache
 from django.shortcuts import render, redirect, get_object_or_404
@@ -6,6 +7,7 @@
 from django.http import HttpResponse, Http404, JsonResponse
 from django.conf import settings
 from django.views.decorators.clickjacking import xframe_options_sameorigin
+from rest_framework.status import HTTP_500_INTERNAL_SERVER_ERROR
 
 from communities.models import InviteMember, Community
 from notifications.models import UserNotification
@@ -187,3 +189,41 @@ def native_land_data(request):
         raise Http404(f'Unable to Retrieve Specific NLD Slug Data for {slug}')
 
     return JsonResponse(slug_data)
+
+
+@login_required(login_url='login')
+def geocoding_api(request):
+    """
+    Forwards request to our geocoding api provider.
+    Then returns latitude and longitude of input location
+    """
+    max_input_string_length = 100
+    location = request.GET.get('location')[:max_input_string_length]
+
+    if location is None:
+        raise Http404('Location Variable Is Not Defined In Request')
+
+    open_weather_map_api_key = os.getenv('OPEN_WEATHER_MAP_API_KEY')
+    if open_weather_map_api_key is None:
+        raise HTTP_500_INTERNAL_SERVER_ERROR('Api Key Is Not Defined')
+
+    url = (
+        f'https://api.openweathermap.org'
+        f'/geo/1.0/direct?q={location}&appid={open_weather_map_api_key}'
+    )
+    geo_coding_response = requests.get(url)
+    try:
+        geocoding_data = geo_coding_response.json()[0]
+    except (
+        requests.exceptions.Timeout,
+        requests.exceptions.ConnectionError,
+        requests.exceptions.HTTPError
+    ):
+        raise Http404('Unable to Retrieve Geocoding Data')
+
+    response_data = {
+        'name': geocoding_data['name'],
+        'lat': geocoding_data['lat'],
+        'lon': geocoding_data['lon'],
+    }
+    return JsonResponse(response_data)

From e9baad4fd8f754861b73e31846cb242c3b1e5dc5 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Thu, 21 Nov 2024 15:47:09 -0500
Subject: [PATCH 05/59] feat: added geocoding_api to urls

---
 helpers/urls.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/helpers/urls.py b/helpers/urls.py
index b934e6654..a2838cf4a 100644
--- a/helpers/urls.py
+++ b/helpers/urls.py
@@ -12,4 +12,5 @@
     path('project-boundary-view/<int:project_id>', views.project_boundary_view, name="project-boundary-view"),
     path('boundary-preview/', views.boundary_preview, name="boundary-preview"),
     path('nld-data/', views.native_land_data, name="nld-data"),
+    path('geocoding-api/', views.geocoding_api, name="geocoding-api"),
 ]

From c649e38db2ea41743c2a241eb194e32883bc2f69 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Thu, 21 Nov 2024 16:09:00 -0500
Subject: [PATCH 06/59] feat: created testcase for missing location variable in
 request

---
 helpers/views.py                            |  5 +--
 tests/functional/test_geocoding_api_view.py | 34 +++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 tests/functional/test_geocoding_api_view.py

diff --git a/helpers/views.py b/helpers/views.py
index 822b303cf..6d9e84b3a 100644
--- a/helpers/views.py
+++ b/helpers/views.py
@@ -198,11 +198,12 @@ def geocoding_api(request):
     Then returns latitude and longitude of input location
     """
     max_input_string_length = 100
-    location = request.GET.get('location')[:max_input_string_length]
 
-    if location is None:
+    if request.GET.get('location') is None:
         raise Http404('Location Variable Is Not Defined In Request')
 
+    location = request.GET.get('location')[:max_input_string_length]
+
     open_weather_map_api_key = os.getenv('OPEN_WEATHER_MAP_API_KEY')
     if open_weather_map_api_key is None:
         raise HTTP_500_INTERNAL_SERVER_ERROR('Api Key Is Not Defined')
diff --git a/tests/functional/test_geocoding_api_view.py b/tests/functional/test_geocoding_api_view.py
new file mode 100644
index 000000000..64217e6f5
--- /dev/null
+++ b/tests/functional/test_geocoding_api_view.py
@@ -0,0 +1,34 @@
+from django.urls import reverse
+from django.core.cache import cache
+from django.contrib.auth.models import User
+from django.test import Client, TransactionTestCase
+
+
+class TestFeatures(TransactionTestCase):
+    def setUp(self):
+        self.client = Client()
+        username = 'user'
+        pw = 'pw'
+        self.user = User.objects.create_user(
+            username=username,
+            password=pw
+        )
+        logged_in = self.client.login(
+            username=username,
+            password=pw
+        )
+        self.assertTrue(logged_in, 'Login failed')
+
+        # clear cache since view function modifies the cache
+        cache.clear()
+
+    def test_error_raised_when_location_is_not_defined_in_get_request(self):
+        """
+        When the get request does not contain a location, it should raise an error.
+        """
+        expected_message = 'Location Variable Is Not Defined In Request'
+        response = self.client.get(
+            reverse('geocoding-api')
+        )
+        self.assertEqual(response.status_code, 404)
+        self.assertEqual(response.context['exception'], expected_message)

From 44419be3b598cf0ce91c48a58b157338c33a9a2b Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 22 Nov 2024 11:37:39 -0500
Subject: [PATCH 07/59] feat: created testcase and fixed error

---
 helpers/views.py                            |  2 +-
 tests/functional/test_geocoding_api_view.py | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/helpers/views.py b/helpers/views.py
index 6d9e84b3a..9173df3b2 100644
--- a/helpers/views.py
+++ b/helpers/views.py
@@ -206,7 +206,7 @@ def geocoding_api(request):
 
     open_weather_map_api_key = os.getenv('OPEN_WEATHER_MAP_API_KEY')
     if open_weather_map_api_key is None:
-        raise HTTP_500_INTERNAL_SERVER_ERROR('Api Key Is Not Defined')
+        return HttpResponse(status=HTTP_500_INTERNAL_SERVER_ERROR)
 
     url = (
         f'https://api.openweathermap.org'
diff --git a/tests/functional/test_geocoding_api_view.py b/tests/functional/test_geocoding_api_view.py
index 64217e6f5..fbf2fe0af 100644
--- a/tests/functional/test_geocoding_api_view.py
+++ b/tests/functional/test_geocoding_api_view.py
@@ -32,3 +32,18 @@ def test_error_raised_when_location_is_not_defined_in_get_request(self):
         )
         self.assertEqual(response.status_code, 404)
         self.assertEqual(response.context['exception'], expected_message)
+
+    def test_error_raised_when_api_key_is_not_defined_in_backend(self):
+        """
+        When backend does not define an api_key, it should raise an error.
+        """
+        expected_message = 'Api Key Is Not Defined'
+        get_variables = {
+            'location': 'some-location',
+        }
+        response = self.client.get(
+            reverse('geocoding-api'),
+            data=get_variables
+        )
+        self.assertEqual(response.status_code, 500)
+        self.assertEqual(response.context['exception'], expected_message)

From 0d7b4b651c8c9edc8e82d4632889fc1b11bbb8a4 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 22 Nov 2024 11:47:37 -0500
Subject: [PATCH 08/59] feat: updated test

---
 tests/functional/test_geocoding_api_view.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tests/functional/test_geocoding_api_view.py b/tests/functional/test_geocoding_api_view.py
index fbf2fe0af..8d7718971 100644
--- a/tests/functional/test_geocoding_api_view.py
+++ b/tests/functional/test_geocoding_api_view.py
@@ -46,4 +46,3 @@ def test_error_raised_when_api_key_is_not_defined_in_backend(self):
             data=get_variables
         )
         self.assertEqual(response.status_code, 500)
-        self.assertEqual(response.context['exception'], expected_message)

From 1cd84a9671ac6e2b09f0270748410630be5c3ca6 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 22 Nov 2024 12:35:54 -0500
Subject: [PATCH 09/59] feat: created testcase when request to geocoder api
 provider fails

---
 helpers/views.py                            |  3 ++-
 tests/functional/test_geocoding_api_view.py | 25 ++++++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/helpers/views.py b/helpers/views.py
index 9173df3b2..4d9256ef1 100644
--- a/helpers/views.py
+++ b/helpers/views.py
@@ -212,8 +212,9 @@ def geocoding_api(request):
         f'https://api.openweathermap.org'
         f'/geo/1.0/direct?q={location}&appid={open_weather_map_api_key}'
     )
-    geo_coding_response = requests.get(url)
+
     try:
+        geo_coding_response = requests.get(url)
         geocoding_data = geo_coding_response.json()[0]
     except (
         requests.exceptions.Timeout,
diff --git a/tests/functional/test_geocoding_api_view.py b/tests/functional/test_geocoding_api_view.py
index 8d7718971..8c0654301 100644
--- a/tests/functional/test_geocoding_api_view.py
+++ b/tests/functional/test_geocoding_api_view.py
@@ -1,3 +1,7 @@
+import os
+from unittest.mock import patch
+
+import requests
 from django.urls import reverse
 from django.core.cache import cache
 from django.contrib.auth.models import User
@@ -37,7 +41,6 @@ def test_error_raised_when_api_key_is_not_defined_in_backend(self):
         """
         When backend does not define an api_key, it should raise an error.
         """
-        expected_message = 'Api Key Is Not Defined'
         get_variables = {
             'location': 'some-location',
         }
@@ -46,3 +49,23 @@ def test_error_raised_when_api_key_is_not_defined_in_backend(self):
             data=get_variables
         )
         self.assertEqual(response.status_code, 500)
+
+    def test_error_raised_when_retrieving_the_lat_lon_fails(self):
+        """
+        When the getting the lat and lon from the Geocoding Provider
+        fails, it should raise an error.
+        """
+        get_variables = {
+            'location': 'some-location',
+        }
+        expected_message = 'Unable to Retrieve Geocoding Data'
+        os.environ['OPEN_WEATHER_MAP_API_KEY'] = 'placeholder-apikey'
+
+        with patch('helpers.views.requests.get') as mock_function:
+            mock_function.side_effect = requests.exceptions.HTTPError('Some Error Occurred')
+            response = self.client.get(
+                reverse('geocoding-api'),
+                data=get_variables
+            )
+            self.assertEqual(response.status_code, 404)
+            self.assertEqual(response.context['exception'], expected_message)

From 0db4eabb1922aa2d63e92cce83985fc793a4fa95 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 22 Nov 2024 17:42:39 -0500
Subject: [PATCH 10/59] feat: created test for the successful case

---
 tests/functional/test_geocoding_api_view.py | 22 +++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/tests/functional/test_geocoding_api_view.py b/tests/functional/test_geocoding_api_view.py
index 8c0654301..63cb34a1f 100644
--- a/tests/functional/test_geocoding_api_view.py
+++ b/tests/functional/test_geocoding_api_view.py
@@ -1,4 +1,5 @@
 import os
+import unittest
 from unittest.mock import patch
 
 import requests
@@ -69,3 +70,24 @@ def test_error_raised_when_retrieving_the_lat_lon_fails(self):
             )
             self.assertEqual(response.status_code, 404)
             self.assertEqual(response.context['exception'], expected_message)
+
+    def test_success_when_retrieving_lat_lon(self):
+        get_variables = {
+            'location': 'some-location',
+        }
+        os.environ['OPEN_WEATHER_MAP_API_KEY'] = 'placeholder-apikey'
+        mock_response = unittest.mock.MagicMock()
+        mock_response.json.return_value = [{
+            'name': 'placeholder-name',
+            'lat': 'placeholder-lat',
+            'lon': 'placeholder-lon',
+        }]
+
+        with patch('helpers.views.requests.get') as mock_function:
+            mock_function.return_value = mock_response
+            response = self.client.get(
+                reverse('geocoding-api'),
+                data=get_variables
+            )
+            self.assertEqual(response.status_code, 200)
+            self.assertEqual(response.json(), mock_response.json.return_value[0])

From 4cef5600dd6ff8ce083757ee8384f13ddc9d188b Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 25 Nov 2024 20:05:35 -0500
Subject: [PATCH 11/59] feat: created file with world regions

---
 localcontexts/static/json/WorldRegions.json | 128 ++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 localcontexts/static/json/WorldRegions.json

diff --git a/localcontexts/static/json/WorldRegions.json b/localcontexts/static/json/WorldRegions.json
new file mode 100644
index 000000000..41c6d75b1
--- /dev/null
+++ b/localcontexts/static/json/WorldRegions.json
@@ -0,0 +1,128 @@
+[
+    {
+        "region": "Northern Africa",
+        "lat-lon": [32.320583, 9.803229]
+    },
+    {
+        "region": "Southern Africa",
+        "lat-lon": [-32.274286, 22.011343]
+    },
+    {
+        "region": "Central Africa",
+        "lat-lon": [5.137965, 25.240858]
+    },
+    {
+        "region": "Eastern Africa",
+        "lat-lon": [-2.106169, 39.522977]
+    },
+    {
+        "region": "Western Africa",
+        "lat-lon": [12.101225, -14.780815]
+    },
+
+
+    {
+        "region": "Northern America",
+        "lat-lon": [37.693449, -101.780213]
+    },
+    {
+        "region": "Central America",
+        "lat-lon": [13.989996, -87.375443]
+    },
+    {
+        "region": "Southern America",
+        "lat-lon": [-11.159831, -57.974516]
+    },
+
+
+    {
+        "region": "West Indies",
+        "lat-lon": [19.071591, -75.626407]
+    },
+
+
+    {
+        "region": "Northern Europe",
+        "lat-lon": [69.084788, 21.456927]
+    },
+    {
+        "region": "Central Europe",
+        "lat-lon": [48.781150, 13.870088]
+    },
+    {
+        "region": "Southeast Europe",
+        "lat-lon": [41.417291, 27.803158]
+    },
+    {
+        "region": "Southwest Europe",
+        "lat-lon": [36.707788, -5.865912]
+    },
+        {
+        "region": "Eastern Europe",
+        "lat-lon": [49.854485, 26.373646]
+    },
+    {
+        "region": "Western Europe",
+        "lat-lon": [48.917763, -0.900168]
+    },
+
+
+    {
+        "region": "Middle East",
+        "lat-lon": [32.638118, 36.134550]
+    },
+
+
+    {
+        "region": "Eastern Asia",
+        "lat-lon": [32.340462, 75.224219]
+    },
+    {
+        "region": "Central Asia",
+        "lat-lon": [33.687303, 94.133847]
+    },
+    {
+        "region": "Northern Asia",
+        "lat-lon": [59.039858, 81.647848]
+    },
+    {
+        "region": "Southeastern Asia",
+        "lat-lon": [10.749795, 106.802025]
+    },
+    {
+        "region": "Southwestern Asia",
+        "lat-lon": [9.257824, 77.473901]
+    },
+
+
+    {
+        "region": "Northern Oceania",
+        "lat-lon": [10.855851, 145.875907]
+    },
+    {
+        "region": "Central Oceania",
+        "lat-lon": [-10.879485, 165.523154]
+    },
+    {
+        "region": "Southern Oceania",
+        "lat-lon": [-45.744602, 168.668840]
+    },
+    {
+        "region": "Southwestern Oceania",
+        "lat-lon": [-26.654914, 133.219582]
+    },
+    {
+        "region": "Southeastern Oceania",
+        "lat-lon": [-22.945764, -134.516414]
+    },
+
+
+    {
+        "region": "Arctic Circle",
+        "lat-lon": []
+    },
+    {
+        "region": "Antarctica",
+        "lat-lon": []
+    }
+]
\ No newline at end of file

From f9ddb1910882fbe3ab16b7c37014bd878dba3723 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 25 Nov 2024 20:35:02 -0500
Subject: [PATCH 12/59] feat: changed key from lat-lon to lat_lon

---
 localcontexts/static/json/WorldRegions.json | 56 ++++++++++-----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/localcontexts/static/json/WorldRegions.json b/localcontexts/static/json/WorldRegions.json
index 41c6d75b1..0aac63871 100644
--- a/localcontexts/static/json/WorldRegions.json
+++ b/localcontexts/static/json/WorldRegions.json
@@ -1,128 +1,128 @@
 [
     {
         "region": "Northern Africa",
-        "lat-lon": [32.320583, 9.803229]
+        "lat_lon": [32.320583, 9.803229]
     },
     {
         "region": "Southern Africa",
-        "lat-lon": [-32.274286, 22.011343]
+        "lat_lon": [-32.274286, 22.011343]
     },
     {
         "region": "Central Africa",
-        "lat-lon": [5.137965, 25.240858]
+        "lat_lon": [5.137965, 25.240858]
     },
     {
         "region": "Eastern Africa",
-        "lat-lon": [-2.106169, 39.522977]
+        "lat_lon": [-2.106169, 39.522977]
     },
     {
         "region": "Western Africa",
-        "lat-lon": [12.101225, -14.780815]
+        "lat_lon": [12.101225, -14.780815]
     },
 
 
     {
         "region": "Northern America",
-        "lat-lon": [37.693449, -101.780213]
+        "lat_lon": [37.693449, -101.780213]
     },
     {
         "region": "Central America",
-        "lat-lon": [13.989996, -87.375443]
+        "lat_lon": [13.989996, -87.375443]
     },
     {
         "region": "Southern America",
-        "lat-lon": [-11.159831, -57.974516]
+        "lat_lon": [-11.159831, -57.974516]
     },
 
 
     {
         "region": "West Indies",
-        "lat-lon": [19.071591, -75.626407]
+        "lat_lon": [19.071591, -75.626407]
     },
 
 
     {
         "region": "Northern Europe",
-        "lat-lon": [69.084788, 21.456927]
+        "lat_lon": [69.084788, 21.456927]
     },
     {
         "region": "Central Europe",
-        "lat-lon": [48.781150, 13.870088]
+        "lat_lon": [48.781150, 13.870088]
     },
     {
         "region": "Southeast Europe",
-        "lat-lon": [41.417291, 27.803158]
+        "lat_lon": [41.417291, 27.803158]
     },
     {
         "region": "Southwest Europe",
-        "lat-lon": [36.707788, -5.865912]
+        "lat_lon": [36.707788, -5.865912]
     },
         {
         "region": "Eastern Europe",
-        "lat-lon": [49.854485, 26.373646]
+        "lat_lon": [49.854485, 26.373646]
     },
     {
         "region": "Western Europe",
-        "lat-lon": [48.917763, -0.900168]
+        "lat_lon": [48.917763, -0.900168]
     },
 
 
     {
         "region": "Middle East",
-        "lat-lon": [32.638118, 36.134550]
+        "lat_lon": [32.638118, 36.134550]
     },
 
 
     {
         "region": "Eastern Asia",
-        "lat-lon": [32.340462, 75.224219]
+        "lat_lon": [32.340462, 75.224219]
     },
     {
         "region": "Central Asia",
-        "lat-lon": [33.687303, 94.133847]
+        "lat_lon": [33.687303, 94.133847]
     },
     {
         "region": "Northern Asia",
-        "lat-lon": [59.039858, 81.647848]
+        "lat_lon": [59.039858, 81.647848]
     },
     {
         "region": "Southeastern Asia",
-        "lat-lon": [10.749795, 106.802025]
+        "lat_lon": [10.749795, 106.802025]
     },
     {
         "region": "Southwestern Asia",
-        "lat-lon": [9.257824, 77.473901]
+        "lat_lon": [9.257824, 77.473901]
     },
 
 
     {
         "region": "Northern Oceania",
-        "lat-lon": [10.855851, 145.875907]
+        "lat_lon": [10.855851, 145.875907]
     },
     {
         "region": "Central Oceania",
-        "lat-lon": [-10.879485, 165.523154]
+        "lat_lon": [-10.879485, 165.523154]
     },
     {
         "region": "Southern Oceania",
-        "lat-lon": [-45.744602, 168.668840]
+        "lat_lon": [-45.744602, 168.668840]
     },
     {
         "region": "Southwestern Oceania",
-        "lat-lon": [-26.654914, 133.219582]
+        "lat_lon": [-26.654914, 133.219582]
     },
     {
         "region": "Southeastern Oceania",
-        "lat-lon": [-22.945764, -134.516414]
+        "lat_lon": [-22.945764, -134.516414]
     },
 
 
     {
         "region": "Arctic Circle",
-        "lat-lon": []
+        "lat_lon": []
     },
     {
         "region": "Antarctica",
-        "lat-lon": []
+        "lat_lon": []
     }
 ]
\ No newline at end of file

From 36eed2f0a80078c00adb8c4be01fbb6de0adec56 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 25 Nov 2024 21:00:05 -0500
Subject: [PATCH 13/59] feat: updated draw-community-boundary in account
 creation so it populates dropown with world region data

---
 .../communities/draw-community-boundary.html  | 22 ++++++++++---------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 9e29a9c1f..5162a9fba 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -182,21 +182,23 @@ <h1 class="mt-0">Add Community boundaries</h1>
     </div>
 
     <script>
-        fetch('{% external_api "https://raw.githubusercontent.com/biocodellc/localcontexts_json/main/data/nativeland_slug_name_list.json" %}').
+        fetch('{% static "/json/WorldRegions.json" %}').
         then(resp => resp.json()).then(response => {
 
             document.querySelector('#region-container input.search').addEventListener("keyup", (event) => {
                 let html = ''
                 const textInput = event.target.value
+                const textInputLowerCase = textInput.toLowerCase()
                 const inputLength = textInput.length
                 if (inputLength >= 3) {
-                    var results = response.filter(item => item.name.toLowerCase().indexOf(textInput.toLowerCase()) > -1);
-                    results.forEach(result => {
-                    html += `
-                        <div class="result-item" data-slug="${result.slug}" data-title="${result.name}" onclick="selectSlug()">
-                        ${result.name}</br />
-                        </div>
-                    `
+                    response.forEach(result => {
+                        if (result.region.toLowerCase().includes(textInputLowerCase)) {
+                          html += `
+                            <div class="result-item" data-lat_lon="${result.lat_lon}" data-title="${result.region}" onclick="selectLocation()">
+                                ${result.region}</br />
+                            </div>
+                          `
+                        }
                     })
                 } else if (inputLength === 0){
                     html = ''
@@ -225,7 +227,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
 
-        function selectSlug() {
+        function selectLocation() {
             const title = event.target.dataset.title
             const slug = event.target.dataset.slug
             const url = `https://native-land.ca/maps/territories/${slug}`
@@ -233,7 +235,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
             document.querySelector('#selected-title').innerHTML = `<div class="selected-title-ellipsis">${title}</div>`
 
             // set selected data for selection
-            document.querySelector('#selected-title').setAttribute('data-slug', slug)
+            document.querySelector('#selected-title').setAttribute('data-lat_lon', slug)
 
             hideSearchDropDown()
             showSelectedSlug()

From 4a1ae2b8a4be4d7014fb5b7596217091b7b5abda Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 26 Nov 2024 14:06:59 -0500
Subject: [PATCH 14/59] feat: removed older code

---
 .../communities/draw-community-boundary.html  | 35 +++----------------
 1 file changed, 5 insertions(+), 30 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 5162a9fba..29623963a 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -1,4 +1,5 @@
 {% extends 'register-base.html' %} {% block title %} Add Community {% endblock %} {% load static %} {% block card %} {% load custom_api_tags %}
+    <link rel="stylesheet" href="{% static 'css/leaflet.css' %}">    
     <style>
         #define-community-top-text{
             width: 94%;
@@ -131,32 +132,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
             <div id="region-results-wrapper">
                 <div id="region-results"></div>
             </div>
-
-            <div id="selected-location" class="hidden">
-                <br>
-                <strong>
-                    <label class="pad-top-1-5">Selected location</label>
-                </strong><br>
-
-                <div id="selected-title-wrapper">
-                    <div id="selected-title"></div>
-                    <a id="nld-link" target="_blank">
-                        View Location&nbsp;
-                        <i class="fa fa-arrow-up-right-from-square"></i>
-                    </a>
-                </div>
-
-                <div id="share-boundary-publicly-wrapper">
-                    <input type="checkbox" id="share-boundary-publicly" name="share-boundary-publicly">
-                    <label for="share-boundary-publicly">Share Boundary Publicly</label>
-                </div>
-
-                <p id="can-change-in-settings-indication">
-                    Your boundary and its visibility can be updated or removed in your account's settings.
-                </p>
-
-            </div>
-
         </div>
 
     </div>
@@ -231,14 +206,14 @@ <h1 class="mt-0">Add Community boundaries</h1>
             const title = event.target.dataset.title
             const slug = event.target.dataset.slug
             const url = `https://native-land.ca/maps/territories/${slug}`
-            document.querySelector('#nld-link').setAttribute('href', url)
-            document.querySelector('#selected-title').innerHTML = `<div class="selected-title-ellipsis">${title}</div>`
+            //document.querySelector('#nld-link').setAttribute('href', url)
+            //document.querySelector('#selected-title').innerHTML = `<div class="selected-title-ellipsis">${title}</div>`
 
             // set selected data for selection
-            document.querySelector('#selected-title').setAttribute('data-lat_lon', slug)
+            //document.querySelector('#selected-title').setAttribute('data-lat_lon', slug)
 
             hideSearchDropDown()
-            showSelectedSlug()
+            // showSelectedSlug()
             enableContinueButton()
         }
 

From 3fdf7a9a913cd0ff9d963a653d8fbfb263cce268 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 26 Nov 2024 16:15:31 -0500
Subject: [PATCH 15/59] feat: map is displayed whne user selects region in
 dropdown

---
 .../communities/draw-community-boundary.html  | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 29623963a..d63c58691 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -1,6 +1,13 @@
 {% extends 'register-base.html' %} {% block title %} Add Community {% endblock %} {% load static %} {% block card %} {% load custom_api_tags %}
-    <link rel="stylesheet" href="{% static 'css/leaflet.css' %}">    
+    <script src="{% static 'javascript/leaflet.js' %}"></script>
+    <link rel="stylesheet" href="{% static 'css/leaflet.css' %}">
     <style>
+        #map {
+            width: 100%;
+            height: 68%;
+            margin-top: 10px;
+            z-index: 1;
+        }
         #define-community-top-text{
             width: 94%;
         }
@@ -133,7 +140,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 <div id="region-results"></div>
             </div>
         </div>
-
+        <div id="map"></div>
     </div>
 
     <div class="flex-this w-90" id="buttonRow">
@@ -215,6 +222,35 @@ <h1 class="mt-0">Add Community boundaries</h1>
             hideSearchDropDown()
             // showSelectedSlug()
             enableContinueButton()
+
+            let boundary = [
+              [[0, 0]]
+            ]
+            let setInitialZoom = true
+
+
+            // define map and its initial boundary
+            const map = L.map('map')
+            let bounds = new L.latLngBounds()
+
+            const polygon = L.polygon(boundary).addTo(map)
+            // extend map bound to fit this polygon
+            bounds.extend(polygon.getBounds())
+
+            // make map fit bounds
+            map.fitBounds(bounds.pad(.5))
+
+            // set initial zoom when no boundary exist
+            if(setInitialZoom) {
+                map.setZoom(4)
+            }
+
+            // load map tiles
+            const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                maxZoom: 19,
+                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+            }).addTo(map)
+
         }
 
         async function setboundary() {

From 7da449448a31b814725967ab561343ecd441887f Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 2 Dec 2024 15:24:42 -0500
Subject: [PATCH 16/59] feat: fixed issue preventing dropdown from being seen

---
 templates/communities/draw-community-boundary.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index d63c58691..8efb2d5b1 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -28,6 +28,7 @@
         }
         #region-results-wrapper{
             position: relative;
+            z-index: 2;
         }
         #region-results{
             max-height: 150px;

From 98c2d2aa7785462d822b456efdc3e0cb2a1f0693 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 2 Dec 2024 16:15:05 -0500
Subject: [PATCH 17/59] feat: map pans to selected area when selected

---
 .../communities/draw-community-boundary.html  | 47 ++++++-------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 8efb2d5b1..c20224634 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -141,7 +141,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 <div id="region-results"></div>
             </div>
         </div>
-        <div id="map"></div>
+        <div id="map" class="hidden"></div>
     </div>
 
     <div class="flex-this w-90" id="buttonRow">
@@ -165,6 +165,9 @@ <h1 class="mt-0">Add Community boundaries</h1>
     </div>
 
     <script>
+        // define initial map
+        const map = L.map('map', { center: [0, 0], zoom: 5 })
+        
         fetch('{% static "/json/WorldRegions.json" %}').
         then(resp => resp.json()).then(response => {
 
@@ -209,45 +212,25 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function enableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
+        
+        function showMap(){
+            document.querySelector('#map').classList.remove('hidden')
+        }        
 
         function selectLocation() {
-            const title = event.target.dataset.title
-            const slug = event.target.dataset.slug
-            const url = `https://native-land.ca/maps/territories/${slug}`
-            //document.querySelector('#nld-link').setAttribute('href', url)
-            //document.querySelector('#selected-title').innerHTML = `<div class="selected-title-ellipsis">${title}</div>`
-
-            // set selected data for selection
-            //document.querySelector('#selected-title').setAttribute('data-lat_lon', slug)
+            const lat_lon = event.target.dataset.lat_lon.split(",").map(num => parseFloat(num))
 
             hideSearchDropDown()
-            // showSelectedSlug()
             enableContinueButton()
+            showMap()
 
-            let boundary = [
-              [[0, 0]]
-            ]
-            let setInitialZoom = true
-
-
-            // define map and its initial boundary
-            const map = L.map('map')
-            let bounds = new L.latLngBounds()
-
-            const polygon = L.polygon(boundary).addTo(map)
-            // extend map bound to fit this polygon
-            bounds.extend(polygon.getBounds())
-
-            // make map fit bounds
-            map.fitBounds(bounds.pad(.5))
-
-            // set initial zoom when no boundary exist
-            if(setInitialZoom) {
-                map.setZoom(4)
-            }
+            // move to new map location
+            map.flyTo(
+              [lat_lon[0], lat_lon[1]]
+            )
 
             // load map tiles
-            const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                 maxZoom: 19,
                 attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
             }).addTo(map)

From d42117c65c9838bbdebce5e58e8a42730dee560d Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 2 Dec 2024 16:26:02 -0500
Subject: [PATCH 18/59] feat: the search input is populated with the region
 clicked on within the dropdown

---
 .../communities/draw-community-boundary.html    | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index c20224634..afa148876 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -167,7 +167,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
     <script>
         // define initial map
         const map = L.map('map', { center: [0, 0], zoom: 5 })
-        
+
         fetch('{% static "/json/WorldRegions.json" %}').
         then(resp => resp.json()).then(response => {
 
@@ -212,17 +212,28 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function enableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
-        
+
         function showMap(){
             document.querySelector('#map').classList.remove('hidden')
-        }        
+        }
+
+        function setSearchResult(selectedText){
+            /*
+             this sets the search input to the result
+             the user clicked on in the dropdown
+             */
+            document.querySelector('#region-container input.search').value = selectedText
+        }
 
         function selectLocation() {
+            debugger
             const lat_lon = event.target.dataset.lat_lon.split(",").map(num => parseFloat(num))
+            const title = event.target.dataset.title
 
             hideSearchDropDown()
             enableContinueButton()
             showMap()
+            setSearchResult(title)
 
             // move to new map location
             map.flyTo(

From 3e1a6135a2c4a654d7a2c7a08f2d413bd0e9e290 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 2 Dec 2024 21:18:58 -0500
Subject: [PATCH 19/59] feat: updated link for navigating to choosing another
 option

---
 templates/boundary/upload-boundary-file.html      | 2 +-
 templates/communities/add-community-boundary.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/templates/boundary/upload-boundary-file.html b/templates/boundary/upload-boundary-file.html
index 7ea94b5ad..eff85bcef 100644
--- a/templates/boundary/upload-boundary-file.html
+++ b/templates/boundary/upload-boundary-file.html
@@ -120,7 +120,7 @@ <h2 class="mt-0">Upload Shapefile</h2>
             You can create shapefiles on third-party websites like ArcGIS and QGIS.
         </p>
         <div id="navigate-to-option">
-            Or <a class="default-a" href="{% url 'add-community-boundary' %}">search Native Land database</a>
+            Or <a class="default-a" href="{% url 'community-boundary' %}">Choose another option</a>
         </div>
 
         <div id="browse-files-container">
diff --git a/templates/communities/add-community-boundary.html b/templates/communities/add-community-boundary.html
index 18beb5a69..89face13c 100644
--- a/templates/communities/add-community-boundary.html
+++ b/templates/communities/add-community-boundary.html
@@ -119,7 +119,7 @@ <h2 class="mt-0">Search the Native Land Digital database</h2>
             please contact <a class="default-a" href="https://native-land.ca/contact/" target="_blank">Native Land Digital</a>.
         </p>
         <div id="navigate-to-option">
-            Or <a class="default-a" href="{% url 'upload-boundary-file' %}">upload shapefile</a>
+            Or <a class="default-a" href="{% url 'community-boundary' %}">Choose another option</a>
         </div>
 
         <div id="region-container">

From 935f2419258da05eeca879b950b0581c155562df Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 2 Dec 2024 22:07:20 -0500
Subject: [PATCH 20/59] feat: updated testcases

---
 tests/functional/test_create_community_gis_ui.py | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/tests/functional/test_create_community_gis_ui.py b/tests/functional/test_create_community_gis_ui.py
index 6af2d102d..412e64198 100644
--- a/tests/functional/test_create_community_gis_ui.py
+++ b/tests/functional/test_create_community_gis_ui.py
@@ -27,6 +27,7 @@ def setUp(self):
         self.create_community_path = reverse('create-community')
         self.select_add_boundary_method_path = reverse('community-boundary')
         self.select_nld_add_boundary_method_path = reverse('add-community-boundary')
+        self.pick_boundary_creation_option = reverse('community-boundary')
         self.select_upload_boundary_file_method_path = reverse('upload-boundary-file')
         self.dashboard = reverse('dashboard')
 
@@ -162,13 +163,13 @@ def test_select_native_land_digital_territory_without_share_publicly(self):
         assert created_community.source_of_boundary == 'https://native-land.ca/maps/territories/panamakas'
         assert created_community.boundary.geometry is not None, 'Territory Should Have Coordinates'
 
-    def test_clicking_upload_shapefile_on_nld_page_navigates_to_upload_shapefile_page(self):
+    def test_clicking_upload_shapefile_on_nld_page_navigates_to_pick_boundary_creation_option_page(self):
         self.navigate_to_search_native_land_digital_database_page()
 
         self.py.get("#navigate-to-option a").click()
 
-        # verify user is on the upload shapefile page
-        assert self.select_upload_boundary_file_method_path in self.get_current_url()
+        # verify user is on the pick boundary creation option page
+        assert self.pick_boundary_creation_option in self.get_current_url()
 
     def test_clicking_skip_this_step_on_nld_page_navigates_to_confirm_page(self):
         self.navigate_to_search_native_land_digital_database_page()
@@ -239,13 +240,13 @@ def test_select_shapefile_without_share_publicly(self):
         assert created_community.source_of_boundary == 'shape-file'
         assert created_community.boundary.geometry is not None, 'Territory Should Have Coordinates'
 
-    def test_clicking_select_by_nld_on_upload_shapefile_page_navigates_to_select_by_nld_page(self):
+    def test_clicking_select_by_nld_on_upload_shapefile_page_navigates_to_pick_boundary_creation_option_page(self):
         self.navigate_to_upload_shapefile_page()
 
         self.py.get("#navigate-to-option a").click()
 
-        # verify user is on the select by nld page
-        assert self.select_nld_add_boundary_method_path in self.get_current_url()
+        # verify user is on the pick boundary creation option page
+        assert self.pick_boundary_creation_option in self.get_current_url()
 
     def test_clicking_skip_this_step_on_upload_shapefile_page_navigates_to_confirm_page(self):
         self.navigate_to_upload_shapefile_page()

From 73934ef08c5b69750c70553f15b64a9efcbe212f Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 3 Dec 2024 15:55:23 -0500
Subject: [PATCH 21/59] feat: added expand button

---
 templates/communities/draw-community-boundary.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index afa148876..db198ae04 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -146,7 +146,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
     <div class="flex-this w-90" id="buttonRow">
 
-        <div class="w-90 flex-this flex-start">
+        <div class="w-100 flex-this flex-start">
             <div>
                 <a
                     id="community-boundary-continue-btn"
@@ -161,6 +161,9 @@ <h1 class="mt-0">Add Community boundaries</h1>
             <div class="mr-8" id="skip-this-step">
                 <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
             </div>
+            <div class="mr-8" id="expand-map">
+                <a class="primary-btn green-btn">Expand <i class="fa fa-expand-arrows"></i></a>
+            </div>
         </div>
     </div>
 
@@ -226,7 +229,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
         }
 
         function selectLocation() {
-            debugger
             const lat_lon = event.target.dataset.lat_lon.split(",").map(num => parseFloat(num))
             const title = event.target.dataset.title
 

From 57dad2589abc9472cc3c1b720f255015dd6e6bba Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 3 Dec 2024 15:56:30 -0500
Subject: [PATCH 22/59] feat: code searches for text once user enters an input
 of any size

---
 templates/communities/draw-community-boundary.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index db198ae04..51f2dce2c 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -179,7 +179,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 const textInput = event.target.value
                 const textInputLowerCase = textInput.toLowerCase()
                 const inputLength = textInput.length
-                if (inputLength >= 3) {
+                if (inputLength >= 0) {
                     response.forEach(result => {
                         if (result.region.toLowerCase().includes(textInputLowerCase)) {
                           html += `

From 391bd53a7c72bc97438ca24b42cee7d31b6d6586 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 3 Dec 2024 17:04:13 -0500
Subject: [PATCH 23/59] feat: refactored code so the dropdown shows all
 regional options onclick and shows specific options on keyup

---
 .../communities/draw-community-boundary.html  | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 51f2dce2c..40f12f519 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -170,37 +170,44 @@ <h1 class="mt-0">Add Community boundaries</h1>
     <script>
         // define initial map
         const map = L.map('map', { center: [0, 0], zoom: 5 })
+        
+        function handleInputEvent(event, response) {
+            let html = ''
+            const textInput = event.target.value
+            const textInputLowerCase = textInput.toLowerCase()
+            const inputLength = textInput.length
+                const showAllOptions = inputLength === 0
+                response.forEach(result => {
+                    if (result.region.toLowerCase().includes(textInputLowerCase) || showAllOptions) {
+                      html += `
+                        <div class="result-item" data-lat_lon="${result.lat_lon}" data-title="${result.region}" onclick="selectLocation()">
+                            ${result.region}</br />
+                        </div>
+                      `
+                    }
+                })
+            document.querySelector('#region-results').innerHTML = html
+        }
 
         fetch('{% static "/json/WorldRegions.json" %}').
         then(resp => resp.json()).then(response => {
 
-            document.querySelector('#region-container input.search').addEventListener("keyup", (event) => {
-                let html = ''
-                const textInput = event.target.value
-                const textInputLowerCase = textInput.toLowerCase()
-                const inputLength = textInput.length
-                if (inputLength >= 0) {
-                    response.forEach(result => {
-                        if (result.region.toLowerCase().includes(textInputLowerCase)) {
-                          html += `
-                            <div class="result-item" data-lat_lon="${result.lat_lon}" data-title="${result.region}" onclick="selectLocation()">
-                                ${result.region}</br />
-                            </div>
-                          `
-                        }
-                    })
-                } else if (inputLength === 0){
-                    html = ''
-                }
-                document.querySelector('#region-results').innerHTML = html
+            document.querySelector('#region-container input.search').addEventListener("click", (event) => {
+                handleInputEvent(event, response)
             })
 
+            document.querySelector('#region-container input.search').addEventListener("keyup", (event) => {
+                handleInputEvent(event, response)
+            })
         })
 
         const target = document.querySelector('#region-results')
+        const inputTarget = document.querySelector('#region-container input.search')
         document.addEventListener('click', (event) => {
-            const withinboundary = event.composedPath().includes(target)
-            if (!withinboundary) {
+            const withinContainer = event.composedPath().includes(target)
+            const clickedOnInputTarget = event.target === inputTarget
+            const shouldNotHide = withinContainer || clickedOnInputTarget
+            if (!shouldNotHide) {
                 // click outside element
                 hideSearchDropDown()
             }

From eae9610fa9494df60bf02f937d7c53d6f4e6d4b0 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 3 Dec 2024 17:36:45 -0500
Subject: [PATCH 24/59] feat: expand button is activated when map is loaded
 intially

---
 .../communities/draw-community-boundary.html  | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 40f12f519..d8e352cc4 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -118,6 +118,14 @@
         .hidden{
             visibility: hidden;
         }
+
+        #action-button-wrapper {
+            position: relative
+        }
+        #expand-map {
+            position: absolute;
+            right: 0;
+        }
     </style>
     <div class="w-90" id="define-community-body">
         <h1 class="mt-0">Add Community boundaries</h1>
@@ -146,7 +154,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
     <div class="flex-this w-90" id="buttonRow">
 
-        <div class="w-100 flex-this flex-start">
+        <div id="action-button-wrapper" class="w-100 flex-this flex-start">
             <div>
                 <a
                     id="community-boundary-continue-btn"
@@ -162,7 +170,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
             </div>
             <div class="mr-8" id="expand-map">
-                <a class="primary-btn green-btn">Expand <i class="fa fa-expand-arrows"></i></a>
+                <a class="primary-btn disabled-btn">Expand Map<i class="fa fa-expand-arrows"></i></a>
             </div>
         </div>
     </div>
@@ -170,7 +178,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
     <script>
         // define initial map
         const map = L.map('map', { center: [0, 0], zoom: 5 })
-        
+
         function handleInputEvent(event, response) {
             let html = ''
             const textInput = event.target.value
@@ -223,6 +231,11 @@ <h1 class="mt-0">Add Community boundaries</h1>
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
 
+        function enableExpandButton(){
+            document.querySelector('#expand-map a').classList.remove('disabled-btn')
+            document.querySelector('#expand-map a').classList.add('green-btn')
+        }        
+        
         function showMap(){
             document.querySelector('#map').classList.remove('hidden')
         }
@@ -241,6 +254,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
             hideSearchDropDown()
             enableContinueButton()
+            enableExpandButton()          
             showMap()
             setSearchResult(title)
 

From 3e4f83d421376d7d4225e0cf55b70897424b6698 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 3 Dec 2024 17:54:10 -0500
Subject: [PATCH 25/59] feat: modified styling of expand-arrows button

---
 templates/communities/draw-community-boundary.html | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index d8e352cc4..242430aa8 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -126,6 +126,11 @@
             position: absolute;
             right: 0;
         }
+        #expand-map i {
+            font-size: 16px;
+            font-weight: 400;
+            margin-left: 16px;            
+        }
     </style>
     <div class="w-90" id="define-community-body">
         <h1 class="mt-0">Add Community boundaries</h1>
@@ -169,7 +174,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
             <div class="mr-8" id="skip-this-step">
                 <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
             </div>
-            <div class="mr-8" id="expand-map">
+            <div id="expand-map">
                 <a class="primary-btn disabled-btn">Expand Map<i class="fa fa-expand-arrows"></i></a>
             </div>
         </div>
@@ -234,8 +239,8 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function enableExpandButton(){
             document.querySelector('#expand-map a').classList.remove('disabled-btn')
             document.querySelector('#expand-map a').classList.add('green-btn')
-        }        
-        
+        }
+
         function showMap(){
             document.querySelector('#map').classList.remove('hidden')
         }
@@ -254,7 +259,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
             hideSearchDropDown()
             enableContinueButton()
-            enableExpandButton()          
+            enableExpandButton()
             showMap()
             setSearchResult(title)
 

From a800c0aaea6242a2918e3362f3be932225df8ab2 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 3 Dec 2024 18:20:14 -0500
Subject: [PATCH 26/59] feat: removed unused JS function

---
 templates/communities/draw-community-boundary.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 242430aa8..77eb2c9b6 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -229,13 +229,9 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function hideSearchDropDown() {
            document.querySelector('#region-results').innerHTML = ''
         }
-        function showSelectedSlug() {
-            document.querySelector('#selected-location').classList.remove('hidden')
-        }
         function enableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
-
         function enableExpandButton(){
             document.querySelector('#expand-map a').classList.remove('disabled-btn')
             document.querySelector('#expand-map a').classList.add('green-btn')

From 4672f95701e4e7b517b33fc7ba32842696aa0263 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 3 Dec 2024 18:26:19 -0500
Subject: [PATCH 27/59] feat: removed geocoding API

---
 helpers/urls.py                             |  1 -
 helpers/views.py                            | 40 ---------
 tests/functional/test_geocoding_api_view.py | 93 ---------------------
 3 files changed, 134 deletions(-)
 delete mode 100644 tests/functional/test_geocoding_api_view.py

diff --git a/helpers/urls.py b/helpers/urls.py
index a2838cf4a..b934e6654 100644
--- a/helpers/urls.py
+++ b/helpers/urls.py
@@ -12,5 +12,4 @@
     path('project-boundary-view/<int:project_id>', views.project_boundary_view, name="project-boundary-view"),
     path('boundary-preview/', views.boundary_preview, name="boundary-preview"),
     path('nld-data/', views.native_land_data, name="nld-data"),
-    path('geocoding-api/', views.geocoding_api, name="geocoding-api"),
 ]
diff --git a/helpers/views.py b/helpers/views.py
index 4d9256ef1..45827e501 100644
--- a/helpers/views.py
+++ b/helpers/views.py
@@ -189,43 +189,3 @@ def native_land_data(request):
         raise Http404(f'Unable to Retrieve Specific NLD Slug Data for {slug}')
 
     return JsonResponse(slug_data)
-
-
-@login_required(login_url='login')
-def geocoding_api(request):
-    """
-    Forwards request to our geocoding api provider.
-    Then returns latitude and longitude of input location
-    """
-    max_input_string_length = 100
-
-    if request.GET.get('location') is None:
-        raise Http404('Location Variable Is Not Defined In Request')
-
-    location = request.GET.get('location')[:max_input_string_length]
-
-    open_weather_map_api_key = os.getenv('OPEN_WEATHER_MAP_API_KEY')
-    if open_weather_map_api_key is None:
-        return HttpResponse(status=HTTP_500_INTERNAL_SERVER_ERROR)
-
-    url = (
-        f'https://api.openweathermap.org'
-        f'/geo/1.0/direct?q={location}&appid={open_weather_map_api_key}'
-    )
-
-    try:
-        geo_coding_response = requests.get(url)
-        geocoding_data = geo_coding_response.json()[0]
-    except (
-        requests.exceptions.Timeout,
-        requests.exceptions.ConnectionError,
-        requests.exceptions.HTTPError
-    ):
-        raise Http404('Unable to Retrieve Geocoding Data')
-
-    response_data = {
-        'name': geocoding_data['name'],
-        'lat': geocoding_data['lat'],
-        'lon': geocoding_data['lon'],
-    }
-    return JsonResponse(response_data)
diff --git a/tests/functional/test_geocoding_api_view.py b/tests/functional/test_geocoding_api_view.py
deleted file mode 100644
index 63cb34a1f..000000000
--- a/tests/functional/test_geocoding_api_view.py
+++ /dev/null
@@ -1,93 +0,0 @@
-import os
-import unittest
-from unittest.mock import patch
-
-import requests
-from django.urls import reverse
-from django.core.cache import cache
-from django.contrib.auth.models import User
-from django.test import Client, TransactionTestCase
-
-
-class TestFeatures(TransactionTestCase):
-    def setUp(self):
-        self.client = Client()
-        username = 'user'
-        pw = 'pw'
-        self.user = User.objects.create_user(
-            username=username,
-            password=pw
-        )
-        logged_in = self.client.login(
-            username=username,
-            password=pw
-        )
-        self.assertTrue(logged_in, 'Login failed')
-
-        # clear cache since view function modifies the cache
-        cache.clear()
-
-    def test_error_raised_when_location_is_not_defined_in_get_request(self):
-        """
-        When the get request does not contain a location, it should raise an error.
-        """
-        expected_message = 'Location Variable Is Not Defined In Request'
-        response = self.client.get(
-            reverse('geocoding-api')
-        )
-        self.assertEqual(response.status_code, 404)
-        self.assertEqual(response.context['exception'], expected_message)
-
-    def test_error_raised_when_api_key_is_not_defined_in_backend(self):
-        """
-        When backend does not define an api_key, it should raise an error.
-        """
-        get_variables = {
-            'location': 'some-location',
-        }
-        response = self.client.get(
-            reverse('geocoding-api'),
-            data=get_variables
-        )
-        self.assertEqual(response.status_code, 500)
-
-    def test_error_raised_when_retrieving_the_lat_lon_fails(self):
-        """
-        When the getting the lat and lon from the Geocoding Provider
-        fails, it should raise an error.
-        """
-        get_variables = {
-            'location': 'some-location',
-        }
-        expected_message = 'Unable to Retrieve Geocoding Data'
-        os.environ['OPEN_WEATHER_MAP_API_KEY'] = 'placeholder-apikey'
-
-        with patch('helpers.views.requests.get') as mock_function:
-            mock_function.side_effect = requests.exceptions.HTTPError('Some Error Occurred')
-            response = self.client.get(
-                reverse('geocoding-api'),
-                data=get_variables
-            )
-            self.assertEqual(response.status_code, 404)
-            self.assertEqual(response.context['exception'], expected_message)
-
-    def test_success_when_retrieving_lat_lon(self):
-        get_variables = {
-            'location': 'some-location',
-        }
-        os.environ['OPEN_WEATHER_MAP_API_KEY'] = 'placeholder-apikey'
-        mock_response = unittest.mock.MagicMock()
-        mock_response.json.return_value = [{
-            'name': 'placeholder-name',
-            'lat': 'placeholder-lat',
-            'lon': 'placeholder-lon',
-        }]
-
-        with patch('helpers.views.requests.get') as mock_function:
-            mock_function.return_value = mock_response
-            response = self.client.get(
-                reverse('geocoding-api'),
-                data=get_variables
-            )
-            self.assertEqual(response.status_code, 200)
-            self.assertEqual(response.json(), mock_response.json.return_value[0])

From cced64633e3aea932ec121ec893d0a42c521f980 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 4 Dec 2024 14:46:50 -0500
Subject: [PATCH 28/59] feat: updated region JSON file

---
 localcontexts/static/json/WorldRegions.json | 69 ++++++++++++++-------
 1 file changed, 47 insertions(+), 22 deletions(-)

diff --git a/localcontexts/static/json/WorldRegions.json b/localcontexts/static/json/WorldRegions.json
index 0aac63871..a4ee6e387 100644
--- a/localcontexts/static/json/WorldRegions.json
+++ b/localcontexts/static/json/WorldRegions.json
@@ -1,99 +1,124 @@
 [
     {
         "region": "Northern Africa",
-        "lat_lon": [32.320583, 9.803229]
+        "lat_lon": [32.320583, 9.803229],
+        "zoom": 4
     },
     {
         "region": "Southern Africa",
-        "lat_lon": [-32.274286, 22.011343]
+        "lat_lon": [-32.274286, 22.011343],
+        "zoom": 5
     },
     {
         "region": "Central Africa",
-        "lat_lon": [5.137965, 25.240858]
+        "lat_lon": [5.137965, 25.240858],
+        "zoom": 4
     },
     {
         "region": "Eastern Africa",
-        "lat_lon": [-2.106169, 39.522977]
+        "lat_lon": [-2.106169, 39.522977],
+        "zoom": 4
     },
     {
         "region": "Western Africa",
-        "lat_lon": [12.101225, -14.780815]
+        "lat_lon": [12.101225, -14.780815],
+        "zoom": 4
     },
 
 
     {
         "region": "Northern America",
-        "lat_lon": [37.693449, -101.780213]
+        "lat_lon": [37.693449, -101.780213],
+        "zoom": 4
     },
     {
         "region": "Central America",
-        "lat_lon": [13.989996, -87.375443]
+        "lat_lon": [13.989996, -87.375443],
+        "zoom": 4
     },
     {
         "region": "Southern America",
-        "lat_lon": [-11.159831, -57.974516]
+        "lat_lon": [-11.159831, -57.974516],
+        "zoom": 3
     },
 
 
     {
         "region": "West Indies",
-        "lat_lon": [19.071591, -75.626407]
+        "lat_lon": [19.071591, -75.626407],
+        "zoom": 5
     },
 
 
     {
         "region": "Northern Europe",
-        "lat_lon": [69.084788, 21.456927]
+        "lat_lon": [69.084788, 21.456927],
+        "zoom": 4
     },
     {
         "region": "Central Europe",
-        "lat_lon": [48.781150, 13.870088]
+        "lat_lon": [48.781150, 13.870088],
+        "zoom": 5
     },
     {
         "region": "Southeast Europe",
-        "lat_lon": [41.417291, 27.803158]
+        "lat_lon": [41.417291, 27.803158],
+        "zoom": 5
     },
     {
         "region": "Southwest Europe",
-        "lat_lon": [36.707788, -5.865912]
+        "lat_lon": [36.707788, -5.865912],
+        "zoom": 5
     },
         {
         "region": "Eastern Europe",
-        "lat_lon": [49.854485, 26.373646]
+        "lat_lon": [49.854485, 26.373646],
+        "zoom": 5
     },
     {
         "region": "Western Europe",
-        "lat_lon": [48.917763, -0.900168]
+        "lat_lon": [48.917763, -0.900168],
+        "zoom": 5
     },
 
 
     {
         "region": "Middle East",
-        "lat_lon": [32.638118, 36.134550]
+        "lat_lon": [32.638118, 36.134550],
+        "zoom": 5
     },
 
 
     {
         "region": "Eastern Asia",
-        "lat_lon": [32.340462, 75.224219]
+        "lat_lon": [35.129720, 123.513141],
+        "zoom": 4
     },
     {
         "region": "Central Asia",
-        "lat_lon": [33.687303, 94.133847]
+        "lat_lon": [33.687303, 94.133847],
+        "zoom": 5
     },
     {
         "region": "Northern Asia",
-        "lat_lon": [59.039858, 81.647848]
+        "lat_lon": [59.039858, 81.647848],
+        "zoom": 3
     },
     {
         "region": "Southeastern Asia",
-        "lat_lon": [10.749795, 106.802025]
+        "lat_lon": [10.749795, 106.802025],
+        "zoom": 5
     },
     {
         "region": "Southwestern Asia",
-        "lat_lon": [9.257824, 77.473901]
+        "lat_lon": [9.257824, 77.473901],
+        "zoom": 4
+    },
+    {
+        "region": "Western Asia",
+        "lat_lon": [32.340462, 75.224219],
+        "zoom": 4
     },
-
 
     {
         "region": "Northern Oceania",

From 8a627f548e50b7f6ab27bdcbb94c34d0da1f9592 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 4 Dec 2024 14:51:48 -0500
Subject: [PATCH 29/59] feat: map uses zoom level for specified region

---
 templates/communities/draw-community-boundary.html | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 77eb2c9b6..24eb407bb 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -193,7 +193,13 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 response.forEach(result => {
                     if (result.region.toLowerCase().includes(textInputLowerCase) || showAllOptions) {
                       html += `
-                        <div class="result-item" data-lat_lon="${result.lat_lon}" data-title="${result.region}" onclick="selectLocation()">
+                        <div
+                            class="result-item"
+                            data-zoom="${result.zoom}"
+                            data-lat_lon="${result.lat_lon}"
+                            data-title="${result.region}"
+                            onclick="selectLocation()"
+                        >
                             ${result.region}</br />
                         </div>
                       `
@@ -252,6 +258,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function selectLocation() {
             const lat_lon = event.target.dataset.lat_lon.split(",").map(num => parseFloat(num))
             const title = event.target.dataset.title
+            const zoom = event.target.dataset.zoom
 
             hideSearchDropDown()
             enableContinueButton()
@@ -261,7 +268,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
             // move to new map location
             map.flyTo(
-              [lat_lon[0], lat_lon[1]]
+              [lat_lon[0], lat_lon[1]], zoom
             )
 
             // load map tiles

From 4b456a270bd982dcf567e311b5a9e2c428519112 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 4 Dec 2024 16:19:32 -0500
Subject: [PATCH 30/59] feat: map is displayed initially when page loads

---
 .../communities/draw-community-boundary.html  | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 24eb407bb..3d1b369d8 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -154,7 +154,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 <div id="region-results"></div>
             </div>
         </div>
-        <div id="map" class="hidden"></div>
+        <div id="map"></div>
     </div>
 
     <div class="flex-this w-90" id="buttonRow">
@@ -182,8 +182,14 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
     <script>
         // define initial map
-        const map = L.map('map', { center: [0, 0], zoom: 5 })
-
+        const map = L.map('map', { center: [51.479698, -0.007129], zoom: 5 })
+        
+        // load map tiles
+        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+            maxZoom: 19,
+            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }).addTo(map)
+        
         function handleInputEvent(event, response) {
             let html = ''
             const textInput = event.target.value
@@ -243,10 +249,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
             document.querySelector('#expand-map a').classList.add('green-btn')
         }
 
-        function showMap(){
-            document.querySelector('#map').classList.remove('hidden')
-        }
-
         function setSearchResult(selectedText){
             /*
              this sets the search input to the result
@@ -258,12 +260,11 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function selectLocation() {
             const lat_lon = event.target.dataset.lat_lon.split(",").map(num => parseFloat(num))
             const title = event.target.dataset.title
-            const zoom = event.target.dataset.zoom
+            const zoom = parseInt(event.target.dataset.zoom)
 
             hideSearchDropDown()
             enableContinueButton()
             enableExpandButton()
-            showMap()
             setSearchResult(title)
 
             // move to new map location
@@ -271,12 +272,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
               [lat_lon[0], lat_lon[1]], zoom
             )
 
-            // load map tiles
-            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                maxZoom: 19,
-                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
-            }).addTo(map)
-
         }
 
         async function setboundary() {

From 3a0e2664d34460c33da8bf744d84e6411e068180 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 4 Dec 2024 16:34:53 -0500
Subject: [PATCH 31/59] feat: added location and zoom data for the artic circle
 and antartica regions

---
 localcontexts/static/json/WorldRegions.json   | 21 ++++++++++++-------
 .../communities/draw-community-boundary.html  |  4 ++--
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/localcontexts/static/json/WorldRegions.json b/localcontexts/static/json/WorldRegions.json
index a4ee6e387..87e9745e4 100644
--- a/localcontexts/static/json/WorldRegions.json
+++ b/localcontexts/static/json/WorldRegions.json
@@ -122,32 +122,39 @@
 
     {
         "region": "Northern Oceania",
-        "lat_lon": [10.855851, 145.875907]
+        "lat_lon": [10.855851, 145.875907],
+        "zoom": 5
     },
     {
         "region": "Central Oceania",
-        "lat_lon": [-10.879485, 165.523154]
+        "lat_lon": [-10.879485, 165.523154],
+        "zoom": 4
     },
     {
         "region": "Southern Oceania",
-        "lat_lon": [-45.744602, 168.668840]
+        "lat_lon": [-45.744602, 168.668840],
+        "zoom": 4
     },
     {
         "region": "Southwestern Oceania",
-        "lat_lon": [-26.654914, 133.219582]
+        "lat_lon": [-26.654914, 133.219582],
+        "zoom": 4
     },
     {
         "region": "Southeastern Oceania",
-        "lat_lon": [-22.945764, -134.516414]
+        "lat_lon": [-22.945764, -134.516414],
+        "zoom": 4
     },
 
 
     {
         "region": "Arctic Circle",
-        "lat_lon": []
+        "lat_lon": [81.351924, -108.655971],
+        "zoom": 3
     },
     {
         "region": "Antarctica",
-        "lat_lon": []
+        "lat_lon": [-74.338017, -48.890346],
+        "zoom": 3
     }
 ]
\ No newline at end of file
diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 3d1b369d8..ced0b9599 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -183,13 +183,13 @@ <h1 class="mt-0">Add Community boundaries</h1>
     <script>
         // define initial map
         const map = L.map('map', { center: [51.479698, -0.007129], zoom: 5 })
-        
+
         // load map tiles
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map)
-        
+
         function handleInputEvent(event, response) {
             let html = ''
             const textInput = event.target.value

From c6c053ac486c39db7896c75fcd3b7567a3e01486 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 4 Dec 2024 17:14:52 -0500
Subject: [PATCH 32/59] feat: updated north american region location and zoom

---
 localcontexts/static/json/WorldRegions.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/localcontexts/static/json/WorldRegions.json b/localcontexts/static/json/WorldRegions.json
index 87e9745e4..5577706b4 100644
--- a/localcontexts/static/json/WorldRegions.json
+++ b/localcontexts/static/json/WorldRegions.json
@@ -28,8 +28,8 @@
 
     {
         "region": "Northern America",
-        "lat_lon": [37.693449, -101.780213],
-        "zoom": 4
+        "lat_lon": [44, -101.780213],
+        "zoom": 3
     },
     {
         "region": "Central America",

From a8cb0187333a9dd9fbb3a81592c1c7c8223ee5d8 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 10 Dec 2024 11:47:40 -0500
Subject: [PATCH 33/59] feat: map attempts to use user's location initially

---
 .../communities/draw-community-boundary.html  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index ced0b9599..dac19ab9d 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -181,14 +181,31 @@ <h1 class="mt-0">Add Community boundaries</h1>
     </div>
 
     <script>
+        //this is over Greenwich England
+        let defaultLatLon = [51.479698, -0.007129];
+        
         // define initial map
-        const map = L.map('map', { center: [51.479698, -0.007129], zoom: 5 })
-
+        const map = L.map('map', { center: defaultLatLon, zoom: 5 })
+        
         // load map tiles
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map)
+        
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    // success callback map wih user location
+                    userLocation = [position.coords.latitude, position.coords.longitude]
+                    map.setView(userLocation)             
+                }, 
+                function(error) {
+                    // error callback
+                    console.error("Error getting location:", error)
+                }            
+            );
+        }
 
         function handleInputEvent(event, response) {
             let html = ''

From 51f9d1d1a7ed52632e0e139d4b3964e5d58b3c1d Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 10 Dec 2024 12:08:44 -0500
Subject: [PATCH 34/59] feat: the expand button is visible by default

---
 templates/communities/draw-community-boundary.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index dac19ab9d..378eb5ee9 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -175,7 +175,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
             </div>
             <div id="expand-map">
-                <a class="primary-btn disabled-btn">Expand Map<i class="fa fa-expand-arrows"></i></a>
+                <a class="primary-btn green-btn">Expand Map<i class="fa fa-expand-arrows"></i></a>
             </div>
         </div>
     </div>
@@ -261,10 +261,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function enableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
-        function enableExpandButton(){
-            document.querySelector('#expand-map a').classList.remove('disabled-btn')
-            document.querySelector('#expand-map a').classList.add('green-btn')
-        }
 
         function setSearchResult(selectedText){
             /*
@@ -281,7 +277,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
             hideSearchDropDown()
             enableContinueButton()
-            enableExpandButton()
             setSearchResult(title)
 
             // move to new map location

From 12370a358e123886b69cd28633d8259ff365ec40 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 10 Dec 2024 16:00:44 -0500
Subject: [PATCH 35/59] created expanded map modal scaffold

---
 .../communities/draw-community-boundary.html  |  5 ++-
 templates/snippets/modals/map-modal.html      | 37 +++++++++++++++++++
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 templates/snippets/modals/map-modal.html

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 378eb5ee9..04062a302 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -174,12 +174,13 @@ <h1 class="mt-0">Add Community boundaries</h1>
             <div class="mr-8" id="skip-this-step">
                 <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
             </div>
-            <div id="expand-map">
+            <div id="expand-map" onclick="openExpandedMapModal()">
                 <a class="primary-btn green-btn">Expand Map<i class="fa fa-expand-arrows"></i></a>
             </div>
         </div>
     </div>
-
+    
+    {% include 'snippets/modals/map-modal.html' %}
     <script>
         //this is over Greenwich England
         let defaultLatLon = [51.479698, -0.007129];
diff --git a/templates/snippets/modals/map-modal.html b/templates/snippets/modals/map-modal.html
new file mode 100644
index 000000000..249f2bb92
--- /dev/null
+++ b/templates/snippets/modals/map-modal.html
@@ -0,0 +1,37 @@
+<style>
+    #expandedMapModal{
+        z-index: 2;
+    }
+</style>
+
+<!-- EXPANDED MAP MODAL -->
+<div id="expandedMapModal" class="modal hide" onClick="closeExpandedMapModal()">
+    <span id="expandedMapModalContent">
+        <!-- ADD EXPANDED MAP MODAL VIEW -->
+        <div id="expandedMapModalView" class="modal-defaults add-member-modal flex-this column w-100 show">
+
+            Map Modal Content Here
+
+        </div>
+    </span>
+</div>
+
+<script>
+
+function openExpandedMapModal() {
+    const modal = document.getElementById('expandedMapModal')
+    modal.classList.replace('hide', 'show')
+}
+
+function closeExpandedMapModal() {
+    const modalContent = document.getElementById('expandedMapModalContent')
+    const elementClickedIsChild = modalContent.contains(event.target)
+    const elementClickedIsSelf = modalContent === event.target
+    const elementClickedIsNotChild = !elementClickedIsChild || elementClickedIsSelf
+
+    if (elementClickedIsNotChild) {
+        const modal = document.getElementById('expandedMapModal')
+        modal.classList.replace('show', 'hide')
+    }
+}
+</script>

From 94f779434bb04f5964e3deba28d8f80a49f82613 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 11 Dec 2024 10:07:52 -0500
Subject: [PATCH 36/59] feat: updated syle of map modal

---
 templates/snippets/modals/map-modal.html | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/templates/snippets/modals/map-modal.html b/templates/snippets/modals/map-modal.html
index 249f2bb92..38dace49b 100644
--- a/templates/snippets/modals/map-modal.html
+++ b/templates/snippets/modals/map-modal.html
@@ -1,6 +1,11 @@
 <style>
     #expandedMapModal{
         z-index: 2;
+        margin-top: -8vw;
+    }
+    #expandedMapModalView{
+        width: 90vw;
+        height: 40vw;
     }
 </style>
 
@@ -8,7 +13,7 @@
 <div id="expandedMapModal" class="modal hide" onClick="closeExpandedMapModal()">
     <span id="expandedMapModalContent">
         <!-- ADD EXPANDED MAP MODAL VIEW -->
-        <div id="expandedMapModalView" class="modal-defaults add-member-modal flex-this column w-100 show">
+        <div id="expandedMapModalView" class="modal-defaults flex-this column w-100 show">
 
             Map Modal Content Here
 

From 8fc1d70cd05003f0c1c747889e349d5c7947b44e Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 11 Dec 2024 12:17:22 -0500
Subject: [PATCH 37/59] feat: map modal has title and exit button

---
 templates/snippets/modals/map-modal.html | 36 +++++++++++++++++++-----
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/templates/snippets/modals/map-modal.html b/templates/snippets/modals/map-modal.html
index 38dace49b..6674d7d01 100644
--- a/templates/snippets/modals/map-modal.html
+++ b/templates/snippets/modals/map-modal.html
@@ -4,19 +4,37 @@
         margin-top: -8vw;
     }
     #expandedMapModalView{
-        width: 90vw;
+        width: 70vw;
         height: 40vw;
     }
+    .expandedMapModalRow{
+        display: flex;
+        position: relative;        
+    }
+    #closeExpandedMapModal{
+        position: absolute;
+        right: 0;
+        font-size: 20px;
+        margin-top: 6px;
+        cursor: pointer;
+    }
 </style>
 
 <!-- EXPANDED MAP MODAL -->
-<div id="expandedMapModal" class="modal hide" onClick="closeExpandedMapModal()">
+<div id="expandedMapModal" class="modal hide" onClick="closeExpandedMapModalWhenClickedOutside()">
     <span id="expandedMapModalContent">
         <!-- ADD EXPANDED MAP MODAL VIEW -->
         <div id="expandedMapModalView" class="modal-defaults flex-this column w-100 show">
-
-            Map Modal Content Here
-
+            <div class="expandedMapModalRow">
+                <h1 class="mt-0">Add Community boundaries</h1>
+                <i 
+                    id="closeExpandedMapModal" class='fa fa-xmark'
+                    onclick="closeExpandedMapModal()"
+                ></i>
+            </div>
+            <div class="expandedMapModalRow">
+                Map Placeholder Here
+            </div>
         </div>
     </span>
 </div>
@@ -29,14 +47,18 @@
 }
 
 function closeExpandedMapModal() {
+    const modal = document.getElementById('expandedMapModal')
+    modal.classList.replace('show', 'hide')
+}
+
+function closeExpandedMapModalWhenClickedOutside() {
     const modalContent = document.getElementById('expandedMapModalContent')
     const elementClickedIsChild = modalContent.contains(event.target)
     const elementClickedIsSelf = modalContent === event.target
     const elementClickedIsNotChild = !elementClickedIsChild || elementClickedIsSelf
 
     if (elementClickedIsNotChild) {
-        const modal = document.getElementById('expandedMapModal')
-        modal.classList.replace('show', 'hide')
+        closeExpandedMapModal()
     }
 }
 </script>

From 6c895e0a1155782d5535f63e3b41c25ae8b64dd1 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 13 Dec 2024 06:09:11 -0500
Subject: [PATCH 38/59] feat: elements are moved into modal

---
 .../communities/draw-community-boundary.html  |  3 +-
 templates/snippets/modals/map-modal.html      | 39 ++++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 04062a302..f49cbbb4c 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -160,7 +160,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
     <div class="flex-this w-90" id="buttonRow">
 
         <div id="action-button-wrapper" class="w-100 flex-this flex-start">
-            <div>
+            <div id="community-boundary-continue-btn-wrapper">
                 <a
                     id="community-boundary-continue-btn"
                     class="primary-btn action-btn disabled-btn"
@@ -277,7 +277,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
             const zoom = parseInt(event.target.dataset.zoom)
 
             hideSearchDropDown()
-            enableContinueButton()
             setSearchResult(title)
 
             // move to new map location
diff --git a/templates/snippets/modals/map-modal.html b/templates/snippets/modals/map-modal.html
index 6674d7d01..0bd743495 100644
--- a/templates/snippets/modals/map-modal.html
+++ b/templates/snippets/modals/map-modal.html
@@ -18,6 +18,14 @@
         margin-top: 6px;
         cursor: pointer;
     }
+    #modal-map-container{
+        width: 100%;
+        height: auto;
+    }
+
+    #modal-map-container #map {
+        height: 100%
+    }
 </style>
 
 <!-- EXPANDED MAP MODAL -->
@@ -33,7 +41,18 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 ></i>
             </div>
             <div class="expandedMapModalRow">
-                Map Placeholder Here
+                <div id="modal-map-container">
+                </div>
+            </div>
+
+            <div class="expandedMapModalRow">
+                <div id="modal-continue-btn-container">
+                </div>
+            </div>
+
+            <div class="expandedMapModalRow">
+                <div id="modal-skip-btn-container">
+                </div>
             </div>
         </div>
     </span>
@@ -41,9 +60,27 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
 <script>
 
+function moveElementsToModal(){
+  /*
+  * Moves the map, continue and skip buttons
+  * intp modal
+  * */
+  const modalMapContainer = document.getElementById('modal-map-container')
+  const modalContinueBtnContainer = document.getElementById('modal-continue-btn-container')
+
+  const mapRef = document.getElementById('map')
+  const continueBtnRef = document.getElementById('community-boundary-continue-btn')
+
+  modalMapContainer.appendChild(mapRef)
+  modalContinueBtnContainer.appendChild(continueBtnRef)
+
+  map.invalidateSize()
+}  
+  
 function openExpandedMapModal() {
     const modal = document.getElementById('expandedMapModal')
     modal.classList.replace('hide', 'show')
+    moveElementsToModal()
 }
 
 function closeExpandedMapModal() {

From 35957a81f76fed3688e312fdfe512fef6f545f15 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 13 Dec 2024 09:32:31 -0500
Subject: [PATCH 39/59] feat: updated expandedModal

---
 templates/snippets/modals/map-modal.html | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/templates/snippets/modals/map-modal.html b/templates/snippets/modals/map-modal.html
index 0bd743495..07407f164 100644
--- a/templates/snippets/modals/map-modal.html
+++ b/templates/snippets/modals/map-modal.html
@@ -6,11 +6,20 @@
     #expandedMapModalView{
         width: 70vw;
         height: 40vw;
+        border-radius: 10px;
     }
     .expandedMapModalRow{
         display: flex;
         position: relative;        
     }
+    .expandedMapModalRow:has(> #modal-map-container) {
+        height: calc(100% - 150px);
+        margin-bottom: 20px;        
+    }
+    .expandedMapModalRow:has(> h1) {
+        height: 40px
+    }
+
     #closeExpandedMapModal{
         position: absolute;
         right: 0;
@@ -24,7 +33,13 @@
     }
 
     #modal-map-container #map {
-        height: 100%
+        height: 100%;
+        margin-top: 0;
+        border-radius: 8px;
+    }
+    
+    #modal-continue-btn-container{
+        width: 100%
     }
 </style>
 

From 4cae63883eaa2a5b5f7bc21d76598b5867da49c3 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 13 Dec 2024 10:03:41 -0500
Subject: [PATCH 40/59] feat: added skip button

---
 templates/snippets/modals/map-modal.html | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/templates/snippets/modals/map-modal.html b/templates/snippets/modals/map-modal.html
index 07407f164..506011165 100644
--- a/templates/snippets/modals/map-modal.html
+++ b/templates/snippets/modals/map-modal.html
@@ -10,15 +10,19 @@
     }
     .expandedMapModalRow{
         display: flex;
-        position: relative;        
-    }
-    .expandedMapModalRow:has(> #modal-map-container) {
-        height: calc(100% - 150px);
-        margin-bottom: 20px;        
+        position: relative;       
+        margin-bottom: 15px;        
     }
+
     .expandedMapModalRow:has(> h1) {
         height: 40px
     }
+    .expandedMapModalRow:has(> #modal-map-container) {
+        height: calc(100% - 188px);
+    }
+    .expandedMapModalRow #skip-this-step {
+        margin: 0;
+    }
 
     #closeExpandedMapModal{
         position: absolute;
@@ -37,10 +41,13 @@
         margin-top: 0;
         border-radius: 8px;
     }
-    
+
     #modal-continue-btn-container{
         width: 100%
     }
+    #modal-skip-btn-container{
+        width: 100%
+    }    
 </style>
 
 <!-- EXPANDED MAP MODAL -->
@@ -82,12 +89,15 @@ <h1 class="mt-0">Add Community boundaries</h1>
   * */
   const modalMapContainer = document.getElementById('modal-map-container')
   const modalContinueBtnContainer = document.getElementById('modal-continue-btn-container')
+  const modalSkipBtnContainer = document.getElementById('modal-skip-btn-container')
 
   const mapRef = document.getElementById('map')
   const continueBtnRef = document.getElementById('community-boundary-continue-btn')
+  const skipBtnRef = document.getElementById('skip-this-step')
 
   modalMapContainer.appendChild(mapRef)
   modalContinueBtnContainer.appendChild(continueBtnRef)
+  modalSkipBtnContainer.appendChild(skipBtnRef)
 
   map.invalidateSize()
 }  

From a56aa77d764915535c28fe81fb2789872fedda79 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 13 Dec 2024 11:59:22 -0500
Subject: [PATCH 41/59] feat: skip and continue buttons are moved to and from
 the modal

---
 .../communities/draw-community-boundary.html  | 38 +++++++++++--------
 templates/snippets/modals/map-modal.html      | 29 ++++++++++++--
 2 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index f49cbbb4c..0fc2d6cf1 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -154,30 +154,36 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 <div id="region-results"></div>
             </div>
         </div>
-        <div id="map"></div>
+        <span id="map-wrapper">
+            <div id="map"></div>
+        </span>
     </div>
 
     <div class="flex-this w-90" id="buttonRow">
 
         <div id="action-button-wrapper" class="w-100 flex-this flex-start">
-            <div id="community-boundary-continue-btn-wrapper">
-                <a
-                    id="community-boundary-continue-btn"
-                    class="primary-btn action-btn disabled-btn"
-                    href="{% url 'dashboard' %}"
-                    onclick="setboundary(); event.preventDefault()"
-                >
-                    Confirm location <i class="fa fa-arrow-right"></i>
-                    <i class="fa fa-spinner fa-spin fa-2x spinner"></i>
-                </a>
-            </div>
-            <div class="mr-8" id="skip-this-step">
-                <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
-            </div>
+            <span id="continue-button-wrapper">
+                <div id="community-boundary-continue-btn-wrapper">
+                    <a
+                        id="community-boundary-continue-btn"
+                        class="primary-btn action-btn disabled-btn"
+                        href="{% url 'dashboard' %}"
+                        onclick="setboundary(); event.preventDefault()"
+                    >
+                        Confirm location <i class="fa fa-arrow-right"></i>
+                        <i class="fa fa-spinner fa-spin fa-2x spinner"></i>
+                    </a>
+                </div>
+            </span>
+            <span id="skip-button-wrapper">
+                <div class="mr-8" id="skip-this-step">
+                    <a class="primary-btn white-btn" href="{% url 'dashboard' %}">Skip this step <i class="fa fa-arrow-right"></i></a>
+                </div>
+            </span>
             <div id="expand-map" onclick="openExpandedMapModal()">
                 <a class="primary-btn green-btn">Expand Map<i class="fa fa-expand-arrows"></i></a>
             </div>
-        </div>
+        </span>
     </div>
     
     {% include 'snippets/modals/map-modal.html' %}
diff --git a/templates/snippets/modals/map-modal.html b/templates/snippets/modals/map-modal.html
index 506011165..6ece82588 100644
--- a/templates/snippets/modals/map-modal.html
+++ b/templates/snippets/modals/map-modal.html
@@ -15,7 +15,7 @@
     }
 
     .expandedMapModalRow:has(> h1) {
-        height: 40px
+        height: 20px
     }
     .expandedMapModalRow:has(> #modal-map-container) {
         height: calc(100% - 188px);
@@ -85,7 +85,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 function moveElementsToModal(){
   /*
   * Moves the map, continue and skip buttons
-  * intp modal
+  * into modal
   * */
   const modalMapContainer = document.getElementById('modal-map-container')
   const modalContinueBtnContainer = document.getElementById('modal-continue-btn-container')
@@ -101,7 +101,27 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
   map.invalidateSize()
 }  
-  
+
+function moveElementsFromModal(){
+  /*
+  * Moves the map, continue and skip buttons
+  * from modal
+  * */
+  const mapContainer = document.getElementById('map-wrapper')
+  const continueBtnContainer = document.getElementById('continue-button-wrapper')
+  const skipBtnContainer = document.getElementById('skip-button-wrapper')
+
+  const mapRef = document.getElementById('map')
+  const continueBtnRef = document.getElementById('community-boundary-continue-btn')
+  const skipBtnRef = document.getElementById('skip-this-step')
+
+  mapContainer.appendChild(mapRef)
+  continueBtnContainer.appendChild(continueBtnRef)
+  skipBtnContainer.appendChild(skipBtnRef)
+
+  map.invalidateSize()
+}
+
 function openExpandedMapModal() {
     const modal = document.getElementById('expandedMapModal')
     modal.classList.replace('hide', 'show')
@@ -109,6 +129,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 }
 
 function closeExpandedMapModal() {
+    moveElementsFromModal()  
     const modal = document.getElementById('expandedMapModal')
     modal.classList.replace('show', 'hide')
 }
@@ -120,7 +141,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
     const elementClickedIsNotChild = !elementClickedIsChild || elementClickedIsSelf
 
     if (elementClickedIsNotChild) {
-        closeExpandedMapModal()
+      closeExpandedMapModal()
     }
 }
 </script>

From 42d43295291633ab3dd6c59b52c2f05f69ae6859 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Fri, 13 Dec 2024 13:14:31 -0500
Subject: [PATCH 42/59] feat: tools are displayed on map

---
 .../communities/draw-community-boundary.html  | 25 +++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 0fc2d6cf1..83122b61c 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -187,13 +187,34 @@ <h1 class="mt-0">Add Community boundaries</h1>
     </div>
     
     {% include 'snippets/modals/map-modal.html' %}
+    
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
+        
     <script>
         //this is over Greenwich England
         let defaultLatLon = [51.479698, -0.007129];
         
         // define initial map
-        const map = L.map('map', { center: defaultLatLon, zoom: 5 })
-        
+        const map = L.map(
+            'map',
+            {
+                center: defaultLatLon, zoom: 5,
+                //drawControl: true
+            }
+        )
+
+
+        drawControl = new L.Control.Draw({
+           draw : {
+           polygon : true,
+           polyline : true,
+           rectangle : true,
+           circle : true
+           },
+        });
+        map.addControl(drawControl);
+
         // load map tiles
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,

From ed2be02f65877bbd3c9d7aa5124ebe695702e260 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 17 Dec 2024 14:52:44 -0500
Subject: [PATCH 43/59] feat: user can draw on map

---
 .../communities/draw-community-boundary.html  | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 83122b61c..8102cc0d7 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -215,6 +215,45 @@ <h1 class="mt-0">Add Community boundaries</h1>
         });
         map.addControl(drawControl);
 
+        // disable zoom
+        map.dragging.disable()
+        map.touchZoom.disable();
+        map.doubleClickZoom.disable();
+        map.scrollWheelZoom.disable();
+        map.boxZoom.disable();
+
+        map.on('click', function(e){
+            var coord = e.latlng;
+            var lat = coord.lat;
+            var lng = coord.lng;
+          console.log(lat + ", " +lng);
+        });
+
+        let points = []
+
+        var polyline = new L.Polyline([], {
+            color: 'red',
+            weight: 3,
+            opacity: 0.5,
+            smoothFactor: 1
+        });
+        polyline.addTo(map);
+        
+        map.on('mousemove', function(e){
+          
+             if(e.originalEvent.buttons == 1) {
+                    // for mousemove and mousedown on map
+                    var coord = e.latlng;
+                    var lat = coord.lat;
+                    var lng = coord.lng;
+               
+                    polyline.addLatLng([lat, lng])
+             }
+
+        });
+
+
+
         // load map tiles
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
             maxZoom: 19,

From 413de4093eb1cb765c4d2f3ec9e7c9b9e57c1756 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Tue, 17 Dec 2024 15:48:42 -0500
Subject: [PATCH 44/59] feat: boundary is set on mouse up

---
 .../communities/draw-community-boundary.html  | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 8102cc0d7..588aa4aaf 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -222,15 +222,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
         map.scrollWheelZoom.disable();
         map.boxZoom.disable();
 
-        map.on('click', function(e){
-            var coord = e.latlng;
-            var lat = coord.lat;
-            var lng = coord.lng;
-          console.log(lat + ", " +lng);
-        });
-
-        let points = []
-
+        let BoundaryData = null
         var polyline = new L.Polyline([], {
             color: 'red',
             weight: 3,
@@ -240,19 +232,32 @@ <h1 class="mt-0">Add Community boundaries</h1>
         polyline.addTo(map);
         
         map.on('mousemove', function(e){
-          
              if(e.originalEvent.buttons == 1) {
-                    // for mousemove and mousedown on map
-                    var coord = e.latlng;
-                    var lat = coord.lat;
-                    var lng = coord.lng;
+                 // for mousemove and mousedown on map
+                 var coord = e.latlng;
+                 var lat = coord.lat;
+                 var lng = coord.lng;
                
-                    polyline.addLatLng([lat, lng])
+                 polyline.addLatLng([lat, lng])
              }
-
         });
-
-
+        
+        map.on('mouseup', function(e){
+            // when drawing is finished, assign polyline lat-lon's to boundary
+            if (polyline._latlngs.length === 0) {
+                return  
+            }
+            // assign polyline data into boundary data  
+            BoundaryData = polyline.getLatLngs().map((x) => [x.lat, x.lng]);
+        });        
+
+        map.on('mousedown', function(e){
+            // clear polyline boundary
+            if (polyline._latlngs.length) {
+                polyline._setLatLngs([])
+                polyline.redraw()
+            }
+        });  
 
         // load map tiles
         L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {

From d0f02cc46d9299a6dcc0b7334025d197b244b98d Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 18 Dec 2024 13:56:22 -0500
Subject: [PATCH 45/59] feat: pencil icon is added to leaflet toolbar

---
 .../communities/draw-community-boundary.html  | 40 ++++++++++++-------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 588aa4aaf..2a64c91ba 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -187,9 +187,9 @@ <h1 class="mt-0">Add Community boundaries</h1>
     </div>
     
     {% include 'snippets/modals/map-modal.html' %}
-    
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/leaflet-toolbar@0.4.0-alpha.2/dist/leaflet.toolbar.min.js"></script>
+<link href="https://cdn.jsdelivr.net/npm/leaflet-toolbar@0.4.0-alpha.2/dist/leaflet.toolbar.min.css" rel="stylesheet">    
+
         
     <script>
         //this is over Greenwich England
@@ -203,18 +203,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 //drawControl: true
             }
         )
-
-
-        drawControl = new L.Control.Draw({
-           draw : {
-           polygon : true,
-           polyline : true,
-           rectangle : true,
-           circle : true
-           },
-        });
-        map.addControl(drawControl);
-
+        
         // disable zoom
         map.dragging.disable()
         map.touchZoom.disable();
@@ -265,6 +254,27 @@ <h1 class="mt-0">Add Community boundaries</h1>
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map)
         
+        
+        var DrawAction = L.Toolbar2.Action.extend({
+
+            options: {
+                toolbarIcon: {
+                    className: 'fa fa-pencil',
+                    tooltip: 'Go to the Eiffel Tower'
+                }
+            },
+
+            addHooks: function () {
+                map.setView([48.85815, 2.29420], 19);
+            }
+
+        });
+
+        new L.Toolbar2.Control({
+            actions: [DrawAction],
+            position: 'topleft'
+        }).addTo(map);        
+        
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(
                 function(position) {

From 0a855855d13990719efb4d6b22cc5faafc639b41 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 18 Dec 2024 19:16:10 -0500
Subject: [PATCH 46/59] feat: pencil icon toggles

---
 .../communities/draw-community-boundary.html  | 40 +++++++++++++------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 2a64c91ba..b6e60b814 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -131,6 +131,14 @@
             font-weight: 400;
             margin-left: 16px;            
         }
+
+        .toolbarDrawPencil {
+            font-size: 16px;
+        }
+        a.fa-pencil.toolbarDrawPencil.drawingActive, 
+        a.fa-pencil.toolbarDrawPencil.drawingActive:hover {
+            background: lightgrey;
+        }
     </style>
     <div class="w-90" id="define-community-body">
         <h1 class="mt-0">Add Community boundaries</h1>
@@ -188,7 +196,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
     
     {% include 'snippets/modals/map-modal.html' %}
 <script src="https://cdn.jsdelivr.net/npm/leaflet-toolbar@0.4.0-alpha.2/dist/leaflet.toolbar.min.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/leaflet-toolbar@0.4.0-alpha.2/dist/leaflet.toolbar.min.css" rel="stylesheet">    
+<link href="https://cdn.jsdelivr.net/npm/leaflet-toolbar@0.4.0-alpha.2/dist/leaflet.toolbar.min.css" rel="stylesheet">
 
         
     <script>
@@ -200,10 +208,9 @@ <h1 class="mt-0">Add Community boundaries</h1>
             'map',
             {
                 center: defaultLatLon, zoom: 5,
-                //drawControl: true
             }
         )
-        
+
         // disable zoom
         map.dragging.disable()
         map.touchZoom.disable();
@@ -243,8 +250,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
         map.on('mousedown', function(e){
             // clear polyline boundary
             if (polyline._latlngs.length) {
-                polyline._setLatLngs([])
-                polyline.redraw()
+                resetDrawData()
             }
         });  
 
@@ -253,19 +259,18 @@ <h1 class="mt-0">Add Community boundaries</h1>
             maxZoom: 19,
             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
         }).addTo(map)
-        
-        
-        var DrawAction = L.Toolbar2.Action.extend({
 
+
+        var DrawAction = L.Toolbar2.Action.extend({
             options: {
                 toolbarIcon: {
-                    className: 'fa fa-pencil',
-                    tooltip: 'Go to the Eiffel Tower'
+                    className: 'fa fa-regular fa-pencil toolbarDrawPencil',
+                    tooltip: 'Draw Boundary'
                 }
             },
 
             addHooks: function () {
-                map.setView([48.85815, 2.29420], 19);
+                resetDrawData()
             }
 
         });
@@ -273,8 +278,8 @@ <h1 class="mt-0">Add Community boundaries</h1>
         new L.Toolbar2.Control({
             actions: [DrawAction],
             position: 'topleft'
-        }).addTo(map);        
-        
+        }).addTo(map);
+
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(
                 function(position) {
@@ -289,6 +294,15 @@ <h1 class="mt-0">Add Community boundaries</h1>
             );
         }
 
+        function resetDrawData() {
+            polyline._setLatLngs([])
+            polyline.redraw()
+            togglePencilSelection()
+        }
+        function togglePencilSelection(){
+            document.querySelector(".toolbarDrawPencil").classList.toggle("drawingActive")
+        }
+
         function handleInputEvent(event, response) {
             let html = ''
             const textInput = event.target.value

From c01272827231ce56e369ff73cafa3d50f73ce3c0 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 18 Dec 2024 19:47:27 -0500
Subject: [PATCH 47/59] feat: refactor JS logic

---
 .../communities/draw-community-boundary.html  | 43 +++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index b6e60b814..c432e7634 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -202,6 +202,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
     <script>
         //this is over Greenwich England
         let defaultLatLon = [51.479698, -0.007129];
+        let drawingIsEnabled = false;
         
         // define initial map
         const map = L.map(
@@ -228,6 +229,10 @@ <h1 class="mt-0">Add Community boundaries</h1>
         polyline.addTo(map);
         
         map.on('mousemove', function(e){
+            if (!drawingIsEnabled) {
+                return
+            }
+            
              if(e.originalEvent.buttons == 1) {
                  // for mousemove and mousedown on map
                  var coord = e.latlng;
@@ -239,6 +244,10 @@ <h1 class="mt-0">Add Community boundaries</h1>
         });
         
         map.on('mouseup', function(e){
+            if (!drawingIsEnabled) {
+                return
+            }
+            
             // when drawing is finished, assign polyline lat-lon's to boundary
             if (polyline._latlngs.length === 0) {
                 return  
@@ -248,6 +257,10 @@ <h1 class="mt-0">Add Community boundaries</h1>
         });        
 
         map.on('mousedown', function(e){
+            if (!drawingIsEnabled) {
+                return
+            }
+            
             // clear polyline boundary
             if (polyline._latlngs.length) {
                 resetDrawData()
@@ -270,7 +283,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
             },
 
             addHooks: function () {
-                resetDrawData()
+                togglePencilSelection()
             }
 
         });
@@ -297,10 +310,34 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function resetDrawData() {
             polyline._setLatLngs([])
             polyline.redraw()
-            togglePencilSelection()
         }
+        
         function togglePencilSelection(){
-            document.querySelector(".toolbarDrawPencil").classList.toggle("drawingActive")
+            const DrawingModeIsActive = document.querySelector(".toolbarDrawPencil").classList.toggle("drawingActive")
+            drawingIsEnabled = DrawingModeIsActive             
+            
+            if(DrawingModeIsActive) {
+                resetDrawData()
+                disableMapZoom()
+            } else {
+                enableMapZoom()
+            }
+        }
+        function disableMapZoom() {
+            // disable zoom
+            map.dragging.disable()
+            map.touchZoom.disable();
+            map.doubleClickZoom.disable();
+            map.scrollWheelZoom.disable();
+            map.boxZoom.disable();
+        }
+        function enableMapZoom() {
+            // enable zoom
+            map.dragging.enable()
+            map.touchZoom.enable();
+            map.doubleClickZoom.enable();
+            map.scrollWheelZoom.enable();
+            map.boxZoom.enable();
         }
 
         function handleInputEvent(event, response) {

From 131d1f3bbe7eeb35ffa03e252d587a5ca0db57d9 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Wed, 18 Dec 2024 19:50:54 -0500
Subject: [PATCH 48/59] feat: removed code which disables zooming, panning, etc
 by default

---
 templates/communities/draw-community-boundary.html | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index c432e7634..4832a6539 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -212,13 +212,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
             }
         )
 
-        // disable zoom
-        map.dragging.disable()
-        map.touchZoom.disable();
-        map.doubleClickZoom.disable();
-        map.scrollWheelZoom.disable();
-        map.boxZoom.disable();
-
         let BoundaryData = null
         var polyline = new L.Polyline([], {
             color: 'red',

From 2644f9860b58be9ef84b9f2a89a5a86568b35392 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Thu, 19 Dec 2024 12:15:20 -0500
Subject: [PATCH 49/59] feat: created eraser to remove boundary

---
 .../communities/draw-community-boundary.html  | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 4832a6539..d2dc5221f 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -139,6 +139,9 @@
         a.fa-pencil.toolbarDrawPencil.drawingActive:hover {
             background: lightgrey;
         }
+        a.fa-eraser.toolbarDrawErase {
+            color: coral
+        }
     </style>
     <div class="w-90" id="define-community-body">
         <h1 class="mt-0">Add Community boundaries</h1>
@@ -274,15 +277,25 @@ <h1 class="mt-0">Add Community boundaries</h1>
                     tooltip: 'Draw Boundary'
                 }
             },
-
             addHooks: function () {
                 togglePencilSelection()
             }
-
         });
 
+        var EraseAction = L.Toolbar2.Action.extend({
+            options: {
+                toolbarIcon: {
+                    className: 'fa fa-regular fa-eraser toolbarDrawErase',
+                    tooltip: 'Erase Boundary'
+                }
+            },
+            addHooks: function () {
+                resetDrawData()
+            }
+        });        
+        
         new L.Toolbar2.Control({
-            actions: [DrawAction],
+            actions: [DrawAction, EraseAction],
             position: 'topleft'
         }).addTo(map);
 

From 4fb04c19ae2e43690f6eb917217025fd0461f4fb Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Thu, 19 Dec 2024 12:34:46 -0500
Subject: [PATCH 50/59] feat: javascript and css is loaded locally

---
 localcontexts/static/css/leaflet.toolbar.min.css      |  1 +
 .../static/javascript/leaflet.toolbar.min.js          |  1 +
 templates/communities/draw-community-boundary.html    | 11 +++++------
 3 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 localcontexts/static/css/leaflet.toolbar.min.css
 create mode 100644 localcontexts/static/javascript/leaflet.toolbar.min.js

diff --git a/localcontexts/static/css/leaflet.toolbar.min.css b/localcontexts/static/css/leaflet.toolbar.min.css
new file mode 100644
index 000000000..767cb2bff
--- /dev/null
+++ b/localcontexts/static/css/leaflet.toolbar.min.css
@@ -0,0 +1 @@
+.leaflet-toolbar-0{list-style:none;padding-left:0;border:2px solid rgba(0,0,0,.2);border-radius:4px}.leaflet-toolbar-0>li{position:relative}.leaflet-toolbar-0>li>.leaflet-toolbar-icon{display:block;width:30px;height:30px;line-height:30px;margin-right:0;padding-right:0;border-right:0;text-align:center;text-decoration:none;background-color:#fff}.leaflet-toolbar-0>li>.leaflet-toolbar-icon:hover{background-color:#f4f4f4}.leaflet-toolbar-0 .leaflet-toolbar-1{display:none;list-style:none}.leaflet-toolbar-tip-container{margin:-16px auto 0;height:16px;position:relative;overflow:hidden}.leaflet-toolbar-tip{width:16px;height:16px;margin:-8px auto 0;background-color:#fff;border:2px solid rgba(0,0,0,.2);background-clip:content-box;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px}.leaflet-control-toolbar .leaflet-toolbar-1>li:last-child>.leaflet-toolbar-icon,.leaflet-popup-toolbar>li:last-child>.leaflet-toolbar-icon{border-top-right-radius:4px;border-bottom-right-radius:4px}.leaflet-control-toolbar>li>.leaflet-toolbar-icon{border-bottom:1px solid #ccc}.leaflet-control-toolbar>li:first-child>.leaflet-toolbar-icon{border-top-left-radius:4px;border-top-right-radius:4px}.leaflet-control-toolbar>li:last-child>.leaflet-toolbar-icon{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-bottom-width:0}.leaflet-control-toolbar .leaflet-toolbar-1{margin:0;padding:0;position:absolute;left:30px;top:0;white-space:nowrap;height:30px}.leaflet-control-toolbar .leaflet-toolbar-1>li{display:inline-block}.leaflet-control-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon{display:block;background-color:#919187;border-left:1px solid #aaa;color:#fff;font:11px/19px "Helvetica Neue",Arial,Helvetica,sans-serif;line-height:30px;text-decoration:none;padding-left:10px;padding-right:10px;height:30px}.leaflet-control-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon:hover{background-color:#a0a098}.leaflet-popup-toolbar{position:relative;box-sizing:content-box}.leaflet-popup-toolbar>li{float:left}.leaflet-popup-toolbar>li>.leaflet-toolbar-icon{border-right:1px solid #ccc}.leaflet-popup-toolbar>li:first-child>.leaflet-toolbar-icon{border-top-left-radius:4px;border-bottom-left-radius:4px}.leaflet-popup-toolbar>li:last-child>.leaflet-toolbar-icon{border-bottom-width:0;border-right:none}.leaflet-popup-toolbar .leaflet-toolbar-1{position:absolute;top:30px;left:0;padding-left:0}.leaflet-popup-toolbar .leaflet-toolbar-1>li>.leaflet-toolbar-icon{position:relative;float:left;width:30px;height:30px}
\ No newline at end of file
diff --git a/localcontexts/static/javascript/leaflet.toolbar.min.js b/localcontexts/static/javascript/leaflet.toolbar.min.js
new file mode 100644
index 000000000..bc2fef8da
--- /dev/null
+++ b/localcontexts/static/javascript/leaflet.toolbar.min.js
@@ -0,0 +1 @@
+!function(t,o,i){"use strict";t.L.Toolbar2=(L.Layer||L.Class).extend({statics:{baseClass:"leaflet-toolbar"},options:{className:"",filter:function(){return!0},actions:[]},initialize:function(t){L.setOptions(this,t),this._toolbar_type=this.constructor._toolbar_class_id},addTo:function(t){return this._arguments=[].slice.call(arguments),t.addLayer(this),this},onAdd:function(t){var o=t._toolbars[this._toolbar_type];0===this._calculateDepth()&&(o&&t.removeLayer(o),t._toolbars[this._toolbar_type]=this)},onRemove:function(t){0===this._calculateDepth()&&delete t._toolbars[this._toolbar_type]},appendToContainer:function(t){var o,i,e,n,s=this.constructor.baseClass+"-"+this._calculateDepth()+" "+this.options.className;for(this._container=t,this._ul=L.DomUtil.create("ul",s,t),this._disabledEvents=["click","mousemove","dblclick","mousedown","mouseup","touchstart"],i=0,n=this._disabledEvents.length;i<n;i++)L.DomEvent.on(this._ul,this._disabledEvents[i],L.DomEvent.stopPropagation);for(o=0,e=this.options.actions.length;o<e;o++)(new(this._getActionConstructor(this.options.actions[o])))._createIcon(this,this._ul,this._arguments)},_getActionConstructor:function(t){var o=this._arguments,i=this;return t.extend({initialize:function(){t.prototype.initialize.apply(this,o)},enable:function(o){i._active&&i._active.disable(),i._active=this,t.prototype.enable.call(this,o)}})},_hide:function(){this._ul.style.display="none"},_show:function(){this._ul.style.display="block"},_calculateDepth:function(){for(var t=0,o=this.parentToolbar;o;)t+=1,o=o.parentToolbar;return t}}),L.Evented||L.Toolbar2.include(L.Mixin.Events),L.toolbar={};var e=0;L.Toolbar2.extend=function(t){var o=L.extend({},t.statics,{_toolbar_class_id:e});return e+=1,L.extend(t,{statics:o}),L.Class.extend.call(this,t)},L.Map.addInitHook(function(){this._toolbars={}}),L.Toolbar2.Action=L.Handler.extend({statics:{baseClass:"leaflet-toolbar-icon"},options:{toolbarIcon:{html:"",className:"",tooltip:""},subToolbar:new L.Toolbar2},initialize:function(t){var o=L.Toolbar2.Action.prototype.options.toolbarIcon;L.setOptions(this,t),this.options.toolbarIcon=L.extend({},o,this.options.toolbarIcon)},enable:function(t){t&&L.DomEvent.preventDefault(t),this._enabled||(this._enabled=!0,this.addHooks&&this.addHooks())},disable:function(){this._enabled&&(this._enabled=!1,this.removeHooks&&this.removeHooks())},_createIcon:function(t,o,i){var e=this.options.toolbarIcon;this.toolbar=t,this._icon=L.DomUtil.create("li","",o),this._link=L.DomUtil.create("a","",this._icon),this._link.innerHTML=e.html,this._link.setAttribute("href","#"),this._link.setAttribute("title",e.tooltip),L.DomUtil.addClass(this._link,this.constructor.baseClass),e.className&&L.DomUtil.addClass(this._link,e.className),L.DomEvent.on(this._link,"click",this.enable,this),this._addSubToolbar(t,this._icon,i)},_addSubToolbar:function(t,o,i){var e=this.options.subToolbar,n=this.addHooks,s=this.removeHooks;e.parentToolbar=t,e.options.actions.length>0&&((i=[].slice.call(i)).push(this),e.addTo.apply(e,i),e.appendToContainer(o),this.addHooks=function(t){"function"==typeof n&&n.call(this,t),e._show()},this.removeHooks=function(t){"function"==typeof s&&s.call(this,t),e._hide()})}}),L.toolbarAction=function(t){return new L.Toolbar2.Action(t)},L.Toolbar2.Action.extendOptions=function(t){return this.extend({options:t})},L.Toolbar2.Control=L.Toolbar2.extend({statics:{baseClass:"leaflet-control-toolbar "+L.Toolbar2.baseClass},initialize:function(t){L.Toolbar2.prototype.initialize.call(this,t),this._control=new L.Control.Toolbar(this.options)},onAdd:function(t){this._control.addTo(t),L.Toolbar2.prototype.onAdd.call(this,t),this.appendToContainer(this._control.getContainer())},onRemove:function(t){L.Toolbar2.prototype.onRemove.call(this,t),this._control.remove?this._control.remove():this._control.removeFrom(t)}}),L.Control.Toolbar=L.Control.extend({onAdd:function(){return L.DomUtil.create("div","")}}),L.toolbar.control=function(t){return new L.Toolbar2.Control(t)},L.Toolbar2.Popup=L.Toolbar2.extend({statics:{baseClass:"leaflet-popup-toolbar "+L.Toolbar2.baseClass},options:{anchor:[0,0]},initialize:function(t,o){L.Toolbar2.prototype.initialize.call(this,o),this._marker=new L.Marker(t,{icon:new L.DivIcon({className:this.options.className,iconAnchor:[0,0]})})},onAdd:function(t){this._map=t,this._marker.addTo(t),L.Toolbar2.prototype.onAdd.call(this,t),this.appendToContainer(this._marker._icon),this._setStyles()},onRemove:function(t){t.removeLayer(this._marker),L.Toolbar2.prototype.onRemove.call(this,t),delete this._map},setLatLng:function(t){return this._marker.setLatLng(t),this},_setStyles:function(){for(var t,o,i,e=this._container,n=this._ul,s=L.point(this.options.anchor),a=n.querySelectorAll(".leaflet-toolbar-icon"),l=[],r=0,c=0,h=a.length;c<h;c++)a[c].parentNode.parentNode===n&&(l.push(parseInt(L.DomUtil.getStyle(a[c],"height"),10)),r+=Math.ceil(parseFloat(L.DomUtil.getStyle(a[c],"width"))),r+=Math.ceil(parseFloat(L.DomUtil.getStyle(a[c],"border-right-width"))));n.style.width=r+"px",this._tipContainer=L.DomUtil.create("div","leaflet-toolbar-tip-container",e),this._tipContainer.style.width=r+Math.ceil(parseFloat(L.DomUtil.getStyle(n,"border-left-width")))+"px",this._tip=L.DomUtil.create("div","leaflet-toolbar-tip",this._tipContainer),t=Math.max.apply(void 0,l),n.style.height=t+"px",o=parseInt(L.DomUtil.getStyle(this._tip,"width"),10),i=new L.Point(r/2,t+1.414*o),e.style.marginLeft=s.x-i.x+"px",e.style.marginTop=s.y-i.y+"px"}}),L.toolbar.popup=function(t){return new L.Toolbar2.Popup(t)}}(window,document);
\ No newline at end of file
diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index d2dc5221f..00e24f00d 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -1,6 +1,9 @@
 {% extends 'register-base.html' %} {% block title %} Add Community {% endblock %} {% load static %} {% block card %} {% load custom_api_tags %}
     <script src="{% static 'javascript/leaflet.js' %}"></script>
+    <script src="{% static 'javascript/leaflet.toolbar.min.js' %}"></script>
+    
     <link rel="stylesheet" href="{% static 'css/leaflet.css' %}">
+    <link rel="stylesheet" href="{% static 'css/leaflet.toolbar.min.css' %}">
     <style>
         #map {
             width: 100%;
@@ -198,10 +201,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
     </div>
     
     {% include 'snippets/modals/map-modal.html' %}
-<script src="https://cdn.jsdelivr.net/npm/leaflet-toolbar@0.4.0-alpha.2/dist/leaflet.toolbar.min.js"></script>
-<link href="https://cdn.jsdelivr.net/npm/leaflet-toolbar@0.4.0-alpha.2/dist/leaflet.toolbar.min.css" rel="stylesheet">
-
-        
     <script>
         //this is over Greenwich England
         let defaultLatLon = [51.479698, -0.007129];
@@ -292,8 +291,8 @@ <h1 class="mt-0">Add Community boundaries</h1>
             addHooks: function () {
                 resetDrawData()
             }
-        });        
-        
+        });
+
         new L.Toolbar2.Control({
             actions: [DrawAction, EraseAction],
             position: 'topleft'

From 88cf2703e7fa8b0d35d308a02d72a07e4e6d9255 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Thu, 19 Dec 2024 14:52:52 -0500
Subject: [PATCH 51/59] feat: drawing becomes a closed loop when first and last
 coordinates don't match

---
 .../communities/draw-community-boundary.html  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 00e24f00d..6c21e663e 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -242,11 +242,22 @@ <h1 class="mt-0">Add Community boundaries</h1>
             if (!drawingIsEnabled) {
                 return
             }
-            
-            // when drawing is finished, assign polyline lat-lon's to boundary
-            if (polyline._latlngs.length === 0) {
-                return  
+
+            // when no latlngs are present, then skip
+            if (polyline._latlngs.length === 0){
+                return
             }
+
+            const lastElementIndex = polyline._latlngs.length - 1
+            const firstElement = polyline._latlngs[0]
+            const lastElement = polyline._latlngs[lastElementIndex]
+
+            if (firstElement !== lastElement) {
+                // make this path into a closed loop
+                // by making the first and last points the same
+                polyline.addLatLng([firstElement.lat, firstElement.lng])
+            }
+
             // assign polyline data into boundary data  
             BoundaryData = polyline.getLatLngs().map((x) => [x.lat, x.lng]);
         });        

From 85254354cc346b3e2d8a68c8e84a739bcac06f79 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 09:48:29 -0500
Subject: [PATCH 52/59] feat: draw-community-boundary view includes the
 community name in the context

---
 communities/views.py | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/communities/views.py b/communities/views.py
index 6cd80bb86..67f0cb7bb 100644
--- a/communities/views.py
+++ b/communities/views.py
@@ -166,7 +166,11 @@ def community_boundary(request):
 @has_new_community_id
 @login_required(login_url='login')
 def draw_community_boundary(request):
-    return render(request, 'communities/draw-community-boundary.html')
+    community = get_community(request.session.get('new_community_id'))
+    context = {
+        'community_name': community.name,
+    }
+    return render(request, 'communities/draw-community-boundary.html', context)
 
 
 @has_new_community_id

From 0fbbefb0077fbf3303abe7efd28576589187a7ef Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 09:52:50 -0500
Subject: [PATCH 53/59] feat: used correct name for attribute

---
 communities/views.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/communities/views.py b/communities/views.py
index 67f0cb7bb..2c2f8b53b 100644
--- a/communities/views.py
+++ b/communities/views.py
@@ -168,7 +168,7 @@ def community_boundary(request):
 def draw_community_boundary(request):
     community = get_community(request.session.get('new_community_id'))
     context = {
-        'community_name': community.name,
+        'community_name': community.community_name,
     }
     return render(request, 'communities/draw-community-boundary.html', context)
 

From ae612ca16e114d4aa959b1118acd9d8276bbea0b Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 09:53:49 -0500
Subject: [PATCH 54/59] feat: button is enabled once user has drawn the
 boundary

---
 .../communities/draw-community-boundary.html  | 36 +++++--------------
 1 file changed, 8 insertions(+), 28 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 6c21e663e..377622d8a 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -214,7 +214,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
             }
         )
 
-        let BoundaryData = null
+        let BoundaryCoordinates = null
         var polyline = new L.Polyline([], {
             color: 'red',
             weight: 3,
@@ -259,7 +259,8 @@ <h1 class="mt-0">Add Community boundaries</h1>
             }
 
             // assign polyline data into boundary data  
-            BoundaryData = polyline.getLatLngs().map((x) => [x.lat, x.lng]);
+            BoundaryCoordinates = polyline.getLatLngs().map((x) => [x.lat, x.lng]);
+            enableContinueButton()
         });        
 
         map.on('mousedown', function(e){
@@ -436,33 +437,12 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
         async function setboundary() {
             try {
-                document.getElementById("community-boundary-continue-btn").classList.add("disabled-btn");
-                document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.add("spinner-container");
-                // do post call to get boundary
-                const href = document.querySelector('#community-boundary-continue-btn').getAttribute('href')
-                const slug = document.querySelector('#selected-title').getAttribute('data-slug')
-
-                const url = `{% url 'nld-data' %}?slug=${slug}`
-                const boundaryResponse = await fetch(url)
-                const boundaryData = await boundaryResponse.json()
-                document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.remove("spinner-container");
-                document.getElementById("community-boundary-continue-btn").classList.remove("disabled-btn");
-
-                if (!boundaryData.coordinates[0].length) {
-                    const errorMessage = 'Selected location does not have any Native Land boundary'
-                    alert(errorMessage)
-                    throw new Error(errorMessage)
-                }
-
-                const boundaryCoordinates = boundaryData.coordinates[0][0]
-                // reorder so (lon, lat)'s become (lat, lon)'s
-                boundaryCoordinates.map(row=>row.reverse())
-
+              
                 const payload = {
-                    source: boundaryData.description,
-                    name: slug,
-                    boundary: boundaryCoordinates,
-                    share_boundary_publicly: document.getElementById("share-boundary-publicly").checked
+                    source: 'drawn',
+                    name: {{ community_name }},
+                    boundary: BoundaryCoordinates,
+                    share_boundary_publicly: false
                 }
 
                 // do post call to set boundary in request

From 1b7e49355c4c24538f2ac82c86d94c0fa7623cea Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 10:28:54 -0500
Subject: [PATCH 55/59] feat: boundary coordinates get sent to the backend

---
 templates/communities/draw-community-boundary.html | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 377622d8a..889a90ffe 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -327,6 +327,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function resetDrawData() {
             polyline._setLatLngs([])
             polyline.redraw()
+            disableContinueButton()
         }
         
         function togglePencilSelection(){
@@ -411,7 +412,10 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function enableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
-
+        function disableContinueButton(){
+            document.querySelector('#community-boundary-continue-btn').classList.add('disabled-btn')
+        }
+        
         function setSearchResult(selectedText){
             /*
              this sets the search input to the result
@@ -440,7 +444,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
               
                 const payload = {
                     source: 'drawn',
-                    name: {{ community_name }},
+                    name: "{{ community_name }}",
                     boundary: BoundaryCoordinates,
                     share_boundary_publicly: false
                 }
@@ -457,9 +461,8 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 if (registrationResponse.status !== 201) {
                     throw new Error('Error Setting boundary')
                 }
-
-                // relocate to the window href url
-                window.location.href = href
+              
+                window.location.href = {% url 'dashboard' %}
 
             } catch (error) {
                 console.error('Error Fetching boundary:', error)

From 9d2324de3d7af36a0e5e6f45e4da19ca3c7746e4 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 10:30:41 -0500
Subject: [PATCH 56/59] feat: changed error message

---
 templates/communities/draw-community-boundary.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 889a90ffe..8a9b69147 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -465,7 +465,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 window.location.href = {% url 'dashboard' %}
 
             } catch (error) {
-                console.error('Error Fetching boundary:', error)
+                console.error('Error Setting boundary:', error)
             }
         }
     </script>

From 2b4944c008f3e06655ff2c65a3f8e9ad4a076861 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 10:45:22 -0500
Subject: [PATCH 57/59] feat: increased readability of JS code

---
 .../communities/draw-community-boundary.html  | 28 ++++++++++++++-----
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 8a9b69147..fdb2da755 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -202,6 +202,10 @@ <h1 class="mt-0">Add Community boundaries</h1>
     
     {% include 'snippets/modals/map-modal.html' %}
     <script>
+        /*
+        * Code controls drawing on map
+        * */
+        
         //this is over Greenwich England
         let defaultLatLon = [51.479698, -0.007129];
         let drawingIsEnabled = false;
@@ -357,7 +361,12 @@ <h1 class="mt-0">Add Community boundaries</h1>
             map.scrollWheelZoom.enable();
             map.boxZoom.enable();
         }
-
+    </script>
+    
+    <script>
+        /*
+        * Code controls selecting subcontinent on map
+        * */      
         function handleInputEvent(event, response) {
             let html = ''
             const textInput = event.target.value
@@ -396,6 +405,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
 
         const target = document.querySelector('#region-results')
         const inputTarget = document.querySelector('#region-container input.search')
+
         document.addEventListener('click', (event) => {
             const withinContainer = event.composedPath().includes(target)
             const clickedOnInputTarget = event.target === inputTarget
@@ -405,7 +415,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 hideSearchDropDown()
             }
         })
-
+        
         function hideSearchDropDown() {
            document.querySelector('#region-results').innerHTML = ''
         }
@@ -415,7 +425,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function disableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.add('disabled-btn')
         }
-        
         function setSearchResult(selectedText){
             /*
              this sets the search input to the result
@@ -423,7 +432,6 @@ <h1 class="mt-0">Add Community boundaries</h1>
              */
             document.querySelector('#region-container input.search').value = selectedText
         }
-
         function selectLocation() {
             const lat_lon = event.target.dataset.lat_lon.split(",").map(num => parseFloat(num))
             const title = event.target.dataset.title
@@ -438,10 +446,16 @@ <h1 class="mt-0">Add Community boundaries</h1>
             )
 
         }
-
+    </script>
+        
+    <script>
+        /*
+        * Code controls actions when user has draw boundary
+        * and clicks on the Continue button        
+        * */
         async function setboundary() {
             try {
-              
+
                 const payload = {
                     source: 'drawn',
                     name: "{{ community_name }}",
@@ -461,7 +475,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                 if (registrationResponse.status !== 201) {
                     throw new Error('Error Setting boundary')
                 }
-              
+
                 window.location.href = {% url 'dashboard' %}
 
             } catch (error) {

From 493b9f4dcb44d8fc392e0bba8eea807e0d7b572c Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 10:51:37 -0500
Subject: [PATCH 58/59] feat: continue button shows spinner to indicate
 processesing after being clicked

---
 templates/communities/draw-community-boundary.html | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index fdb2da755..7767f0348 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -422,6 +422,9 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function enableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
+        function enableContinueButtonSpinner(){           
+            document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.add("spinner-container");          
+        }
         function disableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.add('disabled-btn')
         }
@@ -476,6 +479,7 @@ <h1 class="mt-0">Add Community boundaries</h1>
                     throw new Error('Error Setting boundary')
                 }
 
+                enableContinueButtonSpinner()
                 window.location.href = {% url 'dashboard' %}
 
             } catch (error) {

From d8074a5d7c20bddd3c5fce9c721b6901dc0e0265 Mon Sep 17 00:00:00 2001
From: lc_hd <herbert.dawkins@localcontexts.org>
Date: Mon, 23 Dec 2024 12:45:14 -0500
Subject: [PATCH 59/59] feat: updated error handling

---
 .../communities/draw-community-boundary.html  | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/templates/communities/draw-community-boundary.html b/templates/communities/draw-community-boundary.html
index 7767f0348..39c37061f 100644
--- a/templates/communities/draw-community-boundary.html
+++ b/templates/communities/draw-community-boundary.html
@@ -422,12 +422,15 @@ <h1 class="mt-0">Add Community boundaries</h1>
         function enableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.remove('disabled-btn')
         }
-        function enableContinueButtonSpinner(){           
-            document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.add("spinner-container");          
-        }
         function disableContinueButton(){
             document.querySelector('#community-boundary-continue-btn').classList.add('disabled-btn')
         }
+        function enableContinueButtonSpinner(){           
+            document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.add("spinner-container");          
+        }
+        function disableContinueButtonSpinner(){           
+            document.querySelector("#community-boundary-continue-btn .fa-spinner").classList.remove("spinner-container");          
+        }        
         function setSearchResult(selectedText){
             /*
              this sets the search input to the result
@@ -458,7 +461,9 @@ <h1 class="mt-0">Add Community boundaries</h1>
         * */
         async function setboundary() {
             try {
-
+                enableContinueButtonSpinner()
+                disableContinueButton()
+              
                 const payload = {
                     source: 'drawn',
                     name: "{{ community_name }}",
@@ -476,14 +481,17 @@ <h1 class="mt-0">Add Community boundaries</h1>
                     })
 
                 if (registrationResponse.status !== 201) {
-                    throw new Error('Error Setting boundary')
+                    disableContinueButtonSpinner()                  
+                    enableContinueButton()                  
+                    throw new Error('Error, Response is Not 201')
                 }
-
-                enableContinueButtonSpinner()
+              
                 window.location.href = {% url 'dashboard' %}
 
             } catch (error) {
-                console.error('Error Setting boundary:', error)
+                disableContinueButtonSpinner()                  
+                enableContinueButton()                 
+                console.error('Error, Setting boundary:', error)
             }
         }
     </script>