Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/indoorequal/maplibre-gl-indoorequal
A maplibre-gl.js plugin to display data from indoor=
https://github.com/indoorequal/maplibre-gl-indoorequal
indoor indoor-map indoorequal maplibre-gl-js maplibre-plugins openstreetmap
Last synced: 3 months ago
JSON representation
A maplibre-gl.js plugin to display data from indoor=
- Host: GitHub
- URL: https://github.com/indoorequal/maplibre-gl-indoorequal
- Owner: indoorequal
- License: bsd-3-clause
- Created: 2020-05-03T12:04:42.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-03T05:38:36.000Z (8 months ago)
- Last Synced: 2024-06-08T06:22:09.503Z (8 months ago)
- Topics: indoor, indoor-map, indoorequal, maplibre-gl-js, maplibre-plugins, openstreetmap
- Language: JavaScript
- Homepage:
- Size: 6.54 MB
- Stars: 28
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# maplibre-gl-indoorequal  [](https://www.npmjs.com/package/maplibre-gl-indoorequal)
maplibre-gl-indoorequal is a [maplibre-gl][] plugin to display indoor data from [indoor=][].
It provides:
* load vector tiles from indoorequal.org tile server or your own
* display GeoJSON data
* a default style of the indoor tiles
* a way to customize the style and load your sprites
* a level control to change the level displayed on the map
* a programatic API to list the levels available and set the level displayed
[**See the demo**](https://indoorequal.github.io/maplibre-gl-indoorequal).
Discover:
* the frontend:
* the backend:
## Install
Recommended versions:
* **maplibre-gl** **3.0.0** or newer
**With NPM**
npm install --save maplibre-gl-indoorequal
**In the browser**
```html
```
## Example
Get your free key at [indoorequal.com](https://indoorequal.com).
```javascript
import maplibregl from 'maplibre-gl';
import IndoorEqual from 'maplibre-gl-indoorequal';
import 'maplibre-gl-indoorequal/maplibre-gl-indoorequal.css';
const map = new maplibregl.Map({
container: 'map',
style: 'https://demotiles.maplibre.org/style.json',
center: [2.3601072, 48.876853],
zoom: 18
});
const indoorEqual = new IndoorEqual(map, { apiKey: 'mykey' });
map.addControl(indoorEqual);
```
## Loading the default sprite
The default style make uses of a sprite that has to be loaded manually
as [maplibre-gl][] require an absolute path. The sprite is already builded
and available in the `sprite` directory.
To load the sprite, use the `loadSprite` method with the absolute path
to the sprite and its name `/directory-to-change/indoorequal`.
**Usage with [Parcel](https://parceljs.org/)**
Install the
[parcel-plugin-static-files-copy](https://github.com/elwin013/parcel-plugin-static-files-copy)
package and add to your `package.json`:
"staticFiles": {
"staticPath": "node_modules/maplibre-gl-indoorequal/sprite"
},
Then load the sprite:
```javascript
const indoorequal = new IndoorEqual(map, { apiKey: 'myKey' });
indoorequal.loadSprite('/indoorequal');
```
**Usage with [webpack](https://webpack.js.org/)**
Install the
[copy-webpack-plugin](https://github.com/webpack-contrib/copy-webpack-plugin)
package and add to your webpack config:
```javascript
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{ from: 'node_modules/maplibre-gl-indoorequal/sprite' },
],
}),
],
};
```
Then load the sprite:
```javascript
const indoorequal = new IndoorEqual(map, { apiKey: 'myKey' });
indoorequal.loadSprite('/indoorequal');
```
**Usage with [vite](https://vitejs.dev/)**
Install the
[vite-plugin-static-copy](https://github.com/sapphi-red/vite-plugin-static-copy)
package and add to your vite config:
```javascript
import { viteStaticCopy } from 'vite-plugin-static-copy'
export default {
plugins: [
viteStaticCopy({
targets: [
{
src: 'node_modules/maplibre-gl-indoorequal/sprite,
dest: 'indoorequal'
}
]
})
]
}
```
Then load the sprite:
```javascript
const indoorequal = new IndoorEqual(map, { apiKey: 'myKey' });
indoorequal.loadSprite('/indoorequal');
```
## API
#### Table of Contents
* [IndoorEqual](#indoorequal)
* [Parameters](#parameters)
* [Properties](#properties)
* [remove](#remove)
* [on](#on)
* [Parameters](#parameters-1)
* [off](#off)
* [Parameters](#parameters-2)
* [onAdd](#onadd)
* [onRemove](#onremove)
* [setLevel](#setlevel)
* [Parameters](#parameters-3)
* [updateLevel](#updatelevel)
* [Parameters](#parameters-4)
* [loadSprite](#loadsprite)
* [Parameters](#parameters-5)
* [setHeatmapVisible](#setheatmapvisible)
* [Parameters](#parameters-6)
* [IndoorEqual#levelschange](#indoorequallevelschange)
* [IndoorEqual#levelchange](#indoorequallevelchange)
### IndoorEqual
Load the indoor= source and layers in your map.
#### Parameters
* `map` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** the maplibre-gl instance of the map
* `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`)
* `options.url` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** Override the default tiles URL ().
* `options.geojson` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** GeoJSON data with with key as layer name and value with geojson features
* `options.apiKey` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)?** The API key if you use the default tile URL (get your free key at [indoorequal.com](https://indoorequal.com)).
* `options.layers` **[array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)?** The layers to be used to style indoor= tiles. Take a look a the [layers.js file](https://github.com/indoorequal/maplibre-gl-indoorequal/blob/master/src/layers.js) file and the [vector schema](https://indoorequal.com/schema)
* `options.heatmap` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** Should the heatmap layer be visible at start (true : visible, false : hidden). Defaults to true/visible.
#### Properties
* `level` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** The current level displayed
* `levels` **[array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)** The levels that can be displayed in the current view
Returns **[IndoorEqual](#indoorequal)** `this`
#### remove
Remove any layers, source and listeners and controls
#### on
Add an event listener
##### Parameters
* `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the event
* `fn` **[function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** the function to be called when the event is emitted
#### off
Remove an event listener.
##### Parameters
* `name` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the name of the event
* `fn` **[function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)** the same function when on() was called
#### onAdd
Add the level control to the map
Used when adding the control via the map instance: map.addControl(indoorEqual)
#### onRemove
Remove the level control
Used when removing the control via the map instance: map.removeControl(indoorEqual)
#### setLevel
Set the displayed level.
##### Parameters
* `level` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the level to be displayed
#### updateLevel
Set the displayed level.
##### Parameters
* `level` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the level to be displayed
**Meta**
* **deprecated**: Use setLevel instead
#### loadSprite
Load a sprite and add all images to the map
##### Parameters
* `baseUrl` **[string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** the baseUrl where to load the sprite
* `options` **[object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** (optional, default `{}`)
* `options.update` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** Update existing image (default false)
Returns **[Promise](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)** It resolves an hash of images.
#### setHeatmapVisible
Change the heatmap layer visibility
##### Parameters
* `visible` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** True to make it visible, false to hide it
### IndoorEqual#levelschange
Emitted when the list of available levels has been updated
Type: [array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)
### IndoorEqual#levelchange
Emitted when the current level has been updated
Type: [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)
## Develop
**Build the plugin and watch for changes**
yarn dev
**Run tests**
yarn test [--watch]
**Build a new version**
yarn build
**Generate the documentation**
yarn doc
**Generate the sprite**
yarn sprite
## License
BSD
[indoor=]: https://indoorequal.org/
[maplibre-gl]: https://github.com/maplibre/maplibre-gl-js