https://github.com/el/infobox-control

Infobox control for Mapbox GL JS
https://github.com/el/infobox-control

Last synced: about 17 hours ago
JSON representation

Infobox control for Mapbox GL JS

• Host: GitHub
• URL: https://github.com/el/infobox-control
• Owner: el
• License: gpl-3.0
• Created: 2018-11-02T23:43:13.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2023-03-05T15:52:41.000Z (almost 2 years ago)
• Last Synced: 2024-12-14T03:49:42.890Z (29 days ago)
• Language: TypeScript
• Size: 214 KB
• Stars: 32
• Watchers: 3
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-maplibre - mapbox-gl-infobox - Adds a control to display an infobox or a gradient. (User Interface Plugins / JavaScript)

README

        
# Mapbox GL JS Infobox

Adds an infobox and/or gradient switch to `mapbox-gl`

![](https://img.shields.io/bundlephobia/min/mapbox-gl-infobox) ![](https://img.shields.io/npm/v/mapbox-gl-infobox) ![](https://img.shields.io/npm/types/mapbox-gl-infobox) ![](https://img.shields.io/npm/l/mapbox-gl-infobox) 

## Installation:

```bash

npm i mapbox-gl-infobox --save

```

## Usage:

```ts

import { MapboxGradientBoxControl, MapboxInfoBoxControl } from "mapbox-gl-infobox";

import { Map as MapboxMap } from "mapbox-gl";

import "mapbox-gl-infobox/styles.css";

const map = new MapboxMap();

map.addControl(new MapboxGradientBoxControl());

map.addControl(new MapboxInfoBoxControl());

```

## Options:

You can also supply your own options.

```ts

const layerId = "features";

const minMaxValues = {minValue: 0, maxValue: 100};

const weightGetter = properties => properties ? properties['weight'] : 0;

const gradientOptions: MapboxGradientBoxOptions = {

    layerId,

    minMaxValues,

    weightGetter

};

map.addControl(new MapboxGradientBoxControl(gradientOptions));

const formatter = properties => properties ? `Name: ${properties['name']}` : '';

const infoboxOptions: MapboxInfoBoxOptions = {

    layerId,

    formatter

};

map.addControl(new MapboxInfoBoxControl(infoboxOptions));

```

## Screenshots

![Closed](assets/hover.png)