ojuso-map/assets/js/map_minzoom.js
Anna Sidwell acfbb513de 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.
2018-10-13 01:44:03 -04:00

73 lines
2.0 KiB
JavaScript

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)
},
})