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

Address theme #97

Merged
merged 6 commits into from
Jul 22, 2024
Merged

Address theme #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4ba6c0b
added address theme to selector, handling for inspector panel, and th…
eti7075 Jul 15, 2024
69450cf
Address tooltips added from schema docs
eti7075 Jul 15, 2024
e0eb6e1
Parametize point size, set address to 5
eti7075 Jul 17, 2024
38f4ea5
Address tips are updated with new docs info
eti7075 Jul 18, 2024
b0c28fd
Merge branch 'main' into address_theme
eti7075 Jul 19, 2024
1f17c3c
Updated address url
eti7075 Jul 22, 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
246 changes: 132 additions & 114 deletions site/src/Map.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import "maplibre-gl/dist/maplibre-gl.css";
import * as pmtiles from "pmtiles";
import maplibregl from "maplibre-gl";

import { useState, useEffect, useCallback, useRef } from "react";
import { Fragment, useState, useEffect, useCallback, useRef } from "react";
import { Layer, GeolocateControl } from "react-map-gl/maplibre";
import InspectorPanel from "./inspector_panel/InspectorPanel";
import PropTypes from "prop-types";
Expand All @@ -17,7 +17,7 @@ import ThemeSelector from "./ThemeSelector";
import BugIcon from "./icons/icon-bug.svg?react";

const PMTILES_URL =
"pmtiles://https://d32gfzcnkb85e2.cloudfront.net/2024-06-13-beta/";
"pmtiles://https://d3c1b7bog2u1nn.cloudfront.net/2024-07-22/";

const INITIAL_VIEW_STATE = {
latitude: 51.05,
Expand Down Expand Up @@ -58,6 +58,7 @@ const ThemeTypeLayer = ({
type,
color,
point,
pointSize,
line,
polygon,
extrusion,
Expand All @@ -82,7 +83,7 @@ const ThemeTypeLayer = ({
0,
1,
17,
8,
pointSize,
],
}}
layout={{ visibility: visible ? "visible" : "none" }}
Expand Down Expand Up @@ -245,7 +246,7 @@ export default function Map({ mode, mapEntity, setMapEntity, setZoom }) {
setCursor("pointer");
}
},
[visibleThemes],
[visibleThemes]
);
const onMouseLeave = useCallback(() => setCursor("auto"), []);

Expand All @@ -270,7 +271,7 @@ export default function Map({ mode, mapEntity, setMapEntity, setZoom }) {
sourceLayer: feature.sourceLayer,
id: feature.id,
},
{ selected: true },
{ selected: true }
);
setMapEntity({
theme: feature.source,
Expand All @@ -281,7 +282,7 @@ export default function Map({ mode, mapEntity, setMapEntity, setZoom }) {
setMapEntity({});
}
},
[visibleThemes],
[visibleThemes]
);

