Add points of interest

Do a bunch of refactoring in the process.  Current display on homepage
is a little shonky but that can be improved when there is something
using it.

assets/js/map_minzoom.js

@@ -0,0 +1,72 @@
+ZoomHelpText = L.Control.extend({
+    options: {
+        position: 'bottomleft'
+    },
+    onAdd: function (map) {
+        return L.DomUtil.create('div', 'minzoomhelptext')
+    },
+    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(
+      django.gettext("Please zoom in further to place a marker on the map.")
+    )
+  },
+
+  zoomLevelOk: function() {
+    if (this._controlsShown !== true) {
+      this._map.addControl(this._drawControl)
+      this._controlsShown = true
+    }
+
+    this._zoomHelpText.setContent(
+      django.gettext("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)
+
+    // 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()
+      }
+    })
+
+    // Respond to underlying text field changing
+    const textarea = document.getElementById(this.options.fieldid)
+    textarea.addEventListener('change', evt => {
+      this.load()
+    })
+
+    const triggerChange = evt => {
+      document.getElementById('case-study-form').dispatchEvent(new Event('dirty'))
+    }
+    map.on(L.Draw.Event.CREATED, triggerChange)
+    map.on(L.Draw.Event.EDITED, triggerChange)
+    map.on(L.Draw.Event.DELETED, triggerChange)
+  },
+})