feat: display field

map_location/static/map-location.js

@@ -2,6 +2,7 @@ function MapLocationInit(mapId, options = {}) {
     const valField = document.getElementById(mapId + '_value');
     const theMap = document.getElementById(mapId + '_map');
     const btnAction = document.getElementById(mapId + '_btn');
+    const display = document.getElementById(mapId + '_disp');
 
     function isZero(latlng) {
         return latlng.lat === 0 && latlng.lng === 0;
@@ -32,6 +33,7 @@ function MapLocationInit(mapId, options = {}) {
     const marker = L.marker(loadPos(), { draggable: true });
     marker.on('move', function (e) {
         valField.value = asString(e.latlng);
+        updatePrint();
     });
     map.on('click', function (e) {
         if (isZero(marker.getLatLng())) {
@@ -53,7 +55,17 @@ function MapLocationInit(mapId, options = {}) {
         btnAction.innerText = initial ? 'Set center' : 'Reset';
     }
 
+    function updatePrint() {
+        const prefix = valField.value
+            ? ('pin: ' + valField.value)
+            : ('center: ' + asString(map.getCenter()));
+        display.innerText = prefix + ' zoom: ' + map.getZoom();
+    }
+    map.on('zoomend', updatePrint);
+    map.on('move', updatePrint);
+
     setMapState(isZero(marker.getLatLng()));
+    updatePrint();
 
     if (valField.value) {
         map.setView(valField.value.split(','), options.markerZoom || 18);

map_location/templates/forms/map-location.html

@@ -2,6 +2,7 @@
   <input name="{{ widget.name }}" id="{{id}}_value" type="hidden" value="{{ widget.value|default:'' }}"  />
   <div id="{{id}}_map" style="width: 100%; height: 400px"></div>
   <a href="" id="{{id}}_btn"></a>
+  <span id="{{id}}_disp" style="opacity: 0.5; margin-left: 1em"></span>
   <script>
     MapLocationInit("{{id}}", {{ map_options|safe }});
   </script>