CODEWITHSUNDEEP
reactjsgeoserverreact-leaflet
Jorius
Jorius

Reputation: 204

GeoJSON from react-leaflet doesn't render the layer over the map

I have a GeoServer running on my localhost also I have a react app which consumes a WFS service to get a GeoJSON data to render as a layer over the map.

These are my dependencies on my package.json

"axios": "^0.19.0",
"leaflet": "^1.5.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-leaflet": "^2.4.0",
"react-scripts": "3.0.1"

And this is my HomePage.js in my react app

// @packages
import React, { PureComponent } from 'react';
import axios from 'axios';

import {
    GeoJSON,
    Map,
    TileLayer
} from 'react-leaflet';

// @constants
const GEOSERVER = 'http://localhost:8080/geoserver/wfs';

const REQUEST_PARAMS = {
    outputFormat: 'application/json',
    maxFeatures: 250,
    request: 'GetFeature',
    service: 'WFS',
    typeName: 'gaia:mining_titles',
    version: '1.0.0'
};

class HomePage extends PureComponent {
    constructor() {
        super();
        this.map = null;
        this.state = {
            center: [6.217679, -75.570648],
            data: null,
            zoom: 8
        };
        this.handleOnMapMounted = this.handleOnMapMounted.bind(this);
    }

    componentDidMount() {
        axios.get(GEOSERVER, { params: REQUEST_PARAMS })
            .then(({ data }) => this.setState({ data }))
            .catch(error => Promise.reject(error));
    }

    handleOnMapMounted(evt) {
        this.map = evt ? evt.leafletElement : null;
    }

    render() {
        const {
            center,
            data,
            zoom
        } = this.state;

        return(
            <Map
                center={center}
                id="home-page-map"
                ref={this.handleOnMapMounted}
                zoom={zoom}
            >
                <TileLayer
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                    attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
                />
                <GeoJSON data={data} />
            </Map>
        )
    }
}

export default HomePage;

When the componentDidMount is called the data is set on the state but doesn't render anything and doesn't show errors it just nothing happens.

I already enabled the CORS configuration on my web.xml from my GeoServer

Upvotes: 2

Views: 1758

Answers (2)

Markoyee
Markoyee

Reputation: 67

I had same problem lately - the issue was rendering without data. You need to add if statment that will check if there are data before componenet render. Try:

{data?<GeoJSON data={data}/>:<></>}

Hope this work.

Cheers

Upvotes: 0

Greg Holst
Greg Holst

Reputation: 974

Your question helped me a lot to get my code working, so trying to give something back:

I think you need to add a key to your GeoJSON layer, see this answer here: https://stackoverflow.com/a/46593710/7392069

For the WFS I used I also had to add the projection to the request params, since another local EPSG code was used by default:

srsName:'EPSG:4326'

You may also need to add a style, but at least in my example the mapserver applied a standard style, so this should be optional:

    style = (feature) => {
      return {
        // fillColor: '',
        weight: 3,
        opacity: 1,
        color: 'red',
        dashArray: '3',
        fillOpacity: 0.0
      };
    }

and 

                <GeoJSON
                    key={hash(blah)}
                    data={this.state.data}
                    style={this.style}
                />

Upvotes: 1

Related Questions