Can I get state names and put in map?

[LenaHovhannisyan]

Like this https://images-na.ssl-images-amazon.com/images/I/81r8Hxz5lQL._SL1500_.jpg

[ymihir]

I am also looking for same feature. Have you accomplished this @LenaHovhannisyan ?

[ymihir]

@gabidavila, please look into this feature aswell. Please allow to show statenames.

[gabidavila]

This I need to look a bit further, because I don't want to show state abbreviations if the map is too small. I need to think this trhough

[LenaHovhannisyan]

I found another library but it does not complete what I want.
@ymihir you can look through https://www.npmjs.com/package/react-datamaps

[ymihir]

@LenaHovhannisyan but there no proper documentation for this. can you show me the map image how it is looking ?

[ymihir]

@gabidavila I am able to show the state label names on the map for large state. For smaller states i need to use the element to create a line and show the state name. I haven't done yet.

[LenaHovhannisyan]

@ymihir

[ymihir]

@gabidavila this looks great. Did you published these changes?

[arunmmanoharan]

@ymihir Can you share your code to get the state names with line elements?

[ymihir]

@a2441918 unfortunately i didn't used this package. I took another approach

[minusthebear02]

@LenaHovhannisyan , have you published your solution by any chance?

[jlev]

I implemented this in my fork https://github.com/jlev/react-usa-map
Requires a little bit of fine tuning depending on the font size

[ACPK]

@jlev - I'm interested in building upon your fork. Would you mind making a PR?

@gabidavila - To handle your use case, the ReadMe could recommend people use a dropdown menu (ex: hide map via css depending on screen with) for smaller devices. This is how we've implemented before.

[jlev]

@ACPK I forked from the NCSAAthleticRecruiting version, so my branch has other changes on it including support for onMouseOver events. But, if you're interested in applying just the changes for the labels, look at jlev@1d21a2e

Basically involved nesting each state in an SVG group, and then adding a text anchor child with a local offset. It did require some react effects to get the state dimensions after rendering, so it now requires version 16.

[Pixele9]

Any update on this?

[jlev]

@Pixele9 I haven't been building with this library for awhile, but the fork I pointed to has functionality for state names, text offsets and onMouseOver events. It doesn't look like @gabidavila is actively maintaining this project any more. Luckily with open source, you can fork and build exactly what you want.

[Pixele9]

Thanks @jlev! It it on NPM or how would you recommend to use your fork?

[jlev]

Yeah, it's on NPM. I bumped the version number to 1.5.4
https://www.npmjs.com/package/@jlev/react-usa-map

It looks like there is also a functional typescript version at https://github.com/makahn64/react-usa-map-fc which has received more active development.

[Pixele9]

When I build and preview for production I get this error


Which happens to be in the main.jsx when calling the

Any ideas on why is this happening?

[jlev]

@Pixele9 Seems like your babel setup may not be correct.
Possible solutions here babel/babel#13013

[Pixele9]

I've been trying to check babel config but it's still not working. Could it be your package react version? I'm using react v17.0.2

[Pixele9]

Hi @jlev! I just found the problem I had in production and fixed it by exporting as default from your module exports like this:

I've submitted a pull request adding this.
Can you review it please?
Thanks in advance!!