Skip to content

Commit

Permalink
PMTiles only
Browse files Browse the repository at this point in the history
  • Loading branch information
@conbrad
conbrad committed Jan 30, 2025
1 parent c6bb2d8 commit 26f6ff3
Showing 1 changed file with 77 additions and 143 deletions.
220 changes: 77 additions & 143 deletions mobile/asa-go/src/FBAMap.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { PMTilesVectorSource } from "ol-pmtiles";
import { Map, View } from "ol";
import "ol/ol.css";
import { defaults as defaultControls, FullScreen } from "ol/control";
Expand All @@ -12,16 +11,13 @@ import { source as baseMapSource, BC_EXTENT } from "utils/constants";
import TileLayer from "ol/layer/Tile";
import { FireCenter, FireShape, FireShapeArea, RunType } from "api/fbaAPI";
import {
fireCentreStyler,
fireCentreLabelStyler,
fireShapeStyler,
fireShapeLineStyler,
fireShapeLabelStyler,
fireCentreLineStyler,
hfiStyler,
} from "@/featureStylers";
import { DateTime } from "luxon";
import { PMTILES_BUCKET } from "utils/env";
import { isUndefined, cloneDeep } from "lodash";
import { Box } from "@mui/material";
// import Legend from "@/Legend";
Expand Down Expand Up @@ -54,8 +50,6 @@ export interface FBAMapProps {
}

