4

Scenario : Want to provide rich graphical charts on a map of a particular city. Since I could not find the official svg version map for that city, I decided to try it myself.

I was able to get the official pdf map of the city and converted it to svg using inkscape. I want to be able to manipulate the map at district level. Using inkscape i can demarcate the boundaries of the districts further into sub-districts that I want to work on. I would then want to manipulate or work on these sub-districts.

The district levels are paths (in inkscape terminology).

a) 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 was not able to achieve this split-up.

sub-district demarcation required here

b) Given the svg, i then imported it to an html. 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). Is this possible ? to manipulate different parts of the svg, if so hints/pointers on how to go about it will be appreciated.

Thanks!

PS: to the downvoter please explain your downvote.

EDIT : Adding information regarding research. 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() ( ..argh ). 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. 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. Perhaps @robert-longson could explain what is the difference between the svg output from inkscape vs that from svg-edit.

Pre-conditions :

  1. Convert pdf to svg using inkscape
  2. Select the nodes, break apart to convert text to paths (i did not do this before).

This is mostly for part b) I added an onclick event and painted the region i was interested in red. 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.

SVG loaded from browser

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 ..duh!). The correct way it seems is to load it using the object tag.

Now if i were to try to load the image via html using the object tag it works. enter image description here

However I am unable to adjust the dimensions of the image even after adjusting it in the svg tags or as suggested here

I have for now branched off to my other solution mostly because the highlighting of regions functionality is available in the excellent jvectormap library.

EDIT : This gist shows a svg made using inkscape. 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. And it is this converted output which finally works well in the svgto.jvectormap.

Community
  • 1
  • 1
sunny
  • 824
  • 1
  • 14
  • 36
  • For point a) it depends from the kind of import made by Inkscape, for a similar case I'd to duplicate the regions and made "collages" of the paths until the contour was completed; for point b) see a similar [question](http://stackoverflow.com/questions/11236085/create-a-map-with-clickable-provinces-states-using-svg-html-css-imagemap) – Paolo Gibellini Oct 19 '13 at 11:49
  • a) would seems to be about how to use Inkscape which belongs on Super User rather than here. b) does not show any research effort. How have you tried to manipulate the DOM, what issues/problems did you encounter? – Robert Longson Oct 20 '13 at 09:30
  • a) inkscape is one of the tags available. i actually was not familiar with super user vs stackoverflow questions. b) Ofcourse ! I was using the svg generated from inkscape. I tried using javascript to manipulate in the console however the onhover, onclick attributes are not available on SVG elements. Hence the question "is it possible" ? This is when the svg is directly rendered by the browser. If you include the svg in an html according to the various options available you do not have access to the svg dom anymore (or atleast i could not do it) – sunny Oct 20 '13 at 11:06
  • However as a developer's itch is difficult to get rid off , i have solved the problem using a combination of inkscape, jvectormap, svg-editor, which i will post as an answer for anyone trying to do the same. – sunny Oct 20 '13 at 11:12
  • onclick is available, so you tried that and it didn't work. Show us what you tried and we can most likely tell you why it didn't work. You did research effort, you just didn't put it in the question! – Robert Longson Oct 20 '13 at 12:09
  • I would have assumed that a discerning user would give the benefit of the doubt to the questioner that some research effort was put in or atleast clarify before a downvote. I tried to put in as much information as I thought would get my question across ; perhaps it fell a little short for you. – sunny Oct 21 '13 at 11:15

2 Answers2

3

I was able to achieve what I needed as follows in short :

  1. Convert SVG to PDF using Inkscape
  2. Cut the nodes to get the path from the svg.
  3. Break Apart the regions (district level) into paths using Inkscape.
  4. Upload this svg to svg-edit tool
  5. Use the svg from the tool in 4) to feed into a tool to convert svg to jvectormap here

  6. Use generated jvectormap in html.

    For more details

    • The long version with video is available here.
    • The final output can be viewed here

Perhaps @RobertLongson could explain what is the difference between the svg output from inkscape vs that from svg-edit.

sunny
  • 824
  • 1
  • 14
  • 36
  • There isn't any difference really, they both output SVG. You've asked a really general question in your answer but I imagine you've something specific in mind that I can't guess at. – Robert Longson Oct 21 '13 at 11:30
  • @RobertLongson i have updated the question with the relevant gist in order to show the difference. – sunny Oct 22 '13 at 05:36
  • Thank you @sunny for this simple howto, works nicely. – ivica Jul 13 '14 at 15:24
0

Another solution to use it in an Angular/JS App, i'm here using Typescript & the exported inskscape svg. First tag each element you want to manipulate in Inkscape using the tag label in Object Properties (not the id! if you want to use multiple map). Then get your svg object by tagname and get what matter for you, then add your listener :)

this.mySvg = svg.getElementsByTagName("svg")[0];
let myDom = this.mySvg.getElementsByTagName("*");
    for(let i=0; i < myDom.length; i++) {
      let label = myDom[i].getAttribute('inkscape:label');
      let style = myDom[i].getAttribute('style');
      if (label && style) {
           myDom[i].addEventListener("click", () => this.onClick(myDom[i], style));
      }
    }
andrea06590
  • 1,259
  • 3
  • 10
  • 22