Add maximum altitude to display intervals + comments on the code

kalisio · May 24, 2024 · 06f624d · 06f624d
1 parent fe974ae
commit 06f624d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 10 deletions.
diff --git a/demo/contourlines.html b/demo/contourlines.html
@@ -7,8 +7,10 @@
 </head>
 <body>
 	<div id="map" style="position: absolute; top: 0; left:0; bottom:0; right: 0;">
-		<h2> <center> Please enter a limit altitude to highlight (in meters): 
-			<input type='text' id='selectedAltitude' size="5" style="text-align:center;" value="" /></center></h2>
+		<h2> <center> Please enter a minimum limit altitude to highlight: 
+			<input type='text' id='minimumAltitude' size="5" style="text-align:center;" value="" /> 
+			and a maximum: 
+			<input type='text' id='maximumAltitude' size="5" style="text-align:center;" value="" /> (in meters)</center></h2>
 	</div>
 
 	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

diff --git a/demo/contourlines.js b/demo/contourlines.js
@@ -1,16 +1,29 @@
 async function run () {
+
+  // define map
   const map = L.map('map', {
     center: [42.725385312747186, 1.833743432010808],
     zoom: 10,
     zoomControl: false,
     fullscreenControl: true
   })
-
+
+  // define function for a dynamic color rendering according entered altitude
   function dynamicColor(z, f) {
-    if (document.getElementById("selectedAltitude").value != "" && f.props.height >= document.getElementById("selectedAltitude").value) return "red"
+    if (document.getElementById("minimumAltitude").value != "" && 
+      document.getElementById("maximumAltitude").value != "" && 
+      f.props.height >= document.getElementById("minimumAltitude").value && 
+      f.props.height <= document.getElementById("maximumAltitude").value) return "red"
+    if (document.getElementById("minimumAltitude").value != "" && 
+      document.getElementById("maximumAltitude").value == "" && 
+      f.props.height >= document.getElementById("minimumAltitude").value) return "red"
+    if (document.getElementById("minimumAltitude").value == "" && 
+      document.getElementById("maximumAltitude").value != "" && 
+      f.props.height <= document.getElementById("maximumAltitude").value) return "red"
     else return "black"
   }
 
+  // define style rules for contourlines
   let paintRules = [
     {
       dataLayer: "contour",
@@ -19,38 +32,44 @@ async function run () {
         width: 1.1,
         opacity: 0.4,
       }),
-      filter: (z,f) => { return f.props.height > 0 && f.props.nth_line in [5, 10] == true }
+      filter: (z,f) => { return f.props.height > 0 && f.props.nth_line in [5, 10] == true}
     },
     {
       dataLayer: "contour",
       symbolizer: new protomapsL.LineSymbolizer({
         color: dynamicColor,
         width: 0.6,
-        opacity: 0.3,        
+        opacity: 0.3,
       }),
       filter: (z,f) => { return f.props.height > 0 && f.props.nth_line in [5, 10] == false}
     },
     ]
 
+  // define style rules for labels
   let labelRules = [
     {
       dataLayer: "contour",
       symbolizer: new protomapsL.LineLabelSymbolizer({
-          labelProps:["height"],
+        labelProps:["height"],
         }),
       filter: (z,f) => { return f.props.nth_line in [5, 10] == true}
     }
   ]
 
-  console.log(labelRules)
-
+  // display the layer by curling the pmtiles file and fitting it with the stylesheet
   let layer = protomapsL.leafletLayer({
     url:'http://127.0.0.1:8081/contourlines-france.pmtiles',
     paintRules,
     labelRules,
   }).addTo(map)
 
-  document.getElementById("selectedAltitude").addEventListener('keyup', function(e){
+  // refresh the page when new data is entered
+  document.getElementById("minimumAltitude").addEventListener('keyup', function(e){
+    if(e.key == 'Enter')
+    layer.redraw();
+  })
+
+  document.getElementById("maximumAltitude").addEventListener('keyup', function(e){
     if(e.key == 'Enter')
     layer.redraw();
   })