const FBAMap = (props: FBAMapProps) => {
const [showShapeStatus] = useState(true);
// const [showHFI, setShowHFI] = useState(false);
const [map, setMap] = useState<Map | null>(null);
const mapRef = useRef<HTMLDivElement | null>(
null
Expand All @@ -64,105 +58,6 @@ const FBAMap = (props: FBAMapProps) => {
null
) as React.MutableRefObject<HTMLElement>;

const fireCentreVectorSource = new PMTilesVectorSource({
url: `${PMTILES_BUCKET}fireCentres.pmtiles`,
});
const fireShapeVectorSource = new PMTilesVectorSource({
url: `${PMTILES_BUCKET}fireZoneUnits.pmtiles`,
});
const fireCentreLabelVectorSource = new PMTilesVectorSource({
url: `${PMTILES_BUCKET}fireCentreLabels.pmtiles`,
});
const fireShapeLabelVectorSource = new PMTilesVectorSource({
url: `${PMTILES_BUCKET}fireZoneUnitLabels.pmtiles`,
});

const [fireCentreVTL] = useState(
new VectorTileLayer({
source: fireCentreVectorSource,
style: fireCentreStyler(props.selectedFireCenter),
zIndex: 51,
})
);

const [fireCentreLineVTL] = useState(
new VectorTileLayer({
source: fireCentreVectorSource,
style: fireCentreLineStyler(props.selectedFireCenter),
zIndex: 52,
})
);

const [fireShapeVTL] = useState(
new VectorTileLayer({
source: fireShapeVectorSource,
style: fireShapeStyler(
cloneDeep(props.fireShapeAreas),
props.advisoryThreshold,
showShapeStatus
),
zIndex: 50,
properties: { name: "fireShapeVector" },
})
);
const [fireShapeHighlightVTL] = useState(
new VectorTileLayer({
source: fireShapeVectorSource,
style: fireShapeLineStyler(
cloneDeep(props.fireShapeAreas),
props.advisoryThreshold,
props.selectedFireShape
),
zIndex: 53,
properties: { name: "fireShapeVector" },
})
);
// Seperate layer for polygons and for labels, to avoid duplicate labels.
const [fireCentreLabelVTL] = useState(
new VectorTileLayer({
source: fireCentreLabelVectorSource,
style: fireCentreLabelStyler,
zIndex: 100,
maxZoom: 6,
})
);
// Seperate layer for polygons and for labels, to avoid duplicate labels.
const [fireShapeLabelVTL] = useState(
new VectorTileLayer({
declutter: true,
source: fireShapeLabelVectorSource,
style: fireShapeLabelStyler(props.selectedFireShape),
zIndex: 99,
minZoom: 6,
})
);

useEffect(() => {
if (map) {
map.on("click", (event) => {
fireShapeVTL.getFeatures(event.pixel).then((features) => {
if (!features.length) {
props.setSelectedFireShape(undefined);
return;
}
const feature = features[0];
if (!feature) {
return;
}

const fireZone: FireShape = {
fire_shape_id: feature.getProperties().OBJECTID,
mof_fire_zone_name: feature.getProperties().FIRE_ZONE,
mof_fire_centre_name: feature.getProperties().FIRE_CENTR,
area_sqm: feature.getProperties().Shape_Area,
};
props.setZoomSource("fireShape");
props.setSelectedFireShape(fireZone);
});
});
}
}, [map]); // eslint-disable-line react-hooks/exhaustive-deps

useEffect(() => {
// zoom to fire center or whole province
if (!map) return;
Expand Down Expand Up @@ -202,29 +97,6 @@ const FBAMap = (props: FBAMapProps) => {
useEffect(() => {
if (!map) return;

fireCentreVTL.setStyle(fireCentreStyler(props.selectedFireCenter));
fireShapeVTL.setStyle(
fireShapeStyler(
cloneDeep(props.fireShapeAreas),
props.advisoryThreshold,
showShapeStatus
)
);
fireShapeLabelVTL.setStyle(fireShapeLabelStyler(props.selectedFireShape));
fireShapeHighlightVTL.setStyle(
fireShapeLineStyler(
cloneDeep(props.fireShapeAreas),
props.advisoryThreshold,
props.selectedFireShape
)
);
fireCentreLineVTL.setStyle(fireCentreLineStyler(props.selectedFireCenter));

fireShapeVTL.changed();
fireShapeHighlightVTL.changed();
fireShapeLabelVTL.changed();
fireCentreLineVTL.changed();
fireCentreVTL.changed();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
props.selectedFireCenter,
Expand Down Expand Up @@ -252,10 +124,6 @@ const FBAMap = (props: FBAMapProps) => {
new TileLayer({
source: baseMapSource,
}),
fireShapeVTL,
fireShapeHighlightVTL,
fireCentreLabelVTL,
fireShapeLabelVTL,
],
overlays: [],
controls: defaultControls().extend([new FullScreen()]),
Expand All @@ -274,27 +142,93 @@ const FBAMap = (props: FBAMapProps) => {

setMap(mapObject);

const load = async () => {
const fireCentreFileVectorSource =
await PMTilesFileVectorSource.createHFILayer(
const loadPMTiles = async () => {
// TODO make for date, run type, run date configurable from UI
const hfiVectorSource = await PMTilesFileVectorSource.createHFILayer(
new PMTilesCache(Filesystem),
{
filename: "hfi.pmtiles",
for_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
run_type: RunType.FORECAST,
run_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
}
);

const fireCentresSource = await PMTilesFileVectorSource.createStaticLayer(
new PMTilesCache(Filesystem),
{
filename: "fireCentres.pmtiles",
}
);

const fireCentreLabelVectorSource =
await PMTilesFileVectorSource.createStaticLayer(
new PMTilesCache(Filesystem),
{
filename: "fireCentreLabels.pmtiles",
}
);

const fireZoneSource = await PMTilesFileVectorSource.createStaticLayer(
new PMTilesCache(Filesystem),
{
filename: "fireZoneUnits.pmtiles",
}
);

const fireZoneLabelVectorSource =
await PMTilesFileVectorSource.createStaticLayer(
new PMTilesCache(Filesystem),
{
filename: "hfi.pmtiles",
for_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
run_type: RunType.FORECAST,
run_date: DateTime.fromFormat("2024/08/08", "yyyy/MM/dd"),
filename: "fireZoneUnitLabels.pmtiles",
}
);
if (mapObject) {
const fileLayer = new VectorTileLayer({
source: fireCentreFileVectorSource,
const fireCentreFileLayer = new VectorTileLayer({
source: fireCentresSource,
style: fireCentreLineStyler(props.selectedFireCenter),
zIndex: 52,
});

const fireCentreLabelsFileLayer = new VectorTileLayer({
source: fireCentreLabelVectorSource,
style: fireCentreLabelStyler,
zIndex: 100,
maxZoom: 6,
});

const fireZoneFileLayer = new VectorTileLayer({
source: fireZoneSource,
style: fireShapeLineStyler(
cloneDeep(props.fireShapeAreas),
props.advisoryThreshold,
props.selectedFireShape
),
zIndex: 53,
properties: { name: "fireShapeVector" },
});

const fireZoneLabelFileLayer = new VectorTileLayer({
source: fireZoneLabelVectorSource,
declutter: true,
style: fireShapeLabelStyler(props.selectedFireShape),
zIndex: 99,
minZoom: 6,
});

const hfiFileLayer = new VectorTileLayer({
source: hfiVectorSource,
style: hfiStyler,
zIndex: 52,
});
mapObject.addLayer(fileLayer);
mapObject.addLayer(hfiFileLayer);
mapObject.addLayer(fireCentreFileLayer);
mapObject.addLayer(fireCentreLabelsFileLayer);
mapObject.addLayer(fireZoneFileLayer);
mapObject.addLayer(fireZoneLabelFileLayer);
}
};
load();
loadPMTiles();
return () => {
mapObject.setTarget("");
};
Expand Down

0 comments on commit 26f6ff3

Please sign in to comment.