Loading SVG images on a map without D3.js is setting them to wrong position

Question

I want to create a map with e.g. mountains. First of all I loaded the outline and then I wanted to create dots on which I wanted to set a SVG image. That didn't work because it just filled the dot and I had no chance to resize it without making the dot bigger...

So my second way was to load the coordinates without d3.js. That worked well and I was able to draw the mountains at all the points I wanted to have them. But have a look on that fiddle jsfiddle.net/kwoxer/5uc17jwr/13. As you can see it is not at the right position for all mountains.

Sure I did some crazy stuff with *xxxx but the projection isn't doing anything else, or does it? Well I think it's a projection issue or whatever but really no clue about that. Can someone tell me what is done in the path thing. I mean usuall you load it with .attr("d",path).

What I need is just showing SVG images on my map at specific points from a topojson. But it seems that noone ever wanted that =)

Here some code snippets from the significant parts of the fiddle:

featureCollection = featureCollection.features;
        var svgNS = "http://www.w3.org/2000/svg";
        var xlinkNS = "http://www.w3.org/1999/xlink";
        for (var i=0; i<featureCollection.length; i++) {
            var  use = document.createElementNS(svgNS, "use");
            use.setAttributeNS(xlinkNS, "href", "#svgmounntain");
            var x = (featureCollection[i].geometry.coordinates[0])*8750;
            var y = (featureCollection[i].geometry.coordinates[1])*-7550;
            use.setAttribute("x",x);
            use.setAttribute("y", y);
            document.getElementById("markers").appendChild(use);
        }

and

var featureCollection = topojson.feature(currentMap, currentMap.objects.testarea);
    svgmap.append("g")
          .attr("id", "testarea")
          .selectAll("path")
          .data(featureCollection.features)
          .enter().append("path")
          .attr("d", path);

svgimage
        .attr("id","svgmounntain")
        .append("svg:image")
        .attr("xlink:xlink:href", "http://imgh.us/blub_1.svg" )
        .attr("width", "10")
        .attr("height", "10");

score 0 · Accepted Answer · edited May 23 '17 at 12:06

Meanwhile I got it working with D3. This is code from: Draw SVG image on paths but as big as needed

svgimage.append("pattern")
        .attr("id","p1")
        .attr("width","10")
        .attr("height","10")
        .append("image")
        .attr("xlink:href", "pics/point.jpg" )
        .attr("width", 5)
        .attr("height", 5)
        .attr("x", 1)
        .attr("y", 2);

Just take care of the sizes and possitions. For more information have a look on that link.

Loading SVG images on a map without D3.js is setting them to wrong position

1 Answers1