Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/heremaps/harp-leaflet
Leaflet plugin for harp.gl
https://github.com/heremaps/harp-leaflet
harpgl js leaflet leaflet-layer leaflet-map leaflet-plugin leaflet-plugins leafletjs maps typescript
Last synced: 6 days ago
JSON representation
Leaflet plugin for harp.gl
- Host: GitHub
- URL: https://github.com/heremaps/harp-leaflet
- Owner: heremaps
- License: apache-2.0
- Created: 2019-08-14T12:25:36.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T08:43:08.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T11:04:18.644Z (14 days ago)
- Topics: harpgl, js, leaflet, leaflet-layer, leaflet-map, leaflet-plugin, leaflet-plugins, leafletjs, maps, typescript
- Language: TypeScript
- Homepage: http://heremaps.github.io/harp-leaflet/
- Size: 179 MB
- Stars: 17
- Watchers: 11
- Forks: 4
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @here/harp-leaflet [](https://travis-ci.com/heremaps/harp-leaflet)
## Overview
### A Leaflet plugin that adds harp.gl layer
This repository contains the code that can help you create a `harp.gl` layer inside Leaflet
## Usage
### Install harp-leaflet plugin
Run:
```sh
npm install @here/harp-leaflet
```
or
```sh
yarn install @here/harp-leaflet
```
to download and install harp-leaflet plugin package.
### Add harp-leaflet to your Leaflet app
Add:
```js
import { GeoCoordinates } from "@here/harp-geoutils";
import { APIFormat, OmvDataSource } from "@here/harp-omv-datasource";
import { HarpGL } from "harp-leaflet";
import * as L from "leaflet";
// 1. Initialize leaflet map
const map = L.map("map").setView([38.912753, -77.032194], 15);
// 2. (optional) Add Leaflet features you need
L.marker([38.912753, -77.032194])
.bindPopup("Hello Harp GL!
Whoa, it works!")
.addTo(map)
.openPopup();
// 3. Add harp.gl layer to leaflet map
const harpGL = new HarpGL().addTo(map);
// 4. Initialize and add harp.gl datasources
const geoJsonDataSource = new OmvDataSource({
baseUrl: "https://xyz.api.here.com/tiles/osmbase/512/all",
apiFormat: APIFormat.XYZMVT,
styleSetName: "here_olp",
maxZoomLevel: 17,
authenticationCode: "YOUR_AUTH_CODE",
concurrentDecoderScriptUrl: "./build/decoder.bundle.js"
});
harpGL.mapView.addDataSource(geoJsonDataSource);
// 5. Point your view to the right place
harpGL.mapView.lookAt(new GeoCoordinates(16, -4, 0), 6000000);
```
## Testing
`harp-leaflet` comes with basic integration tests that run in browser. To run tests in developer
envrionment execute `yarn start-tests --open` which will serve test app in your default browser.
To run tests in "CI-like" mode, you need to first build them and run, both are separate steps:
```
$ yarn build-tests
$ yarn test
```
By default `yarn test` uses [karma](https://github.com/karma-runner/karma) configured to run tests in local headless Chrome using [karma-chrome-launcher](https://github.com/karma-runner/karma-chrome-launcher).
## License
Copyright (C) 2019-2021 HERE Europe B.V.
See the [LICENSE](./LICENSE) file in the root of this project for license details.