From 097d427488af881b56c0429e7c17b5be00fd97f2 Mon Sep 17 00:00:00 2001
From: Arun Ganesh <arun.planemad@gmail.com>
Date: Tue, 5 Dec 2023 01:35:31 +0530
Subject: [PATCH] Add user ip datails to dataset

---
 js/chennai.js        | 90 +++++++++++++++++---------------------------
 js/config.js         |  2 +-
 js/data/mapLayers.js | 22 +----------
 3 files changed, 37 insertions(+), 77 deletions(-)

diff --git a/js/chennai.js b/js/chennai.js
index b8f0b1e..b8831a9 100644
--- a/js/chennai.js
+++ b/js/chennai.js
@@ -1,5 +1,10 @@
 // Simple map
-var SELECTED_ROADS_SOURCE;
+let SELECTED_ROADS_SOURCE;
+
+let user = {
+  ip : null,
+  location : null
+}
 
 mapboxgl.accessToken = PUBLIC_ACCESS_TOKEN;
 var map = new mapboxgl.Map({
@@ -8,37 +13,43 @@ var map = new mapboxgl.Map({
   hash: true
 });
 
+// Find user details to add to contributed data
+fetch('https://cloudflare.com/cdn-cgi/trace')
+.then(resp => resp.text())
+.then(data => {
+
+userIpMatch = data.match(/ip=([\d.]+)/);
+userLocationMatch = data.match(/colo=([\d.]+)/);
+
+user.location = userLocationMatch ? userLocationMatch[1] : null;
+user.ip = userIpMatch ? userIpMatch[1] : null;
+
+})
+
 map.off('tile.error', map.onError);
+
 // Add zoom and rotation controls to the map.
 map.addControl(new mapboxgl.NavigationControl());
 
+// Add geolocate control to the map.
+map.addControl(
+  new mapboxgl.GeolocateControl({
+  positionOptions: {
+  enableHighAccuracy: true
+  },
+  // When active the map will receive updates to the device's location as it changes.
+  trackUserLocation: true,
+  // Draw an arrow next to the location dot to indicate which direction the device is heading.
+  showUserHeading: true
+  })
+  );
+
 map.on('style.load', function (e) {
 
   addSourcesAndLayers();
 
   getDataSet();
 
-  // map.on('click', function (e) {
-  //   map.featuresAt(e.point, {
-  //       radius: 10,
-  //       layer: LOAD_INFO_LAYERS,
-  //       includeGeometry: true
-  //   }, loadInfo);
-  // });
-
-  // Update map legend from styles
-  $('[data-map-layer]').each(function () {
-    // Get the color of the feature from the map
-    var obj = $(this).attr('data-map-layer');
-
-    try {
-      var color = map.getPaintProperty(obj, 'circle-color');
-      // Set the legend color
-      $(this).prepend('<div class="map-legend-circle" style="background:"' + array2rgb(color) + '></div>');
-    } catch (e) {
-      return;
-    }
-  });
 });
 
 function getDataSet(startID) {
@@ -105,6 +116,8 @@ function addRoad(data, addedRoads, addedFeatures, features) {
   };
   tempObj.properties['is_flooded'] = true;
   tempObj.properties['timestamp'] = Date.now();
+  tempObj.properties['ip'] = user.ip;
+  tempObj.properties['location'] = user.location;
   tempObj.id = md5(JSON.stringify(tempObj));
 
   var url = DATASETS_BASE + 'features/' + tempObj.id + '?access_token=' + DATASETS_ACCESS_TOKEN;
@@ -204,42 +217,9 @@ function selectionHandler(data) {
   });
 }
 
-function loadInfo(err, features) {
-  if (err) throw err;
-
-  if (features.length > 0) {
-    var popupHTML = '<h5>' + features[0].properties.Name + '</h5><p>' + $('[data-map-layer=' + features[0].layer.id + ']').html() + '</p>';
-
-    var popup = new mapboxgl.Popup();
-
-    popup
-      .setLngLat(features[0].geometry.coordinates)
-      .setHTML(popupHTML)
-      .addTo(map);
-  }
-}
-
 function updateFeatureCount(data) {
   $('#feature-count').toggleClass('loading');
   $('#feature-count').html(data.features.length);
   $('#feature-count').toggleClass('loading');
 }
 
-function array2rgb(color) {
-  // Combine and return the values
-  return 'rgba(' + color.map(function (x) {
-    return x * 255;
-  }).join() + ')';
-}
-
-$(function () {
-  $('#sidebar').mCustomScrollbar({
-    theme: 'rounded-dots',
-    scrollInertia: 100,
-    callbacks: {
-      onInit: function () {
-        $('#sidebar').css('overflow', 'auto');
-      }
-    }
-  });
-});
diff --git a/js/config.js b/js/config.js
index 638f7c2..4f07a1e 100644
--- a/js/config.js
+++ b/js/config.js
@@ -2,5 +2,5 @@ var DATASET_ID = 'clpqxs1d31ym31umqlq5yaop5';
 var DATASETS_BASE = 'https://api.mapbox.com/datasets/v1/chennaiflood/' + DATASET_ID + '/';
 var DATASETS_ACCESS_TOKEN = 'sk.eyJ1IjoiY2hlbm5haWZsb29kIiwiYSI6ImNscHF4dXpxdTA0cGMybG84NDIwd3Z6N24ifQ.R40WZ0N2V_C7HgfKOhCPKg';
 var PUBLIC_ACCESS_TOKEN = 'pk.eyJ1IjoiY2hlbm5haWZsb29kIiwiYSI6ImNscHF4d20wdDA2cG8yaXA1aDIzaGNoYmcifQ.6gd6zLtZC3oSZj9nG5zxCQ';
-var STYLESHEET = 'mapbox://styles/planemad/cih4qzr0w0012awltzvpie7qa';
+var STYLESHEET = 'mapbox://styles/planemad/clpr7hshs013b01qt7t6ehr92';
 var LOAD_INFO_LAYERS = ['chennai-relief-camps', 'chennai-relief-camps-22nov'];
diff --git a/js/data/mapLayers.js b/js/data/mapLayers.js
index 9ab28ed..afd3a75 100644
--- a/js/data/mapLayers.js
+++ b/js/data/mapLayers.js
@@ -2,26 +2,6 @@ var MAP_LAYERS = {
   "water": ["water", "waterway-river-canal", "waterway-small"],
   "buildings": ["building"],
   "road": [
-    "road-main",
-    "road-construction",
-    "road-rail",
-    "road-motorway",
-    "road-trunk",
-    "road-street",
-    "road-service-driveway",
-    "road-path",
-    "tunnel-motorway",
-    "tunnel-trunk",
-    "tunnel-main",
-    "tunnel-street",
-    "bridge-main",
-    "bridge-street",
-    "bridge-trunk",
-    "bridge-motorway",
-    "road-street_limited",
-    "aeroway-runway",
-    "aeroway-taxiway",
-    "road-rail",
-    "bridge-rail"
+    "road-simple"
   ]
 };
\ No newline at end of file