On one of my projects we are using OpenLayers to visualize geographical data. I got stuck when I tried to show markers on a map by using SVG icons.
My first attempt looked like this:
But on the map I only got a weird black triangle.š
I tried a lot of alternatives but nothing made any difference. In the end I found out that I could fix it by specifying a size(width and height) inside my SVG file:
Remark: Changing the scale and size properties on the style seems to have no affect when using SVGās. So make sure to set an appropriate size in the SVG file.
My first attempt looked like this:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const layer = new VectorLayer({ | |
| source: new VectorSource({ | |
| format: new GeoJSON(), | |
| url(extent) { | |
| return 'https://localhost/example/geo'; | |
| }, | |
| strategy: bboxStrategy, | |
| }), | |
| style: new Style({ | |
| image: new Icon({ | |
| src: 'assets/icons/address-icon.svg' | |
| }) | |
| }) | |
| }); |
But on the map I only got a weird black triangle.š
I tried a lot of alternatives but nothing made any difference. In the end I found out that I could fix it by specifying a size(width and height) inside my SVG file:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Remark: Changing the scale and size properties on the style seems to have no affect when using SVGās. So make sure to set an appropriate size in the SVG file.