react-google-maps merge multiple polygons

Question

I have a list of co-ordinates that I am importing into my google maps and then creating polygons from these, the problem I have is that the polygons overlap each other and the outline of each polygon is clearly visible, I need to find a way to merge them into 1 polygon removing all intersecting lines and leaving only 1 boundary line around the outside.

My map - https://codesandbox.io/s/4ywq78407

I can see this might be possible by using geoJSON data as mentioned here:

GoogleMaps API V3 Build Polygon Containing Multiple ZipCodes

However I haven't been able to find any examples of this used with react-google-maps

It also looks like it is possible using JSTS and wicket as mentioned here:

GoogleMaps API V3 Build Polygon Containing Multiple ZipCodes

Again I'm not sure how to integrate these into the react-google-maps

How can I merge my polygons by using either geoJSON data or JSTS/wicket with react-google-maps?

Hello.js

import React from 'react';
import MyGoogleMap from './GoogleMap'
import coords from './const'

export default class Hello extends React.Component {
  render() {
    return(
      <MyGoogleMap coords={coords} lat={50.0883800089} lng={14.3196645721} zoom={8} />
    )
  }
}

GoogleMap.js

import React, { Component } from "react";
import withScriptjs from "react-google-maps/lib/async/withScriptjs";
import { withGoogleMap, GoogleMap, Polygon } from "react-google-maps";
export default class GoogleMaps extends Component {
  constructor() {
    super();
    this.state = {};
    this.handleMapLoad = this.handleMapLoad.bind(this);
  }
  handleMapLoad(map) {
    this._mapComponent = map;
  }

  render() {
    const MyGoogleMap = withScriptjs(
      withGoogleMap(props => (
        <GoogleMap
          ref={props.onMapLoad}
          defaultZoom={props.zoom}
          defaultCenter={{ lat: props.lat, lng: props.lng }}
          onClick={props.onMapClick}
        >
          {props.coords.map(coord => (
            <Polygon
              path={coord.area}
              options={{
                fillColor: "red",
                fillOpacity: 0.4,
                strokeColor: "red",
                strokeOpacity: 1,
                strokeWeight: 1
              }}
            />
          ))}
        </GoogleMap>
      ))
    );

    // Use this by settings props in e.g <MyGoogleMap coords={coords} lat={50.0883800089} lng={14.3196645721} zoom={8}/>
    return (
      <div style={{ height: '640px', width: '100%' }}>
      <div style={{ height: "100%" }}>
        <MyGoogleMap
          googleMapURL={`https://maps.googleapis.com/maps/api/js?key=AIzaSyBOGV1MxJRcgXxNULDXk1eUx_QQ6nftEP4`}
          loadingElement={<div style={{ height: "100%" }} />}
          containerElement={<div style={{ height: "100%" }} />}
          mapElement={<div style={{ height: "100%" }} />}
          onMapLoad={this.handleMapLoad}
          coords={this.props.coords}
          lat={this.props.lat}
          lng={this.props.lng}
          zoom={this.props.zoom}
        />
      </div>
      </div>
    );
  }
}

fredriksvensson · Accepted Answer · 2018-05-25 19:23:40Z

0

This might admittedly be something of a hack.

handleMapLoad(ref) {
  const map = ref.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.data.map;

  map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json');
    
  this._mapComponent = map;
}

This way you can access the google map object directly and read in geojson. Ideally you write a proper function in react-google-maps to load geojson and send a pull request to the admin so it get merged into the code base.

answered May 25, 2018 at 19:23

fredriksvensson

1331 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

react-google-maps merge multiple polygons

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related