none
D3 Overlay of SVG RRS feed

  • Question

  • I am looking for a simple example of overlaying an static SVG image on a map.  I am using your DS Overlay Manager javascript example.  I have a break point in my code and can verify that I pulled my SVG from disk and it loaded, now I cannot figure out how to render it on the map where I need it. I tried using your example and cannot determine the problem.  The map loads, the SVG seems to load into the Javascript but I cannot get is on the map. Using Firefox on Mac

    function loadSvg() {
        //Create an instance of the D3 Overlay Manager
        d3MapTools = new D3OverlayManager(map);
        
        //Create a data layer onto the map.
        svgLayer = d3MapTools.addLayer({
            loaded: function (svg, projection) {
            
                //Add code for rendering data using d3
                d3.xml("images/sample.svg","image/svg+xml", function(error,sampleSVG) {
                    console.log(sampleSVG.documentElement);
                    svg.selectAll("path")
                    .data(sampleSVG.documentElement)
                    .enter().append("path")
                    .attr('class', 'hotel')
                    .attr('d', projection)
                    .on('click', function(feature) {
                        alert('Clicked on hotel ' + feature.id);    
                    });
                });

            }
        });
    }

    Tuesday, August 25, 2015 7:58 PM

Answers

All replies

  • The d3 overlay is likely not what you want to use here. That module creates a SVG and isn't designed to import other SVG's. If you want to simply add an SVG to the map like a pushpin, then use the pushpin class and pass the SVG in as HTML content. Take a look at this blog post for a couple of examples: https://blogs.bing.com/maps/2015/02/05/visualizing-point-based-business-intelligence-data-on-bing-maps/

    http://rbrundritt.wordpress.com

    Wednesday, August 26, 2015 4:54 PM
  • I had already abandoned the D3 overlay and was using the simple imadeOverlayModule example you had written prior to d3 overlay.  Problem now is that I cannot add any pushpin handlers successfully.  I tried adding to the _basePushpin inside your imageOverlayModule code, the imgPin created using the ImageOverlay call and even the imgRectangle your creating in your example.  None of them work.  It seems that the events just don't fire?  I was trying first on the simple "click" and then would move on from there to try to support dragging and rotating my image on the map.  I like your imageOverlayModule because it takes into account the zooming of the map, etc...  I just need to be able to interact with my SVG after being overlaid. 
    Wednesday, August 26, 2015 7:52 PM
  • I am now using the simple imadeOverlayModule example you had written prior to d3 overlay.  Problem now is that I cannot add any pushpin handlers successfully.  I tried adding to the _basePushpin inside your imageOverlayModule code, the imgPin created using the ImageOverlay call and even the imgRectangle your creating in your example.  None of them work.  It seems that the events just don't fire?  I was trying first on the simple "click" and then would move on from there to try to support dragging and rotating my image on the map.  I like your imageOverlayModule because it takes into account the zooming of the map, etc...  I just need to be able to interact with my SVG after being overlaid. I try to drag and see some of my parts looking like they are dragging when I grab but they are larger and coming from a different spot on the map?  Very confused on what is causing the events to not fire and the dragging to not work.
    Thursday, August 27, 2015 5:13 PM