Using OpenLayers in React

user_3566338 0
Viewed 6024

I am student who is creating a big project trying to display data and information on maps using Openlayers and React. At this point I have created a basic two page project where the map is the central piece of the application. For every page I have one main Component that contains its Sidebar, the Viewer Component that contains the map itself and some additional Components specific for that page.

The viewer Class is a special Component that I wrote for every page. This Component handles all the user interactions with the page. It sends and receives information from the main Component as well. I have chosen to create a seperate Viewer Class for each page beceause of the diffrent ways each page works. They might load in different things or handle interactions completely different. If I had one Viewer Class that can be used by every page this would become to large and have to many if statements to check what code to run when handling with each separate page.

Here is an example of the Homepage Viewer. In the constructor I create the map and add some references for a popup window that shows up when the user clicks on one of the features on the map. This popup window shows some basic information about the feature and let's the user add it to his list of features.

  • In ComponentDidMount I first make the Map class add the boundrieslayer and give an function to call when one of the feautres of this layer has been clicked on. I also create the overlay window for the popup to the map. This will be shown when a feature has been clicked.

  • resetMapLayers is a function that has will be called on each Render. Here I make the map check if what background Tilelayer to use and if it should show the top layer or not.

  • featureSelected() is the function that handles a click event of a
    feature of the top layer. This will create a popup with the basic
    information of the feature.

  • closePopup will be called when the popup has been closed. This will
    make the map deselct the clicked on feature. Otherwise it would stay selected when the popup has been closed. It will also remove the Overlay(popup) from the screen.

  • addFeature() is the function that will be called when a user chooses to add this feature to his list of features. This can be done by the user in the popup window of that feature

.

import React, { Component } from "react";
import { connect } from "react-redux";

import Map from "../Map/Map";
import "ol/ol.css";
import styles from "./Viewer.module.scss";
import Overlay from "ol/Overlay";
import Button from "../UI/Button/Button";

class MainViewer extends Component {
  constructor(props) {
    super(props);
    Map.createNewMap();

    this.popup = React.createRef();
    this.popupContent = React.createRef();
  }

  componentDidMount() {
    Map.addBoundriesLayer(this.featureSelected);
    Map.map.setTarget("map");
    let container = this.popup.current;
    let overlay = new Overlay({
      element: container,
      autoPan: true,
      autoPanAnimation: {
        duration: 250,
      },
    });
    this.overlay = overlay;
    Map.map.addOverlay(overlay);
  }

  resetMapLayers() {
    Map.setBackgroundTileLayer(this.props.type);
    Map.togglePlotBoundriesLayers(this.props.plotBoundriesState);
  }

  featureSelected = (event, select) => {
    if (event.selected[0]) {
      this.selectedFeature = event.selected[0];
      let selectedFeature = {
        id: event.selected[0].id_,
        gewasgroepnaam: event.selected[0].getProperties().GEWASGROEP,
        gewasnaam: event.selected[0].getProperties().LBLHFDTLT,
        oppervlak: (event.selected[0].getProperties().OPPERVL / 10000).toFixed(
          2
        ),
        coords: event.selected[0].getProperties().geometry.extent_,
      };

      let content = this.popupContent.current;
      content.innerHTML =
        "<p><strong>Name: </strong>" +
        selectedFeature.name +
        "</p>" +
        "<p><strong>Exact Name: </strong>" +
        selectedFeature.exactName +
        "</p>" +
        "<p><strong>Area: </strong>" +
        selectedFeature.area +
        " ha</p>";
      this.overlay.setPosition(event.mapBrowserEvent.coordinate);
    }
  };

  closePopup() {
    this.overlay.setPosition(undefined);
    Map.clearSelect();
    return false;
  }

  addFeature() {
    this.overlay.setPosition(undefined);
    Map.clearSelect();
    this.props.featureAddedHandler(this.selectedFeature);
  }

  render() {
    this.resetMapLayers();
    return (
      <div>
        <div id="map" className={styles.Map}></div>
        <div ref={this.popup} className={styles.OlPopup}>
          <div className={styles.OlPopupButtonsDiv}>
            <Button
              btnType="Danger"
              className={[styles.PopupButton, styles.ClosePopupButton].join(
                " "
              )}
              clicked={() => this.closePopup()}
            >
              Annuleer
            </Button>
            <Button
              btnType="Success"
              className={[styles.PopupButton, styles.AddPopupButton].join(" ")}
              clicked={() => this.addFeature()}
            >
              Voeg Toe
            </Button>
          </div>
          <div ref={this.popupContent}></div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    type: state.mapDetails.type,
    plotBoundriesState: state.mapDetails.state,
  };
};

export default connect(mapStateToProps)(MainViewer);

The Map class contains the actual map. It handles with all the specific map issues. It allows to add layers to the map, creating the initial map, adding map interactions,...

  • In the constructor I call the methods to initaly create a basic map with a TileLayer background.

