How to implement styling the boundary of a place in react ?

[SuhaibMaraqa]

I found this example which provides a place name and place id then it style the boundary of that place using js. I am trying to find a way to implement it with react using react-google-maps. I found the autocomplete example which solves half of the problem but I need an array of the place boundary coordinates.

[mrMetalWood]

Hi @SuhaibMaraqa. You won't get the actual coordinates for a boundary from any Google Api (that is like the holy grail of data :))
You can, however style a boundaries by using the "Data-driven styling for boundaries" feature from Google.

Overview: https://developers.google.com/maps/documentation/javascript/dds-boundaries/overview
Get started: https://developers.google.com/maps/documentation/javascript/dds-boundaries/start
Style a boundary polygon: https://developers.google.com/maps/documentation/javascript/dds-boundaries/style-polygon

You would take the placeId you get from the autocomplete and adjust the styling function of your featureLayer. Hope that helps :)

//@ts-ignore
  featureLayer = map.getFeatureLayer('LOCALITY'); // or any other layer type

  // Define a style with purple fill and border.
  //@ts-ignore
  const featureStyleOptions: google.maps.FeatureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5
  };

  // Apply the style to a single boundary.
  //@ts-ignore
  featureLayer.style = (options: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == YOUR_PLACE_ID_FROM_AUTOCOMPLETE) { 
      return featureStyleOptions;
    }
  };

[SuhaibMaraqa]

Thankfully @mrMetalWood , it worked. I wrote this component that takes a place from the places api and style the boundary polygon:

import { useMap } from "@vis.gl/react-google-maps";
import React, { useEffect } from "react";

interface Props {
  place: google.maps.places.PlaceResult | null;
}

const MapPolygon = ({ place }: Props) => {
  const map = useMap();

  useEffect(() => {
    if (!map || !place) return;

    console.log("place", place);

    const placeId = place?.place_id;

    colorFeatureLayer(placeId, "LOCALITY");
    colorFeatureLayer(placeId, "ADMINISTRATIVE_AREA_LEVEL_1");
    colorFeatureLayer(placeId, "COUNTRY");
  }, [map, place]);

  const colorFeatureLayer = (placeId: unknown, featureLayerName: string) => {
    //@ts-ignore
    const featureLayer = map?.getFeatureLayer(featureLayerName);

    // Define a style with Crafteur Orange fill and border.
    //@ts-ignore
    const featureStyleOptions: google.maps.FeatureStyleOptions = {
      strokeColor: "#ff7859",
      strokeOpacity: 1.0,
      strokeWeight: 3.0,
      fillColor: "#ff7859",
      fillOpacity: 1.0,
    };

    // Apply the style to a single boundary.
    //@ts-ignore

    featureLayer.style = (options: { feature: { placeId: string } }) => {
      console.log(placeId);
      // console.log("placeId", placeId);
      if (options.feature.placeId == placeId) {
        return featureStyleOptions;
      }
    };
  };

  return null;
};

export default React.memo(MapPolygon);

All the feature layers are enabled in my map style. But my issue is if I search for Amman, Jordan it returns it is of type "LOCALITY" but it won't style it. But it works for Jordan or NY or Canada

[mrMetalWood]

You can check the coverage of the boundaries here: https://developers.google.com/maps/documentation/javascript/dds-boundaries/coverage
Unfortunately not the whole world is available in all details (yet). It seems the region you are talking about only supports up to admin_level_1 at the moment.