Skip to content

Commit

Permalink
fix: correct default props usage
Browse files Browse the repository at this point in the history 
stop using props and fix some naming collisions
  • Loading branch information
@steveoh
steveoh authored Jul 29, 2024
1 parent cf3f63c commit 29ab175
Showing 1 changed file with 53 additions and 52 deletions.
105 changes: 53 additions & 52 deletions packages/layer-selector/src/LayerSelector.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -175,11 +175,14 @@ const createLayerFactories = (

const ConditionalWrapper = ({ condition, wrapper, children }) =>
condition ? wrapper(children) : children;
const LayerSelector = (
props = {
makeExpandable: true,
position: 'top-right',
showOpacitySlider: false,
const LayerSelector = ({
makeExpandable = true,
position = 'top-right',
showOpacitySlider = false,
view,
baseLayers,
quadWord,
overlays,
},
) => {
const [layers, setLayers] = useState({
Expand All @@ -192,7 +195,7 @@ const LayerSelector = (

function onChangeOpacity(event) {
const sliderOpacity = parseFloat(event.target.value) / 100.0;
if (props.showOpacitySlider) {
if (showOpacitySlider) {
for (const layerId in managedLayers) {
const managedLayer = managedLayers[layerId];
if (managedLayer.layer) {
Expand All @@ -212,18 +215,18 @@ const LayerSelector = (
let layerList = null;
switch (layerItem.layerType) {
case 'baselayer':
if (!props.view.map.basemap?.baseLayers) {
props.view.map.basemap = {
if (!view.map.basemap?.baseLayers) {
view.map.basemap = {
baseLayers: [],
id: 'layer-selector',
title: 'layer-selector',
};
}

layerList = props.view.map.basemap.baseLayers;
layerList = view.map.basemap.baseLayers;
break;
case 'overlay':
layerList = props.view.map.layers;
layerList = view.map.layers;
break;
default:
throw new Error(`unknown layerType: ${layerItem.layerType}`);
Expand Down Expand Up @@ -270,11 +273,11 @@ const LayerSelector = (
// map view is an observable
managedLayersDraft[layerItem.id].layer.when('loaded', () => {
const currentScale =
managedLayersDraft[layerItem.id].layer.tileInfo.lods[props.view.zoom]
managedLayersDraft[layerItem.id].layer.tileInfo.lods[view.zoom]
.scale;
if (props.view.zoom > -1 && props.view.scale !== currentScale) {
if (view.zoom > -1 && view.scale !== currentScale) {
// eslint-disable-next-line no-self-assign
props.view.zoom = props.view.zoom;
view.zoom = view.zoom;
}
});

Expand All @@ -284,63 +287,61 @@ const LayerSelector = (
}, [layers]);

useEffect(() => {
if (!props.baseLayers || props.baseLayers.length < 1) {
if (!baseLayers || baseLayers.length < 1) {
console.warn(
'layer-selector::`baseLayers` is null or empty. Make sure you have spelled it correctly ' +
'and are passing it into the constructor of this widget.',
);

return;
}
}, [props.baseLayers]);
}, [baseLayers]);

useEffect(() => {
const applianceLayerTemplates = {
Imagery: {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/utah/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/utah/{level}/{col}/{row}`,
hasAttributionData: true,
copyright: 'Hexagon',
attributionDataUrl: imageryAttributionJsonUrl,
},
Topo: {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/topo_basemap/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/topo_basemap/{level}/{col}/{row}`,
copyright: 'UGRC',
},
Terrain: {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/terrain_basemap/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/terrain_basemap/{level}/{col}/{row}`,
copyright: 'UGRC',
},
Lite: {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/lite_basemap/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/lite_basemap/{level}/{col}/{row}`,
copyright: 'UGRC',
},
'Color IR': {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/naip_2018_nrg/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/naip_2018_nrg/{level}/{col}/{row}`,
copyright: 'UGRC',
},
Hybrid: {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/utah/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/utah/{level}/{col}/{row}`,
linked: ['Overlay'],
copyright: 'Hexagon, UGRC',
hasAttributionData: true,
attributionDataUrl: imageryAttributionJsonUrl,
},
Overlay: {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/overlay_basemap/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/overlay_basemap/{level}/{col}/{row}`,
// no attribution for overlay layers since it just duplicates the base map attribution
},
'Address Points': {
urlPattern: `https://discover.agrc.utah.gov/login/path/${props.quadWord}/tiles/address_points_basemap/{level}/{col}/{row}`,
urlPattern: `https://discover.agrc.utah.gov/login/path/${quadWord}/tiles/address_points_basemap/{level}/{col}/{row}`,
},
};

try {
props.view.map.basemap = new Basemap();
} catch (e) {
console.warn(
'layer-selector::You must pass a view with a map to the constructor of this widget.',
);
}
// try {
view.map.basemap = new Basemap();
// } catch {
// view.map.basemap = {};
// }

const defaultTileInfo = createDefaultTileInfo(LOD);
const applianceLayers = setTileInfosForApplianceLayers(
Expand All @@ -349,21 +350,21 @@ const LayerSelector = (
TileInfo,
);

const baseLayers =
const baseLayerFactories =
createLayerFactories(
'baselayer',
props.baseLayers,
baseLayers,
WebTileLayer,
props.quadWord,
quadWord,
applianceLayers,
) || [];
let overlays = props.overlays || [];
overlays = overlays || [];

let defaultSelection = null;
let hasHybrid = false;
let linkedLayersBuilder = [];

baseLayers.forEach((layer) => {
baseLayerFactories.forEach((layer) => {
if (layer.selected === true) {
defaultSelection = layer;
}
Expand All @@ -379,9 +380,9 @@ const LayerSelector = (
setLinkedLayers(linkedLayersBuilder);

// set default basemap to index 0 if not specified by the user
if (!defaultSelection && baseLayers.length > 0) {
baseLayers[0].selected = true;
defaultSelection = baseLayers[0];
if (!defaultSelection && baseLayerFactories.length > 0) {
baseLayerFactories[0].selected = true;
defaultSelection = baseLayerFactories[0];
}

// insert overlay to first spot because hybrid
Expand All @@ -393,37 +394,37 @@ const LayerSelector = (
overlays.splice(0, 0, 'Overlay');
}

overlays =
const overlayFactories =
createLayerFactories(
'overlay',
overlays,
WebTileLayer,
props.quadWord,
quadWord,
applianceLayers,
) || [];

// set visibility of linked layers to match
if (defaultSelection?.linked && defaultSelection.linked.length > 0) {
overlays.forEach((layer) => {
overlayFactories.forEach((layer) => {
if (defaultSelection.linked.includes(layer.id)) {
layer.selected = true;
}
});
}

setLayers({
baseLayers,
overlays,
baseLayers: baseLayerFactories,
overlays: overlayFactories,
});

props.view.ui.add(selectorNode.current, props.position);
view.ui.add(selectorNode.current, position);
}, [
props.baseLayers,
props.overlays,
props.position,
props.quadWord,
props.view.map,
props.view.ui,
baseLayers,
overlays,
position,
quadWord,
view.map,
view.ui,
]);

const onItemChanged = (event, props) => {
Expand Down Expand Up @@ -469,7 +470,7 @@ const LayerSelector = (
return (
<div ref={selectorNode}>
<ConditionalWrapper
condition={props.makeExpandable}
condition={makeExpandable}
wrapper={(children) => (
<ExpandableContainer>{children}</ExpandableContainer>
)}
Expand All @@ -496,7 +497,7 @@ const LayerSelector = (
key={item.id || item}
/>
))}
{props.showOpacitySlider ? (
{showOpacitySlider ? (
<>
<hr className="layer-selector-separator" />
<input
Expand Down

0 comments on commit 29ab175

Please sign in to comment.