Bring back the calculate button and zap results

open-innovations · Nov 29, 2023 · 311232b · 311232b
1 parent 87f8b4f
commit 311232b
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 15 deletions.
diff --git a/index.html b/index.html
@@ -51,13 +51,13 @@ <h1>Population calculator</h1>
 					</svg>
 				</div>
 			</div>
-
 			<div id="message"></div>
 
 		</div>
 		<div class="b6-bg padded">
 			<div class="holder" style="text-align:center;">
-				<!--button id="calculate" class="c9-bg" style="font-size: 1.5em;margin-bottom:1em;">Calculate</button-->
+
+				<button id="calculate" class="c9-bg" style="font-size: 1.5em;margin-bottom:1em;">Calculate</button>
 				<div id="output"></div>
 			</div>
 		</div>

diff --git a/resources/leaflet.circle.js b/resources/leaflet.circle.js
@@ -82,20 +82,21 @@
 		},
 		set: function(opt){
 			if(!opt || !this._active) return this;
-
 			if(opt.radius) this.setRadius(opt.radius);
 			if(typeof opt.latitude==="number" && typeof opt.longitude==="number") this.setPosition({'latlng':{'lat':opt.latitude,'lng':opt.longitude}})
 
 			this.fire('update',this);
 		},
 		setRadius: function(v){
-			if(typeof v==="string") v = parseFloat(v);
-			v = Math.min(v,this.options.max||10);
-			v = Math.max(v,this.options.min||1);
-			this._inp.value = v;
-			this._val.querySelector('span').innerHTML = v;
-			this.options.radius = v;
-			this._circle.setRadius(1000*this.options.radius);
+			if(this._active){
+				if(typeof v==="string") v = parseFloat(v);
+				v = Math.min(v,this.options.max||10);
+				v = Math.max(v,this.options.min||1);
+				this._inp.value = v;
+				this._val.querySelector('span').innerHTML = v;
+				this.options.radius = v;
+				this._circle.setRadius(1000*this.options.radius);
+			}
 		},
 		setPosition: function(e){
 			if(this._active){
@@ -105,7 +106,6 @@
 				}
 				this.options.centre = e.latlng;
 				this._circle.setLatLng(this.options.centre);
-				this._map.fitBounds(this._circle.getBounds());
 			}
 		},
 		onAdd: function(map){
@@ -115,10 +115,9 @@
 
 			function updateValue(v){
 				if(v.target) v = v.target.value;
-				_obj.setRadius(v);
-				_obj.fire('update',this);
+				_obj.set({'radius':v});
 			}
-			if(typeof ev!=="function") ev = function(e){ _obj.setPosition(e); _obj.fire('update',this); }
+			if(typeof ev!=="function") ev = function(e){ _obj.set({'latitude':e.latlng.lat,'longitude':e.latlng.lng}); }
 
 			this._container = L.DomUtil.create('div', 'leaflet-control leaflet-control-circle');
 			this._container.innerHTML = '<div class="leaflet-bar"><form><button class="leaflet-button" title="Create a circle" aria-describedby="circle-panel-help" aria-label="Create a circle"><svg xmlns="http://www.w3.org/2000/svg" overflow="visible" width="16" height="16" fill="currentColor" fill-opacity="0.4" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7"></circle></svg></button><div class="control" style="display:none;"><input class="radius" id="radius" name="radius" value="'+(this.options.value)+'" type="range" min="'+(this.options.min||1)+'" max="'+(this.options.max||10)+'" /></div><div class="value" style="display:none;"><span></span>km</div></div></form></div>';

diff --git a/resources/population-calculator.js b/resources/population-calculator.js
@@ -438,11 +438,13 @@
 			});
 			this.circleControl.addTo(this.map);
 			this.circleControl.on('update',function(e){
+				_obj.clearResults();
 				if(e.options.circle){
 					// Remove any existing polygons
 					if(_obj.areaSelection.polygon) _obj.areaSelection.deactivate();
 				}
-				_obj.calculate();
+				// Set bounds
+				_obj.map.fitBounds(_obj.circleControl._circle.getBounds());
 			}).on('activate',function(e){
 				// Remove any existing polygons
 				if(_obj.areaSelection.polygon) _obj.areaSelection.deactivate();
@@ -455,11 +457,14 @@
 				_obj.clearResults();
 			});
 
+
+
 			// Add area selection
 			this.areaSelection = new window.leafletAreaSelection.DrawAreaSelection({
 				'position': 'topleft',
 				'onPolygonReady':function(a){
 					_obj.logger.log('INFO','onPolygonReady',a);
+					_obj.clearResults();
 					if(!_obj._geojson){
 						// Need to build the GeoJSON version
 						var feature = {'type':'Feature','properties':{},'geometry':{'type':'Polygon','coordinates':[[]]}};
@@ -538,6 +543,7 @@
 				}else if(qs.radius){
 					this.circleControl.activate();
 					this.circleControl.set({'latitude':parseFloat(qs.latitude),'longitude':parseFloat(qs.longitude),'radius':qs.radius});
+					this.calculate();
 				}
 			}
 		};