Require high zoom level to select project location, closes #56

apps/map/forms.py

@@ -10,6 +10,10 @@ from leaflet.forms.widgets import LeafletWidget
 from .models import CaseStudy
 
 
+class MinimumZoomWidget(LeafletWidget):
+    geometry_field_class = 'MinimumZoomField'
+
+
 class BaseCaseStudyForm(forms.models.ModelForm):
     """Base form class for the CaseStudy model."""
     def __init__(self, *args, **kwargs):
@@ -26,7 +30,11 @@ class BaseCaseStudyForm(forms.models.ModelForm):
         model = CaseStudy
         fields = '__all__'
         widgets = {
-            'location': LeafletWidget(attrs={}),
+            'location': MinimumZoomWidget(attrs={
+                'settings_overrides': {
+                    'SCALE': False
+                }
+            }),
             'official_project_documents': forms.ClearableFileInput(attrs={'multiple': True}),
             'other_documents': forms.ClearableFileInput(attrs={'multiple': True}),
             'shapefiles': forms.ClearableFileInput(attrs={'multiple': True}),

apps/map/models.py

@@ -252,9 +252,7 @@ class CaseStudy(models.Model):
 
     # N/A - Not explicitly listed in spec
     location = models.PointField(
-        verbose_name=_("Project location"),
-        help_text=_("Place a marker using the tools on the left of the map. Zoom in as far as you can so the placement \
-                    is accurate (important)")
+        verbose_name=_("Project location")
     )
 
     # 1.2

apps/map/templates/map/form.html

@@ -10,8 +10,8 @@
   {% leaflet_css %}
   <style> html, body, #main { width: 100; height:100%; } </style>
 
-<style>
-.savebutton {
+  <style>
+  .savebutton {
     position: fixed;
     bottom: 0;
     padding: 8px 15px;
@@ -20,16 +20,24 @@
     background-color: hsla(111, 25%, 84%, 1);
     border-top-right-radius: 5px;
     border-top-left-radius: 5px;
-}
+  }
 
-.savebutton--icon { margin-left: 15px; margin-right: 2px; }
-.savebutton--icon-failed { color: #d9534f; }
-.savebutton--details { font-style: italic; }
+  .savebutton--icon { margin-left: 15px; margin-right: 2px; }
+  .savebutton--icon-failed { color: #d9534f; }
+  .savebutton--details { font-style: italic; }
 
-.draftprompt { display: none; }
-.draftprompt--delete { margin-left: 10px; }
-.draftprompt--details { margin-left: 10px; font-weight: bold; }
-</style>
+  .draftprompt { display: none; }
+  .draftprompt--delete { margin-left: 10px; }
+  .draftprompt--details { margin-left: 10px; font-weight: bold; }
+
+  .zoomhelptext {
+    font-size: 14px;
+    background-color: rgba(255, 255, 255, 80%);
+    padding: 2px 10px;
+    border: 1px solid #ccc;
+    font-weight: bold;
+  }
+  </style>
 {% endblock %}
 
 {% block page_title %}{% trans "Submit a Case Study" %} - {{ block.super }}{% endblock %}
@@ -53,16 +61,67 @@
 
 {% block scripts %}
   {% leaflet_js %}
-
   <script>
-    YourGeometryField = L.GeometryField.extend({
-      addTo: function (map) {
-        L.GeometryField.prototype.addTo.call(this, map);
-        // Customize map for field
-        console.log(this);
+    ZoomHelpText = L.Control.extend({
+        options: {
+            position: 'bottomleft'
+        },
+        onAdd: function (map) {
+            return L.DomUtil.create('div', 'zoomhelptext')
+        },
+        setContent: function (content) {
+            this.getContainer().innerHTML = content
+        }
+    })
+
+    // See GeometryField source (static/leaflet/leaflet.forms.js) to override more stuff...
+    MinimumZoomField = L.GeometryField.extend({
+      zoomLevelTooLow: function() {
+        if (this._controlsShown !== false) {
+          this._map.removeControl(this._drawControl)
+          this._controlsShown = false
+        }
+
+        this._zoomHelpText.setContent(
+          "{% trans "Please zoom in further to place a marker on the map." %}"
+        )
       },
-      // See GeometryField source (static/leaflet/leaflet.forms.js) to override more stuff...
-    });
+
+      zoomLevelOk: function() {
+        if (this._controlsShown !== true) {
+          this._map.addControl(this._drawControl)
+          this._controlsShown = true
+        }
+
+        this._zoomHelpText.setContent(
+          "{% trans "Please use the marker tool on the left to select a location." %}"
+        )
+      },
+
+      addTo: function (map) {
+        // super()
+        L.GeometryField.prototype.addTo.call(this, map)
+        this._controlsShown = true
+        this._map = map
+
+        // Add a help text control
+        this._zoomHelpText = new ZoomHelpText().addTo(map)
+        console.log(this._zoomHelpText)
+
+        // Only allow editing past a certain zoom level (see #56)
+        // Remove the edit controls
+        this.zoomLevelTooLow()
+
+        // Enable or disable depending on zoom level
+        map.addEventListener('zoomend', evt => {
+          if (map.getZoom() >= 13) {
+            this.zoomLevelOk()
+          } else {
+            this.zoomLevelTooLow()
+          }
+        })
+      },
+    })
   </script>
 
   <!-- Conditional logic for hiding and un-hiding fields. -->
@@ -456,6 +515,8 @@ function initDrafts() {
   })
 }
 
+// https://github.com/snikch/jquery.dirtyforms
+
 initDrafts()
 </script>