Skip to content

Commit

Permalink
fix(noah-studio): text color for boundaries and displaying hazard whe…
Browse files Browse the repository at this point in the history 
…n mapstyle change (#383)

* Added github actions workflow for aut deployment to .72 server.

* Added github action for S3 deployment.

* Changed to staging. Created branch for staging.

* Retrigger deployment workflow.

* fix(studio): zoom in on ios (#192)

# Summary 

- Fixes #186
- The `load` event isn't firing on NOAH Studio. As such, the `centerListener()` method isn't called which is responsible for the zooming in to the selected place. However, `style.load` do get called. The fix implemented here is to also use the event `style.load` to call the methods that were previously called by upon the firing of the `load` event but only listen to `style.load` once.
  - We need to further investigate **why** `load` doesn't work on Studio in iOS but works in KYH
- Confirming that only the NOAH Studio is affected by this issue.
 
# Demo

![Kapture 2021-10-05 at 22 49 45](https://user-images.githubusercontent.com/11599005/136047077-d0da7a85-9157-4d01-bae9-07a6039fd9c1.gif)

* ci(netlify): add _redirects file

* S3 Deployment Validation (#198)

* Added if condition to run workflow only on successful PR merge. (#195)

* Checking proper automation workflow. Will revert this small change upon validation. (#196)

* Change deployment trigger. Revert small biblio change. (#199)

* Checking proper automation workflow. Will revert this small change upon validation.

* Changed trigger for deployment workflow. Revert small change to bibliography.

* Cascade dev changes on workflow to prod (#202)

* Added AWS deployment workflow

* fix text size for province and change color from red to black

* fix bug when changing basemap

* fixed calculation of area and distance when changing basemap/map style

* location of output display of distance and area

---------

Co-authored-by: pfgoting <[email protected]>
Co-authored-by: Jadurani Davalos <[email protected]>
Co-authored-by: kennethbeoliporada <[email protected]>
Co-authored-by: bon-carpo <[email protected]>
  • Loading branch information
@kennethliporada @pfgoting
@jadurani @bon-carpo
5 people authored Jun 26, 2024
1 parent c0bb308 commit 7b02842
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 207 deletions.
46 changes: 1 addition & 45 deletions src/app/features/noah-playground/components/map-playground/map-playground.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,51 +16,7 @@
"
></div>

<div
class="top-48 absolute z-10 right-0 mt-2 pl-2 h-14 w-14 flex flex-row py-2"
>
<div class="p-2">
<div class="inline-block relative group">
<div class="border bg-white text-gray-500 shadow rounded flex flex-col">
<button
class="
py-1
px-1
flex
items-center
justify-center
focus:outline-none
border-b
hover:bg-gray-300
"
(click)="calculateDistance()"
>
<img class="w-44 inline-block" src="assets/icons/distance.svg" />
</button>
<button
class="
py-1
px-1
flex
items-center
justify-center
focus:outline-none
border-b border-indigo-100
hover:bg-gray-300
"
>
<img
class="w-44 inline-block"
src="assets/icons/delete-distance.svg"
(click)="clearDistance()"
/>
</button>
</div>
</div>
</div>
</div>

<div class="top-72 absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-1.5">
<div class="top-60 absolute z-10 right-0 pl-2 h-16 w-16 flex flex-row py-1.5">
<div class="p-2">
<div class="dropdown inline-block relative">
<button
Expand Down
202 changes: 40 additions & 162 deletions src/app/features/noah-playground/components/map-playground/map-playground.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,7 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
this.addGeolocationControls();
this.initCenterListener();
this.initGeolocationListener();
this.initCalculation();
});

fromEvent(this.map, 'style.load')
Expand All @@ -213,9 +214,6 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
this.initBarangayBoundary();
this.initAffectedExposure();
this.initRainForcast();
this.initArea();
this.initDistance();
this.clearDistance();
});
}

Expand Down Expand Up @@ -1370,17 +1368,11 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
paint: linePaint,
interactive: false,
});

// Inside the initBoundaries() method, before the forEach loop
// Define variables to hold text layer IDs
let municipalTextLayerID;
let provincialTextLayerID;

// Inside the forEach loop where boundaries are defined
// Add text layer for municipal and provincial boundaries
if (boundariesType === 'municipal' || boundariesType === 'provincial') {
const textLayerID = `${boundariesType}-text-layer`;

this.map.addLayer({
id: textLayerID,
type: 'symbol',
Expand All @@ -1392,15 +1384,17 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
boundariesType === 'municipal' ? 'Mun_Name' : 'Pro_Name',
],
'text-font': ['Open Sans Regular'],
'text-size': 15,
'text-size': boundariesType === 'municipal' ? 15 : 20, // Set text size based on boundary type
'text-offset': [0, 0.5],
'text-anchor': 'center',
'text-allow-overlap': false, // Allow text to overlap
'text-allow-overlap': false, // Prevent text from overlapping
'text-optional': true, // Hide labels that would overlap
},
paint: {
'text-color': '#FF0000', // Adjust text color
'text-halo-color': '#fff', // Add text border color
'text-halo-width': 1, // text border width
'text-color':
boundariesType === 'municipal' ? '#7e22ce' : '#010100', // Adjust text color
'text-halo-color': '#FFFFFF', // Add text border color
'text-halo-width': 1, // Text border width
},
filter: ['==', '$type', 'Polygon'], // Only show text for polygons
});
Expand Down Expand Up @@ -2118,176 +2112,60 @@ export class MapPlaygroundComponent implements OnInit, OnDestroy {
}
}

