Skip to content

Commit b3c6807

Browse files
ciatphciatph
committed
feat: Update the livelihood zones mapbox Tilesets reference and legends.
1 parent 45515e9 commit b3c6807

3 files changed

Lines changed: 107 additions & 79 deletions

File tree

‎src/components/widgets/LivelihoodZonesMap.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ export default {
145145
if (!this.selectedZone) {
146146
this.filters.layer = null
147147
} else {
148-
this.filters.layer = ['==', 'layer', this.selectedZone]
148+
this.filters.layer = ['==', 'Zone', this.selectedZone]
149149
}
150150
151151
this.updateLayers()
@@ -324,7 +324,7 @@ export default {
324324
return self.indexOf(value) === index
325325
}
326326
327-
colorCodes = (Array.from(features, (x) => x.properties['Legend_v2']).filter(unique)).sort()
327+
colorCodes = (Array.from(features, (x) => x.properties['Legend_2']).filter(unique)).sort()
328328
// console.log(`---legends: ${colorCodes.length}`)
329329
330330
for (let i = 0; i < colorCodes.length; i += 1) {

‎src/defines/constants.js‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,28 @@ module.exports = {
1919

2020
philippines: {
2121
luzon: {
22-
'national capital region': ['NCR, city of manila, first district', 'NCR, second district', 'NCR, third district', 'NCR, fourth district'],
23-
'cordillera administrative region': ['abra', 'apayao', 'benguet', 'ifugao', 'kalinga', 'mountain province'],
24-
'ilocos region': ['ilocos norte', 'ilocos sur', 'la union'],
25-
'cagayan valley': ['batanes', 'cagayan', 'isabela', 'nueva vizcaya', 'quirino'],
26-
'central luzon': ['aurora', 'bataan', 'bulacan', 'nueva ecija', 'pampanga', 'tarlac', 'zambales'],
27-
'calabarzon': ['batangas', 'cavite', 'laguna', 'quezon', 'rizal'],
28-
'mimaropa': ['marinduque', 'occidental mindoro', 'oriental mindoro', 'palawan', 'romblon'],
29-
'bicol region': ['albay', 'camarines norte', 'camarines sur', 'catanduanes', 'masbate', 'sorsogon']
22+
'NCR - National Capital Region': ['NCR, City of Manila, First District', 'NCR, Fourth District', 'NCR, Second District', 'NCR, Third District'],
23+
'Cordillera Administrative Region': ['Abra', 'Apayao', 'Benguet', 'Ifugao', 'Kalinga', 'Mountain Province'],
24+
'Region I - Ilocos': ['Ilocos Norte', 'Ilocos Sur', 'La Union', 'Pangasinan'],
25+
'Region II - Cagayan Valley': ['Batanes', 'Cagayan', 'Isabela', 'Nueva Vizcaya', 'Quirino'],
26+
'Region III - Central Luzon': ['Aurora', 'Bataan', 'Bulacan', 'Nueva Ecija', 'Pampanga', 'Tarlac', 'Zambales'],
27+
'Region IV-A - CALABARZON': ['Batangas', 'Cavite', 'Laguna', 'Quezon', 'Rizal'],
28+
'Region IV-B - MIMAROPA': ['Marinduque', 'Occidental Mindoro', 'Oriental Mindoro', 'Palawan', 'Romblon'],
29+
'Region V - Bicol': ['Albay', 'Camarines Norte', 'Camarines Sur', 'Catanduanes', 'Masbate', 'Sorsogon']
3030
},
3131
visayas: {
32-
'western visayas': ['aklan', 'antique', 'capiz', 'guimaras', 'iloilo', 'negros occidental'],
33-
'central visayas': ['bohol', 'cebu', 'negros oriental', 'siquijor'],
34-
'eastern visayas': ['biliran', 'eastern samar', 'leyte', 'northern samar', 'samar', 'southern leyte']
32+
'Negros Island Region': ['Negros Occidental', 'Negros Oriental'],
33+
'Region VI - Western Visayas': ['Aklan', 'Antique', 'Capiz', 'Guimaras', 'Iloilo'],
34+
'Region VII - Central Visayas': ['Bohol', 'Cebu', 'Siquijor'],
35+
'Region VIII - Eastern Visayas': ['Biliran', 'Eastern Samar', 'Leyte', 'Northern Samar', 'Samar', 'Southern Leyte']
3536
},
3637
mindanao: {
37-
'autonomous region in muslim mindanao': ['basilan', 'lanao del sur', 'maguindanao', 'sulu', 'tawi-tawi'],
38-
'zamboanga peninsula': ['city of isabela', 'zamboanga del norte', 'zamboanga del sur', 'zamboanga sibugay'],
39-
'northern mindanao': ['bukidnon', 'camiguin', 'lanao del norte', 'misamis occidental', 'misamis oriental'],
40-
'davao region': ['compostela valley', 'davao del norte', 'davao del sur', 'davao occidental', 'davao oriental'],
41-
'soccskargen': ['cotabato', 'sarangani', 'south cotabato', 'sultan kudarat'],
42-
'caraga': ['agusan del norte', 'agusan del sur', 'dinagat islands', 'surigao del norte', 'surigao del sur']
38+
'BARMM - Bangsamoro Autonomous Region in Muslim Mindanao': ['Basilan', 'Lanao del Sur', 'Maguindanao', 'Sulu', 'Tawi-Tawi'],
39+
'Region IX - Zamboanga Peninsula': ['City of Isabela', 'Zamboanga Sibugay', 'Zamboanga del Norte', 'Zamboanga del Sur'],
40+
'Region X - Northern Mindanao': ['Bukidnon', 'Camiguin', 'Lanao del Norte', 'Misamis Occidental', 'Misamis Oriental'],
41+
'Region XI - Davao': ['Compostela Valley', 'Davao Occidental', 'Davao Oriental', 'Davao del Norte', 'Davao del Sur'],
42+
'Region XII - SOCCSKARGEN': ['Cotabato', 'Cotabato City', 'Sarangani', 'South Cotabato', 'Sultan Kudarat'],
43+
'Region XIII - Caraga': ['Agusan del Norte', 'Agusan del Sur', 'Dinagat Islands', 'Surigao del Norte', 'Surigao del Sur']
4344
}
4445
},
4546

@@ -57,16 +58,16 @@ module.exports = {
5758

5859
mapboxData: {
5960
'luzon': {
60-
tilesetID: 'wfp_luzon_v2-4v4oaa',
61-
tilesetUrl: 'mapbox://ciatph.5kaa86pi'
61+
tilesetID: 'wfp_luzon_v3-d8d009',
62+
tilesetUrl: 'mapbox://ciatph.bi7iu9gj'
6263
},
6364
'visayas': {
64-
tilesetID: 'wfp_visayas_v2-7fws23',
65-
tilesetUrl: 'mapbox://ciatph.4dv34cxw'
65+
tilesetID: 'wfp_visayas_v3-3q13v0',
66+
tilesetUrl: 'mapbox://ciatph.4hl4oabg'
6667
},
6768
'mindanao': {
68-
tilesetID: 'wfp_mindanao_v2-bxk5d4',
69-
tilesetUrl: 'mapbox://ciatph.6g0cm3sd'
69+
tilesetID: 'wfp_mindanao_v3-4etl85',
70+
tilesetUrl: 'mapbox://ciatph.4vlywva5'
7071
}
7172
}
7273
}

‎static/map.js‎

Lines changed: 81 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44

55
const mapboxData = {
66
'luzon': {
7-
tilesetID: 'wfp_luzon_v2-4v4oaa',
8-
tilesetUrl: 'mapbox://ciatph.5kaa86pi'
7+
tilesetID: 'wfp_luzon_v3-d8d009',
8+
tilesetUrl: 'mapbox://ciatph.bi7iu9gj'
99
},
1010
'visayas': {
11-
tilesetID: 'wfp_visayas_v2-7fws23',
12-
tilesetUrl: 'mapbox://ciatph.4dv34cxw'
11+
tilesetID: 'wfp_visayas_v3-3q13v0',
12+
tilesetUrl: 'mapbox://ciatph.4hl4oabg'
1313
},
1414
'mindanao': {
15-
tilesetID: 'wfp_mindanao_v2-bxk5d4',
16-
tilesetUrl: 'mapbox://ciatph.6g0cm3sd'
15+
tilesetID: 'wfp_mindanao_v3-4etl85',
16+
tilesetUrl: 'mapbox://ciatph.4vlywva5'
1717
}
1818
}
1919

@@ -133,9 +133,10 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom, cen
133133
let hasLoadError = false
134134

135135
const attributeNames = { // Attribute name mapping
136+
'ADM1_EN': 'Region',
136137
'ADM2_EN': 'Province',
137138
'ADM3_EN': 'Municipality',
138-
'Legend_v2': 'Legend'
139+
'Legend_2': 'Legend'
139140
}
140141

141142
// TO-DO: Verify all data are loaded at this point. Only (1) is registered in console.log but all data are available
@@ -160,7 +161,7 @@ MapboxMap.prototype.initMap = function ({ mapContainer = 'map', style, zoom, cen
160161
attr = attributeNames[item] ? attributeNames[item] : item
161162
}
162163

163-
content += `${attr}: ${e.features[0].properties[item]}`
164+
content += `<strong>${attr}</strong>: ${e.features[0].properties[item]}`
164165
content += '<br>'
165166
}
166167

@@ -210,52 +211,78 @@ MapboxMap.prototype.toggleLayer = function (layerName) {
210211
*/
211212
MapboxMap.prototype.getLegendColorCodes = function () {
212213
const styles = {
213-
'1 Aquaculture/Freshwater fisheries': '#08306b',
214-
'1 Aquaculture/Freshwater fisheries mixed with coconuts, banana, mango, etc.': '#1c6cb1',
215-
'1 Aquaculture/Freshwater fisheries mixed with coconuts, banana, mango, etc., and mining and/or touri': '#529dcc',
216-
'1 Aquaculture/Freshwater fisheries mixed with urban and mining and/or tourism': '#9ac8e1',
217-
'1 Aquaculture/Freshwater fisheries mixed with vegetable farming, mining and/or tourism': '#d1e3f3',
218-
'1 Aquaculture/Freshwater fisheries mixed with vegetables': '#f7fbff',
219-
'2 Aquaculture/Coastal fisheries mixed with coconuts, banana, mango, etc.': '#54278f',
220-
'2 Aquaculture/Coastal fisheries mixed with coconuts, banana, mango, etc., and mining and/or tourism': '#6f49a0',
221-
'2 Aquaculture/Coastal fisheries mixed with freshwater fisheries': '#896bb1',
222-
'2 Aquaculture/Coastal fisheries mixed with freshwater fisheries, urban and/or mining': '#a48ec2',
223-
'2 Aquaculture/Coastal fisheries mixed with vegetable farming': '#bfb0d3',
224-
'2 Aquaculture/Coastal fisheries mixed with vegetable farming, and mining and/or tourism': '#dad2e4',
214+
'1 Aquaculture/Freshwater fisheries mixed with perennial crops and tourism': '#350972',
215+
'1 Aquaculture/Freshwater fisheries mixed with urban': '#532b8a',
216+
'1 Aquaculture/Freshwater fisheries mixed with urban and tourism': '#714ea1',
217+
'1 Aquaculture/Freshwater fisheries mixed with vegetable farming and tourism': '#8f70b9',
218+
'1 Aquaculture/Freshwater fisheries mixed with vegetables': '#ac92d0',
219+
'2 Aquaculture/Coastal and freshwater fisheries mixed with urban': '#08306b',
220+
'2 Aquaculture/Coastal fisheries mixed with freshwater fisheries': '#0a549e',
221+
'2 Aquaculture/Coastal fisheries mixed with freshwater fisheries and urban': '#2272b5',
222+
'2 Aquaculture/Coastal fisheries mixed with perennial crops': '#3e8ec4',
223+
'2 Aquaculture/Coastal fisheries mixed with perennial crops and tourism': '#60a6d2',
224+
'2 Aquaculture/Coastal fisheries mixed with vegetable farming': '#89bedc',
225+
'2 Aquaculture/Coastal fisheries mixed with vegetable farming and tourism': '#afd1e7',
226+
'2 Aquaculture/Coastal fisheries mixed with vegetable farming, mining, and/or tourism': '#cde0f1',
225227
'3 Irrigated rice mixed with vegetables': '#006400',
226-
'3 Irrigated rice mixed with vegetables, mining and/or tourism': '#40da0c',
227-
'4 Coconut, banana, mango, etc. mixed with rainfed rice': '#72746a',
228-
'4 Coconut, banana, mango, etc. mixed with rainfed rice and mining': '#929f64',
229-
'4 Rainfed rice mixed with vegetables': '#04c159',
230-
'4 Rainfed rice mixed with vegetables, mining and tourism': '#71eca9',
228+
'3 Irrigated rice mixed with vegetables and mining': '#2c8b25',
229+
'3 Irrigated rice mixed with vegetables and tourism': '#59b24b',
230+
'3 Irrigated rice mixed with vegetables, mining, and/or tourism': '#85d870',
231+
'4 Perennial crops mixed with rainfed rice': '#5a7300',
232+
'4 Rainfed rice mixed with vegetables': '#6e802c',
233+
'4 Rainfed rice mixed with vegetables and mining': '#788f29',
234+
'4 Rainfed rice mixed with vegetables and tourism': '#91ab36',
235+
'4 Rainfed rice mixed with vegetables, mining, and/or tourism': '#aac743',
231236
'5 Vegetable farming': '#91003f',
232-
'5 Vegetable farming mixed with coconut, banana, mango, etc.': '#9c1e56',
233-
'5 Vegetable farming mixed with coconut, banana, mango, etc. mixed with pasture, mining and/or touris': '#a63d6c',
234-
'5 Vegetable farming mixed with coconut, banana, mango, etc., and mining and/or tourism': '#b05c83',
235-
'5 Vegetable farming mixed with pasture and livestock': '#bb7a9a',
236-
'5 Vegetable farming mixed with urban, mining and/or tourism': '#c599b1',
237-
'5 Vegetables farming mixed with aquaculture/freshwater fisheries, and mining': '#d0b8c8',
238-
'6 Coconut, banana, mango, etc. mixed with vegetables, mining and/or tourism': '#792605',
239-
'6 Coconut, banana, mango, etc. mixed with vegetables': '#8d4425',
240-
'6 Coconut, banana, mango, etc. mixed with urban, mining and/or tourism': '#a16144',
241-
'6 Coconut, banana, mango, etc. mixed with pasture and livestock, and mining': '#b47f63',
242-
'6 Coconut, banana, mango, etc. mixed with pasture and livestock': '#c89c82',
243-
'6 Coconut, banana, mango, etc. mixed with aquaculture/coastal fisheries': '#dcbaa1',
244-
'6 Coconut, banana, mango, etc.': '#efd7c0',
245-
'7 Cool environment - Coconut, banana, mango, etc. and tourism': '#b10026',
246-
'7 Cool environment - Pasture mixed with vegetable farming, mining and/or tourism': '#e31a1c',
247-
'7 Cool environment - Vegetable farming': '#fc4e2a',
248-
'7 Cool environment - Vegetable farming mixed with coconut, banana, mango, etc.': '#fd8d3c',
249-
'7 Cool environment - Vegetable farming mixed with irrigated rice': '#feb24c',
250-
'7 Cool environment - Vegetable farming mixed with irrigated rice and mining': '#fed976',
251-
'7 Cool environment - Vegetable farming mixed with urban, mining and/or tourism': '#ffffb2',
252-
'8 Pasture mixed with aquaculture/freshwater fisheries, and mining': '#050505',
253-
'8 Pasture mixed with Coconut, banana, mango, etc.': '#363636',
254-
'8 Pasture mixed with Coconut, banana, mango, etc. and tourism': '#676767',
255-
'8 Pasture mixed with urban and mining': '#989898',
256-
'8 Pasture mixed with vegetable farming': '#c9c9c9',
257-
'8 Pasture mixed with vegetable farming, and tourism': '#fafafa',
258-
'9 Built-up areas': '#ffff00'
237+
'5 Vegetable farming mixed with mining': '#960d49',
238+
'5 Vegetable farming mixed with pasture and livestock': '#9a1b53',
239+
'5 Vegetable farming mixed with pasture, livestock, and mining': '#9f295d',
240+
'5 Vegetable farming mixed with perennial crops': '#a33768',
241+
'5 Vegetable farming mixed with perennial crops and mining': '#a74572',
242+
'5 Vegetable farming mixed with perennial crops and tourism': '#b06086',
243+
'5 Vegetable farming mixed with perennial crops, mining, and/or tourism': '#b56e90',
244+
'5 Vegetable farming mixed with perennial crops, pasture, and tourism': '#be8aa5',
245+
'5 Vegetable farming mixed with perennial crops, pasture, mining, and/or tourism': '#c298af',
246+
'5 Vegetable farming mixed with urban and tourism': '#c7a5b9',
247+
'5 Vegetable farming mixed with urban, mining, and/or tourism': '#c7aabb',
248+
'5 Vegetables farming mixed with aquaculture/freshwater fisheries': '#c7b3bf',
249+
'6 Perennial crops': '#722e14',
250+
'6 Perennial crops mixed with aquaculture/coastal fisheries': '#7b3b21',
251+
'6 Perennial crops mixed with mining': '#84482e',
252+
'6 Perennial crops mixed with pasture and livestock': '#8d543b',
253+
'6 Perennial crops mixed with pasture, livestock, and mining': '#976148',
254+
'6 Perennial crops mixed with urban and tourism': '#a97b62',
255+
'6 Perennial crops mixed with urban, mining, and/or tourism': '#b2876e',
256+
'6 Perennial crops mixed with vegetables': '#b2876e',
257+
'6 Perennial crops mixed with vegetables and mining': '#bb947b',
258+
'6 Perennial crops mixed with vegetables and tourism': '#c4a188',
259+
'6 Perennial crops mixed with vegetables, mining, and/or tourism': '#ceae95',
260+
'7 Cool environment - Pasture mixed with vegetable farming and tourism': '#d4d400',
261+
'7 Cool environment - Pasture mixed with vegetable farming, mining, and/or tourism': '#d9d918',
262+
'7 Cool environment - Perennial crops and tourism': '#dfdf30',
263+
'7 Cool environment - Vegetable farming': '#e4e448',
264+
'7 Cool environment - Vegetable farming mixed with irrigated rice': '#eaea61',
265+
'7 Cool environment - Vegetable farming mixed with mining': '#efef79',
266+
'7 Cool environment - Vegetable farming mixed with perennial crops': '#f4f491',
267+
'7 Cool environment - Vegetable farming mixed with urban and tourism': '#fafaa9',
268+
'8 Pasture mixed with aquaculture/freshwater fisheries': '#585858',
269+
'8 Pasture mixed with perennial crops': '#666666',
270+
'8 Pasture mixed with perennial crops and tourism': '#747474',
271+
'8 Pasture mixed with perennial crops, mining, and/or tourism': '#828282',
272+
'8 Pasture mixed with urban': '#909090',
273+
'8 Pasture mixed with urban and mining': '#9e9e9e',
274+
'8 Pasture mixed with vegetable farming': '#acacac',
275+
'8 Pasture mixed with vegetable farming and mining': '#bababa',
276+
'8 Pasture mixed with vegetable farming and tourism': '#c8c8c8',
277+
'9 Built-up areas - Low Density Rural Cluster': '#67000d',
278+
'9 Built-up areas - Low Density Rural Cluster with presence of mining': '#a91016',
279+
'9 Built-up areas - Rural Cluster': '#cc191d',
280+
'9 Built-up areas - Rural Cluster with presence of mining': '#ea372a',
281+
'9 Built-up areas - Suburban/Peri-Urban': '#f85d42',
282+
'9 Built-up areas - Urban Centre': '#fc8161',
283+
'9 Built-up areas - Urban Centre with presence of mining': '#fca486',
284+
'9 Built-up areas - Very Low Density Rural Cluster': '#fdc6af',
285+
'9 Built-up areas - Very Low Density Rural Cluster with presence of mining': '#fee3d6'
259286
}
260287

261288
return styles
@@ -283,7 +310,7 @@ MapboxMap.prototype.addLayerSource = function (layerName, tilesetName, tilesetUr
283310
this.removePopups()
284311

285312
// Set the color expression to use on the layer
286-
const colorExpression = ['match', ['get', 'Legend_v2']]
313+
const colorExpression = ['match', ['get', 'Legend_2']]
287314

288315
const styles = this.colorCodes
289316
Object.keys(styles).forEach((item, index) => {
@@ -449,7 +476,7 @@ MapboxMap.prototype.toggleHandlers = function (enable) {
449476
*/
450477
MapboxMap.prototype.loadAllTilesets = function (tilesets) {
451478
// Set the color expression to use on the layer
452-
const colorExpression = ['match', ['get', 'Legend_v2']]
479+
const colorExpression = ['match', ['get', 'Legend_2']]
453480
const styles = this.colorCodes
454481

455482
Object.keys(styles).forEach((item, index) => {

0 commit comments

Comments
 (0)