From 2653b76f6c2e40c5700bf475c3bbcca27683369f Mon Sep 17 00:00:00 2001
From: Aadesh-Baral <elkloppiko@gmail.com>
Date: Mon, 20 Mar 2023 19:47:33 +0545
Subject: [PATCH] Add osm mapstyle on localize view

---
 .../src/components/challenge/challengeMap.js  | 20 ++++++++++
 frontend/src/components/tagEditor/map.js      | 38 +++++++++----------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/challenge/challengeMap.js b/frontend/src/components/challenge/challengeMap.js
index d0cfd33..9ec9e40 100644
--- a/frontend/src/components/challenge/challengeMap.js
+++ b/frontend/src/components/challenge/challengeMap.js
@@ -21,6 +21,26 @@ export const ChallengeMap = (props) => {
     );
   }, [props.challenge.id]);
 
+  // const osm_style = {
+//     version: 8,
+//     sources: {
+//         osm: {
+//             type: 'raster',
+//             tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+//             tileSize: 256,
+//             attribution: ('Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>,' +
+//                 'under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>.' +
+//                 'Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>')
+//         }
+//     },
+//     layers: [{
+//         id: 'osm',
+//         type: 'raster',
+//         source: 'osm',
+//     }],
+// }
+
+
   const mapContainerRef = useRef(null);
   mapboxGl.accessToken = MAPBOX_ACCESS_TOKEN;
   useEffect(() => {
diff --git a/frontend/src/components/tagEditor/map.js b/frontend/src/components/tagEditor/map.js
index 1d37d4e..65981b0 100644
--- a/frontend/src/components/tagEditor/map.js
+++ b/frontend/src/components/tagEditor/map.js
@@ -4,24 +4,24 @@ import "mapbox-gl/dist/mapbox-gl.css";
 
 import { MAPBOX_ACCESS_TOKEN } from "../../config";
 
-// const osm_style = {
-//     version: 8,
-//     sources: {
-//         osm: {
-//             type: 'raster',
-//             tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
-//             tileSize: 256,
-//             attribution: ('Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>,' +
-//                 'under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>.' +
-//                 'Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>')
-//         }
-//     },
-//     layers: [{
-//         id: 'osm',
-//         type: 'raster',
-//         source: 'osm',
-//     }],
-// }
+const osm_style = {
+    version: 8,
+    sources: {
+        osm: {
+            type: 'raster',
+            tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
+            tileSize: 256,
+            attribution: ('Map tiles by <a target="_top" rel="noopener" href="https://tile.openstreetmap.org/">OpenStreetMap tile servers</a>,' +
+                'under the <a target="_top" rel="noopener" href="https://operations.osmfoundation.org/policies/tiles/">tile usage policy</a>.' +
+                'Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>')
+        }
+    },
+    layers: [{
+        id: 'osm',
+        type: 'raster',
+        source: 'osm',
+    }],
+}
 
 const Map = (props) => {
   const mapContainerRef = useRef(null);
@@ -29,7 +29,7 @@ const Map = (props) => {
   useEffect(() => {
     mapContainerRef.current = new mapboxgl.Map({
       container: "map-container",
-      style: "mapbox://styles/mapbox/streets-v12",
+      style: osm_style,
       center: [0, 0],
       zoom: 19,
     });