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

This commit is contained in:
Anna Sidwell 2018-04-15 21:48:03 +10:00
parent e5235fb871
commit 087eb1b1c5
3 changed files with 89 additions and 22 deletions

View File

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

View File

@ -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

View File

@ -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>