# mapbox-gl-static-image-source

> English | [中文](README.zh-CN.md)

Latest version **0.1.1** (published 2021-11-06) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install mapbox-gl-static-image-source
pnpm add mapbox-gl-static-image-source
yarn add mapbox-gl-static-image-source
bun add mapbox-gl-static-image-source
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2021-11-06 |
| First published | 2021-10-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 149.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | 黄俐 |
| Maintainers | huanglii |

## Links

- npm: https://www.npmjs.com/package/mapbox-gl-static-image-source
- Repository: https://github.com/huanglii/mapbox-gl-static-image-source
- Homepage: https://github.com/huanglii/mapbox-gl-static-image-source#readme
- Issues: https://github.com/huanglii/mapbox-gl-static-image-source/issues
- npm.io page: https://npm.io/package/mapbox-gl-static-image-source

## Dependencies (1)

- [ol](https://npm.io/package/ol.md) ^6.9.0

## Recent versions

- 0.1.1 (latest) — 2021-11-06
- 0.1.0 — 2021-10-21

## README

# mapbox-gl-static-image-source

English | [中文](README.zh-CN.md)

Load a static image of any projection via ol/reproj.

## install
```
npm i mapbox-gl-static-image-source
```

## use
Here is an image, and its epsg code is 4326:

![](./public/4326.png)

```
import StaticImageSource from 'mapbox-gl-static-image-source'

map.on('load', () => {
  const imageStaticSource = new StaticImageSource({
    crossOrigin: 'anonymous',
    url: '/4326.png', // image url
    projection: 'EPSG:4326', // image projection
    imageExtent: [105.289838, 28.164713, 110.195632, 32.204171] // image extent
  })
  imageStaticSource.addEventListener('load', (e) => {
    map.addSource('canvas-source', e.target)
    map.addLayer(
      {
        id: 'canvas-layer',
        type: 'raster',
        source: 'canvas-source',
      },
      'waterway'
    )
  })
})
```

The rendering result is as shown below: [Load a static image of any projection](https://huanglii.github.io/mapbox-gl-static-image-source/)

---
_Source: https://npm.io/package/mapbox-gl-static-image-source · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._