Display US territories in geoAlbersUsa projection

[alkshendra-SEQ]

I'm trying to show a map marker on Puerto Rico, but apparently, the US territories are not a part of geoAlbersUsa projection.

Can someone guide me on how I can go about this?

[zimrick]

Hi @alkshendra-SEQ,

Yeah, unfortunately the geoAlbersUsa projection bundled with d3-geo does not by default include Puerto Rico. I know there have been some attempts to create a custom albers USA projection with Puerto Rico (like this: https://observablehq.com/@d3/u-s-map-with-puerto-rico). You could work off of one of those examples. Since the geoAlbersUsaPr projection used there should be a valid d3 projection, it should work for react-simple-maps as well.

[alkshendra-SEQ]

@zimrick not sure how I can use a custom projection in react-simple-maps, can you point me to some demo on this?

[zimrick]

I put together a codesandbox here: https://codesandbox.io/s/albers-usa-overseas-territories-bgzg9?file=/src/MapChart.js

based on the projection code from: https://observablehq.com/@almccon/u-s-map-with-puerto-rico

I added some paint-order and stroke stuff to make the islands a bit more prominent.

Hope this helps you.

[alkshendra-SEQ]

Thanks @zimrick, it really helped! However, it's not working when I add a marker to the location —

<Marker coordinates={[-67.1463222, 18.2089747]}>
    <circle r={10} fill="#F00" stroke="#fff" strokeWidth={2} />
</Marker>

Here's my change — https://codesandbox.io/s/albers-usa-overseas-territories-wi1i3?file=/src/MapChart.js

[zimrick]

Ok, I found the issue. This should now work for Puerto Rico: https://codesandbox.io/s/albers-usa-puerto-rico-bgzg9?file=/src/MapChart.js