open-index/open-npm huggingface dataset:
npm package: @shenyong/mapbox-gl-compass
Description: Indicate map direction
Latest version: 0.0.5

[<< all controls](/README.md)

# 🧭 @shenyong/mapbox-gl-compass

Control to indicate map direction. Optionally, can be hidden if map bearing iz 0.

```
npm i @shenyong/mapbox-gl-compass
```

```js
import CompassControl from '@shenyong/mapbox-gl-compass';
import '@shenyong/mapbox-gl-compass/src/index.css';
map.addControl(new CompassControl(), 'bottom-right');
```
## Options

```ts
export type CompassControlOptions = {
  instant?: boolean;
};
```
npm package: @shenyong/mapbox-gl-image
Description: Move, scale and rotate image on a map
Latest version: 0.0.5

[<< all controls](/README.md)

# 🏙️ @shenyong/mapbox-gl-image

Control to move, scale, rotate image (raster layer) on top of a map.
Very handy to represent information from the raster to geojson, for example, the contours of buildings.

```
npm i @shenyong/mapbox-gl-image
```

```js
import ImageControl from '@shenyong/mapbox-gl-image';
import '@shenyong/mapbox-gl-image/src/index.css';

const imageControl = new ImageControl();
map.addControl(imageControl, 'bottom-right');
```

## Options

```ts
export type ImageControlOptions = {
  removeButton?: boolean;
};
```

## Events

| event          | description                |
| -------------- | -------------------------- |
| image.select   | selected new image         |
| image.deselect | image was deselected       |
| image.mode     | transform mode was changed |
| image.update   | position was updated       |
| image.add      | new image added            |
| image.remove   | image removed              |

## Methods

Methods are useful for programmatic control (when option `invisible` is `true`):

- `addFile(file: File, coordinates?: [number, number][] | undefined): Promise<string>;` - add new image by file. raster id is returned
- `addUrl(url: string, coordinates?: [number, number][] | undefined): Promise<string>;` - add new image by url. raster id is returned
- `setLock: (id: string, isLocked: boolean) => void;` - lock or unlock image. locked image can't be selected
- `removeRaster: () => void;` - removes selected raster from the map

If image was added without `coordinates` parameter, the image is scaled down to be fully visible and placed at the center of the viewport.

Other methods may help to use this control without buttons, these methods are described in type definitions `.d.ts`.

## Change paint properties

Paint properties can be changed dynamically.
Below is an example how to control image opacity by slider (full implementation is available in [preview](/preview/preview.js)).

```js
map.on('image.select', ({ id }) => {
  const rasterLayerId = image.rasters[id].rasterLayer.id;
  const range = document.createElement('input');
  range.style.position = 'absolute';
  range.style.left = '50%';
  range.style.transform = 'translateX(-50%)';
  range.style.bottom = '16px';
  range.type = 'range';
  range.min = 0;
  range.step = 0.05;
  range.max = 1;
  range.value = map.getPaintProperty(rasterLayerId, 'raster-opacity');
  range.addEventListener('input', () => {
    map.setPaintProperty(rasterLayerId, 'raster-opacity', Number(range.value));
  });
  document.body.appendChild(range);
  map.once('image.deselect', () => {
    document.body.removeChild(range);
  });
});
```
npm package: @shenyong/mapbox-gl-inspect
Description: Debug map style layers and sources
Latest version: 0.0.5

[<< all controls](/README.md)

# 🐞 @shenyong/mapbox-gl-inspect

Control to debug map style layers and sources.

```
npm i @shenyong/mapbox-gl-inspect
```

```js
import InspectControl from '@shenyong/mapbox-gl-inspect';
import '@shenyong/mapbox-gl-inspect/src/index.css';

map.addControl(new InspectControl(), 'bottom-right');
```

## Options

```ts
export type InspectControlOptions = {
  console?: boolean;
};
```
npm package: @shenyong/mapbox-gl-language
Description: Change map language
Latest version: 0.0.5

[<< all controls](/README.md)

# 📖 @shenyong/mapbox-gl-language

Localize map or change dynamically language.

