CODEWITHSUNDEEP
google-mapsreactjsgeojson
perpetuallethologica
perpetuallethologica

Reputation: 31

React Google Maps module - How to handle GeoJSON MultiPolygons

So I've been using the google-maps-react example for converting GeoJSON data to polygons. The problem I've run into is that the example doesn't support converting GeoJSON features of the 'MultiPolygon' type. (Multiple polygons grouped together).

Is there anything I could change in the example to support that? Thinking I might be able to just add a case to the following function:

function geometryToComponentWithLatLng(geometry) {
  const typeFromThis = Array.isArray(geometry);
  const type = typeFromThis ? this.type : geometry.type;
  let coordinates = typeFromThis ? geometry : geometry.coordinates;

  switch (type) {
    case 'Polygon':
      return {
        ElementClass: Polygon,
        paths: coordinates.map(
          geometryToComponentWithLatLng, {
            type: 'LineString'
          }
        )[0],
      };
    case 'LineString':
      coordinates = coordinates.map(
        geometryToComponentWithLatLng, {
          type: 'Point'
        }
      );
      return typeFromThis ? coordinates : {
        ElementClass: Polyline,
        path: coordinates,
      };
    case 'Point':
      coordinates = {
        lat: coordinates[1],
        lng: coordinates[0]
      }
      return typeFromThis ? coordinates : {
        ElementClass: Marker,
        ChildElementClass: InfoWindow,
        position: coordinates,
      };
    default:
      throw new TypeError('Unknown geometry type: ${ type }');
  }
}

Upvotes: 2

Views: 2316

Answers (1)

perpetuallethologica
perpetuallethologica

Reputation: 31

Managed to fix this one myself by adding a case to the switch for 'MultiPolygon', and making some slight changes to the case for 'Polygon', like so:

switch (type) {
case 'MultiPolygon':
  return {
    ElementClass: Polygon,
    paths: coordinates.map(
      geometryToComponentWithLatLng, {
        type: 'Polygon'
      }
    ),
  };
case 'Polygon':
  coordinates = coordinates.map(
    geometryToComponentWithLatLng, {
      type: 'LineString'
    }
  )[0];
  return typeFromThis ? coordinates : {
    ElementClass: Polygon,
    path: coordinates,
  };
case 'LineString':
  coordinates = coordinates.map(
    geometryToComponentWithLatLng, {
      type: 'Point'
    }
  );
  return typeFromThis ? coordinates : {
    ElementClass: Polyline,
    path: coordinates,
  };
case 'Point':
  coordinates = {
    lat: coordinates[1],
    lng: coordinates[0]
  }
  return typeFromThis ? coordinates : {
    ElementClass: Marker,
    ChildElementClass: InfoWindow,
    position: coordinates,
  };
default:
  throw new TypeError('Unknown geometry type: ${ type }');
}

Upvotes: 1

Related Questions