Add osm mapstyle on localize view

osgeonepal · Mar 20, 2023 · 2653b76 · 2653b76
1 parent 63b6ab1
commit 2653b76
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 19 deletions.
diff --git 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
@@ -4,32 +4,32 @@ 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);
   mapboxgl.accessToken = MAPBOX_ACCESS_TOKEN;
   useEffect(() => {
     mapContainerRef.current = new mapboxgl.Map({
       container: "map-container",
-      style: "mapbox://styles/mapbox/streets-v12",
+      style: osm_style,
       center: [0, 0],
       zoom: 19,
     });