SVG Layer

Edit

SVG Layer

Example of a map with an interactive svg layer.

With a plain ol/Layer and a render function, we can use an interactive svg as layer. Hover over countries to see the interactivity that is defined purely with a css :hover pseudo-class.

Copy

index.html<!DOCTYPE html>
<html lang="en">
  <head>
    <title>SVG Layer</title>
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,URL"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
      #map {
        background: black;
      }

      .svg-layer path:hover {
        opacity: 0.4;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="index.js"></script>
  </body>
</html>

Copy

index.jsimport 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import Layer from 'ol/layer/Layer';
import {composeCssTransform} from 'ol/transform';

var map = new Map({
  target: 'map',
  view: new View({
    center: [0, 0],
    extent: [-180, -90, 180, 90],
    projection: 'EPSG:4326',
    zoom: 2
  })
});

var svgContainer = document.createElement('div');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'data/world.svg');
xhr.addEventListener('load', function() {
  var svg = xhr.responseXML.documentElement;
  svgContainer.ownerDocument.importNode(svg);
  svgContainer.appendChild(svg);
});
xhr.send();

var width = 2560;
var height = 1280;
var svgResolution = 360 / width;
svgContainer.style.width = width + 'px';
svgContainer.style.height = height + 'px';
svgContainer.style.transformOrigin = 'top left';
svgContainer.className = 'svg-layer';

map.addLayer(new Layer({
  render: function(frameState) {
    var scale = svgResolution / frameState.viewState.resolution;
    var center = frameState.viewState.center;
    var size = frameState.size;
    var cssTransform = composeCssTransform(
      size[0] / 2, size[1] / 2,
      scale, scale,
      frameState.viewState.rotation,
      -center[0] / svgResolution - width / 2, center[1] / svgResolution - height / 2);
    svgContainer.style.transform = cssTransform;
    svgContainer.style.opacity = this.getOpacity();
    return svgContainer;
  }
}));

Copy

package.json{
  "name": "svg-layer",
  "dependencies": {
    "ol": "6.3.1"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}