These are already significant development lifts. Then comes configuring how users interact with the map itself. You may wind up estimating a significant amount of time for mapping your data from its original source into JSON to be hooked to a visualization framework, like D3. Think about the last time you implemented or scoped an interactive map. If you are already on WordPress, this comprehensive plugin could be your solution for production-ready maps.
Interactive maps are a common request for projects when you need to visualize impact over particular locations. And it is this converted output which finally works well in the MapSVG plugin for WordPress allows you to create feature-rich, interactive maps quickly and through a smart admin UI. Open the same file in svg-editor and then look at the source there is some sort of conversion on the "path data" : the d attribute of path. I have for now branched off to my other solution mostly because the highlighting of regions functionality is available in the excellent jvectormap library.ĮDIT : This gist shows a svg made using inkscape. However I am unable to adjust the dimensions of the image even after adjusting it in the svg tags or as suggested here Now if i were to try to load the image via html using the object tag it works. The correct way it seems is to load it using the object tag. Now if I were to load the svg as an image it does not work (which is where i gave up because i did not have my districts in the first place and there was no access to the svg dom. So if I were to load the svg from the browser as is (and load jquery) then the on clicking the selected region it works as expected. I added an onclick event and painted the region i was interested in red. Select the nodes, break apart to convert text to paths (i did not do this before).Perhaps could explain what is the difference between the svg output from inkscape vs that from svg-edit. PS: My experience with SVG is 2 days so based on my learning on manipulating images from my other solution i have the right svg in place. In any case adding the details here to show that it does work however I was not able to adjust the dimensions of the image and an alternative to the solution I will post below. It turns out after I had gone over to the other-side and played around with jvectormap and gotten what i need and came back to look at this the mistake that I had done was onClick() vs onclick() (. PS: to the downvoter please explain your downvote.ĮDIT : Adding information regarding research.
#CLICK MAP WITH SVG AND HIGHLIGHTING HOW TO#
Is this possible ? to manipulate different parts of the svg, if so hints/pointers on how to go about it will be appreciated. How can i manipulate the svg dom for particular parts of that map ( like if i were to click on the sub-disctrict in a) be able to fetch the data for that region). I was not able to achieve this split-up.ī) Given the svg, i then imported it to an html. The district levels are paths (in inkscape terminology).Ī) In Inkscape, after choosing the edit nodes by path option, how can i split up the individual regions (districts further) so that they appear as paths. I would then want to manipulate or work on these sub-districts. Using inkscape i can demarcate the boundaries of the districts further into sub-districts that I want to work on. I want to be able to manipulate the map at district level.
#CLICK MAP WITH SVG AND HIGHLIGHTING PDF#
I was able to get the official pdf map of the city and converted it to svg using inkscape. Since I could not find the official svg version map for that city, I decided to try it myself. Scenario : Want to provide rich graphical charts on a map of a particular city.
0 kommentar(er)
