Skip to content

Commit f8ab5d9

Browse files
authored
Merge pull request #36 from ciatph/livelihood-mapbox
livelihood zones webmap
2 parents 8075563 + f444ce6 commit f8ab5d9

11 files changed

Lines changed: 849 additions & 27 deletions

File tree

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
.DS_Store
2+
.firebase/
23
node_modules/
34
/dist/
45
npm-debug.log*

README.md

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ Contains updated content with new AMIA Phase 2 information and documents.
1313

1414
The following requirements and dependencies were used for this project. Other system and software configurations are open for testing.
1515

16-
1. Windows 10 Pro
17-
2. NodeJS
18-
- npm version 10.16.3
16+
1. Windows 10 Pro
17+
2. NodeJS
18+
- npm version 10.16.3
1919
- npm version 6.9.0
2020

2121
## Build Setup
@@ -101,16 +101,13 @@ Please take note, the steps mentioned in **_Automatic CI/CD to GitHub Pages Usi
101101

102102
For testing purposes, the static build files can be optionally uploaded to Firebase hosting prior to deploying on GitHub pages.
103103

104-
1. Login to the firebase cli as `ciat.ph06`.
105-
106-
2. Run `firebase init`.
107-
- *Are you ready to proceed?* - choose **Y**
108-
- *Which Firebase CLI features do you want to set up for this folder?* - choose **_Hosting_**.
109-
- *What do you want to use as your public directory?* - type **/dist**
110-
- *Configure as a single-page app (rewrite all urls to /index.html)?* - choose **Y**
111-
- *File dist/index.html already exists. Overwrite?* - choose **N**
104+
Firebase CLI is required.
112105

