CODEWITHSUNDEEP
svgstylesopenlayersmarker
Alexlionnel Sieyadjeu
Alexlionnel Sieyadjeu

Reputation: 343

Use SVG icon as marker in OpenLayers

I tried to svg icon as marker in Openlayers-3. Here in my code.

var svg = '<?xml version="1.0"?>'
            + '<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
            + '<circle cx="60" cy="60" r="60"/>'
            + '</svg>';

var style = new ol.style.Style({
            image: new ol.style.Icon({
                opacity: 1,
                src: 'data:image/svg+xml;base64,' + btoa(svg)
            })
        });

But my svg image is truncated,as shown in the following picture. ( the icon should be a circle)

enter image description here

Upvotes: 19

Views: 22119

Answers (3)

raghav
raghav

Reputation: 63

I am using svg icon as image src in open layer styles.

var custstyle = new ol.style.Style({
 image: new ol.style.Icon({
    anchor: [0.5, 50],
    anchorXUnits: 'fraction',
    anchorYUnits: 'pixels',
    src: './Icon.svg',
  }),
});

Upvotes: 0

Geomaticanet.com
Geomaticanet.com

Reputation: 41

To me, the solution was:

const iconMarkerStyle = new ol.style.Icon({
    src: './data/static_images/marker.svg',
    //size: [100, 100],
    offset: [0, 0],
    opacity: 1,
    scale: 0.35,
    //color: [10, 98, 240, 1]
})

Then add size parameters directly in the SVG file:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.81 215.81" width="14.5px" height="21.6px">
    <title>Asset 190-SVG</title>
</svg>

Upvotes: 4

Tim Schaub
Tim Schaub

Reputation: 6970

Here is an example that shows inline SVG in an icon symbolizer: http://jsfiddle.net/eze84su3/

Here is the relevant code:

var svg = '<svg width="120" height="120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
    + '<circle cx="60" cy="60" r="60"/>'
    + '</svg>';

var style = new ol.style.Style({
  image: new ol.style.Icon({
    opacity: 1,
    src: 'data:image/svg+xml;utf8,' + svg,
    scale: 0.3
  })
});

A few differences from yours:

  • I added width and height attributes to the <svg>. This lets the browser know how big to make the resulting image.
  • I added a scale property to the icon to resize the image.
  • I used utf8 instead of base64 encoding (not significant).

Upvotes: 28

Related Questions