Add new countries = big version

pvernier · Jun 21, 2024 · 5879987 · 5879987
1 parent 6ada735
commit 5879987
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 4 deletions.
diff --git a/rimap/big.css b/rimap/big.css
@@ -0,0 +1,57 @@
+body,
+html {
+  margin: 0;
+  padding: 0;
+}
+* {
+  box-sizing: border-box;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+}
+
+.header_item p {
+  margin: 0;
+}
+
+#container {
+  display: grid;
+  grid-template-rows: 5% 95%;
+  width: 100%;
+  height: 100%;
+  font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+}
+#selection {
+  display: grid;
+  justify-items: center;
+  /* align-items: center; */
+  background-color: #f0f0f0;
+}
+
+.select_country {
+  width: 100px;
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+  /* border: 1px solid #bdbdbd; */
+}
+
+#main {
+  margin: 0.5em;
+}
+
+a.mapboxgl-ctrl-logo {
+  display: none;
+}
+
+.mapboxgl-ctrl-attrib-inner {
+  display: none;
+}
+
+.mapboxgl-ctrl-bottom-right {
+  display: none;
+}
diff --git a/rimap/big.html b/rimap/big.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>RIMAP country map</title>
+    <meta
+      name="viewport"
+      content="initial-scale=1,maximum-scale=1,user-scalable=no"
+    />
+    <link
+      href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css"
+      rel="stylesheet"
+    />
+    <link
+      href="big.css"
+      rel="stylesheet"
+    />
+    <script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script>
+    </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="selection">
+        <div class="header_item">
+          <p>Select a country: <span id="sp_country"></span></p>
+        <select id="select_country">
+          <option value="DZA">Algeria</option>
+          <option value="AFG">Afghanistan</option>
+          <option value="BGD">Bangladesh</option>
+          <option value="BRA">Brazil</option>
+          <option value="BFA">Burkina Faso</option>
+          <option value="BDI">Burundi</option>
+          <option value="TCD">Chad</option>
+          <option value="CHL">Chile</option>
+          <option value="CHN">China</option>
+          <option value="COL">Colombia</option>
+          <option value="CRI">Costa Rica</option>
+          <option value="COD">Democratic Republic of the Congo</option>
+          <option value="DNK">Denmark</option>
+          <option value="DJI">Djibouti</option>
+          <option value="GNQ">Equatorial Guinea</option>
+          <option value="ETH">Ethiopia</option>
+          <option value="FRA">France</option>
+          <option value="HTI">Haiti</option>
+          <option value="IND">India</option>
+          <option value="IDN">Indonesia</option>
+          <option value="KEN">Kenya</option>
+          <option value="LBN">Lebanon</option>
+          <option value="LBR">Liberia</option>
+          <option value="MLI">Mali</option>
+          <option value="MEX">Mexico</option>
+          <option value="MOZ">Mozambique</option>
+          <option value="NER">Niger</option>
+          <option value="RWA">Rwanda</option>
+          <option value="COG">Republic of the Congo</option>
+          <option value="TGO">Togo</option>
+          <option value="UGA">Uganda</option>
+          <option value="GBR">United Kingdom</option>
+          <option value="USA">United States of America</option>
+        </select>
+        </div>
+
+      </div>
+
+      <div id="main">
+        <div id="map"></div>
+      </div>      
+    </div>
+
+    </div> 
+
+    <script src="main.js"></script>
+
+
+  </body>
+</html>
diff --git a/rimap/index.html b/rimap/index.html
@@ -28,7 +28,9 @@
           <option value="AFG">Afghanistan</option>
           <option value="BGD">Bangladesh</option>
           <option value="BRA">Brazil</option>
+          <option value="BFA">Burkina Faso</option>
           <option value="BDI">Burundi</option>
+          <option value="TCD">Chad</option>
           <option value="CHL">Chile</option>
           <option value="CHN">China</option>
           <option value="COL">Colombia</option>
@@ -44,9 +46,12 @@
           <option value="IDN">Indonesia</option>
           <option value="KEN">Kenya</option>
           <option value="LBN">Lebanon</option>
+          <option value="LBR">Liberia</option>
           <option value="MLI">Mali</option>
+          <option value="MEX">Mexico</option>
           <option value="MOZ">Mozambique</option>
           <option value="NER">Niger</option>
+          <option value="RWA">Rwanda</option>
           <option value="COG">Republic of the Congo</option>
           <option value="TGO">Togo</option>
           <option value="UGA">Uganda</option>

diff --git a/rimap/main.js b/rimap/main.js
@@ -15,22 +15,39 @@ async function fetch_data(iso) {
 
 // call the function asynchronously
 fetch_data(country).then((data) => {
+  const extentLong = data.extent.xmax - data.extent.xmin;
+  const extentLat = data.extent.ymax - data.extent.ymin;
+  const margin = 0.01;
+
+  const Xmax = data.extent.xmax + extentLong * margin;
+  const Xmin = data.extent.xmin - extentLong * margin;
+  const Ymax = data.extent.ymax + extentLat * margin;
+  const Ymin = data.extent.ymin - extentLat * margin;
+
   const map = new mapboxgl.Map({
     container: "map", // container ID
     style: "mapbox://styles/unhcr/ckvl4xy2mj45z15mpkq6w2nv8", // style URL
     bounds: [
-      [data.extent.xmin, data.extent.ymin],
-      [data.extent.xmax, data.extent.ymax],
+      [Xmin, Ymin],
+      [Xmax, Ymax],
     ],
   });
   select_country.addEventListener("change", update_map);
 
   function update_map() {
     const val_country = select_country.value;
     fetch_data(val_country).then((data) => {
+      const extentLong = data.extent.xmax - data.extent.xmin;
+      const extentLat = data.extent.ymax - data.extent.ymin;
+      const margin = 0.01;
+
+      const Xmax = data.extent.xmax + extentLong * margin;
+      const Xmin = data.extent.xmin - extentLong * margin;
+      const Ymax = data.extent.ymax + extentLat * margin;
+      const Ymin = data.extent.ymin - extentLat * margin;
       map.fitBounds([
-        [data.extent.xmin, data.extent.ymin],
-        [data.extent.xmax, data.extent.ymax],
+        [Xmin, Ymin],
+        [Xmax, Ymax],
       ]);
     });
   }