Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hotfix: Vacant properties pmtiles missing #709

Closed
wants to merge 2 commits into from
Closed

Hotfix: Vacant properties pmtiles missing #709

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
436c9c0
Merge pull request #707 from CodeForPhilly/staging
CodeWritingCow Jun 24, 2024
ceb8c1e
Use staging URL for vacant properties pmtiles
CodeWritingCow Jun 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 40 additions & 28 deletions src/components/PropertyMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
maptilerApiKey,
mapboxAccessToken,
useStagingTiles,
googleCloudBucketName
googleCloudBucketName,
} from "../config/config";
import { useFilter } from "@/context/FilterContext";
import Map, {
Expand Down Expand Up @@ -116,19 +116,25 @@ const MapControls = () => {
<NavigationControl showCompass={false} position="bottom-right" />
<GeolocateControl position="bottom-right" />
<ScaleControl />
{(smallScreenToggle || window.innerWidth > 640) ?
<MapLegendControl position="bottom-left" setSmallScreenToggle={setSmallScreenToggle} layerStyle={layerStylePolygon} />
:
{smallScreenToggle || window.innerWidth > 640 ? (
<MapLegendControl
position="bottom-left"
setSmallScreenToggle={setSmallScreenToggle}
layerStyle={layerStylePolygon}
/>
) : (
<div className="custom-legend-info-div maplibregl-ctrl maplibregl-ctrl-group w-[40px] h-[40px]">
<ThemeButton
className="custom-legend-info z-10"
startContent={<span className="custom-legend-info-icon maplibregl-ctrl-icon"></span>}
onPress={() => setSmallScreenToggle(s => !s)}
startContent={
<span className="custom-legend-info-icon maplibregl-ctrl-icon"></span>
}
onPress={() => setSmallScreenToggle((s) => !s)}
/>
</div>
}
)}
</>
)
);
};

interface PropertyMapProps {
Expand Down Expand Up @@ -189,7 +195,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
layers,
});

setSearchedProperty({...searchedProperty, address: "" })
setSearchedProperty({ ...searchedProperty, address: "" });
if (features.length > 0) {
setSelectedProperty(features[0]);
} else {
Expand Down Expand Up @@ -217,7 +223,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
}
return acc;
},
0,
0
);

setFeatureCount(clusteredFeatureCount);
Expand Down Expand Up @@ -252,7 +258,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
map.project(searchedProperty.coordinates),
{
layers,
},
}
);
if (features.length > 0) {
setSelectedProperty(features[0]);
Expand Down Expand Up @@ -293,7 +299,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
tabIndex={0}
/>
</Tooltip>,
legendSummary,
legendSummary
);
}

Expand All @@ -302,13 +308,15 @@ const PropertyMap: FC<PropertyMapProps> = ({
const center = map.getCenter();
geocoderRef.current = new MapboxGeocoder({
accessToken: mapboxAccessToken,
bbox: [-75.288283,39.864114,-74.945063,40.140129],
bbox: [-75.288283, 39.864114, -74.945063, 40.140129],
filter: function (item) {
return item.context.some((i) => {
return (
(i.id.split('.').shift() === 'place' && i.text === 'Philadelphia') ||
(i.id.split('.').shift() === 'district' && i.text === 'Philadelphia County')
);
return (
(i.id.split(".").shift() === "place" &&
i.text === "Philadelphia") ||
(i.id.split(".").shift() === "district" &&
i.text === "Philadelphia County")
);
});
},
mapboxgl: mapboxgl,
Expand All @@ -321,7 +329,7 @@ const PropertyMap: FC<PropertyMapProps> = ({

map.addControl(geocoderRef.current as unknown as IControl, "top-right");

geocoderRef.current.on("result", e => {
geocoderRef.current.on("result", (e) => {
const address = e.result.place_name.split(",")[0];
setSelectedProperty(null);
setSearchedProperty({
Expand Down Expand Up @@ -370,7 +378,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
const updateFilter = () => {
if (!map) return;

const isAnyFilterEmpty = Object.values(appFilter).some(filterItem => {
const isAnyFilterEmpty = Object.values(appFilter).some((filterItem) => {
return filterItem.values.length === 0;
});

Expand All @@ -385,7 +393,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
(acc, [property, filterItem]) => {
if (filterItem.values.length) {
const thisFilterGroup: any = ["any"];
filterItem.values.forEach(item => {
filterItem.values.forEach((item) => {
if (filterItem.useIndexOfFilter) {
thisFilterGroup.push([
">=",
Expand All @@ -401,7 +409,7 @@ const PropertyMap: FC<PropertyMapProps> = ({
}
return acc;
},
[] as any[],
[] as any[]
);

map.setFilter("vacant_properties_tiles_points", ["all", ...mapFilter]);
Expand All @@ -424,16 +432,16 @@ const PropertyMap: FC<PropertyMapProps> = ({
mapLib={maplibregl as any}
initialViewState={initialViewState}
mapStyle={`https://api.maptiler.com/maps/dataviz/style.json?key=${maptilerApiKey}`}
onMouseEnter={e => changeCursor(e, "pointer")}
onMouseLeave={e => changeCursor(e, "default")}
onMouseEnter={(e) => changeCursor(e, "pointer")}
onMouseLeave={(e) => changeCursor(e, "default")}
onClick={onMapClick}
minZoom={MIN_MAP_ZOOM}
maxZoom={MAX_MAP_ZOOM}
interactiveLayerIds={layers}
onLoad={e => {
onLoad={(e) => {
setMap(e.target);
}}
onSourceData={e => {
onSourceData={(e) => {
handleSetFeatures(e);
}}
onMoveEnd={handleSetFeatures}
Expand All @@ -456,9 +464,13 @@ const PropertyMap: FC<PropertyMapProps> = ({
)}
<Source
type="vector"
url={`pmtiles://https://storage.googleapis.com/${googleCloudBucketName}/vacant_properties_tiles${
useStagingTiles ? "_staging" : ""
}.pmtiles`}
// TODO: Uncomment this when we fix 404 issue with vacant_properties_tiles.pmtiles
// url={`pmtiles://https://storage.googleapis.com/${googleCloudBucketName}/vacant_properties_tiles${
// useStagingTiles ? "_staging" : ""
// }.pmtiles`}

// TODO: Remove this url line when we fix 404 issue with vacant_properties_tiles.pmtiles
url={`pmtiles://https://storage.googleapis.com/${googleCloudBucketName}/vacant_properties_tiles_staging.pmtiles`}
id="vacant_properties_tiles"
>
<Layer {...layerStylePoints} />
Expand Down