a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add city map

Browse Source
This commit is contained in:
Alireza Adli 2023-11-02 13:37:03 -04:00
parent da09b12a44
commit 5b69948846
1 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/src/frontend/map/layers/city-base-map-layer.tsx
View File

@ -1,20 +1,23 @@
/*import React, { useEffect } from 'react'; import React, { useEffect } from "react";
import mapboxgl from 'mapbox-gl'; import mapboxgl from "mapbox-gl";
// Set your Mapbox access token // Set your Mapbox access token
mapboxgl.accessToken = 'pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5OGp1ZWNyNiJ9.gENyP4xX6ElLAeZFlE0aDg'; mapboxgl.accessToken =
"pk.eyJ1IjoiYWxpLWFkbGkiLCJhIjoiY2xuM2JtYjV1MGE5djJrb2d5OGp1ZWNyNiJ9.gENyP4xX6ElLAeZFlE0aDg";
/* /*
Component to display a Mapbox map. Component to display a Mapbox map.
*/ */
/*
export function CityMap() { export function CityMap() {
const remote_css = fetch("https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css"); const remote_css = fetch(
"https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css"
);
useEffect(() => { useEffect(() => {
const map = new mapboxgl.Map({ const map = new mapboxgl.Map({
container: 'map', // container ID container: "map", // container ID
style: 'mapbox://styles/mapbox/streets-v12', // style URL style: "mapbox://styles/mapbox/streets-v12", // style URL
center: [-73.5801403, 45.4962261], // starting position [lng, lat] center: [-73.5801403, 45.4962261], // starting position [lng, lat]
zoom: 15, // starting zoom zoom: 15, // starting zoom
}); });
@ -25,11 +28,7 @@ export function CityMap() {
return () => map.remove(); return () => map.remove();
}, []); }, []);
return ( return <div id="map"></div>;
<div id="map"></div>
);
} }
export default CityMap; export default CityMap;
*/