show coordinates in the map for projected and geographic 2D (#51)

Author: jjimenezshaw

scripts/templates/base.css

@@ -107,6 +107,13 @@ padding: 10px;
     max-width: 90%;
 }
 
+#map_coord_container {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+}
+
 .map-container {
     width:512px;
     height:256px;
@@ -116,6 +123,19 @@ padding: 10px;
     border: 2px solid darkblue;
 }
 
+#coordinates {
+    margin:10px;
+}
+#coordinates .number {
+    text-align: end;
+}
+#coordinates table {
+    padding-bottom: 1em;
+}
+#drag_marker {
+    color: gray;
+}
+
 li {
     clear:left;
 }

scripts/templates/base.js

@@ -1,12 +1,36 @@
-function init_map(area_of_use) {
+async function init_map(area_of_use, crs_type, id) {
     if (!area_of_use) return;
-    let map = L.map('map').setView([0, 0], 1);
+    let map = L.map('map');
     let osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
         maxZoom: 18,
     }).addTo(map);
     let rect = makeRectangle(area_of_use, 'green').addTo(map);
     map.fitBounds(rect.getBounds());
+    if (crs_type === 'PROJECTED_CRS' || crs_type === 'GEOGRAPHIC_2D_CRS') {
+        const decimals = crs_type === 'PROJECTED_CRS' ? 1 : 6;
+        const proj = new Proj();
+        await proj.init();
+        const transformer = proj.create_transformer_from_crs({source_crs: 'EPSG:4326', target_crs: id});
+        const axes = proj.crs_axes({crs: id});
+        document.querySelector('#coordinates table tr:nth-child(1) .name').innerText = axes[0].name + ': ';
+        document.querySelector('#coordinates table tr:nth-child(2) .name').innerText = axes[1].name + ': ';
+
+        const marker = L.marker(rect.getCenter(), {draggable: true}).addTo(map);
+        marker.on('move', (e) => {
+            let res = [[NaN, NaN]];
+            try {
+                res = transformer.transform({points: [[e.latlng.lat, e.latlng.lng]]});
+            } catch (_e) {}
+            document.querySelector('#coordinates table tr:nth-child(1) .number').innerText = res[0][0].toFixed(decimals);
+            document.querySelector('#coordinates table tr:nth-child(2) .number').innerText = res[0][1].toFixed(decimals);
+        });
+        marker.setLatLng(rect.getCenter());
+        marker.once('move', (e) => {
+            console.log(proj.proj_info());
+            document.getElementById('drag_marker').classList.add('hidden');
+        });
+    }
 }
 
 function makeRectangle (area_of_use, color) {

scripts/templates/crs.tmpl

@@ -98,7 +98,26 @@
         </div>
 
         {%- if bounds_map %}
+        <div id="map_coord_container">
         <div id="map" class="map-container"></div>
+        {%- if crs_type in ['PROJECTED_CRS', 'GEOGRAPHIC_2D_CRS'] %}
+        <div id="coordinates">
+            <div>Marker coordinates <span id="drag_marker">(Drag to update)</span></div>
+            <table>
+                <tr>
+                    <td class="name"></td>
+                    <td class="number"></td>
+                </tr>
+                <tr>
+                    <td class="name"></td>
+                    <td class="number"></td>
+                </tr>
+            </table>
+            <a href="https://jjimenezshaw.github.io/wasm-proj/transform.html?sh=EPSG%3A4326&th={{ authority }}%3A{{ code }}"
+                target="_blank" >Transform coordinates</a>
+        </div>
+        </div>
+        {%- endif %}
         {%- endif %}
     </div>
 
@@ -107,8 +126,13 @@
     </div>
 
     <script src="{{ home_dir }}/base.js"></script>
+    {%- if crs_type in ['PROJECTED_CRS', 'GEOGRAPHIC_2D_CRS'] %}
+    <script src="https://jjimenezshaw.github.io/wasm-proj/proj/wasm/projModule.js"></script>
+    <script src="https://jjimenezshaw.github.io/wasm-proj/proj/projFunctions.js"></script>
+    {%- endif %}
+
     <script>
-        init_map([{{ bounds_map }}])
+        init_map([{{ bounds_map }}], '{{ crs_type }}', '{{ authority }}:{{ code }}')
     </script>
 </body>
 </html>