Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Olympus-Analytics/ngx-gaia-gis
https://github.com/Olympus-Analytics/ngx-gaia-gis
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/Olympus-Analytics/ngx-gaia-gis
- Owner: Olympus-Analytics
- License: agpl-3.0
- Created: 2024-11-15T04:28:11.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2024-11-16T06:01:50.000Z (about 2 months ago)
- Last Synced: 2024-11-16T06:17:44.014Z (about 2 months ago)
- Language: TypeScript
- Size: 12.2 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-gaia-gis - An Angular service that simplifies map creation and interaction using the powerful 🌎 [OpenLayers](openlayers.org/) library. (Table of contents / Third Party Components)
- awesome-angular - ngx-gaia-gis - An Angular service that simplifies map creation and interaction using the powerful [OpenLayers](https://openlayers.org/) library. (Table of contents / Third Party Components)
README
# GaiaGisService
GaiaGisService is an Angular service that simplifies map creation and interaction using the powerful OpenLayers library. It enables developers to quickly integrate maps, raster layers, and custom points into their applications.
## Features
- **Easy Map Initialization**: Create maps with customizable center, zoom, and design.
- **Raster Layer Management**: Add, remove, and manage raster layers using GeoTIFF files.
- **Point Management**: Add points with custom icons or styles.
- **Flexible View Controls**: Change map center, zoom, or fit to extents dynamically.
## Installation
1. Install the library dependencies:
```bash
npm install ol
```
2. Add the OpenLayers CSS to your application:
```json
// angular.json
"styles": [
"src/styles.css",
]
```
3. Copy the `GaiaGisService` class to your project and ensure the necessary imports are configured.
## Getting Started
### Example Usage
Here is an example of how to use `GaiaGisService` in an Angular application:
#### 1. Add the Service to Your Component
```typescript
import { Component, OnInit } from "@angular/core";
import { GaiaGisService } from "./gaia-gis.service";
@Component({
selector: "app-map",
template: '
',
styles: [".map-container { width: 100%; height: 400px; }"],
})
export class MapComponent implements OnInit {
constructor(private gaiaGisService: GaiaGisService) {}
ngOnInit(): void {
this.gaiaGisService.initializeMap("map", {
center: [-74.006, 40.7128], // New York City
zoom: 12,
});
}
}
```
#### 2. Add Raster Layers
```typescript
addLayer(): void {
this.gaiaGisService.addRasterLayer('https://example.com/map.tif');
}
```
#### 3. Add Points
```typescript
this.gaiaGisService.addPoints(
[
[-74.006, 40.7128],
[-118.2437, 34.0522],
], // NYC & LA
"https://example.com/icon.png"
);
```
## API Documentation
### Methods
#### `initializeMap`
Initializes a map with the specified options.
- **Parameters**:
- `target`: The ID of the HTML element to render the map in.
- `options` (optional):
- `center`: Map center in `[longitude, latitude]` format.
- `zoom`: Initial zoom level.
- `design`: Tile design URL.
#### `addRasterLayer`
Adds a raster layer using a GeoTIFF file URL.
#### `removeRasterLayer`
Removes a raster layer by its index.
#### `setView`
Sets the map's center and zoom level.
#### `zoomToExtent`
Fits the map to a specified extent.
#### `addPoints`
Adds points to the map with optional icons or custom styles.