I need to create a component that will let the user upload an image (non-vector) of their facility's floor plan/s and have the user add where different devices are on the floorplan (so technicians can see where devices are and keep their position).

The options I have looked at usually want a vector or are really meant for maps (i.e. google maps). Our previous version was designed by the last developer and has some ungodly calculations done (the position was handled by percentages value and was calculated by multiplying by 2 and then dividing by 2???).

Any suggestions for a library that can "mapify" or create a grid for images so I can handle setting component positions on them easier?

1 Answer 1


Not thoroughly clear on question but there are many many apps to convert raster image to vector image for windows, linux, amd online in browser. Search on "convert raster image to vector image". If image is converted to vector then the apps you have found might do what you wish

  • I'm just concerned with how well converting to an svg will work for my use case. I figured out a pretty good way to do it using a library called react-image-marker. It doesn't have too many features but does a good job at placing markers and I was able to add my own custom hook to enable drag and drop. Commented Jan 27, 2022 at 19:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.