mapkick.js - GitLite

KO | EN

gitlite — search

#python #golang #go #android #rust #linux #docker #nodejs #windows #awesome #kubernetes #vue #mcp #ios

mapkick.js

(★ 425)

Create beautiful, interactive maps with one line of JavaScript

파일 탐색기

최종 버전 다운로드 (.zip)

- - build.yml
- index.js
- package.json
- index.html
- remote.json
- repro.html
- states.json
- LICENSE-mapkick-bundle.txt
- index.js
.gitignore
CHANGELOG.md
LICENSE.txt
package.json
README.md
rollup.config.js

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/ankane/mapkick.js

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd mapkick.js

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm run build-dev

배포용으로 코드를 최적화해서 빌드 파일을 생성합니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Mapkick.js

Create beautiful, interactive maps with one line of JavaScript

[See it in action](https://chartkick.com/mapkick-js)

For charts, check out [Chartkick.js](https://github.com/ankane/chartkick.js)

[![Build Status](https://github.com/ankane/mapkick.js/actions/workflows/build.yml/badge.svg)](https://github.com/ankane/mapkick.js/actions)

## Installation

Mapkick supports Mapbox and MapLibre.

### Mapbox

First, [create a Mapbox account](https://account.mapbox.com/auth/signup/) to get an access token.

Download [mapkick.js](https://unpkg.com/mapkick) and add in the `<head>` of your HTML file:

```html
<link href="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>
<script src="mapkick.js"></script>
<script>
  mapboxgl.accessToken = "YOUR-TOKEN"
</script>
```

### MapLibre

Download [mapkick.js](https://unpkg.com/mapkick) and add in the `<head>` of your HTML file:

```html
<link href="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
<script src="mapkick.js"></script>
<script>
  Mapkick.options = {style: "https://demotiles.maplibre.org/style.json"}
</script>
```

## Getting Started

Create a map

```html
<div id="map" style="height: 400px;"></div>

<script>
  new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
</script>
```

## Maps

Point map

```javascript
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
```

Area map

```javascript
new Mapkick.AreaMap("map", [{geometry: {type: "Polygon", coordinates: ...}}])
```

## Data

Data can be an array

```javascript
new Mapkick.Map("map", [{latitude: 37.7829, longitude: -122.4190}])
```

Or a URL that returns JSON (same format as above)

```javascript
new Mapkick.Map("map", "/restaurants")
```

Or a callback

```javascript
function fetchData(success, fail) {
  success([{latitude: 37.7829, longitude: -122.4190}])
  // or fail("Data not available")
}

new Mapkick.Map("map", fetchData)
```

### Point Map

Use `latitude` or `lat` for latitude and `longitude`, `lon`, or `lng` for longitude

You can specify an icon, label, tooltip, and color for each data point

```javascript
{
  latitude: ...,
  longitude: ...,
  icon: "restaurant",
  label: "Hot Chicken Takeover",
  tooltip: "5 stars",
  color: "#f84d4d"
}
```

[Maki icons](https://www.mapbox.com/maki-icons/) are supported (depending on the map style, only some icons may be available)

### Area Map

Use `geometry` with a GeoJSON `Polygon` or `MultiPolygon`

You can specify a label, tooltip, and color for each data point

```javascript
{
  geometry: {type: "Polygon", coordinates: ...},
  label: "Hot Chicken Takeover",
  tooltip: "5 stars",
  color: "#0090ff"
}
```

## Options

Marker color

```javascript
new Mapkick.Map("map", data, {markers: {color: "#f84d4d"}}
```

Show tooltips on click instead of hover

```javascript
new Mapkick.Map("map", data, {tooltips: {hover: false}})
```

Allow HTML in tooltips (must sanitize manually)

```javascript
new Mapkick.Map("map", data, {tooltips: {html: true}})
```

Map style

```javascript
new Mapkick.Map("map", data, {style: "mapbox://styles/mapbox/outdoors-v12"})
```

Zoom and controls

```javascript
new Mapkick.Map("map", data, {zoom: 15, controls: true})
```

Pass options directly to the mapping library

```javascript
new Mapkick.Map("map", data, {library: {hash: true}})
```

See the documentation for [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/api/map/) and [MapLibre GL JS](https://maplibre.org/maplibre-gl-js-docs/api/map/) for more info

### Global Options

To set options for all of your maps, use:

```javascript
Mapkick.options = {
  style: "mapbox://styles/mapbox/outdoors-v12"
}
```

## Live Updates

Refresh data periodically from a remote source to create a live map

```javascript
new Mapkick.Map("map", url, {refresh: 10}) // seconds
```

Show trails

```javascript
new Mapkick.Map("map", url, {trail: true, refresh: 10})
```

Use the `id` attribute to identify objects

```javascript
[
  {id: "bus-1", lat: ..., lon: ...},
  {id: "bus-2", lat: ..., lon: ...}
]
```

Set trail length

```javascript
new Mapkick.Map("map", url, {trail: {len: 10}, refresh: 10})
```

## Replay Data

```javascript
new Mapkick.Map("map", data, {replay: true})
```

Use the `id` attribute to identify objects and the `time` attribute for when the data was measured

```javascript
[
  {id: "bus-1", lat: ..., lon: ..., time: t0},
  {id: "bus-2", lat: ..., lon: ..., time: t0},
  {id: "bus-1", lat: ..., lon: ..., time: t1},
  {id: "bus-2", lat: ..., lon: ..., time: t1}
]
```

Times can be a `Date`, a timestamp (or sequence number), or a string (strings are parsed)

## History

View the [changelog](https://github.com/ankane/mapkick.js/blob/master/CHANGELOG.md)

## Contributing

Everyone is encouraged to help improve this project. Here are a few ways you can help:

- [Report bugs](https://github.com/ankane/mapkick.js/issues)
- Fix bugs and [submit pull requests](https://github.com/ankane/mapkick.js/pulls)
- Write, clarify, or fix documentation
- Suggest or add new features

To get started with development:

```sh
git clone https://github.com/ankane/mapkick.js.git
cd mapkick.js
npm install
npm run build-dev
```