By default, supported languages option is [the supported list](https://docs.mapbox.com/data/tilesets/reference/mapbox-streets-v8/#common-fields) by mapbox styles.

```
npm i @shenyong/mapbox-gl-language
```

```js
// set language from browser, use 'mul' as fallback
map.addControl(new LanguageControl());

// set custom language while initialization
const languageControl = new LanguageControl({
  language: 'ru',
});
map.addControl(languageControl);

// or change language dynamically
languageControl.setLanguage(event.target.value);
```

## Options

```ts
export type LanguageControlOptions = {
  supportedLanguages?: string[] | undefined;
  language?: string | undefined;
  getLanguageKey?: ((language: string) => string) | undefined;
  excludedLayerIds?: string[] | undefined;
};
```

## Methods

- `setLanguage(lang?: string | undefined): void;` - set dynamically map language
npm package: @shenyong/mapbox-gl-ruler
Description: Measure distance between points on a map
Latest version: 0.0.5

[<< all controls](/README.md)

# 📏 @shenyong/mapbox-gl-ruler

Control to measure distance between points on a map.

```
npm i @shenyong/mapbox-gl-ruler
```

```js
import RulerControl from '@shenyong/mapbox-gl-ruler';
import '@shenyong/mapbox-gl-ruler/src/index.css';

map.addControl(new RulerControl(), 'bottom-right');
map.on('ruler.on', () => console.log('Ruler activated'));
map.on('ruler.off', () => console.log('Ruler deactivated'));
```

## Options

```ts
export type Units = import('@turf/helpers').Units;

export type RulerControlOptions = {
  units?: import("@turf/helpers").Units | undefined;
  labelFormat?: ((n: number) => string) | undefined;
  symbolLayout?: mapboxgl.SymbolLayout | undefined;
  symbolPaint?: mapboxgl.SymbolPaint | undefined;
  lineLayout?: mapboxgl.LineLayout | undefined;
  linePaint?: mapboxgl.LinePaint | undefined;
  markerCSS?: Partial<CSSStyleDeclaration> | undefined;
  invisible?: boolean | undefined;
};
```

## Events

| event     | description       |
| --------- | ----------------- |
| ruler.on  | ruler activated   |
| ruler.off | ruler deactivated |

## Methods

Methods are useful for programmatic control (when option `invisible` is `true`):

- `activate(): void;` - activate controls
- `deactivate(): void;` - deactivate control
- `addCoordinate(coordinate: [number, number]): void;` - add new coordinate
npm package: @shenyong/mapbox-gl-styles
Description: Change map style
Latest version: 0.0.5

[<< all controls](/README.md)

# 💅 @shenyong/mapbox-gl-styles

Control to change map style among provided.

```
npm i @shenyong/mapbox-gl-styles
```

```js
import StylesControl from '@shenyong/mapbox-gl-styles';
import '@shenyong/mapbox-gl-styles/src/index.css';

map.addControl(new StylesControl(styles: {
  label: 'Streets',
  styleName: 'Mapbox Streets',
  styleUrl: 'mapbox://styles/mapbox/streets-v12',
}, {
  label: 'Satellite',
  styleName: 'Mapbox Satellite Streets',
  styleUrl: 'mapbox://sprites/mapbox/satellite-streets-v12',
}), 'top-left');

// or with compact view and default styles (streets and satellite)
map.addControl(new StylesControl({ compact: true }), 'top-left');
```

Use mapbox [`style.load`](https://docs.mapbox.com/mapbox-gl-js/api/map/#map.event:style.load) event to redraw layers.

## Options

`styleName` - is the root value of style's `name` property according to [the specification](https://docs.mapbox.com/style-spec/reference/root/#name).

```ts
export type Style = {
  label: string;
  styleName: string;
  styleUrl: string;
};

export type StylesControlOptions = {
  styles?: Style[] | undefined;
  onChange?: ((style: Style) => void) | undefined;
  compact?: boolean | undefined;
};
```
npm package: @shenyong/mapbox-gl-tooltip
Description: Display tooltip on hover
Latest version: 0.0.5

[<< all controls](/README.md)

# 🏷️ @shenyong/mapbox-gl-tooltip

Control to display tooltip on hover. The content of the tooltip may depend on the data stored in the layer.

```
npm i @shenyong/mapbox-gl-tooltip
```

```js
import TooltipControl from '@shenyong/mapbox-gl-tooltip';
import '@shenyong/mapbox-gl-tooltip/src/index.css';

map.addControl(new TooltipControl({
  getContent: (event) => `${event.lngLat.lng.toFixed(6)}, ${event.lngLat.lat.toFixed(6)}`,
  layer: 'some-layer-id',
}));
```

## Options

```ts
export type TooltipControlOptions = {
  getContent: (event: MapLayerMouseEvent) => string;
  layer?: string | undefined;
};
```
npm package: @shenyong/mapbox-gl-utils
Description: Utils for mapbox controls
Latest version: 0.0.5

[<< all controls](/README.md)

# 🧭 @shenyong/mapbox-gl-compass

Control to indicate map direction. Optionally, can be hidden if map bearing iz 0.

```
npm i @shenyong/mapbox-gl-utils
```

```js

import { ButtonOption, createButtonsContainer, createButtons, parseSVG } from '@shenyong/mapbox-gl-utils';
import '@shenyong/mapbox-gl-utils/src/index.css';

this.buttonsContainer = createButtonsContainer();
this.buttons = createButtons([]);
this.svg = parseSVG('');

```
## Options

```ts

```
npm package: @shenyong/mapbox-gl-zoom
Description: Zoom in and zoom out map
Latest version: 0.0.5

[<< all controls](/README.md)

# 🔍 @shenyong/mapbox-gl-zoom

![](https://github.com/korywka/mapbox-controls/assets/988471/6f02cf18-765c-47c0-821c-5cb741d34972)

Control to zoom in and zoom out map. The difference between the standard ones is that they are not combined with a compass control.

```
npm i @shenyong/mapbox-gl-zoom
```

```js
import ZoomControl from '@shenyong/mapbox-gl-zoom';
import '@shenyong/mapbox-gl-zoom/src/index.css';

map.addControl(new ZoomControl(), 'bottom-right');
```
npm package: @shenyuan/form-test
Description: 测试
Latest version: 1.0.0

# 测试

@shenyuan/form-test

测试

## API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
|        |      |      |      |        |      |
npm package: @shenyuan/msg-test
Description: 我是测试消息的
Latest version: 1.0.0

# 测试消息组件

@shenyuan/msg-test

我是测试消息的

## API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
| ------ | ---- | ---- | ---- | ------ | ---- |
|        |      |      |      |        |      |