Migrate to Mapbox GL v3

osm-in · Dec 4, 2023 · a6d996b · a6d996b
1 parent 4012639
commit a6d996b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 114 deletions.
diff --git a/chennai.html b/chennai.html
@@ -9,8 +9,8 @@
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 
   <link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet">
-  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.js'></script>
-  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.11.4/mapbox-gl.css' rel='stylesheet' />
+  <link href="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.css" rel="stylesheet">
+  <script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0/mapbox-gl.js"></script>
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/mCustomScrollbar.min.css">
@@ -38,81 +38,6 @@ <h2><a href='.'>சென்னை</a></h2>
     <p>This is a crowdsourced effort to map inundated roads in Chennai. Report a flooded street by zooming into the map and clicking it. All the data is <a href="https://github.com/osm-in/flood-map">open</a>.</p>
 
 
-    <div data-map='legend'>
-
-      <h5>Flood Layers</h5>
-
-      <div class="space-bottom1">
-        <ul>
-          <li>
-            <a data-map-layer='cartodem' href="#" class="truncate strong bloxk small" onclick='mapToggle(this);'>
-          Vulnerable and Inundated areas
-        </a>
-          </li>
-
-          <li>
-            <a data-map-layer='chennai-relief-camps' href="#" class="truncate strong bloxk small " onclick='mapToggle(this);'>
-          Flood relief camps (Including closed)
-        </a>
-          </li>
-        </ul>
-      </div>
-
-      <h5>Affected Areas <a href="#" class="truncate strong bloxk small" onclick='mapLocate("reset");'>
-  (reset)
-</a></h5>
-
-      <div class="space-bottom1">
-        <ul>
-          <li>
-            <a href="#" class="truncate strong bloxk small" onclick='mapLocate("aminjikarai");'>
-        Aminjikarai
-      </a>
-          </li>
-          <li>
-            <a href="#" class="truncate strong bloxk small" onclick='mapLocate("velachery");'>
-        Velachery
-      </a>
-          </li>
-          <li>
-            <a href="#" class="truncate strong bloxk small" onclick='mapLocate("mudichur");'>
-        Mudichur
-      </a>
-          </li>
-          <li>
-            <a href="#" class="truncate strong bloxk small" onclick='mapLocate("omr");'>
-        Old Mahabalipuram Road
-      </a>
-          </li>
-        </ul>
-      </div>
-
-      <h5>Highlight <a href="#" class="truncate strong bloxk small" onclick='mapHighlightReset();'>
-  (reset)
-</a></h5>
-
-      <div class="space-bottom1">
-        <ul>
-          <li>
-            <a href="#" data-map-layer-highlight='red' data-map-layer='water' class="truncate strong bloxk small" onclick='mapHighlight(this);'>
-          Waterbodies
-        </a>
-          </li>
-          <li>
-            <a href="#" data-map-layer-highlight='red' data-map-layer='road-subways' class="truncate strong bloxk small " onclick='mapHighlight(this);'>
-          Road Subways & Tunnels
-        </a>
-          </li>
-          <li>
-            <a href="#" data-map-layer-highlight='red' data-map-layer='road-bridges' class="truncate strong bloxk small" onclick='mapHighlight(this);'>
-          Road Flyovers & Bridges
-        </a>
-          </li>
-        </ul>
-      </div>
-
-    </div>
-
   </div>
 
   <div class="pad2 col8 space-bottom2 dark" style="position: absolute; z-index: 1000; bottom: 0; right: 0">

diff --git a/js/chennai.js b/js/chennai.js
@@ -9,21 +9,22 @@ var map = new mapboxgl.Map({
 });
 
 map.off('tile.error', map.onError);
-map.addControl(new mapboxgl.Navigation());
+// Add zoom and rotation controls to the map.
+map.addControl(new mapboxgl.NavigationControl());
 
 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);