const handleZoom = (event) => {
Expand Down Expand Up @@ -316,114 +317,132 @@ export default function Map({ mode, mapEntity, setMapEntity, setZoom }) {
<ThemeSource name="places" url={PMTILES_URL} />
<ThemeSource name="divisions" url={PMTILES_URL} />
<ThemeSource name="transportation" url={PMTILES_URL} />
<ThemeSource name="addresses" url={PMTILES_URL} />

{[false,true].map((label) => {
return <>
<ThemeTypeLayer
theme="base"
type="land"
point
line
polygon
color="#ccebc5"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="land_cover"
polygon
color="#b3de69"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="land_use"
point
line
polygon
color="#b3de69"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="water"
point
line
polygon
color="#80b1d3"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="infrastructure"
point
line
polygon
color="#b3de69"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="divisions"
type="division_area"
polygon
color="#bc80bd"
visible={visibleThemes.includes("divisions")}
label={label}
/>
<ThemeTypeLayer
theme="divisions"
type="boundary"
line
color="#bc80bd"
visible={visibleThemes.includes("divisions")}
label={label}
/>
<ThemeTypeLayer
theme="transportation"
type="segment"
line
color="#fb8072"
visible={visibleThemes.includes("transportation")}
label={label}
/>
<ThemeTypeLayer
theme="transportation"
type="connector"
point
color="#fb8072"
visible={visibleThemes.includes("transportation")}
label={label}
/>
<ThemeTypeLayer
theme="buildings"
type="building"
extrusion
color="#d9d9d9"
visible={visibleThemes.includes("buildings")}
label={label}
/>
<ThemeTypeLayer
theme="buildings"
type="building_part"
extrusion
color="#d9d9d9"
visible={visibleThemes.includes("buildings")}
label={label}
/>
<ThemeTypeLayer
theme="places"
type="place"
point
color="#fdb462"
visible={visibleThemes.includes("places")}
label={label}
/>
</>;
{[false, true].map((label) => {
return (
<Fragment key={label}>
<ThemeTypeLayer
theme="base"
type="land"
point
pointSize={8}
line
polygon
color="#ccebc5"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="land_cover"
polygon
color="#b3de69"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="land_use"
point
pointSize={8}
line
polygon
color="#b3de69"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="water"
point
pointSize={8}
line
polygon
color="#80b1d3"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="base"
type="infrastructure"
point
pointSize={8}
line
polygon
color="#b3de69"
visible={visibleThemes.includes("base")}
label={label}
/>
<ThemeTypeLayer
theme="divisions"
type="division_area"
polygon
color="#bc80bd"
visible={visibleThemes.includes("divisions")}
label={label}
/>
<ThemeTypeLayer
theme="divisions"
type="division_boundary"
line
color="#bc80bd"
visible={visibleThemes.includes("divisions")}
label={label}
/>
<ThemeTypeLayer
theme="transportation"
type="segment"
line
color="#fb8072"
visible={visibleThemes.includes("transportation")}
label={label}
/>
<ThemeTypeLayer
theme="transportation"
type="connector"
point
pointSize={8}
color="#fb8072"
visible={visibleThemes.includes("transportation")}
label={label}
/>
<ThemeTypeLayer
theme="buildings"
type="building"
extrusion
color="#d9d9d9"
visible={visibleThemes.includes("buildings")}
label={label}
/>
<ThemeTypeLayer
theme="buildings"
type="building_part"
extrusion
color="#d9d9d9"
visible={visibleThemes.includes("buildings")}
label={label}
/>
<ThemeTypeLayer
theme="places"
type="place"
point
pointSize={8}
color="#fdb462"
visible={visibleThemes.includes("places")}
label={label}
/>
<ThemeTypeLayer
theme="addresses"
type="address"
point
pointSize={5}
color="#00FFFF"
visible={visibleThemes.includes("addresses")}
label={label}
/>
</Fragment>
);
})}
<Layer
id="divisions_division"
Expand All @@ -441,7 +460,6 @@ export default function Map({ mode, mapEntity, setMapEntity, setZoom }) {
"text-size": 11,
}}
/>

<NavigationControl position="top-right"></NavigationControl>
<GeolocateControl />
<AttributionControl customAttribution='<a href="https://openstreetmap.org/copyright" target="_blank">© OpenStreetMap contributors</a>, <a href="https://overturemaps.org" target="_blank">Overture Maps Foundation</a>' />
Expand Down
23 changes: 22 additions & 1 deletion site/src/ThemeSelector.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ function ThemeSelector({ visibleThemes, mode }) {
const [divisions, setDivisions] = useState(true);
const [places, setPlaces] = useState(true);
const [transportation, setTransportation] = useState(true);
const [addresses, setAddresses] = useState(true);

useEffect(() => {
let layers = [];
Expand All @@ -18,8 +19,17 @@ function ThemeSelector({ visibleThemes, mode }) {
if (divisions) layers.push("divisions");
if (places) layers.push("places");
if (transportation) layers.push("transportation");
if (addresses) layers.push("addresses");
visibleThemes(layers);
}, [base, buildings, divisions, places, transportation, visibleThemes]);
}, [
base,
buildings,
divisions,
places,
transportation,
addresses,
visibleThemes,
]);

return (
<div className="dropdown dropdown--hoverable theme-selector tour-layers">
Expand Down Expand Up @@ -86,6 +96,17 @@ function ThemeSelector({ visibleThemes, mode }) {
Transportation
</label>
</li>
<li>
<label htmlFor="addresses" className="dropdown__link">
<input
id="addresses"
type="checkbox"
checked={addresses}
onChange={() => setAddresses(!addresses)}
/>
Addresses
</label>
</li>
</ul>
</div>
);
Expand Down
5 changes: 5 additions & 0 deletions site/src/inspector_panel/InspectorPanel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
DIVISION_TIPS,
PLACES_TIPS,
TRANSPORTATION_TIPS,
ADDRESSES_TIPS,
} from "./TipLibrary";

function InspectorPanel({ mode, entity, setEntity }) {
Expand Down Expand Up @@ -40,6 +41,10 @@ function InspectorPanel({ mode, entity, setEntity }) {
inspectorPanel = (
<ThemePanel mode={mode} entity={entity} tips={TRANSPORTATION_TIPS} />
);
} else if (theme === "addresses") {
inspectorPanel = (
<ThemePanel mode={mode} entity={entity} tips={ADDRESSES_TIPS} />
);
} else {
console.log("unhandled theme type");
inspectorPanel = (
Expand Down
17 changes: 17 additions & 0 deletions site/src/inspector_panel/TipLibrary.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,3 +85,20 @@ export const PLACES_TIPS = {
id: PLACES_ID,
source: PLACES_SOURCE,
};

const ADDRESSES_THEME =
"The Overture Address type is a compilation of open address datasets usually published by local authorized sources";
const ADDRESSES_TYPE =
"Describes the entity. The addresses theme only has one type: address.";
const ADDRESSES_SUBTYPE = "";
const ADDRESSES_ID =
"A feature ID. This may be an ID associated with the Global Entity Reference System (GERS) if—and-only-if the feature represents an entity that is part of GERS.";
const ADDRESSES_SOURCE =
"The array of source information for the properties of a given feature, with each entry being a source object which lists the property in JSON Pointer notation and the dataset that specific value came from. All features must have a root level source which is the default source if a specific property's source is not specified.";
export const ADDRESSES_TIPS = {
theme: ADDRESSES_THEME,
type: ADDRESSES_TYPE,
subtype: ADDRESSES_SUBTYPE,
id: ADDRESSES_ID,
source: ADDRESSES_SOURCE,
};