# city-selector-control

> A City Selector Control for Mapbox GL JS

Latest version **0.3.3** (published 2025-02-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install city-selector-control
pnpm add city-selector-control
yarn add city-selector-control
bun add city-selector-control
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2025-02-28 |
| First published | 2019-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 107.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 黄俐 |
| Maintainers | huanglii |
| Keywords | mapbox, mapbox-gl, control, city selector |

## Links

- npm: https://www.npmjs.com/package/city-selector-control
- Repository: https://github.com/huanglii/city-selector-control
- Homepage: https://github.com/huanglii/city-selector-control#readme
- Issues: https://github.com/huanglii/city-selector-control/issues
- npm.io page: https://npm.io/package/city-selector-control

## Recent versions

- 0.3.3 (latest) — 2025-02-28
- 0.3.2 — 2022-01-24
- 0.2.2 — 2019-05-16
- 0.2.0 — 2019-04-21
- 0.1.0 — 2019-04-14

## README

# City Selector Control
[![npm](https://img.shields.io/npm/v/city-selector-control.svg)][npm-url] [![npm](https://img.shields.io/npm/dt/city-selector-control.svg?style=popout)][npm-url]

[npm-url]: https://www.npmjs.com/package/city-selector-control

***A City Selector Control for `mapbox-gl`***


## 快速开始

### 使用 CDN
``` html
<script src="https://cdn.jsdelivr.net/npm/city-selector-control@0.2.2/dist/index.js"></script>
<link href="https://cdn.jsdelivr.net/npm/city-selector-control@0.2.2/dist/style.css" rel="stylesheet">
````
``` html
<div id='map' style='width: 800px; height: 600px;'></div>
<script>
  mapboxgl.accessToken = '<your access token here>';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9'
  });
  map.addControl(new CitySelectorControl(), 'top-right');
</script>
```
### 模块化
``` bash
npm i city-selector-control
```
``` javascript
import CitySelectorControl from 'city-selector-control'
import 'city-selector-control/dist/style.css'
// 默认选项
map.addControl(new CitySelectorControl(), 'top-right')

// 自定义
const citySelectorOptions = {
  theme: 'dark',
  placeholder: '全国',
  hot: ['110000', '340500'],
  zoom: 12
};
map.addControl(new CitySelectorControl(citySelectorOptions), 'top-right');
```

## 选项
|#|名称|类型|描述|默认值|
|---|---|---|---|---|
|1|`theme`|`String `|主题, 可选 `'light'` 或 `'dark'`.|`'light'`|
|2|`placeholder`|`String`|初始化时的文本.|`'请选择'` |
|2|`hot`|`Array`|热门城市编码，可为空 [].|`['440100', '440300', '330100', '510100']` |
|2|`zoom`|`Number`|选择城市后的缩放级别.|`10` |

## 截图

![theme](assets/theme.jpg)
![default](assets/default.gif)

---
_Source: https://npm.io/package/city-selector-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._