Web Map on Home Page

This section covers how to update the GeoJSON map boundaries on the Home Page (the colored province overlays).

This step is labelled (Optional) because the SHAPEFILE and new AMIA Villages data for the target region may yet not be readily available during Installation.

homepage

Required Files

These steps require the files:

SHAPEFILE (.shp, .shx, .prj, .dbf and .cpg files) of the new region
New AMIA Villages information of the new region in a CSV file, following the format in the /server/src/scripts/data/amia_villages_r5.csv file.

- - - amia_villages_r5.csv
    - - acap-bicol.geojson

💡

Since ACAP uses the provinces and municipality naming conventions from the PAGASA 10-day weather forecast Excel file, please ensure the SHAPEFILE and AMIA Villages CSV file share similar naming conventions with it.

Normalize the SHAPEFILE

Convert the SHAPEFILE to a normalized, web-friendly GeoJSON file format. (Recommended GeoJSON file size is approximately less than 500KB).
(Optional) Use QGIS to check the SHAPEFILE for errors. Follow steps No. 2, No. 3 and No. 4 described in the URL link to check and fix SHAPEFILE errors. https://github.com/ciatph/ciatph.github.io/issues/33#issuecomment-769405843 (opens in a new tab)
(Optional) Use the https://github.com/ciatph/shapefile-simplify (opens in a new tab) tool to normalize, simplify and convert the SHAPEFILE to GeoJSON, playing around with PERCENTAGE % values that lead to a small file size with acceptable visual effects when loaded on the Home page.

ACAP 1.0's GeoJSON file is available in /server/src/scripts/data/geojson/acap-bicol.geojson file for reference.

Upload the GeoJSON file

MapBox Hosting

Upload the normalized GeoJSON file to MapBox, or any hosting service that allows serving GeoJSON content over HTTP from Normalize the SHAPEFILE step #2 or #3. The original ACAP 1.0 uses MapBox (Datasets) for hosting.

Update the following variables when using MapBox:

MAPBOX_BASEMAP_STYLE_ID
MAPBOX_DATASET_ID
MAPBOX_API_KEY

Firebase Storage Hosting

You can use Firebase Storage in case a new MapBox account is not readily available.

Replace the NEXT_PUBLIC_GEOJSON_URL variable with the GeoJSON file's remote URL after uploading it to Firebase Storage.

Use a Target Environment

Open the server .env file. Update the FIREBASE_SERVICE_ACC and FIREBASE_PRIVATE_KEY keys with the development key values.

Upload the AMIA Villages Data

Upload the new AMIA Villages information (CSV file) to Firestore.
Copy the new CSV file to /server/src/scripts/data/amia_villages_r5.csv
Run the server NPM script:
```
npm run seed:01_amiavillages
```
Re-deploy to the development environment to view the updates on the live site.
Repeat starting from the Use a Target Environment using the production Firebase keys to view the updates on the live production GitHub Pages site.

Post-Installation Setup PDF Bulletins