We need to show an SVG map inside a react component and want to add dynamic layers(Shapes, texts, icons) on top of the SVG map, with zoom in zoom out and draggable features
Budget: $30 – $250 USD
We have a blocking point in our project and want you to solve this problem by creating a tiny brand new react app:
We need to show an SVG map inside a react component and want to add dynamic layers(Shapes, texts, icons) on top of the SVG map, with zoom in zoom out, and draggable features
Users want to zoom in and zoom out the SVG map.
Users can drag and drop layers(shape, text, icon) during zoom-in and zoom-out modes.
Users can show or hide specific layers from the top of svg.
We already implemented the solution but some of the above features have not worked smoothly. And these are the blocking point for our implementation:
Blocking points
The Draggable does not work smoothly while in zoom-in mode.
When we show and hide some of the icons or shapes from the top of SVG the other icons change their locations.
These are the solutions we used to solve these blocking points but have not worked yet:
https://medium.com/dev-shack/clicking-and-dragging-svg-with-react-and-d3-js-5639cd0c3c3b
https://observablehq.com/@d3/drag-zoom
https://stackoverflow.com/questions/52576376/how-to-zoom-in-on-a-complex-svg-structure
https://www.npmjs.com/package/react-svg-pan-zoom
https://www.npmjs.com/package/react-draggable
We need to show an SVG map inside a react component and want to add dynamic layers(Shapes, texts, icons) on top of the SVG map, with zoom in zoom out, and draggable features
Users want to zoom in and zoom out the SVG map.
Users can drag and drop layers(shape, text, icon) during zoom-in and zoom-out modes.
Users can show or hide specific layers from the top of svg.
We already implemented the solution but some of the above features have not worked smoothly. And these are the blocking point for our implementation:
Blocking points
The Draggable does not work smoothly while in zoom-in mode.
When we show and hide some of the icons or shapes from the top of SVG the other icons change their locations.
These are the solutions we used to solve these blocking points but have not worked yet:
https://medium.com/dev-shack/clicking-and-dragging-svg-with-react-and-d3-js-5639cd0c3c3b
https://observablehq.com/@d3/drag-zoom
https://stackoverflow.com/questions/52576376/how-to-zoom-in-on-a-complex-svg-structure
https://www.npmjs.com/package/react-svg-pan-zoom
https://www.npmjs.com/package/react-draggable