Implement Map

[jimgeng]

Current Working Setup:

Self-hosting of tiles done through data obtained from OpenStreetMaps data bank -> https://download.geofabrik.de/north-america/canada.html

1. The tileset is extremely large if you attempt to download all of Canada, make sure to filter by province.
2. Once the {province name}.osm.pbf map data file has been downloaded, it can be downsized through using an osm conversion tool found on this page https://wiki.openstreetmap.org/wiki/Category:OSM_processing. I used osmconvert but others may work.
   • Here is details on the specific command I used to clip the data outside of the geographical area that we didn't need -> https://wiki.openstreetmap.org/wiki/Osmconvert#Clipping_based_on_Longitude_and_Latitude.
3. With the map data clipped, now convert it into a proper tileset with a .mbtiles file extension. I did this through the windows tilemaker cli found at https://github.com/systemed/tilemaker.
   • I used its default settings, and this could potentially be why at lower zoom levels the map look scuffed
4. Install Docker, as the tileserver used to self-host tiles is available as a docker image. If you have Docker installed, then use the following command, making sure that the terminal's working directory contains the .mbtiles file generated eariler.

Windows:

docker run --rm -it -v %cd%:/data -p 8080:8080 maptiler/tileserver-gl {NAME}.mbtiles

Unix:

docker run --rm -it -v ($pwd):/data -p 8080:8080 maptiler/tileserver-gl {NAME}.mbtiles

5. At this stage, visiting localhost:8080 will allow you to see if your previous steps in configuring the tileset were successful. If it was, now you can have front end projects use the tileset.
6. To integrate with front-end, download any OSM-compatible map style json. I randomly used https://github.com/openmaptiles/osm-bright-gl-style, but any of style json can be used as long as they are configured correctly.
7. look for a few lines of code that looks similar to this:

   "sources": {
       "openmaptiles": {
           "type": "vector",
           "url": "https://some-api-endpoint.com/tiles/v3/tiles.json
       }
   }

   replace the url key-value pair with "url": "http://localhost:8080/data/v3.json".

8. when using a maplibre or mapbox map on the frond end, make sure it uses this custom local map style when it is initialized or updated.

[jimgeng]

• Working Vancouver tiles, setup / implementation has room for improvement
• Incorporate with GCOM (need to figure out how to configure https serving correctly)

[jimgeng]

Need to implement map within current GCOM Front-End with above described local hosted map tiles.