How to draw COUNTY limits line

[lukzfern]

Hey! I have a list of county placeIds and I want to draw their boundaries and fill the areas with a specific color. How can I achieve this using this library?

[usefulthink]

That would be using the Data Driven Styling for boundaries.

There are some examples in the documentation that should get you started into the right direction, most of them can be translated into this library using useMap/useEffect like this (based on https://developers.google.com/maps/documentation/javascript/dds-boundaries/style-polygon#complete_example_code):

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

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

const CustomMap = (mapProps) => {
  const map = useMap();
  useEffect(() => {
    if (!map) return;

    // once the map is available, we can configure the feature-layer:

    const featureLayer = map.getFeatureLayer("LOCALITY");

    // Apply the style to a single boundary.
    featureLayer.style = (options: { feature: { placeId: string } }) => {
      if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") {
        return featureStyleOptions;
      }
    };

    return () => (featureLayer.style = null);
  }, [map]);

  return <Map {...mapProps}></Map>;
};

[lukzfern]

Thanks for your answer! I'm going to try it, I'll need to change my mapId to vector and enable the feature layer for counties. In the meantime, in the google docs example, they do //@ts-ignore before the featureLayer.style, and indeed it throws an error if u don't add that ts flag.

Property 'placeId' is missing in type 'Feature' but required in type '{ placeId: string; }'.

[usefulthink]

It could be the case that there are still some wrong or missing typings in this area.

[lukzfern]

Hey! I just tried it out and it worked perfectly 🙌 Thanks a lot for the help!