https://github.com/alexvanzyl/ngx-leaflet-toolbar
Angular.io component for Leaflets' toolbar plugin.
https://github.com/alexvanzyl/ngx-leaflet-toolbar
Last synced: 3 months ago
JSON representation
Angular.io component for Leaflets' toolbar plugin.
- Host: GitHub
- URL: https://github.com/alexvanzyl/ngx-leaflet-toolbar
- Owner: alexvanzyl
- License: mit
- Created: 2018-12-10T09:49:12.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-12-10T10:20:33.000Z (over 6 years ago)
- Last Synced: 2025-01-30T13:16:59.070Z (4 months ago)
- Language: JavaScript
- Size: 81.1 KB
- Stars: 0
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @avanzyl/ngx-leaflet-toolbar
[![Build Status][travis-image]][travis-url]
[travis-url]: https://travis-ci.org/Asymmetrik/ngx-template/
[travis-image]: https://travis-ci.org/Asymmetrik/ngx-template.svg
> [Leaflet Toolbar](https://github.com/Leaflet/Leaflet.toolbar) extension for [@asymmetrik/ngx-leaflet](https://github.com/Asymmetrik/ngx-leaflet) package to be used with Angular.io.
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [Todo](#todo)
- [License](#license)
## Install
```
# Install required packages
npm install leaflet
npm install leaflet-toolbar
npm install @asymmetrik/ngx-leaflet
npm install @avanzyl/ngx-leaflet-toolbar
# Install types
npm install --save-dev @types/leaflet
```
## Usage
1. Edit your angular.json file to inject the required assets
```
{
...
"assets": [
{
"glob": "**/*",
"input": "./node_modules/leaflet/dist/images",
"output": "/"
},
...
],
"styles": [
...
"./node_modules/leaflet/dist/leaflet.css",
"./node_modules/leaflet-toolbar/dist/leaflet.toolbar.css"
],
"scripts": [
...
"./node_modules/leaflet/dist/leaflet.js",
"./node_modules/leaflet-toolbar/dist/leaflet.toolbar.js"
]
...
}
```
2. Import Dependencies and Modules into app.modules.ts
```
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletToolbarModule } from '@avanzyl/ngx-leaflet-toolbar';
@NgModule({
...
imports: [
...
LeafletModule.forRoot(),
LeafletToolbarModule.forRoot()
]
...
})
```
3. Create map inside your component .html file..
```
```
4. Add leaflet and toolbar options to your component .ts file.
```
options = {
layers: [
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
})
],
zoom: 5,
center: latLng(46.879966, -121.726909)
};
toolbar = {
position: 'topleft',
actions: [
{
options: {
toolbarIcon: {
html: '
',
tooltip: 'Heatmap'
}
},
addHooks: () => {
// Do action functionality here
});
}
]
};
```
For more config options see documentation for:
- [Leaflet and ngx-leaflet](https://github.com/Asymmetrik/ngx-leaflet)
- [Leaflet toolbar](https://github.com/Leaflet/Leaflet.toolbar)
## Todo
- [ ] Add support for popup-style
## License
See LICENSE in repository for details.