private initArea() {
initCalculation() {
this.draw = new MapboxDraw({
displayControlsDefault: false,
controls: {
polygon: true,
line_string: true,
trash: true,
},
});

this.map.addControl(this.draw);

this.map.on('draw.create', this.updateArea.bind(this));
this.map.on('draw.delete', this.updateArea.bind(this));
this.map.on('draw.update', this.updateArea.bind(this));
this.map.on('draw.delete', this.clearDistance.bind(this));

// Event listener for drawing end
this.map.on('draw.modechange', (event) => {
if (event.mode === 'draw_polygon') {
// Add event listener for start of drawing
this.clearDistance();
}
});
this.map.on('draw.create', this.updateCalculate.bind(this));
this.map.on('draw.delete', this.updateCalculate.bind(this));
this.map.on('draw.update', this.updateCalculate.bind(this));
}

private updateArea(event) {
private updateCalculate(event) {
const data = this.draw.getAll();
const answer = document.getElementById('area');
let totalArea = 0;
let totalLength = 0;

if (data.features.length > 0) {
const area = turf.area(data);
const rounded_area = Math.round(area * 100) / 100;
answer.innerHTML = `<p>Total Area: ${rounded_area.toLocaleString()} sqm</p>`;
data.features.forEach((feature) => {
if (feature.geometry.type === 'Polygon') {
const area = turf.area(feature);
totalArea += area;
} else if (feature.geometry.type === 'LineString') {
const length = turf.length(feature, { units: 'kilometers' });
totalLength += length;
}
});

let output = '';

if (totalLength > 0) {
const roundedLength = Math.round(totalLength * 100) / 100;
output += `<p>Total Distance: ${roundedLength.toLocaleString()} km</p>`;
}
if (totalArea > 0) {
const roundedArea = Math.round(totalArea * 100) / 100;
output += `<p>Total Area: ${roundedArea.toLocaleString()} sqm</p>`;
}

answer.innerHTML = output;
} else {
answer.innerHTML = '';
if (event.type !== 'draw.delete') {
console.log('computation for area: ');
console.log('computation for area or distance: ');
}
}
}

initDistance() {
this.distanceContainer = document.getElementById('distance');
this.geojson = {
type: 'FeatureCollection',
features: [],
};
this.linestring = {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [],
},
};

this.map.on('load', () => {
this.map.addSource('geojson', {
type: 'geojson',
data: this.geojson,
});

this.map.addLayer({
id: 'measure-points',
type: 'circle',
source: 'geojson',
paint: {
'circle-radius': 5,
'circle-color': '#000',
},
filter: ['in', '$type', 'Point'],
});

this.map.addLayer({
id: 'measure-lines',
type: 'line',
source: 'geojson',
layout: {
'line-cap': 'round',
'line-join': 'round',
},
paint: {
'line-color': '#000',
'line-width': 2.5,
},
filter: ['in', '$type', 'LineString'],
});

const handleClickOrTouch = (e) => {
if (this.measurementActive) {
const features = this.map.queryRenderedFeatures(e.point, {
layers: ['measure-points'],
});

if (this.geojson.features.length > 1) this.geojson.features.pop();

this.distanceContainer.innerHTML = '';

if (features.length) {
const id = features[0].properties.id;
this.geojson.features = this.geojson.features.filter(
(point) => point.properties.id !== id
);
} else {
const point = {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [e.lngLat.lng, e.lngLat.lat],
},
properties: {
id: String(new Date().getTime()),
},
};

this.geojson.features.push(point);
}

if (this.geojson.features.length > 1) {
this.linestring.geometry.coordinates = this.geojson.features.map(
(point) => point.geometry.coordinates
);

this.geojson.features.push(this.linestring);

const value = document.createElement('pre');
const distance = turf.length(this.linestring);
value.textContent = `Total distance: ${distance.toLocaleString()}km`;
this.distanceContainer.appendChild(value);
}

(this.map.getSource('geojson') as mapboxgl.GeoJSONSource).setData(
this.geojson
);
}
};

this.map.on('click', handleClickOrTouch);
this.map.on('touchend', handleClickOrTouch);

this.map.on('mousemove', (e) => {
if (!this.measurementActive) {
return;
}
const features = this.map.queryRenderedFeatures(e.point, {
layers: ['measure-points'],
});
this.map.getCanvas().style.cursor = features.length
? 'pointer'
: 'crosshair';
});
});
}

calculateDistance(): void {
this.measurementActive = true;
this.geojson.features = [];
this.distanceContainer.innerHTML = '';
(this.map.getSource('geojson') as mapboxgl.GeoJSONSource).setData(
this.geojson
);
}

clearDistance() {
this.measurementActive = false;
this.geojson.features = [];
this.distanceContainer.innerHTML = '';
(this.map.getSource('geojson') as mapboxgl.GeoJSONSource).setData(
this.geojson
);
}

/**
* All hazard maps except the debris flow and alluvial fan are
* added to the map as layers of FillLayer type with gradations
Expand Down

0 comments on commit 7b02842

Please sign in to comment.