  • The createMap and createNewMap methods let's me create the map object itself.

  • createBackgroundLayerGroups() creates the Tilelayer that is the background layer. It can be either OSM or Bing Maps. The visibility property let's me make handle which one to show.

  • clearAllBoundriesLayers() deletes all the boundries layers that are able to be put on top of the Tilelayer. It deletes every layer and clears the select of the interactions that has been added to these layers. I do this so when I change page the layers will be deleted.

  • addBoundriesLayer let's me set and add a boundries layer. This is the Vector layer that will be put on top of the TileLayer.

  • addUsersPlotBoundriesLayer does the same as "addBoundriesLayer" but does it for all the layers that the user has. This function will be called in another page that only shows the features of the user.

  • setExtentOfMapByUserFeaters let's me set the extent of the map by either a given extent or by the features of the user.

  • setInteractionForPlotBoundriesLayer adds the interaction for the PlotBoundriesLayer.

  • setHoverInteractionForUserPlotBoundries adds the hover interaction for the plotUserBoundriesLayer.

  • clearSelect clears all the selected features. So they won't be highlighted no more.

  • setBackgroundTileLayer let's me show a specific background TileLayer.

  • togglePlotBoundriesLayers let's me hide or show the Vector layer that is then been shown.

import Map from "ol/Map";
import TileWMS from "ol/source/TileWMS";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import OSM from "ol/source/OSM";
import BingMaps from "ol/source/BingMaps";
import VectorSource from "ol/source/Vector";
import { bbox as bboxStrategy } from "ol/loadingstrategy";
import GeoJSON from "ol/format/GeoJSON";
import { Vector, Group, Tile } from "ol/layer";
import Select from "ol/interaction/Select";
import { Feature } from "ol";
import { Polygon } from "ol/geom";
import { Fill, Stroke, Style } from "ol/style";

class OlMap {
  constructor() {
    this.createNewMap();
    this.createBackgroundLayerGroups();
  }

  createNewMap() {
    this.map = this.createMap();
  }

  createMap() {
    return new Map({
      target: null,
      layers: [],
      view: new View({
        center: [594668.0262129545, 6602083.305674396],
        maxZoom: 19,
        zoom: 14,
      }),
    });
  }

  createBackgroundLayerGroups() {
    this.layersOSM = new Group({
      layers: [
        new Tile({
          source: new OSM(),
        }),
        new Tile({
          source: new BingMaps({
            imagerySet: "Aerial",
            key: process.env.REACT_APP_BING_MAPS,
          }),
          visible: false,
        }),
      ],
    });
  }

  clearAllBoundriesLayers() {
    this.map.getLayers().forEach((layer) => {
      if (
        layer.get("name") === "plotBoundriesLayer" ||
        layer.get("name") === "plotUserBoundriesLayer"
      ) {
        layer.getSource().clear();
        this.map.removeLayer(layer);
      }
    });
    if (this.select) {
      this.select.getFeatures().clear();
    }
  }

  addBoundriesLayer(featureSelected) {
    this.clearAllBoundriesLayers();
    let vectorSource = new VectorSource({
      format: new GeoJSON(),
      minScale: 15000000,
      loader: function (extent, resolution, projection) {
        /*
          Link for the DLV
          let url = process.env.REACT_APP_MAP_API +
            extent.join(",") +
            ",EPSG:3857";
          */ let url = process.env.REACT_APP_MAP_API +
          extent.join(",") +
          ",EPSG:3857";
        // */
        let xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        let onError = function () {
          vectorSource.removeLoadedExtent(extent);
        };
        xhr.onerror = onError;
        xhr.onload = function () {
          if (xhr.status === 200) {
            let features = vectorSource
              .getFormat()
              .readFeatures(xhr.responseText);
            features.forEach(function (feature) {
              //ID for the DLV
              //feature.setId(feature.get("OBJ_ID"));
              feature.setId(feature.get("OIDN"));
            });
            vectorSource.addFeatures(features);
          } else {
            onError();
          }
        };
        xhr.send();
      },
      strategy: bboxStrategy,
    });
    let vector = new Vector({
      //minZoom: 13,
      source: vectorSource,
    });
    this.setInteractionForPlotBoundriesLayer(vector, featureSelected);
    vector.set("name", "plotBoundriesLayer");
    this.map.addLayer(vector);
  }

  addUsersPlotBoundriesLayer(featureSelected, featureHovered, newFeatures) {
    this.clearAllBoundriesLayers();
    if (newFeatures.length > 0) {
      let vectorSource = new VectorSource({
        format: new GeoJSON(),
        minScale: 15000000,
        strategy: bboxStrategy,
      });
      newFeatures.forEach((newFeature) => {
        let feature = new Feature({
          geometry: new Polygon([newFeature.geometry]),
        });
        feature.setId(newFeature.plotId);
        vectorSource.addFeature(feature);
      });
      let vector = new Vector({
        //minZoom: 13,
        source: vectorSource,
      });
      this.setInteractionForPlotBoundriesLayer(vector, featureSelected);
      this.setHoverInteractionForUserPlotBoundries(vector, featureHovered);
      vector.set("name", "plotUserBoundriesLayer");
      this.plotsExtent = vectorSource.getExtent();
      this.map.addLayer(vector);
    }
  }

