How to load GeoJSON?

[lucksp]

I am trying to load geoJSON, but there's no exported Polygon component with this library...so i am trying to add data to the map like :

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

    const features = (Huc6Data as FeatureCollection<GeoPolygon, HUC6Properties>)
      .features;
    features.forEach((feature) => {
      const coordinates = feature.geometry.coordinates[0].map(([lng, lat]) => ({
        lat,
        lng
      }));
      map.data.add({
        geometry: new google.maps.Data.Polygon([coordinates]),
        properties: feature.properties
      });
    });
  }, [map]);

But this too isn't working...what's the official GEOJson support method?

I have these types of features in my dataset:

{"type":"Feature","geometry":{"type":"Polygon","coordinates":[[[-122.44587213899996,46.68302287400002],[-122.54495814299997,46.791759399],[-122.64104043199995,46.803608396000016],[-122.966276226,47.01105966],[-123.16591663099996,47.031625649000034],[-123.284091063,47.173035927],[-123.29412562299996,47.29230005800002],[-123.49725510399998,47.42461226200004],[-123.52389850499998,47.52774958200001],[-123.38841780499996,47.58817140300005],[-123.59500532599998,47.73978624600005],[-123.57857808799997,47.86130896200001],[-123.71775897599997,47.90659918600005],[-123.75532949899997,47.980036625000025],[-124.113902817,48.11304168500004],[-124.375530217,48.08649431500004],[-124.44541965999997,48.12675967200005],[-124.600762266,48.35848527300004],[-124.82155589499996,48.39350494300004],[-124.7669808,48.29284502200005],[-124.85854261499998,48.17520587400003],[-124.783616554,48.058024793000016],[-124.80159317699997,47.97619886700005],[-124.46204263699997,47.631195659000014],[-124.42325115699998,47.49927622200005],[-124.47924629099998,47.446874337000054],[-124.297334778,47.24687810100005],[-124.24823108799995,47.072144983000044],[-124.25377535999996,46.931414189],[-124.196820919,46.86374278000005],[-124.12988355799996,46.427158432000056],[-124.148039299,46.233641498000054],[-124.091463185,46.26186148700003],[-123.978919453,46.34696626500005],[-123.880306497,46.27734032700005],[-123.63365748999996,46.38489275500001],[-123.56596603899999,46.468888815000014],[-123.38655865199996,46.48180359300005],[-123.32723060299998,46.384118348000015],[-123.135701235,46.37380682600002],[-122.951629739,46.53266764900002],[-122.56855548299995,46.590607233000014],[-122.44587213899996,46.68302287400002]]]},"properties":{"OBJECTID":44,"tnmid":"{C0AFA2EF-91B6-4212-A837-CDB5EB241E95}","loaddate":1640255791000,"areaacres":4379966.05,"areasqkm":17725.11,"states":"OR,WA","huc6":"171001","name":"Washington Coastal","MaxSimpTol":100,"MinSimpTol":100,"shape_Length":1450509.1718587813,"shape_Area":38398474260.55133,"metasourceid":"{A3C8F776-83A4-418F-A009-F6354A841335}","sourcedatadesc":null,"sourceoriginator":"U.S. Geological Survey","sourcefeatureid":null,"InPoly_FID":44,"SimPgnFlag":0,"referencegnis_ids":null}},
{"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[-67.09724364699997,18.566849796000042],[-67.15967085099999,18.55504673400003],[-67.21629511499998,18.442748962000053],[-67.32405154899999,18.370276336000018],[-67.229364283,18.234871079000015],[-67.26105543299997,18.088203091000025],[-67.25880737699998,17.923429464000037],[-66.95807053599998,17.87631861],[-66.80259687999995,17.90769070800002],[-66.672876595,17.89901147100005],[-66.53290164599997,17.83087815800002],[-66.42270047099998,17.880469214000016],[-66.037751609,17.885229078],[-65.80066797999996,17.97337949200005],[-65.71652668399997,18.10580138100005],[-65.555911461,18.211369654],[-65.52865738099996,18.357323907000023],[-65.55683975599999,18.43309348400004],[-65.99174451599998,18.51552775600004],[-66.6261295,18.54467343500005],[-66.734877864,18.52589581700005],[-67.09724364699997,18.566849796000042]]],[[[-65.46699331499997,18.223729125000034],[-65.60176803499996,18.154990439000017],[-65.61975481899998,18.070782605000034],[-65.44269177499996,18.036839422000014],[-65.24246969799998,18.087178185000027],[-65.280376359,18.197953211000026],[-65.46699331499997,18.223729125000034]]],[[[-65.29849427299996,18.387379689],[-65.424356434,18.39233879400001],[-65.423772783,18.291935934000037],[-65.29812996599998,18.227879520000045],[-65.210374736,18.242321969000045],[-65.17027653499997,18.332024603000036],[-65.29849427299996,18.387379689]]],[[[-67.887735018,18.16654114200003],[-67.98238375799997,18.201509292000026],[-67.99543687699997,18.065882996000028],[-67.84049756399997,18.01457084900005],[-67.791361618,18.097382917],[-67.887735018,18.16654114200003]]]]},"properties":{"OBJECTID":45,"tnmid":"{17A2DE73-765F-4A5D-BE2C-DBECB27DED60}","loaddate":1575545522000,"areaacres":3373640.59,"areasqkm":13652.65,"states":"PR","huc6":"210100","name":"Puerto Rico","MaxSimpTol":100,"MinSimpTol":100,"shape_Length":846108.102713498,"shape_Area":15191652603.964714,"metasourceid":null,"sourcedatadesc":null,"sourceoriginator":null,"sourcefeatureid":null,"InPoly_FID":45,"SimPgnFlag":0,"referencegnis_ids":null}},

[usefulthink]

We currently don't have that as an exported component, but you can copy (or be inspired by) the Polygon component from our geometry example. That component doesn't currently support GeoJSON, but this can easily be added here instead of using the encodedPath prop:

react-google-maps/examples/geometry/src/components/polygon.tsx

Lines 72 to 78 in d2de370

	useMemo(() => {
	if (!encodedPaths || !geometryLibrary) return;
	const paths = encodedPaths.map(path =>
	geometryLibrary.encoding.decodePath(path)
	);
	polygon.setPaths(paths);
	}, [polygon, encodedPaths, geometryLibrary]);

We'll be adding 'official' polygon etc. components soon(ish), and I'll keep this question in mind for the final architecture.

[lucksp]

Thank you for the quick response. I have been able to load the GRA on with the required format The polygon example requires. However, it seems to not draw it the same as the original Geo JSON. There are errors about points not closing. I Feel confident in the GeoJSON Because I’m using the same data in my native mobile app with no issues. Additionally, I need to fill in the colors of certain polygons based on app and user state. I’m not sure how to achieve this in your current component Do you have any ideas on this?

…

On Thu, Mar 6, 2025 at 4:26 AM Martin Schuhfuss ***@***.***> wrote: We currently don't have that as an exported component, but you can copy (or be inspired by) the Polygon component <https://github.com/visgl/react-google-maps/blob/main/examples/geometry/src/components/polygon.tsx> from our geometry example <https://visgl.github.io/react-google-maps/examples/geometry>. That component doesn't currently support GeoJSON, but this can easily be added here instead of using the encodedPath prop: https://github.com/visgl/react-google-maps/blob/d2de370d4c938293b24b662bb333b2db40e14923/examples/geometry/src/components/polygon.tsx#L72-L78 We'll be adding 'official' polygon etc. components soon(ish), and I'll keep this question in mind for the final architecture. — Reply to this email directly, view it on GitHub <#701 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADTVWOLFE6U3UYJ33V7T7J32TAWGFAVCNFSM6AAAAABYNHPKLWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENBRGMYDCNQ> . You are receiving this because you authored the thread.Message ID: ***@***.*** com>

[lucksp]

ahha!
map.data.addGeoJson(geoJson);

[usefulthink]

Lol, I didn't even know about that, and I've been working with the API for over 10 years now 😂