summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/networkMapApp/src
diff options
context:
space:
mode:
authorRavi Pendurty <ravi.pendurty@highstreet-technologies.com>2021-02-03 16:10:57 +0100
committerDan Timoney <dtimoney@att.com>2021-02-05 22:58:04 +0000
commit0f28ecccb0dbd7c2f39e2c4676e17ca0c38464a2 (patch)
treeae4ac3eac568a78eb5539d0bbc0bbd912d071e4a /sdnr/wt/odlux/apps/networkMapApp/src
parent95cae7ce9aa09198bd46eee556da468a57657017 (diff)
Migrate odlux
Migrate odlux to Aluminium Issue-ID: CCSDK-3136 Signed-off-by: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com> Change-Id: I3200a809a31e87021c95fe103a9c95e03011f503 Signed-off-by: Ravi Pendurty <ravi.pendurty@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp/src')
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts2
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx124
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx2
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx4
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx19
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx4
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts4
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx5
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts14
-rw-r--r--sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts113
10 files changed, 162 insertions, 129 deletions
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts b/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts
index 889480dff..8fcdc4c3b 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/actions/connectivityAction.ts
@@ -42,7 +42,7 @@ export const verifyResponse = (response: Response) =>{
}
}
-export const setTopologyReachableAction = (error: Error) => (dispatcher: Dispatch, getState: () => IApplicationStoreState)=>{
+export const handleConnectionError = (error: Error) => (dispatcher: Dispatch, getState: () => IApplicationStoreState)=>{
const {network:{connectivity: {isToplogyServerAvailable}}} = getState();
if(isToplogyServerAvailable){
dispatcher(new IsTopologyServerReachableAction(false))
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx
index 72fe79ee3..7e378b81e 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/denseTable.tsx
@@ -26,85 +26,101 @@ import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import { makeStyles, Button, Tooltip } from '@material-ui/core';
-type props = { headers: string[], height:number, navigate?(applicationName: string, path?: string):void, onLinkClick?(id: string): void, data: any[], hover: boolean, ariaLabel: string, onClick?(id: string): void, actions?:boolean };
+type props = { headers: string[], height: number, navigate?(applicationName: string, path?: string): void, onLinkClick?(id: string): void, data: any[], hover: boolean, ariaLabelRow: string, ariaLabelColumn: string[], verticalTable?: boolean, onClick?(id: string): void, actions?: boolean };
const styles = makeStyles({
container: {
- overflow:"auto"
+ overflow: "auto"
},
button: {
margin: 0,
padding: "6px 6px",
minWidth: 'unset'
- }
-
- });
-
+ }
+
+});
+
const DenseTable: React.FunctionComponent<props> = (props) => {
const classes = styles();
- const handleClick = (event: any, id: string) =>{
+ const handleClick = (event: any, id: string) => {
event.preventDefault();
props.onClick !== undefined && props.onClick(id);
}
- const handleHover = (event: any, id: string) =>{
+ const handleHover = (event: any, id: string) => {
event.preventDefault();
}
return (
- <Paper style={{borderRadius:"0px"}}>
- <div style={{ height:props.height, overflow:"auto"}}>
- <Table stickyHeader size="small" aria-label="a dense table" >
- <TableHead>
- <TableRow>
- {
- props.headers.map((data) => {
- return <TableCell>{data}</TableCell>
- })
+ <Paper style={{ borderRadius: "0px" }}>
+ <div style={{ height: props.height, overflow: "auto" }}>
+ <Table stickyHeader size="small" aria-label="a dense table" >
+ <TableHead>
+ <TableRow>
+ {
+ props.headers.map((data) => {
+ return <TableCell>{data}</TableCell>
+ })
+ }
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {props.data.map((row, index) => {
+ var values = Object.keys(row).map(function (e) { return row[e]; });
+ return (
+ <TableRow aria-label={props.ariaLabelRow} key={index} hover={props.hover} onMouseOver={e => handleHover(e, row.name)} onClick={e => handleClick(e, row.name)}>
+
+ {
+ values.map((data: any, i) => {
+ if (data !== undefined) {
+
+ if (!props.verticalTable) {
+ const ariaLabel = props.ariaLabelColumn[i];
+ if (ariaLabel.length > 0) {
+ return <TableCell aria-label={ariaLabel}>{data}</TableCell>
+ } else {
+ return <TableCell>{data}</TableCell>
+ }
+ }
+ else {
+ // skip adding aria label to 'header' column
+ if (i === 0) {
+ return <TableCell>{data}</TableCell>
+ } else {
+ const ariaLabel = props.ariaLabelColumn[index];
+ return <TableCell aria-label={ariaLabel}>{data}</TableCell>
+ }
+ }
+ }
+ else
+ return null;
+ })
+ }
+ {
+
+ props.actions && <TableCell >
+ <div style={{ display: "flex" }}>
+ <Tooltip title="Configure">
+ <Button className={classes.button} disabled={row.status !== "connected"} onClick={(e: any) => { e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("configuration", row.simulatorId ? row.simulatorId : row.name) }}>C</Button>
+ </Tooltip>
+ <Tooltip title="Fault">
+ <Button className={classes.button} disabled={row.status !== "connected"} onClick={(e: any) => { e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("fault", row.simulatorId ? row.simulatorId : row.name) }}>F</Button>
+ </Tooltip>
+ </div>
+ </TableCell>
+ }
+ </TableRow>)
+ })
}
- </TableRow>
- </TableHead>
- <TableBody>
- {props.data.map((row, index) => {
- var values = Object.keys(row).map(function(e) { return row[e] });
- return (
- <TableRow aria-label={props.ariaLabel} key={index} hover={props.hover} onMouseOver={e => handleHover(e,row.name)} onClick={ e => handleClick(e, row.name)}>
-
- {
- values.map((data:any) => {
-
- if(data!== undefined)
- return <TableCell> {data} </TableCell>
- else
- return null;
- })
- }
- {
-
- props.actions && <TableCell >
-<div style={{display:"flex"}}>
- <Tooltip title="Configure">
- <Button className={classes.button} disabled={row.status!=="connected"} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("configuration", row.name)}}>C</Button>
- </Tooltip>
- <Tooltip title="Fault">
- <Button className={classes.button} disabled={row.status!=="connected"} onClick={(e: any) =>{ e.preventDefault(); e.stopPropagation(); props.navigate && props.navigate("fault", row.name)}}>F</Button>
- </Tooltip>
- </div>
- </TableCell>
-
- }
- </TableRow>)
- })
- }
-
- </TableBody>
- </Table>
+
+ </TableBody>
+ </Table>
</div>
</Paper>
);
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
index a8f73f35c..81f9bba90 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx
@@ -90,7 +90,7 @@ const LinkDetails: React.FunctionComponent<props> = (props) => {
<AppBar position="static" id="site-tabs" style={{ marginTop: "20px", background: '#2E3B55' }}>
<Typography aria-label="details-of-link-sites" style={{ margin:"5px"}}>SITE DETAILS</Typography>
</AppBar>
- <DenseTable ariaLabel="site-information-table-entry" height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} />
+ <DenseTable ariaLabelRow="site-information-table-entry" ariaLabelColumn={["site-name", "latitude", "longitude", "azimuth"]} verticalTable height={height} hover={false} headers={["", "Site A", "Site B"]} data={data} />
{
props.link.type==="microwave" && <Button style={{marginTop:20}} fullWidth variant="contained" color="primary" onClick={onCalculateLinkClick}>Calculate link</Button>
}
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
index 613166116..5e617be2d 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx
@@ -119,7 +119,7 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
{
props.site.links.length > 0 &&
- <DenseTable ariaLabel="available-links-table-entry" height={height} hover={true} headers={["Link Name", "Azimuth in °"]} data={linkRows} onClick={props.onLinkClick} ></DenseTable>
+ <DenseTable ariaLabelRow="available-links-table" ariaLabelColumn={["link-name", "azimuth"]} height={height} hover={true} headers={["Link Name", "Azimuth in °"]} data={linkRows} onClick={props.onLinkClick} ></DenseTable>
/**
*
* */
@@ -140,7 +140,7 @@ const SiteDetails: React.FunctionComponent<props> = (props) => {
{
props.site.devices.length>0 && props.updatedDevices !== null &&
- <DenseTable ariaLabel="available-nodes-table-entry" navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} />
+ <DenseTable ariaLabelRow="available-nodes-table" ariaLabelColumn={["id","name","type", "manufacturer","owner","status", "ports", "actions"]} navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} />
}
</>
}
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
index b6e1d9cd6..e2935f6b7 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/map.tsx
@@ -33,9 +33,13 @@ import { addDistance, getUniqueFeatures, increaseBoundingBox } from '../utils/ma
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
import SearchBar from './searchBar';
-import { verifyResponse, setTopologyReachableAction, setTileServerReachableAction } from '../actions/connectivityAction';
+import { verifyResponse, IsTileServerReachableAction, handleConnectionError, setTileServerReachableAction } from '../actions/connectivityAction';
import ConnectionInfo from './connectionInfo'
import { showIconLayers, addBaseLayers, addBaseSources, addIconLayers } from '../utils/mapLayers';
+import lamp from '../../icons/lamp.png';
+import apartment from '../../icons/apartment.png';
+import datacenter from '../../icons/datacenter.png';
+import factory from '../../icons/factory.png';
import Statistics from './statistics';
import IconSwitch from './iconSwitch';
import { addImages } from '../services/mapImagesService';
@@ -112,6 +116,9 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
map.on('load', (ev) => {
map.setMaxZoom(18);
+ const bbox = map.getBounds();
+ this.props.updateMapPosition(bbox.getCenter().lat, bbox.getCenter().lng, map.getZoom())
+
addBaseSources(map, this.props.selectedSite, this.props.selectedLink);
addImages(map, (result: boolean)=>{
@@ -123,10 +130,9 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
}
});
- const boundingBox = map.getBounds();
-
+ const boundingBox = increaseBoundingBox(map);
- fetch(`${URL_API}/links/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`)
+ fetch(`${URL_API}/links/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`)
.then(result => verifyResponse(result))
.then(result => result.json())
.then(features => {
@@ -137,7 +143,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
.catch(error => this.props.handleConnectionError(error));
- fetch(`${URL_API}/sites/geoJson/${boundingBox.getWest()},${boundingBox.getSouth()},${boundingBox.getEast()},${boundingBox.getNorth()}`)
+ fetch(`${URL_API}/sites/geoJson/${boundingBox.west},${boundingBox.south},${boundingBox.east},${boundingBox.north}`)
.then(result => verifyResponse(result))
.then(result => result.json())
.then(features => {
@@ -380,6 +386,7 @@ class Map extends React.Component<mapProps, { isPopupOpen: boolean }> {
componentWillUnmount(){
window.removeEventListener("menu-resized", this.handleResize);
+ lastBoundingBox=null;
}
handleResize = () => {
@@ -582,7 +589,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({
updateMapPosition: (lat: number, lon: number, zoom: number) => dispatcher.dispatch(new SetCoordinatesAction(lat, lon, zoom)),
setStatistics: (linkCount: string, siteCount: string) => dispatcher.dispatch(new SetStatistics(siteCount, linkCount)),
setTileServerLoaded: (reachable: boolean) => dispatcher.dispatch(setTileServerReachableAction(reachable)),
- handleConnectionError: (error: Error) => dispatcher.dispatch(setTopologyReachableAction(error))
+ handleConnectionError: (error: Error) => dispatcher.dispatch(handleConnectionError(error))
})
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Map)); \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx
index cdc77b217..040024760 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/mapPopup.tsx
@@ -25,7 +25,7 @@ import { URL_API } from '../config';
import { HighlightLinkAction, HighlightSiteAction } from '../actions/mapActions';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect';
-import { verifyResponse, setTopologyReachableAction } from '../actions/connectivityAction';
+import { verifyResponse, handleConnectionError } from '../actions/connectivityAction';
@@ -86,7 +86,7 @@ const mapDispatchToProps = (dispatcher: IDispatcher) => ({
clearDetailsHistory:()=> dispatcher.dispatch(new ClearHistoryAction()),
highlightLink: (link: link) => dispatcher.dispatch(new HighlightLinkAction(link)),
highlightSite: (site: site) => dispatcher.dispatch(new HighlightSiteAction(site)),
- handleConnectionError: (error:Error) => dispatcher.dispatch(setTopologyReachableAction(error)),
+ handleConnectionError: (error:Error) => dispatcher.dispatch(handleConnectionError(error)),
clearDetails: () => dispatcher.dispatch(new ClearDetailsAction()),
});
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts
index 6f6277347..5c1c6d285 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/handlers/mapReducer.ts
@@ -39,8 +39,8 @@ const initialState: mapState ={
selectedSite: null,
zoomToElement: null,
alarmlement: null,
- lat: 52,
- lon: 13,
+ lat: 52.5095,
+ lon: 13.3290,
zoom: 10,
statistics:{links:"Not counted yet.", sites: "Not counted yet."},
allowIconSwitch: true
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx
index 67c75cecf..3ce435f9b 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/pluginTransport.tsx
@@ -71,15 +71,14 @@ subscribe<ObjectNotification & IFormatedMessage>(["ObjectCreationNotification",
//store && store.dispatch(UpdateDetailsView(msg.nodeName))
}));
-
+*/
subscribe<FaultAlarmNotification & IFormatedMessage>("ProblemNotification", (fault => {
const store = applicationApi && applicationApi.applicationStore;
if (fault && store) {
- // store.dispatch(findSiteToAlarm(fault.nodeName));
+ store.dispatch(findSiteToAlarm(fault.nodeName));
}
}));
-*/ \ No newline at end of file
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
index c414b15c9..30714b82a 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/services/mapImagesService.ts
@@ -21,11 +21,23 @@ import apartment from '../../icons/apartment.png';
import datacenter from '../../icons/datacenter.png';
import factory from '../../icons/factory.png';
import lamp from '../../icons/lamp.png';
+import datacenterred from '../../icons/datacenterred.png';
+import factoryred from '../../icons/factoryred.png';
+import lampred from '../../icons/lampred.png';
+
type ImagesLoaded = (allImagesLoaded: boolean) => void;
type MapImages = {name: string, url: string}
-export const Images : MapImages[] = [{name: 'data-center', url: datacenter}, {name: 'house', url: apartment}, {name: 'factory', url: factory},{name: 'lamp', url: lamp}] ;
+export const Images : MapImages[] = [
+ {name: 'data-center', url: datacenter},
+ {name: 'house', url: apartment},
+ {name: 'factory', url: factory},
+ {name: 'lamp', url: lamp},
+ {name: 'data-center-red', url: datacenterred},
+ {name: 'factory-red', url: factoryred},
+ {name: 'lamp-red', url: lampred},
+] ;
export const addImages = (map: mapboxgl.Map, callback?: ImagesLoaded) =>{
diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
index b54212e5c..1d4aa89ad 100644
--- a/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
+++ b/sdnr/wt/odlux/apps/networkMapApp/src/utils/mapLayers.ts
@@ -168,6 +168,57 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
}
});
+ //select layers
+
+ map.addLayer({
+ 'id': 'select-point-lamps',
+ 'type': 'symbol',
+ 'source': 'selectedPoints',
+ 'layout': {
+ 'icon-allow-overlap': true,
+ 'icon-image': 'lamp',
+ 'icon-size': 0.15
+
+ },
+ 'filter': ['==', 'type', 'street lamp'],
+ });
+
+ map.addLayer({
+ 'id': 'select-point-buildings',
+ 'type': 'symbol',
+ 'source': 'selectedPoints',
+ 'filter': ['==', 'type', 'high rise building'],
+ 'layout': {
+ 'icon-allow-overlap': true,
+ 'icon-image': 'house',
+ 'icon-size': 0.15
+ }
+ });
+
+ map.addLayer({
+ 'id': 'select-point-data-center',
+ 'type': 'symbol',
+ 'source': 'selectedPoints',
+ 'filter': ['==', 'type', 'data center'],
+ 'layout': {
+ 'icon-allow-overlap': true,
+ 'icon-image': 'data-center',
+ 'icon-size': 0.15
+ }
+ });
+
+ map.addLayer({
+ 'id': 'select-point-factory',
+ 'type': 'symbol',
+ 'source': 'selectedPoints',
+ 'filter': ['==', 'type', 'factory'],
+ 'layout': {
+ 'icon-allow-overlap': true,
+ 'icon-image': 'factory',
+ 'icon-size': 0.3
+ }
+ });
+
//alarm layers
map.addLayer({
@@ -177,7 +228,7 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
'layout': {
'icon-allow-overlap': true,
'icon-image': 'lamp-red',
- 'icon-size': 0.1
+ 'icon-size': 0.15
},
'filter': createFilter("street lamp"),
@@ -191,7 +242,7 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
'layout': {
'icon-allow-overlap': true,
'icon-image': 'house-red',
- 'icon-size': 0.1
+ 'icon-size': 0.15
}
});
@@ -202,8 +253,8 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
'filter': createFilter("data center"),
'layout': {
'icon-allow-overlap': true,
- 'icon-image': 'data-center_red',
- 'icon-size': 0.1
+ 'icon-image': 'data-center-red',
+ 'icon-size': 0.15
} });
map.addLayer({
@@ -214,12 +265,10 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
'layout': {
'icon-allow-overlap': true,
'icon-image': 'factory-red',
- 'icon-size': 0.2
+ 'icon-size': 0.3
}
});
-
-
map.addLayer({
id: 'point-remaining',
source: 'points',
@@ -232,56 +281,6 @@ const createIconLayers =(map: mapboxgl.Map, selectedSiteId?: string) =>{
'circle-stroke-color': '#fff'
}
});
-
- map.addLayer({
- 'id': 'select-point-lamps',
- 'type': 'symbol',
- 'source': 'selectedPoints',
- 'layout': {
- 'icon-allow-overlap': true,
- 'icon-image': 'lamp',
- 'icon-size': 0.15
-
- },
- 'filter': ['==', 'type', 'street lamp'],
- });
-
- map.addLayer({
- 'id': 'select-point-buildings',
- 'type': 'symbol',
- 'source': 'selectedPoints',
- 'filter': ['==', 'type', 'high rise building'],
- 'layout': {
- 'icon-allow-overlap': true,
- 'icon-image': 'house',
- 'icon-size': 0.15
- }
- });
-
- map.addLayer({
- 'id': 'select-point-data-center',
- 'type': 'symbol',
- 'source': 'selectedPoints',
- 'filter': ['==', 'type', 'data center'],
- 'layout': {
- 'icon-allow-overlap': true,
- 'icon-image': 'data-center',
- 'icon-size': 0.15
- }
- });
-
-
- map.addLayer({
- 'id': 'select-point-factory',
- 'type': 'symbol',
- 'source': 'selectedPoints',
- 'filter': ['==', 'type', 'factory'],
- 'layout': {
- 'icon-allow-overlap': true,
- 'icon-image': 'factory',
- 'icon-size': 0.3
- }
- });
}
const addCommonLayers = (map: mapboxgl.Map) =>{