https://github.com/viglino/ol-ext-angular
Using Openlayers (ol) and ol-ext with Angular 7
https://github.com/viglino/ol-ext-angular
angular ol-ext openlayers
Last synced: 6 months ago
JSON representation
Using Openlayers (ol) and ol-ext with Angular 7
- Host: GitHub
- URL: https://github.com/viglino/ol-ext-angular
- Owner: Viglino
- License: mit
- Created: 2019-01-19T09:09:11.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-26T14:04:49.000Z (about 7 years ago)
- Last Synced: 2025-04-14T08:45:02.113Z (12 months ago)
- Topics: angular, ol-ext, openlayers
- Language: TypeScript
- Size: 138 KB
- Stars: 44
- Watchers: 9
- Forks: 14
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#  ol-ext + Angular
This project is an example to use [Openlayers](https://github.com/openlayers/openlayers) and [ol-ext](https://github.com/Viglino/ol-ext) with [Angular 7](https://angular.io/).
> It is by no means a complete app but you should find mecanisms to handle an Openlayers map using Angular, with interactions and controls to customize for your own.
## Goal
The goal of this example is to create a map as simple as that:
````html
````
As controls can be set outside the map (using the target option) we also want to have this option too.
````html
````
We also want to create more than one map:
````html
````
## Mecanisms
### MapService and MapidService
The map is implemented as a service to let you access it in other components.
#### Getting a map
You just have to declare the service in your constructor to access the map:
````javascript
constructor(private mapService: MapService) { }
````
Then to retrieve the map you want, use the `getMap` method:
````javascript
// Default map (id=map)
const map = mapService.getMap();
// another map (id=map1)
const map1 = mapService.getMap('map1');
````
The parameter is the id of the map you want to get. If you just have one map you can use the default value (`map`).
#### Getting the current map
The `MapidService` let you handle the current map's id.
It is used by the map component to register a new map id (`mapServe.setId()`).
It's not a root service and each map has its own one, thus each component defined inside a map component can access the current map id using the `getId()` method of the service.
This id is registered by the root `MapComponent` (using the `setId()`method).
#### Customizing the map
Feel free to modify the `createMap()` method of the `MapService` to handle the default map.
The `MapComponent` let you define the map itself. Use the `ngOnInit()` method to customize the map (set zoom, etc.).
### Creating new map components (controls, layers, interactions...)
This example comes with a set of components for each Openlayers map features: controls, interactions, layer...
Just copy the `.ts` file to create a new one to use in your app.
You first have to declare the services in your constructor:
````javascript
constructor(
private mapService: MapService,
@Host()
private mapidService: MapidService
) { }
````
Then in ngOnInit, get the current map like this:
````javascript
ngOnInit() {
// Get the current map
const map: OlMap = this.mapService.getMap(this.mapidService);
// Add component to the map
}
````
To let the control be set inside or outside the map you also need to get the target ElementRef. In this case the MapidService is optional (as it comes inside a MapComponent it is not defined when set outside a map).
Look at the [ControlComponent](src/app/map/control/control.component.ts) for more informations.
#### Example
The example defines:
* 2 maps
* a set of layers define using a component propertie
* an interaction to synchonize the maps together
* a control inside the map (Bookmark contol)
* a control outside the map (MousePosition).
## Build
This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.1.4.
### Install
Run `npm install` to install node modules and start developping.
### Development server
Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
### Further help
To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).