Creating a layer from svg image using openlayers 3

Question

So I'm trying to take big svg file and use it as a layer on open layers 3 map. I only want to display the svg, without any map underneath it. Trying to get an answer produced some info about using icon marker for that, but I couldn't make it to work.

Does anyone know how to simply show an svg file as a layer ?

in the map "postcompose" event you can get the canvas context and draw on top of the map. Maybe that's what you want? Add a 'postcompose' event listener to the map... you should be able to find some examples w/ that — ryansstack, Mar 01 '16 at 20:27
you might need to convert it into a set of vectors, by default the objects in the ol Layer need to be geolocated, otherwise the renderer wouldn't know where to draw the svg in related to everything else. — softwarenewbie7331, Mar 07 '16 at 07:05
I have no problem to convert it to vectors, but I can't geolacate it since it's not geo data. — amitdar, Mar 07 '16 at 07:13
why do u want to display svg without any map underneath it, and how is it constrained by openmaps? can you detail what you are trying to do or share some code? — Taran J, Mar 07 '16 at 07:51

score 1 · Answer 1 · answered Mar 07 '16 at 07:12

By default objects in a Layer need to be geolocated so that the renderer knows where to draw them. A hack I found involves using D3 to map svg features into vectors with a custom projection function for the renderer. It also handles listening for move/pan. see: http://bl.ocks.org/pbogden/6283017

some code from the solution reproduced here

d3.json("us-states.json", function(err, collection) {
    var bounds = d3.geo.bounds(collection),
        path = d3.geo.path().projection(project), // create a d3.geo.path that converts GeoJSON to SVG
        vector = new OpenLayers.Layer.Vector( "states" ); // create a vector layer

    // Use D3 to add the states after the vector layer has been added to the map
    vector.afterAdd = function() {
        var div = d3.select("#"+vector.div.id);
        div.selectAll("svg").remove();  // Prepare OpenLayers vector div to be the container for D3

        var svg = div.append("svg"),
            g = svg.append("g");

        var states = g.selectAll("path")
                .data(collection.features)
              .enter().append("path");

        reset();

        // Reposition the SVG to cover the features
        function reset() {
            var bottomLeft = project(bounds[0]),
                topRight = project(bounds[1]);

            svg .attr("width", topRight[0] - bottomLeft[0])
                .attr("height",bottomLeft[1] - topRight[1])
                .style("margin-left", bottomLeft[0] + "px")
                .style("margin-top", topRight[1] + "px");

            g   .attr("transform", "translate(" + -bottomLeft[0] + "," + -topRight[1] + ")")

            states.attr("d", path);
        };
        map.events.register("moveend", map, reset);
    };
    // Add the vector layer to the map
    map.addLayer(vector);

   // Use OpenLayers to implement a custom D3 geographic projection.
   // Converts lon/lat to viewport coordinates (D3 uses 2-element arrays).
   function project(x) {
       var point = map.getViewPortPxFromLonLat( new OpenLayers.LonLat(x[0], x[1])
                                                    .transform("EPSG:4326", "EPSG:900913")
       );
       return [ point.x, point.y ];
   }
});

score 1 · Accepted Answer · edited May 23 '17 at 11:52

1

I just answered this in another similiar question. See that answer for a runnable example.

The gist of it: just include the svg file as the url for ol.source.ImageStatic.

edited May 23 '17 at 11:52

Community

1
1

answered Mar 23 '16 at 16:39

Alvin Lindstam

3,094
16
28

If the other question is the same, then one should get closed as duplicate. If it's not the same, then the answer could be tailored to answer the specific problem in this question. Refer to: [Is it acceptable to add a duplicate answer to several questions?](http://meta.stackexchange.com/questions/104227). – Mogsdad Mar 23 '16 at 17:02
Thanks, I second marking this question as a duplicate of the other. – Alvin Lindstam Mar 23 '16 at 17:11
Wow, that's awesome! Exactly what i was looking for, thanks dude. – amitdar Mar 24 '16 at 15:22

Creating a layer from svg image using openlayers 3

2 Answers2