  setExtentOfMapByUserFeaters(extent) {
    if (extent === undefined) {
      if (this.plotsExtent !== undefined && this.plotsExtent[0] !== Infinity) {
        this.map.getView().fit(this.plotsExtent);
      }
    } else {
      this.map.getView().fit(extent);
    }
  }

  setInteractionForPlotBoundriesLayer(layer, featureSelected) {
    this.select = new Select({
      layers: [layer],
    });
    this.select.on("select", (event) => featureSelected(event, this.select));
    this.map.addInteraction(this.select);
  }

  setHoverInteractionForUserPlotBoundries(layer, featureHovered) {
    this.hoveredFeature = null;
    let defaultStyle = new Style({
      stroke: new Stroke({
        width: 2,
        color: "#9c1616",
      }),
      fill: new Fill({ color: "#c04e4e" }),
    });
    let hoveredStyle = new Style({
      stroke: new Stroke({
        width: 2,
        color: "#9c1616",
      }),
      fill: new Fill({ color: "#9c1616" }),
    });
    this.map.on("pointermove", (e) => {
      layer
        .getSource()
        .getFeatures()
        .forEach((feature) => {
          feature.setStyle(defaultStyle);
        });
      let newFeature = null;
      this.map.forEachFeatureAtPixel(e.pixel, (f) => {
        newFeature = f;

        newFeature.setStyle(hoveredStyle);
        return true;
      });

      if (newFeature) {
        if (
          this.hoveredFeature === null ||
          this.hoveredFeature !== newFeature
        ) {
          this.hoveredFeature = newFeature;
          featureHovered(this.hoveredFeature.id_);
        }
      } else {
        if (this.hoveredFeature !== null) {
          this.hoveredFeature = null;
          featureHovered(null);
        }
      }
    });
  }

  hoveredSideBarFeatureHandler(hoveredFeatureId) {
    let defaultStyle = new Style({
      stroke: new Stroke({
        width: 2,
        color: "#9c1616",
      }),
      fill: new Fill({ color: "#c04e4e" }),
    });
    let hoveredStyle = new Style({
      stroke: new Stroke({
        width: 2,
        color: "#9c1616",
      }),
      fill: new Fill({ color: "#9c1616" }),
    });
    this.map.getLayers().forEach((layer) => {
      if (layer.get("name") === "plotUserBoundriesLayer") {
        layer
          .getSource()
          .getFeatures()
          .forEach((feature) => {
            if (feature.id_ === hoveredFeatureId) {
              feature.setStyle(hoveredStyle);
            } else {
              feature.setStyle(defaultStyle);
            }
          });
      }
    });
  }

  clearSelect() {
    this.select.getFeatures().clear();
  }

  setBackgroundTileLayer(type) {
    if (this.backgroundTileType === null) {
      this.backgroundTileType = "OPENSTREETMAP";
    }

    if (this.map.getLayers().getArray().length === 0) {
      this.map.setLayerGroup(this.layersOSM);
    } else {
      if (this.backgroundTileType !== type) {
        this.backgroundTileType = type;
        console.log(this.map.getLayers());
        this.map.getLayers().getArray()[0].setVisible(false);
        this.map.getLayers().getArray()[1].setVisible(false);
        if (type === "OPENSTREETMAP") {
          this.map.getLayers().getArray()[0].setVisible(true);
        } else if (type === "BING MAPS") {
          this.map.getLayers().getArray()[1].setVisible(true);
        }
      }
    }
  }

  togglePlotBoundriesLayers(state) {
    if (this.plotBoundriesState === null) {
      this.plotBoundriesState = true;
    }
    if (this.plotBoundriesState !== state) {
      this.plotBoundriesState = state;
      this.map.getLayers().forEach((layer) => {
        if (layer.get("name") === "plotBoundriesLayer") {
          layer.setVisible(state);
        }
        if (layer.get("name") === "plotUserBoundriesLayer") {
          console.log(state);
          layer.setVisible(state);
        }
      });
    }
  }

  addTileLayer(url) {
    const wmsLayer = new TileLayer({
      source: new TileWMS({
        url,
        params: {
          TILED: true,
        },
        crossOrigin: "Anonymous",
      }),
    });
    this.map.addLayer(wmsLayer);
  }
}

export default new OlMap();

At this point I am wondering if I am doing things well or what can be done different or better to optimize my code. This will help me in the long run not getting stuck with bade code I created at the beginning of the project.

Many thanks in advance!

reactjs openlayers
0 Answers
Related