rbrundritt / maplibre-gl-svg

A maplibre-gl-js plugin that adds support for loading SVGs and SVG templates as images into the maps image sprite.

MapLibre GL SVG Plugin

Status: New plugin, still being validated.

A maplibre-gl-js plugin that adds support for loading SVGs images into the maps image sprite.

• Go to the examples page
• Read the docs

Features:

• Load an SVG into the maps image sprite and use as an icon in a symbol layer, or as an fill pattern.
• Framework for templatable SVG icons. Great way to create reusable icons that you can programmatically change the styles of.
• HTML marker support

Known Limitations

• When loaded into the maps image sprite SVG's are converted into a data URI, and loaded as a static image into the maps image sprite. This means animations and CSS classes are not supported. All CSS styles should be embedded within the SVG. SVG's used with HTML markers will support CSS classes and animations as usual.

License

MIT

See License for full license text.

maplibre-gl-svg's Issues

Typescript check fails

Hi, I am trying to use this library to render svg images with maplibre inside a React application, however i am getting an error when i try to build using vite alongside with typescript checks:

node_modules/maplibre-gl-svg/src/SvgManager.ts:69:20 - error TS2774: This condition will always return true since this function is always defined. Did you mean to call it instead?

69                 if(map._requestManager._transformRequestFn) {
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error in node_modules/maplibre-gl-svg/src/SvgManager.ts:69

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This happens whenever you run tsc on a project that imports SvgManager as follows:

import { SvgManager } from "maplibre-gl-svg/src";


const App = () => {

  return <></>;
}

And this is how I define the dependency on my package.json:

    "dependencies": {
        ...
        "maplibre-gl-svg": "git+https://github.com/rbrundritt/maplibre-gl-svg.git",
       ...
    },

The version of typescript being used is:

tsc --version     
Version 4.6.4

Maybe there is something I need to configure that I am not aware of? Any feedback is appreciated 😃