{"id":20854357,"url":"https://github.com/w8r/leaflet-schematic","last_synced_at":"2025-05-12T05:31:50.820Z","repository":{"id":38239699,"uuid":"49675884","full_name":"w8r/leaflet-schematic","owner":"w8r","description":"This is a set of tools to display and work with non-cartographic large high-detailed SVG schematics or blueprints","archived":false,"fork":false,"pushed_at":"2023-01-06T03:15:52.000Z","size":5421,"stargazers_count":17,"open_issues_count":14,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-15T20:18:58.807Z","etag":null,"topics":["blueprint","leaflet","leaflet-plugin","scale","svg-schematics","viewport","zoom-levels"],"latest_commit_sha":null,"homepage":"https://w8r.github.com/leaflet-schematic/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/w8r.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-14T21:20:17.000Z","updated_at":"2024-06-22T23:15:28.000Z","dependencies_parsed_at":"2023-02-05T04:45:42.482Z","dependency_job_id":null,"html_url":"https://github.com/w8r/leaflet-schematic","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w8r%2Fleaflet-schematic","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w8r%2Fleaflet-schematic/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w8r%2Fleaflet-schematic/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/w8r%2Fleaflet-schematic/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/w8r","download_url":"https://codeload.github.com/w8r/leaflet-schematic/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253682336,"owners_count":21946916,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blueprint","leaflet","leaflet-plugin","scale","svg-schematics","viewport","zoom-levels"],"created_at":"2024-11-18T03:25:27.651Z","updated_at":"2025-05-12T05:31:49.715Z","avatar_url":"https://github.com/w8r.png","language":"JavaScript","readme":"# Leaflet schematic [![npm version](https://badge.fury.io/js/leaflet-schematic.svg)](http://badge.fury.io/js/leaflet-schematic) [![CircleCI](https://circleci.com/gh/w8r/leaflet-schematic/tree/master.svg?style=shield)](https://circleci.com/gh/w8r/leaflet-schematic/tree/master)\n\nThis is a set of tools to display and work with non-cartographic large\nhigh-detailed SVG schematics or blueprints. SVG is a perfect format for the\ntask - it's vector, relatively compact, has all the means to work with templates\nand symbols, so it can really be a great representation and metadata container\nat the same time.\n\n### Usage\n\n```js\nvar xhr = require('xhr');\nvar SVGOverlay = require('leaflet-schematic');\n\nvar map = L.map('map', { crs: L.CRS.Simple });\nL.svgOverlay('/path/to/svg.svg', {\n  load: function(url, callback) {\n    // your/your library xhr implementation\n    xhr({\n      uri: url,\n      headers: {\n        \"Content-Type\": \"image/svg+xml\"\n      }\n    }, function (err, resp, svg) {\n      callback(err, svg);\n    });\n  }\n}).addTo(map);\n```\n\n### Problem\n\nThe problem is that if you want to work with the SVG as with image overlay,\nseveral technical limitations and performance issues strike in:\n\n* you cannot work on larger scales with the whole canvas because of the\n  dimension restrictions of browsers\n* you have to scale the drawing initially to fit the viewport on the certain\n  zoom level\n* IE (as always) - I wouldn't even call that \"SVG support\"\n  * `\u003cuse\u003e` elements have a special freaky non-compliant API which is also broken\n  * css-transforms - unsupported\n  * `translate() + scale()` transform on `\u003cg\u003e` -_doesn't work_, use matrix\n  * **horrible performance** - the more SVG nodes you have the slower it is\n\n### Approach\n\n* Use leaflet viewportized layer container to render part of the `SVG` with padding\n* scale `SVG` to fit the viewport and zoom levels\n* pack `SVG` contents into moving `\u003cg\u003e`\n* for IE - *hardcore* hacking:\n  * render `SVG` \u003e base64 \u003e `\u003ccanvas\u003e`\n  * replace `SVG` with this canvas on drag and zoom\n  * also keep a hidden PNG rendered to overcome IE's performance drop on image\n    scaling, somehow it works like a directive to switch the faulty smoothing off\n\n### Know issues\n* SVGs without correctly provided `viewBox` work really badly and I cannot yet\n  figure out why. I'm trying to calculate viewbox from the contents, but it\n  still looks broken in rendered canvas\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw8r%2Fleaflet-schematic","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fw8r%2Fleaflet-schematic","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fw8r%2Fleaflet-schematic/lists"}