https://github.com/w8r/leaflet-schematic
This is a set of tools to display and work with non-cartographic large high-detailed SVG schematics or blueprints
https://github.com/w8r/leaflet-schematic
blueprint leaflet leaflet-plugin scale svg-schematics viewport zoom-levels
Last synced: 5 months ago
JSON representation
This is a set of tools to display and work with non-cartographic large high-detailed SVG schematics or blueprints
- Host: GitHub
- URL: https://github.com/w8r/leaflet-schematic
- Owner: w8r
- Created: 2016-01-14T21:20:17.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:15:52.000Z (almost 3 years ago)
- Last Synced: 2025-04-15T20:18:58.807Z (6 months ago)
- Topics: blueprint, leaflet, leaflet-plugin, scale, svg-schematics, viewport, zoom-levels
- Language: JavaScript
- Homepage: https://w8r.github.com/leaflet-schematic/demo/
- Size: 5.17 MB
- Stars: 17
- Watchers: 5
- Forks: 3
- Open Issues: 14
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Leaflet schematic [](http://badge.fury.io/js/leaflet-schematic) [](https://circleci.com/gh/w8r/leaflet-schematic/tree/master)
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
```js
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"
* `` elements have a special freaky non-compliant API which is also broken
* css-transforms - unsupported
* `translate() + scale()` transform on `` -_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 ``
* for IE - *hardcore* hacking:
* render `SVG` > base64 > ``
* 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