-  });
+  // 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 () {
@@ -52,10 +53,10 @@ function getDataSet(startID) {
 
   $.get(url, params, function (data) {
     var features = {
-        type: 'FeatureCollection'
+      type: 'FeatureCollection'
     };
     data.features.forEach(function (feature) {
-        feature.properties.id = feature.id;
+      feature.properties.id = feature.id;
     });
     features.features = data.features;
 
@@ -95,7 +96,7 @@ function deleteRoad(data, addedRoads, addedFeatures, features) {
   });
 }
 
-function addRoad (data, addedRoads, addedFeatures, features) {
+function addRoad(data, addedRoads, addedFeatures, features) {
   $('#map').toggleClass('loading');
   var tempObj = {
     type: 'Feature',
@@ -131,19 +132,24 @@ function addRoad (data, addedRoads, addedFeatures, features) {
 
 function addSourcesAndLayers() {
   $('#feature-count').toggleClass('loading');
-  SELECTED_ROADS_SOURCE = new mapboxgl.GeoJSONSource({});
-  map.addSource('selected-roads', SELECTED_ROADS_SOURCE);
+
+
+  map.addSource('selected-roads', {
+    'type': 'geojson',
+    'data': null
+  });
+  SELECTED_ROADS_SOURCE = map.getSource('selected-roads')
+
   map.addLayer({
     'id': 'selected-roads',
     'type': 'line',
     'source': 'selected-roads',
-    'interactive': true,
     'paint': {
       'line-color': 'rgba(255,5,230,1)',
       'line-width': 3,
       'line-opacity': 0.6
     }
-  }, 'road-waterlogged');
+  });
 
   map.addSource('terrain-data', {
     type: 'vector',
@@ -160,7 +166,7 @@ function addSourcesAndLayers() {
     },
     'paint': {
       'line-color': '#ff69b4',
-      'line-opacity': '0.3',
+      'line-opacity': 0.3,
       'line-width': 1
     }
   });
@@ -174,26 +180,26 @@ function selectionHandler(data) {
   //Dump Data
   window.dump = JSON.stringify(data);
 
-  data.features.forEach(function(feature) {
+  data.features.forEach(function (feature) {
     addedRoads.push(feature.properties.id);
     addedFeatures.push(feature);
   });
 
   map.on('click', function (e) {
     if (map.getZoom() >= 15) {
-      map.featuresAt(e.point, {radius: 5, includeGeometry: true, layer: 'selected-roads'}, function (err, features) {
-        if (err) throw err;
+      let features;
+      features = map.queryRenderedFeatures(e.point, { layers: ['selected-roads'] })
+      console.log(features)
+      if (features.length) {
+        deleteRoad(data, addedRoads, addedFeatures, features);
+      } else {
+        let features;
+        features = map.queryRenderedFeatures(e.point, { layers: MAP_LAYERS['road'] });
         if (features.length) {
-          deleteRoad(data, addedRoads, addedFeatures, features);
-        } else {
-          map.featuresAt(e.point, {radius: 5, includeGeometry: true, layer: MAP_LAYERS['road']}, function (err, features) {
-            if (err) throw err;
-            if (features.length) {
-              addRoad(data, addedRoads, addedFeatures, features);
-            }
-          });
+          console.log(features)
+          addRoad(data, addedRoads, addedFeatures, features);
         }
-      });
+      }
     }
   });
 }
@@ -207,9 +213,9 @@ function loadInfo(err, features) {
     var popup = new mapboxgl.Popup();
 
     popup
-    .setLngLat(features[0].geometry.coordinates)
-    .setHTML(popupHTML)
-    .addTo(map);
+      .setLngLat(features[0].geometry.coordinates)
+      .setHTML(popupHTML)
+      .addTo(map);
   }
 }
 

diff --git a/js/data/mapLayers.js b/js/data/mapLayers.js
@@ -1,12 +1,6 @@
 var MAP_LAYERS = {
   "water": ["water", "waterway-river-canal", "waterway-small"],
-  "road-bridges": ["bridge-main", "bridge-street", "bridge-trunk", "bridge-motorway"],
-  "cartodem": ["chennai-cartodem"],
   "buildings": ["building"],
-  "road-subways": ["tunnel-motorway", "tunnel-trunk", "tunnel-main", "tunnel-street"],
-  "chennai-relief-camps": ["chennai-relief-camps"],
-  "chennai-relief-camps-22nov": ["chennai-relief-camps-22nov"],
-  "chennai-water-logged-points": ["chennai-water-logged-points"],
   "road": [
     "road-main",
     "road-construction",