Create layers with property controls as components

[openlayers-droid]

hi,

This may be trivial. However, i only started on React Js a week ago.

Basically what i need is to create a component of a specific layer that encapsulate the layer definition, loading of data, and controls to change layer properties using updateTriggers. Most of the examples demonstrate using a layer within the App.js component. I need to create a specific layer say GeoJsonLayer component (with buttons and sliders to control its properties such as radiusScale, Opacity ...etc) and then inject in the the App.js render method.

You assistance on this matter is greatly appreciated.

[Clebal]

You cannot have layer definition and controls all in one React component, at least not in a non-tricky way.

The way I recommend you to achieve what you want is:

Create a React component that return a layer:

ExampleLayer.js

export default function ExampleLayer ({ controls }) {
      const [features, setFeatures] = useState([])

      useEffect(() => {
            // Load stuff in newFeatures
            setFeatures(newFeatures)
      }, [])

      return GeoJsonLayer({
            data: features,
            ...
            lineWidth: controls.lineWidth
      })
}

Then in your App.js call that component:

function App {
      // Keep all your control values
      const [controls, setControls] = useState({ lineWidth: 0 })

      const layers = [
            ExampleLayer({ controls })
      ]
  
      return (<>
            <DeckGL layers={layers} ... />
           <Controls setControls={setControls} />
      </>)
}

Maybe it isn't a perfect example but I want to show you the workflow.

[openlayers-droid]

@Clebal the reason why i don't want to have any controls with GUI elements inside App.js is that each layer will end up with different controls than others. So the App.js component will be congested with logic that would render irrelevant for specific layers.

You suggestion of moving deck logic into a Map component is what i am trying to implement now. i don't know if this will fire back or not.

[openlayers-droid]

@Clebal i need your opinion on something.

i ended up creating a component that fetches data, creates GUI controls to control the map, and a DeckGL instance.

Then i am calling this component from App.js using router.

in total i need four of these components for each layer type.

Component

import react, { useState } from "react";
import Button from "@material-ui/core/Button";
import { Typography } from "@material-ui/core";
import { StaticMap } from "react-map-gl";
import DeckGL, { GeoJsonLayer } from "deck.gl";
import data from "../../melaka par.geojson";

const GeoJsonL = () => {
  const [counter, setCounter] = useState(false);

  const INITIAL_VIEW_STATE = {
    longitude: 101.975766,
    latitude: 4.210484,
    zoom: 7,
    minZoom: 0,
    maxZoom: 16,
    pitch: 0,
    bearing: 0,
  };
  const layerx = new GeoJsonLayer({
    id: "geojson-layer",
    visible: counter,
    opacity: 1,
    data,
    pickable: true,
    stroked: false,
    filled: true,
    extruded: true,
    lineWidthScale: 20,
    lineWidthMinPixels: 2,
    getFillColor: [160, 160, 180, 200],
    getLineColor: [255, 255, 0],
    getRadius: 100,
    getLineWidth: 1,
    getElevation: 30,
    updateTriggers: {
      visible: counter,
    },
  });

  const incHandler = () => {
    setCounter(!counter);
  };
  return (
    <div>
      <DeckGL
        initialViewState={INITIAL_VIEW_STATE}
        controller
        layers={[layerx]}
      >
        <StaticMap
          mapboxApiAccessToken=""
          mapStyle={"mapbox://styles/mapbox/dark-v9"}
        />
      </DeckGL>
      <Button variant="contained" color="primary" onClick={incHandler}>
        Visible
      </Button>
    </div>
  );
};

export default GeoJsonL;

App.js

import logo from "./logo.svg";
import "./App.css";
import { Route, BrowserRouter as Router, Switch, Link } from "react-router-dom";
import GeoJsonL from "./components/GeoJson.js/GeoJsonLayer";
import Test from "./components/test";

function App() {
  return (
    <Router>
      <div className="App">
        <h1>HOME PAGE</h1>
        <Link to="/geo">GEO</Link>
        <br />
        <Link to="/hex">test</Link>
      </div>
      <Route path="/geo" component={GeoJsonL} />
      <Route path="/hex" component={Test} />
    </Router>
  );
}

export default App;

[Clebal]

Hi @openlayers-droid. I've prepared an example for you that might satisfy your goals.

https://codesandbox.io/s/opendroid-layer-example-vdig8?file=/src/App.js

I hope it helps you.

PS: You only need updateTriggers for accessors (properties that receive functions).

[openlayers-droid]

@Clebal i don't know how to thank you!

Thank you truly!!!

[Clebal]

I'm glad it was helpful @openlayers-droid! If you're okey with the answer, select me as correct answer to close this discussion :).