Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jedluk/maplibre-compass-pro
Compass pro for use in all kinds of maplibre-based projects
https://github.com/jedluk/maplibre-compass-pro
Last synced: about 2 months ago
JSON representation
Compass pro for use in all kinds of maplibre-based projects
- Host: GitHub
- URL: https://github.com/jedluk/maplibre-compass-pro
- Owner: jedluk
- License: mit
- Created: 2024-03-19T14:52:47.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-11-10T16:04:12.000Z (2 months ago)
- Last Synced: 2024-11-10T17:17:51.162Z (2 months ago)
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/maplibre-compass-pro
- Size: 771 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
- awesome-maplibre - maplibre-compass-pro - old fashioned compass (with compass rose) for Maplibre GL. [demo](https://codesandbox.io/p/sandbox/peaceful-mirzakhani-tv38ck) (User Interface Plugins / JavaScript)
README
# Maplibre compass pro [](https://www.npmjs.com/package/maplibre-compass-pro) [](https://www.npmjs.com/package/maplibre-compass-pro)
Professional, good looking compass, suitable for use in all kinds of maplibre-based projects, inspired by Jack Sparrow's compass.
## [LIVE DEMO](https://codesandbox.io/p/sandbox/peaceful-mirzakhani-tv38ck)
## Main features:
- old fashioned compass rose
- predefined sizes (from 'xs' to 'xl')
- typescript support
- possibility to visualize pitch
- possibility to display cardinal directions
- ease integration with maplibre-gl
## Integration with maplibre
```js
import 'maplibre-gl/dist/maplibre-gl.css'
import 'maplibre-compass-pro/dist/style.css'
import maplibregl from 'maplibre-gl'
import { Compass } from 'maplibre-compass-pro'
const map = new maplibregl.Map({
container: 'map',
style: '/mapStyle.json',
center: [14.5, 53.4],
zoom: 11,
})
const compass = new Compass({ size: 'sm' })
map.addControl(compass, 'bottom-left')
```
Remember to import compass styles 🙏🙏🙏 at top of the file.
Compass props:
```ts
type CompassProps = {
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' // default 'md'
visualizePitch?: boolean // default false
displayDirections?: boolean // default false (use cardinal directions instead of needle)
onClick?: () => void // default map.resetNorthPitch
}
```
You can omit props object so that all defaults will be used.
## Using compass API
It's possible to update compass size, or toggle between needle/cardinal directions using its API. See code snippet below:
```js
const compass = new Compass({ size: 'sm' }) // set size 'sm' as initial value, needle is used as default
map.addControl(compass, 'bottom-left')
// change compass size
compass.changeSize('lg')
// display cardinal directions instead of needle
compass.toggle()
// back to needle in 3 seconds
setTimeout(() => {
compass.toggle()
}, 3000)
```
## Placement
Compass position is determined by second argument of addControl function. You can pick one of: _top-left_, _top-right_, _bottom-left_, and _bottom-right_. Default position is _bottom-left_. If you want to move the compass away from the corner please override maplibre class, like below:
```css
.maplibregl-ctrl-bottom-left {
left: 10px;
bottom: 10px;
}
```
## Integration with React
If you work in React environment consider using [react-map-gl](https://visgl.github.io/react-map-gl/) as maplibre wrapper, together with [map-gl-compass-pro](https://www.npmjs.com/package/map-gl-compass-pro) (official wrapper for mapibre-compass-pro). Code snippet:
```tsx
import 'maplibre-gl/dist/maplibre-gl.css'
import Map from 'react-map-gl/maplibre'
import Compass from 'maplibre-compass-pro'
import { useState } from 'react'
export function DemoApp() {
const [compassSize, setCompassSize] = useState('md')
const [displayDirection, setDisplayDirection] = useState(true)
return (
)
}
```