Hi!

I finally decided to switch to your awesome library but found a little problem: I use some state to toggle a class active to some countries which applies the same color as the hover fill but when you hover over a sidebar of continents, each country belonging to that continent should highlight, my state is working correctly, but the map does not re-render, any ideas?

Thanks in advance!

It would be incredibly useful to center and zoom based on the returned <Geography />s within <Geographies />. I think it could be helpful as a prop within <ZoomableGroup />.

Thanks for this great library!

I'm using with the albersUsa projection and ran into a small issue I thought I would share. albersUsa doesn't have a rotate function and ZoomableGroup expects rotate to exist. One possible workaround would be to add a rotate function that doesn't actually rotate.

I'm not using Zooming and Panning for this map so removed ZoomableGroup. ComposableMap seems to expect a single child so my workaround for now was creating a quick child component to pass the projection props along to it's children.

const GeoGroup = ({ projection, children }) => ( children.map((child, i) => React.cloneElement(child, { projection, key: i, zoom: 1 })) );

Hi,

is there a way to zoom by scrolling on the map ? I tried to add the scrolling event listener but it doesn't seem to work. I can't find a proper way to do it. Thank you

I'm creating a map in the style of the example at https://www.react-simple-maps.io/docs/geographies/. The only difference is that instead of a link to a TopoJSON file, I am using an array of GeoJSON MultiPolygons. The exact object I'm passing to Geographies can be found in this gist. If you want to see what it looks like, here it is formatted as a FeatureCollection. It's valid, because GitHub manages to display it fine.

What I get looks like this:

The stroke I'm using is red, and the fill is black.

What I expect to happen is something like the GitHub display linked above, but this isn't what happens. Any help is appreciated!

Hi,

I am trying to shift the center of the map a little bit up to make some space for overlay UI, so I used yOffset for that but I get pretty weird results, i.e misplaced markers etc...

I pretty much follow the following example: https://www.react-simple-maps.io/with-react-motion

This is my projection configuration:

projectionConfig = {
  yOffset: -150 / this.state.zoom
}

Notice how I can drag the map until there is no data. Can boundary detection please be implemented to avoid this? If you have it already let me know which attribute to pass in where.

Hi!

I saw that IE11 supports svg so there should be no problem but I can't see any of the maps in such browser 😱 . Haven't seen either a compatibility chart or something in the project, is it supported?

New to React so forgive me if this is user error, but I've been stuck on this for 2 days.

My project currently is building an Electoral Map of the UK, representing all 650 constituencies and showing how different election systems, such as PR, AV, and STV can alter the result of elections. To do this, I wish to be able to use the react simple maps framework!

Instead, despite the JSON seemingly being correctly loaded as seen here in the console log

This is what I get

This is my code, where ElectoralMap is the child of another component

The directory.

JSON I'm using and ElectoralMap.js

I was developing a map to see the countries that visit my website when out of nowhere there was an error in the fetch to obtain the countries. I saw the examples from the official website https://www.react-simple-maps.io/ and the problem is the same, I think they removed it from the server. the 404 URL is this: GET https://raw.githubusercontent.com/zcreativelabs/react-simple-maps/master/topojson-maps/world-110m.json 404

the error causes the map not to be displayed

Hi,

so i have made a topojson it contains the counties of Hungary.

Tho, something is wrong, the map not getting rendered well. I have made a little repo for it, i'd appreciate if someone could point me to the right direction.

Thanks,

I'm using react-simple-maps + @types/react-simple-maps v3.0.0. useZoomPanContext and all the other hooks from the docs are missing from @types/react-simple-maps's type declarations.

How can I help to fix that @zimrick ?

I'm trying to use a map of Germany. The SVG element is of an appropriate size, but the geography elements () are extremely small. Here's the JSON file: https://raw.githubusercontent.com/deldersveld/topojson/master/countries/germany/germany-regions.json

How do I fix this?

Hi there

I'm trying to use the following JSON to react-simple-maps v3.0.0 (but happens also with 2.3.0). But I get th following error:

I'm not very familiar with this format. But could it be that my file is not formatted correctly? Is there a way to validate it? world-50m-simplified.txt

It would be great to initiate a flyTo and/or zoom based on some event (e.g. - click, select, etc.). It is not clear from the documentation how to do that.

Here's a MapBox example: https://docs.mapbox.com/mapbox-gl-js/example/flyto/ Here is a Leaflet example: https://codesandbox.io/s/react-leaflet-demo-o7ix8

How would I approach this with react-simple-maps? TY

I Face issue if i custom the marker by react element like box or div . it doesn't appear. if i want to make custom marker with the following features: 1-marker with svg icon and there is number inside it 2-if i click on the marker . i need popover appear own the marker