113-
3. Run `firebase deploy`
106+
1. Login to the firebase cli as `ciat.ph06`.
107+
2. Build the website.
108+
`npm run build`
109+
3. Deploy to firebase (https://ciatphdemo.firebaseapp.com/).
110+
`firebase deploy`
114111

115112

116113
**Updated:** 20191113

index.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,10 @@
88
<!-- mapbox -->
99
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
1010
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
11-
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.js"></script>
12-
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.39.1/mapbox-gl.css" rel="stylesheet"/>
11+
<script src='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.js'></script>
12+
<link href='https://api.mapbox.com/mapbox-gl-js/v2.0.1/mapbox-gl.css' rel='stylesheet' />
1313
<script src="./static/app.js" type="text/javascript"></script>
14+
<script src="./static/map.js" type="text/javascript"></script>
1415
<!-- app -->
1516
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
1617
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
@@ -22,6 +23,7 @@
2223
<script>
2324
(function() {
2425
window.MB = new mapboxInstance()
26+
window.MBL = new MapboxMap('pk.eyJ1IjoiY2lhdHBoIiwiYSI6ImNqNXcyeTNhcTA5MzEycHFpdG90enFxMG8ifQ.gwZ6uo6pvx4-RZ1lHODcBQ')
2527
})();
2628
</script>
2729
</body>
Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
p(class="wp-content") Climate change and variability continue to exert increasing pressure upon the agricultural sector of the Philippines. Therefore it is vital to identify and prioritise at a high, municipal-level resolution and relevant crops that are most vulnerable to climate risk. Under the umbrella of the Department of Agriculture project the "Adaptation and Mitigation Initiative in Agriculture" (AMIA), a climate risk vulnerability assessment (CRVA) for 10 selected provinces in the Philippines. The figure below shows the framework used for CRVA and the operational definition of the three key components for the agricultural sector:
1212
br
1313
br
14-
img(src="../../assets/maps/crva-framework.png" width="100%")
14+
img(src="@/assets/maps/crva-framework.png" width="100%")
1515
b-col(sm="3")
1616
// Content - Hazard Index
1717
b-container#hazard(fluid class="container-fluid-custom text-center content-area-text bg-greylight")
@@ -22,7 +22,7 @@
2222
p(class="wp-content") A combination of climate-related natural hazard dataset has been used to estimate by which different municipalities are under pressure from climate variability and extremes. The development of an exposure index relies on spatially-weighted combination of different historical climate-related natural hazards in the Philippines that are open-sourced data or developed by partner institutions, such as the Department of Agriculture (DA). Eight (8) hazards were identified for the Philippines, and these are typhoon, flood, drought, erosion, landslide, storm surge, saltwater intrusion, and sea level rise. Figure below shows the degree each municipalities in target are exposed to hazards provinces. Higher index means that hazards have both 1) multiple geographical overlap and 2) wider geographic coverage.
2323
br
2424
br
25-
img(src="../../assets/maps/hazard-index-lowres.png" width="100%")
25+
img(src="@/assets/maps/hazard-index-lowres.png" width="100%")
2626
div(class="download-link")
2727
span(class="glyphicon glyphicon-download glyph-black")
2828
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FHazard%20Index.png?alt=media&token=9fbd7b4a-24c2-4643-8e82-844be860633c" target="blank") [download high-resolution image]
@@ -36,7 +36,7 @@
3636
p(class="wp-content") Adaptive capacity forms one of the three pillars of the vulnerability assessment in addition to exposure and sensitivity to climate change. At the same time it is also one of the three components when measuring resilience, in addition to absorptive coping capacity and transformative capacity. Both are integrated concepts in a coupled human-environment system (Lei et al. 2014).
3737
br
3838
br
39-
img(src="../../assets/maps/adaptive-capacity-lowres.png" width="100%")
39+
img(src="@/assets/maps/adaptive-capacity-lowres.png" width="100%")
4040
div(class="download-link")
4141
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FAdaptive%20Capacity.png?alt=media&token=7766e5f7-f53a-4cb0-9e25-c6b0f980f514" target="blank") [download high-resolution image]
4242
b-col(sm="3")
@@ -49,7 +49,7 @@
4949
p(class="wp-content") The final climate risk vulnerability map for the year 2050 is an integration of the exposure, sensitivity and adaptive capacity components. The weighting of each of these indicators was discussed during expert workshops and resulted in 15% for exposure, 15% for sensitivity and 70% for adaptive.
5050
br
5151
br
52-
img(src="../../assets/maps/vulnerability-lowres.png" width="100%")
52+
img(src="@/assets/maps/vulnerability-lowres.png" width="100%")
5353
div(class="download-link")
5454
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FVulnerability.png?alt=media&token=49d32483-21ad-433f-a56f-196d784e9d58" target="_blank") [download high-resolution image]
5555
b-col(sm="3")
@@ -67,15 +67,15 @@
6767
// Integrated Farming
6868
b-col(sm="3")
6969
div(class="thumbnail-maps")
70-
img(src="../../assets/maps/if-trees-sens2050-v2-lowres.png" alt="CRVA factsheet")
70+
img(src="@/assets/maps/if-trees-sens2050-v2-lowres.png" alt="CRVA factsheet")
7171
p
7272
strong Integrated Farming
7373
p
7474
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FIF_Trees_sens2050_v2.png?alt=media&token=4b77f020-5603-41ea-97fd-5aceca4cd1ba" target="_blank" class="download-link") [download high-resolution image]
7575
// Rice
7676
b-col(sm="3")
7777
div(class="thumbnail-maps")
78-
img(src="../../assets/maps/rice-sens2050-v2-lowres.png" alt="Rice")
78+
img(src="@/assets/maps/rice-sens2050-v2-lowres.png" alt="Rice")
7979
p
8080
strong Rice
8181
p
@@ -87,15 +87,15 @@
8787
// Maize
8888
b-col(sm="3")
8989
div(class="thumbnail-maps")
90-
img(src="../../assets/maps/maize-sens2050-v2-lowres.png" alt="Maize")
90+
img(src="@/assets/maps/maize-sens2050-v2-lowres.png" alt="Maize")
9191
p
9292
strong Maize
9393
p
9494
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FMaize_sens2050_v2.png?alt=media&token=91774af7-316b-40ad-9681-eb93f77ddeb9" target="_blank" class="download-link") [download high-resolution image]
9595
// Vegetables
9696
b-col(sm="3")
9797
div(class="thumbnail-maps")
98-
img(src="../../assets/maps/vegetables-sens2050-v2-lowres.png" alt="Vegetables")
98+
img(src="@/assets/maps/vegetables-sens2050-v2-lowres.png" alt="Vegetables")
9999
p
100100
strong Rice
101101
p
Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<template lang="pug">
2+
div
3+
// map GUI
4+
livelihood-zones-map()
5+
// Content - CRVA maps overview
6+
b-container#crvamaps(fluid class="container-fluid-custom text-center content-area-text")
7+
b-row
8+
b-col(sm="3")
9+
b-col(sm="6" class="content-area-text")
10+
h2 CRVA Maps Overview
11+
p(class="wp-content") Climate change and variability continue to exert increasing pressure upon the agricultural sector of the Philippines. Therefore it is vital to identify and prioritise at a high, municipal-level resolution and relevant crops that are most vulnerable to climate risk. Under the umbrella of the Department of Agriculture project the "Adaptation and Mitigation Initiative in Agriculture" (AMIA), a climate risk vulnerability assessment (CRVA) for 10 selected provinces in the Philippines. The figure below shows the framework used for CRVA and the operational definition of the three key components for the agricultural sector:
12+
br
13+
br
14+
img(src="@/assets/maps/crva-framework.png" width="100%")
15+
b-col(sm="3")
16+
// Content - Hazard Index
17+
b-container#hazard(fluid class="container-fluid-custom text-center content-area-text bg-greylight")
18+
b-row(class="content-text")
19+
b-col(sm="3")
20+
b-col(sm="6" class="content-area-text")
21+
h2 Hazard Index
22+
p(class="wp-content") A combination of climate-related natural hazard dataset has been used to estimate by which different municipalities are under pressure from climate variability and extremes. The development of an exposure index relies on spatially-weighted combination of different historical climate-related natural hazards in the Philippines that are open-sourced data or developed by partner institutions, such as the Department of Agriculture (DA). Eight (8) hazards were identified for the Philippines, and these are typhoon, flood, drought, erosion, landslide, storm surge, saltwater intrusion, and sea level rise. Figure below shows the degree each municipalities in target are exposed to hazards provinces. Higher index means that hazards have both 1) multiple geographical overlap and 2) wider geographic coverage.
23+
br
24+
br
25+
img(src="@/assets/maps/hazard-index-lowres.png" width="100%")
26+
div(class="download-link")
27+
span(class="glyphicon glyphicon-download glyph-black")
28+
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FHazard%20Index.png?alt=media&token=9fbd7b4a-24c2-4643-8e82-844be860633c" target="blank") [download high-resolution image]
29+
b-col(sm="3")
30+
// Content - Adaptive Capacity
31+
b-container#hazard(fluid class="container-fluid-custom text-center content-area-text")
32+
b-row(class="content-text")
33+
b-col(sm="3")
34+
b-col(sm="6" class="content-area-text")
35+
h2 Adaptive Capacity
36+
p(class="wp-content") Adaptive capacity forms one of the three pillars of the vulnerability assessment in addition to exposure and sensitivity to climate change. At the same time it is also one of the three components when measuring resilience, in addition to absorptive coping capacity and transformative capacity. Both are integrated concepts in a coupled human-environment system (Lei et al. 2014).
37+
br
38+
br
39+
img(src="@/assets/maps/adaptive-capacity-lowres.png" width="100%")
40+
div(class="download-link")
41+
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FAdaptive%20Capacity.png?alt=media&token=7766e5f7-f53a-4cb0-9e25-c6b0f980f514" target="blank") [download high-resolution image]
42+
b-col(sm="3")
43+
// Content - Vulnerability
44+
b-container#vulnerability(fluid class="container-fluid-custom text-center content-area-text bg-greylight")
45+
b-row(class="content-text")
46+
b-col(sm="3")
47+
b-col(sm="6" class="content-area-text")
48+
h2 Vulnerability
49+
p(class="wp-content") The final climate risk vulnerability map for the year 2050 is an integration of the exposure, sensitivity and adaptive capacity components. The weighting of each of these indicators was discussed during expert workshops and resulted in 15% for exposure, 15% for sensitivity and 70% for adaptive.
50+
br
51+
br
52+
img(src="@/assets/maps/vulnerability-lowres.png" width="100%")
53+
div(class="download-link")
54+
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FVulnerability.png?alt=media&token=49d32483-21ad-433f-a56f-196d784e9d58" target="_blank") [download high-resolution image]
55+
b-col(sm="3")
56+
// Content - Sensitivity (4 crops maps)
57+
b-container#vulnerability(fluid class="container-fluid-custom text-center content-area-text")
58+
b-row(class="content-text")
59+
b-col(sm="3")
60+
b-col(sm="6" class="content-area-text")
61+
h2 Sensitivity Index
62+
p(class="wp-content") The crop sensitivity was assessed by changes in climatic suitability to grow crops by the year 2050 in comparison with the baseline crop suitability. The sensitivity (changes in climatic suitability) of crops to climate change was derived from changes in temperature and precipitation using the ensemble of 33 GCM models. For baseline condition, the climate data was acquired from www.worldclim.org. The Maximum entropy (Maxent) model to perform crop suitability analysis. Twenty (20) Bioclimatic variables (http://www.worldclim.org/bioclim + Number of consecutive dry days) was used to assess crop suitability in baseline vs future conditions. The modeled crops includes Rice, Maize/Corn, Vegetables (Squash, Eggplant, Tomato), and Integrated Farming (Cacao, Coffee, Mango Banana). Higher losses of crop suitability are projected to occur in low-lying areas (0-500m ASL) in the Philippines. However, there are also opportunity areas, especially in Mindanao areas, that are projected to become more beneficial for some commodities.
63+
b-col(sm="3")
64+
// Images
65+
b-row(class="text-center")
66+
b-col(sm="3")
67+
// Integrated Farming
68+
b-col(sm="3")
69+
div(class="thumbnail-maps")
70+
img(src="@/assets/maps/if-trees-sens2050-v2-lowres.png" alt="CRVA factsheet")
71+
p
72+
strong Integrated Farming
73+
p
74+
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FIF_Trees_sens2050_v2.png?alt=media&token=4b77f020-5603-41ea-97fd-5aceca4cd1ba" target="_blank" class="download-link") [download high-resolution image]
75+
// Rice
76+
b-col(sm="3")
77+
div(class="thumbnail-maps")
78+
img(src="@/assets/maps/rice-sens2050-v2-lowres.png" alt="Rice")
79+
p
80+
strong Rice
81+
p
82+
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FRice_sens2050_v2.png?alt=media&token=8e3c07ee-eea9-4057-aca1-81f7656151f4" target="_blank" class="download-link") [download high-resolution image]
83+
b-col(sm="3")
84+
// Images (maize, vegetables)
85+
b-row(class="text-center")
86+
b-col(sm="3")
87+
// Maize
88+
b-col(sm="3")
89+
div(class="thumbnail-maps")
90+
img(src="@/assets/maps/maize-sens2050-v2-lowres.png" alt="Maize")
91+
p
92+
strong Maize
93+
p
94+
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FMaize_sens2050_v2.png?alt=media&token=91774af7-316b-40ad-9681-eb93f77ddeb9" target="_blank" class="download-link") [download high-resolution image]
95+
// Vegetables
96+
b-col(sm="3")
97+
div(class="thumbnail-maps")
98+
img(src="@/assets/maps/vegetables-sens2050-v2-lowres.png" alt="Vegetables")
99+
p
100+
strong Rice
101+
p
102+
a(href="https://firebasestorage.googleapis.com/v0/b/ciat-pdfstorage.appspot.com/o/crva%2Fmaps%2Fhi-res%2FRice_sens2050_v2.png?alt=media&token=8e3c07ee-eea9-4057-aca1-81f7656151f4" target="_blank" class="download-link") [download high-resolution image]
103+
b-col(sm="3")
104+
</template>
105+
106+
<script>
107+
import LivelihoodZonesMap from '@/components/widgets/LivelihoodZonesMap'
108+
109+
export default {
110+
name: 'LivelihoodZones',
111+
components: {
112+
LivelihoodZonesMap
113+
}
114+
}
115+
</script>

0 commit comments

Comments
 (0)