leaflet-schematic

    1.1.0 • Public • Published

    Leaflet schematic npm version CircleCI

    This is a set of tools to display and work with non-cartographic large high-detailed SVG schematics or blueprints. SVG is a perfect format for the task - it's vector, relatively compact, has all the means to work with templates and symbols, so it can really be a great representation and metadata container at the same time.

    Usage

    var xhr = require('xhr');
    var SVGOverlay = require('leaflet-schematic');
     
    var map = L.map('map', { crs: L.CRS.Simple });
    L.svgOverlay('/path/to/svg.svg', {
      load: function(url, callback) {
        // your/your library xhr implementation
        xhr({
          uri: url,
          headers: {
            "Content-Type": "image/svg+xml"
          }
        }, function (err, resp, svg) {
          callback(err, svg);
        });
      }
    }).addTo(map);

    Problem

    The problem is that if you want to work with the SVG as with image overlay, several technical limitations and performance issues strike in:

    • you cannot work on larger scales with the whole canvas because of the dimension restrictions of browsers
    • you have to scale the drawing initially to fit the viewport on the certain zoom level
    • IE (as always) - I wouldn't even call that "SVG support"
      • <use> elements have a special freaky non-compliant API which is also broken
      • css-transforms - unsupported
      • translate() + scale() transform on <g> -doesn't work, use matrix
      • horrible performance - the more SVG nodes you have the slower it is

    Approach

    • Use leaflet viewportized layer container to render part of the SVG with padding
    • scale SVG to fit the viewport and zoom levels
    • pack SVG contents into moving <g>
    • for IE - hardcore hacking:
      • render SVG > base64 > <canvas>
      • replace SVG with this canvas on drag and zoom
      • also keep a hidden PNG rendered to overcome IE's performance drop on image scaling, somehow it works like a directive to switch the faulty smoothing off

    Know issues

    • SVGs without correctly provided viewBox work really badly and I cannot yet figure out why. I'm trying to calculate viewbox from the contents, but it still looks broken in rendered canvas

    License

    MIT

    Keywords

    none

    Install

    npm i leaflet-schematic

    DownloadsWeekly Downloads

    1

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    4.41 MB

    Total Files

    29

    Last publish

    Collaborators

    • avatar