real initial commit
This commit is contained in:
commit
00cc9eab09
17
.editorconfig
Normal file
17
.editorconfig
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# Editor configuration, see https://editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.ts]
|
||||||
|
quote_type = single
|
||||||
|
ij_typescript_use_double_quotes = false
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
max_line_length = off
|
||||||
|
trim_trailing_whitespace = false
|
||||||
44
.gitignore
vendored
Normal file
44
.gitignore
vendored
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
# Compiled output
|
||||||
|
/dist
|
||||||
|
/tmp
|
||||||
|
/out-tsc
|
||||||
|
/bazel-out
|
||||||
|
|
||||||
|
# Node
|
||||||
|
/node_modules
|
||||||
|
npm-debug.log
|
||||||
|
yarn-error.log
|
||||||
|
|
||||||
|
# IDEs and editors
|
||||||
|
.idea/
|
||||||
|
.project
|
||||||
|
.classpath
|
||||||
|
.c9/
|
||||||
|
*.launch
|
||||||
|
.settings/
|
||||||
|
*.sublime-workspace
|
||||||
|
|
||||||
|
# Visual Studio Code
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.history/*
|
||||||
|
|
||||||
|
# Miscellaneous
|
||||||
|
/.angular/cache
|
||||||
|
.sass-cache/
|
||||||
|
/connect.lock
|
||||||
|
/coverage
|
||||||
|
/libpeerconnection.log
|
||||||
|
testem.log
|
||||||
|
/typings
|
||||||
|
|
||||||
|
# System files
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
4
.vscode/extensions.json
vendored
Normal file
4
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
|
||||||
|
"recommendations": ["angular.ng-template"]
|
||||||
|
}
|
||||||
20
.vscode/launch.json
vendored
Normal file
20
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "ng serve",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "npm: start",
|
||||||
|
"url": "http://localhost:4200/"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "ng test",
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"preLaunchTask": "npm: test",
|
||||||
|
"url": "http://localhost:9876/debug.html"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
42
.vscode/tasks.json
vendored
Normal file
42
.vscode/tasks.json
vendored
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
// For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
|
||||||
|
"version": "2.0.0",
|
||||||
|
"tasks": [
|
||||||
|
{
|
||||||
|
"type": "npm",
|
||||||
|
"script": "start",
|
||||||
|
"isBackground": true,
|
||||||
|
"problemMatcher": {
|
||||||
|
"owner": "typescript",
|
||||||
|
"pattern": "$tsc",
|
||||||
|
"background": {
|
||||||
|
"activeOnStart": true,
|
||||||
|
"beginsPattern": {
|
||||||
|
"regexp": "(.*?)"
|
||||||
|
},
|
||||||
|
"endsPattern": {
|
||||||
|
"regexp": "bundle generation complete"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "npm",
|
||||||
|
"script": "test",
|
||||||
|
"isBackground": true,
|
||||||
|
"problemMatcher": {
|
||||||
|
"owner": "typescript",
|
||||||
|
"pattern": "$tsc",
|
||||||
|
"background": {
|
||||||
|
"activeOnStart": true,
|
||||||
|
"beginsPattern": {
|
||||||
|
"regexp": "(.*?)"
|
||||||
|
},
|
||||||
|
"endsPattern": {
|
||||||
|
"regexp": "bundle generation complete"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
120
README.md
Normal file
120
README.md
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
# ngx-open-map-wrapper
|
||||||
|
|
||||||
|
An Angular 16+ library that provides a **unified map component** with automatic fallback between **MapLibre GL** (WebGL vector maps) and **Leaflet** (raster maps).
|
||||||
|
|
||||||
|
It automatically chooses the best renderer for the user’s device:
|
||||||
|
- **MapLibre GL** if WebGL is supported
|
||||||
|
- **Leaflet** if WebGL is not available or raster rendering is forced
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✨ Features
|
||||||
|
|
||||||
|
- 🗺️ Always shows a map — automatically picks the right engine for the device
|
||||||
|
- ⚡ Uses **MapLibre GL** for modern devices with WebGL support
|
||||||
|
- 🪶 Falls back to **Leaflet** for older or low‑end devices
|
||||||
|
- 🎯 Unified API for markers, zoom, and center — no need to learn two libraries
|
||||||
|
- 📱 Works seamlessly across desktop and mobile
|
||||||
|
- 🧩 Angular‑native: standalone components, signals, and modern syntax
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Installation
|
||||||
|
|
||||||
|
Install the library and its peer dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn add ngx-open-open-map-wrapper leaflet maplibre-gl
|
||||||
|
```
|
||||||
|
|
||||||
|
Then import the required CSS styles in your global `styles.css` (or `styles.scss`):
|
||||||
|
|
||||||
|
```css
|
||||||
|
@import "leaflet/dist/leaflet.css";
|
||||||
|
@import "maplibre-gl/dist/maplibre-gl.css";
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Usage
|
||||||
|
|
||||||
|
### Import the component
|
||||||
|
|
||||||
|
Since the library is **standalone‑ready**, you can import the component directly:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { MapComponent, MapFacade } from 'ngx-open-open-map-wrapper';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
standalone: true,
|
||||||
|
imports: [MapComponent],
|
||||||
|
template: `
|
||||||
|
<open-map
|
||||||
|
[center]="[46.3385, -72.6106]"
|
||||||
|
[zoom]="14"
|
||||||
|
(mapReady)="onMapReady($event)"
|
||||||
|
></open-map>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
private map?: MapFacade;
|
||||||
|
|
||||||
|
onMapReady(facade: MapFacade) {
|
||||||
|
this.map = facade;
|
||||||
|
this.map.addMarker([46.3385, -72.6106], { color: 'blue' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚙️ API
|
||||||
|
|
||||||
|
### `MapComponent` Inputs
|
||||||
|
- `center: [lat, lng]` → Initial map center
|
||||||
|
- `zoom: number` → Initial zoom level
|
||||||
|
- `forceRaster: boolean` → Force Leaflet raster mode even if WebGL is available
|
||||||
|
- `styleUrl: string` → MapLibre style URL (default: MapLibre basic style)
|
||||||
|
|
||||||
|
### `MapComponent` Outputs
|
||||||
|
- `(mapReady: MapFacade)` → Emits the `MapFacade` instance once the map is initialized
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `MapFacade` Methods
|
||||||
|
- `setCenter([lat, lng])` → Move the map center
|
||||||
|
- `setZoom(zoom: number)` → Set zoom level
|
||||||
|
- `addMarker([lat, lng], { color?: string })` → Add a marker
|
||||||
|
- `destroy()` → Clean up map instance
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧩 WebGL Detection Directive
|
||||||
|
|
||||||
|
You can also use the directive directly if you want to check WebGL support:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div webglDetection (webglSupport)="onWebGLCheck($event)">
|
||||||
|
@if (webglOk) {
|
||||||
|
<my-component-using-webgl></my-component-using-webgl>
|
||||||
|
} @else {
|
||||||
|
<p>WebGL not supported → fallback</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
webglOk = false;
|
||||||
|
|
||||||
|
onWebGLCheck(supported: boolean) {
|
||||||
|
this.webglOk = supported;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📜 License
|
||||||
|
|
||||||
|
MIT
|
||||||
140
angular.json
Normal file
140
angular.json
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||||
|
"version": 1,
|
||||||
|
"newProjectRoot": "projects",
|
||||||
|
"projects": {
|
||||||
|
"ngx-open-map-wrapper": {
|
||||||
|
"projectType": "library",
|
||||||
|
"root": "projects/ngx-open-map-wrapper",
|
||||||
|
"sourceRoot": "projects/ngx-open-map-wrapper/src",
|
||||||
|
"prefix": "lib",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||||
|
"options": {
|
||||||
|
"project": "projects/ngx-open-map-wrapper/ng-package.json"
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"tsConfig": "projects/ngx-open-map-wrapper/tsconfig.lib.prod.json"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"tsConfig": "projects/ngx-open-map-wrapper/tsconfig.lib.json"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"tsConfig": "projects/ngx-open-map-wrapper/tsconfig.spec.json",
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js",
|
||||||
|
"zone.js/testing"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"demo": {
|
||||||
|
"projectType": "application",
|
||||||
|
"schematics": {
|
||||||
|
"@schematics/angular:component": {
|
||||||
|
"style": "scss"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "projects/demo",
|
||||||
|
"sourceRoot": "projects/demo/src",
|
||||||
|
"prefix": "app",
|
||||||
|
"architect": {
|
||||||
|
"build": {
|
||||||
|
"builder": "@angular-devkit/build-angular:application",
|
||||||
|
"options": {
|
||||||
|
"outputPath": "dist/demo",
|
||||||
|
"index": "projects/demo/src/index.html",
|
||||||
|
"browser": "projects/demo/src/main.ts",
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js"
|
||||||
|
],
|
||||||
|
"tsConfig": "projects/demo/tsconfig.app.json",
|
||||||
|
"inlineStyleLanguage": "scss",
|
||||||
|
"assets": [
|
||||||
|
{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "projects/demo/public"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"projects/demo/src/styles.scss"
|
||||||
|
],
|
||||||
|
"scripts": [],
|
||||||
|
"server": "projects/demo/src/main.server.ts",
|
||||||
|
"prerender": true,
|
||||||
|
"ssr": {
|
||||||
|
"entry": "projects/demo/src/server.ts"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"budgets": [
|
||||||
|
{
|
||||||
|
"type": "initial",
|
||||||
|
"maximumWarning": "500kB",
|
||||||
|
"maximumError": "1MB"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "anyComponentStyle",
|
||||||
|
"maximumWarning": "4kB",
|
||||||
|
"maximumError": "8kB"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"outputHashing": "all"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"optimization": false,
|
||||||
|
"extractLicenses": false,
|
||||||
|
"sourceMap": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "production"
|
||||||
|
},
|
||||||
|
"serve": {
|
||||||
|
"builder": "@angular-devkit/build-angular:dev-server",
|
||||||
|
"configurations": {
|
||||||
|
"production": {
|
||||||
|
"buildTarget": "demo:build:production"
|
||||||
|
},
|
||||||
|
"development": {
|
||||||
|
"buildTarget": "demo:build:development"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"defaultConfiguration": "development"
|
||||||
|
},
|
||||||
|
"extract-i18n": {
|
||||||
|
"builder": "@angular-devkit/build-angular:extract-i18n"
|
||||||
|
},
|
||||||
|
"test": {
|
||||||
|
"builder": "@angular-devkit/build-angular:karma",
|
||||||
|
"options": {
|
||||||
|
"polyfills": [
|
||||||
|
"zone.js",
|
||||||
|
"zone.js/testing"
|
||||||
|
],
|
||||||
|
"tsConfig": "projects/demo/tsconfig.spec.json",
|
||||||
|
"inlineStyleLanguage": "scss",
|
||||||
|
"assets": [
|
||||||
|
{
|
||||||
|
"glob": "**/*",
|
||||||
|
"input": "projects/demo/public"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"styles": [
|
||||||
|
"projects/demo/src/styles.scss"
|
||||||
|
],
|
||||||
|
"scripts": []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
48
package.json
Normal file
48
package.json
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "ngx-open-map-wrapper",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"ng": "ng",
|
||||||
|
"start": "ng serve",
|
||||||
|
"build": "ng build",
|
||||||
|
"watch": "ng build --watch --configuration development",
|
||||||
|
"test": "ng test",
|
||||||
|
"serve:ssr:demo": "node dist/demo/server/server.mjs"
|
||||||
|
},
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@angular/common": "^19.2.0",
|
||||||
|
"@angular/compiler": "^19.2.0",
|
||||||
|
"@angular/core": "^19.2.0",
|
||||||
|
"@angular/forms": "^19.2.0",
|
||||||
|
"@angular/platform-browser": "^19.2.0",
|
||||||
|
"@angular/platform-browser-dynamic": "^19.2.0",
|
||||||
|
"@angular/platform-server": "^19.2.0",
|
||||||
|
"@angular/router": "^19.2.0",
|
||||||
|
"@angular/ssr": "^19.2.15",
|
||||||
|
"express": "^4.18.2",
|
||||||
|
"leaflet": "^2.0.0-alpha.1",
|
||||||
|
"maplibre-gl": "^5.7.0",
|
||||||
|
"rxjs": "~7.8.0",
|
||||||
|
"tslib": "^2.3.0",
|
||||||
|
"zone.js": "~0.15.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@angular-devkit/build-angular": "^19.2.15",
|
||||||
|
"@angular/cli": "^19.2.12",
|
||||||
|
"@angular/compiler-cli": "^19.2.0",
|
||||||
|
"@types/express": "^4.17.17",
|
||||||
|
"@types/jasmine": "~5.1.0",
|
||||||
|
"@types/leaflet": "^1.9.20",
|
||||||
|
"@types/node": "^18.18.0",
|
||||||
|
"jasmine-core": "~5.6.0",
|
||||||
|
"karma": "~6.4.0",
|
||||||
|
"karma-chrome-launcher": "~3.2.0",
|
||||||
|
"karma-coverage": "~2.2.0",
|
||||||
|
"karma-jasmine": "~5.1.0",
|
||||||
|
"karma-jasmine-html-reporter": "~2.1.0",
|
||||||
|
"ng-packagr": "^19.2.0",
|
||||||
|
"typescript": "~5.7.2"
|
||||||
|
},
|
||||||
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||||
|
}
|
||||||
BIN
projects/demo/public/favicon.ico
Normal file
BIN
projects/demo/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
3
projects/demo/src/app/app.component.html
Normal file
3
projects/demo/src/app/app.component.html
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<div class="container">
|
||||||
|
<open-map [options]="mapOptions" (mapReady)="onMapReady($event)"></open-map>
|
||||||
|
</div>
|
||||||
4
projects/demo/src/app/app.component.scss
Normal file
4
projects/demo/src/app/app.component.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 95vh;
|
||||||
|
}
|
||||||
29
projects/demo/src/app/app.component.spec.ts
Normal file
29
projects/demo/src/app/app.component.spec.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { TestBed } from '@angular/core/testing';
|
||||||
|
import { AppComponent } from './app.component';
|
||||||
|
|
||||||
|
describe('AppComponent', () => {
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [AppComponent],
|
||||||
|
}).compileComponents();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create the app', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it(`should have the 'demo' title`, () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
const app = fixture.componentInstance;
|
||||||
|
expect(app.title).toEqual('demo');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render title', () => {
|
||||||
|
const fixture = TestBed.createComponent(AppComponent);
|
||||||
|
fixture.detectChanges();
|
||||||
|
const compiled = fixture.nativeElement as HTMLElement;
|
||||||
|
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, demo');
|
||||||
|
});
|
||||||
|
});
|
||||||
25
projects/demo/src/app/app.component.ts
Normal file
25
projects/demo/src/app/app.component.ts
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import { Component } from '@angular/core';
|
||||||
|
import {OpenMapComponent, MapFacade, OpenMapOptions} from 'ngx-open-map-wrapper';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
imports: [
|
||||||
|
OpenMapComponent
|
||||||
|
],
|
||||||
|
templateUrl: './app.component.html',
|
||||||
|
styleUrl: './app.component.scss'
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
mapOptions: OpenMapOptions = {
|
||||||
|
forceRaster: false,
|
||||||
|
styleUrl: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
|
||||||
|
tileUrl: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
|
||||||
|
center: [50.426606229502525, 30.56308375468811],
|
||||||
|
zoom: 16
|
||||||
|
};
|
||||||
|
|
||||||
|
onMapReady(mapFacade: MapFacade) {
|
||||||
|
console.log(mapFacade);
|
||||||
|
mapFacade.addMarker([50.426606229502525, 30.56308375468811]);
|
||||||
|
}
|
||||||
|
}
|
||||||
11
projects/demo/src/app/app.config.server.ts
Normal file
11
projects/demo/src/app/app.config.server.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
|
||||||
|
import { provideServerRendering } from '@angular/platform-server';
|
||||||
|
import { appConfig } from './app.config';
|
||||||
|
|
||||||
|
const serverConfig: ApplicationConfig = {
|
||||||
|
providers: [
|
||||||
|
provideServerRendering(),
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
export const config = mergeApplicationConfig(appConfig, serverConfig);
|
||||||
10
projects/demo/src/app/app.config.ts
Normal file
10
projects/demo/src/app/app.config.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
|
||||||
|
|
||||||
|
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
|
||||||
|
|
||||||
|
export const appConfig: ApplicationConfig = {
|
||||||
|
providers: [
|
||||||
|
provideZoneChangeDetection({ eventCoalescing: true }),
|
||||||
|
provideClientHydration(withEventReplay())
|
||||||
|
]
|
||||||
|
};
|
||||||
13
projects/demo/src/index.html
Normal file
13
projects/demo/src/index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Demo</title>
|
||||||
|
<base href="/">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<app-root></app-root>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
7
projects/demo/src/main.server.ts
Normal file
7
projects/demo/src/main.server.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { bootstrapApplication } from '@angular/platform-browser';
|
||||||
|
import { AppComponent } from './app/app.component';
|
||||||
|
import { config } from './app/app.config.server';
|
||||||
|
|
||||||
|
const bootstrap = () => bootstrapApplication(AppComponent, config);
|
||||||
|
|
||||||
|
export default bootstrap;
|
||||||
6
projects/demo/src/main.ts
Normal file
6
projects/demo/src/main.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { bootstrapApplication } from '@angular/platform-browser';
|
||||||
|
import { appConfig } from './app/app.config';
|
||||||
|
import { AppComponent } from './app/app.component';
|
||||||
|
|
||||||
|
bootstrapApplication(AppComponent, appConfig)
|
||||||
|
.catch((err) => console.error(err));
|
||||||
67
projects/demo/src/server.ts
Normal file
67
projects/demo/src/server.ts
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
import { APP_BASE_HREF } from '@angular/common';
|
||||||
|
import { CommonEngine, isMainModule } from '@angular/ssr/node';
|
||||||
|
import express from 'express';
|
||||||
|
import { dirname, join, resolve } from 'node:path';
|
||||||
|
import { fileURLToPath } from 'node:url';
|
||||||
|
import bootstrap from './main.server';
|
||||||
|
|
||||||
|
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
|
||||||
|
const browserDistFolder = resolve(serverDistFolder, '../browser');
|
||||||
|
const indexHtml = join(serverDistFolder, 'index.server.html');
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const commonEngine = new CommonEngine();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Example Express Rest API endpoints can be defined here.
|
||||||
|
* Uncomment and define endpoints as necessary.
|
||||||
|
*
|
||||||
|
* Example:
|
||||||
|
* ```ts
|
||||||
|
* app.get('/api/**', (req, res) => {
|
||||||
|
* // Handle API request
|
||||||
|
* });
|
||||||
|
* ```
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Serve static files from /browser
|
||||||
|
*/
|
||||||
|
app.get(
|
||||||
|
'**',
|
||||||
|
express.static(browserDistFolder, {
|
||||||
|
maxAge: '1y',
|
||||||
|
index: 'index.html'
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle all other requests by rendering the Angular application.
|
||||||
|
*/
|
||||||
|
app.get('**', (req, res, next) => {
|
||||||
|
const { protocol, originalUrl, baseUrl, headers } = req;
|
||||||
|
|
||||||
|
commonEngine
|
||||||
|
.render({
|
||||||
|
bootstrap,
|
||||||
|
documentFilePath: indexHtml,
|
||||||
|
url: `${protocol}://${headers.host}${originalUrl}`,
|
||||||
|
publicPath: browserDistFolder,
|
||||||
|
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
|
||||||
|
})
|
||||||
|
.then((html) => res.send(html))
|
||||||
|
.catch((err) => next(err));
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Start the server if this module is the main entry point.
|
||||||
|
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
|
||||||
|
*/
|
||||||
|
if (isMainModule(import.meta.url)) {
|
||||||
|
const port = process.env['PORT'] || 4000;
|
||||||
|
app.listen(port, () => {
|
||||||
|
console.log(`Node Express server listening on http://localhost:${port}`);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export default app;
|
||||||
4
projects/demo/src/styles.scss
Normal file
4
projects/demo/src/styles.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/* You can add global styles to this file, and also import other style files */
|
||||||
|
|
||||||
|
@import "leaflet/dist/leaflet.css";
|
||||||
|
@import "maplibre-gl/dist/maplibre-gl.css";
|
||||||
19
projects/demo/tsconfig.app.json
Normal file
19
projects/demo/tsconfig.app.json
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/app",
|
||||||
|
"types": [
|
||||||
|
"node"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"files": [
|
||||||
|
"src/main.ts",
|
||||||
|
"src/main.server.ts",
|
||||||
|
"src/server.ts"
|
||||||
|
],
|
||||||
|
"include": [
|
||||||
|
"src/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
15
projects/demo/tsconfig.spec.json
Normal file
15
projects/demo/tsconfig.spec.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/spec",
|
||||||
|
"types": [
|
||||||
|
"jasmine"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.spec.ts",
|
||||||
|
"src/**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
120
projects/ngx-open-map-wrapper/README.md
Normal file
120
projects/ngx-open-map-wrapper/README.md
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
# ngx-open-map-wrapper
|
||||||
|
|
||||||
|
An Angular 16+ library that provides a **unified map component** with automatic fallback between **MapLibre GL** (WebGL vector maps) and **Leaflet** (raster maps).
|
||||||
|
|
||||||
|
It automatically chooses the best renderer for the user’s device:
|
||||||
|
- **MapLibre GL** if WebGL is supported
|
||||||
|
- **Leaflet** if WebGL is not available or raster rendering is forced
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ✨ Features
|
||||||
|
|
||||||
|
- 🗺️ Always shows a map — automatically picks the right engine for the device
|
||||||
|
- ⚡ Uses **MapLibre GL** for modern devices with WebGL support
|
||||||
|
- 🪶 Falls back to **Leaflet** for older or low‑end devices
|
||||||
|
- 🎯 Unified API for markers, zoom, and center — no need to learn two libraries
|
||||||
|
- 📱 Works seamlessly across desktop and mobile
|
||||||
|
- 🧩 Angular‑native: standalone components, signals, and modern syntax
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Installation
|
||||||
|
|
||||||
|
Install the library and its peer dependencies:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn add ngx-open-open-map-wrapper leaflet maplibre-gl
|
||||||
|
```
|
||||||
|
|
||||||
|
Then import the required CSS styles in your global `styles.css` (or `styles.scss`):
|
||||||
|
|
||||||
|
```css
|
||||||
|
@import "leaflet/dist/leaflet.css";
|
||||||
|
@import "maplibre-gl/dist/maplibre-gl.css";
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Usage
|
||||||
|
|
||||||
|
### Import the component
|
||||||
|
|
||||||
|
Since the library is **standalone‑ready**, you can import the component directly:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
import { MapComponent, MapFacade } from 'ngx-open-open-map-wrapper';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-root',
|
||||||
|
standalone: true,
|
||||||
|
imports: [MapComponent],
|
||||||
|
template: `
|
||||||
|
<open-map
|
||||||
|
[center]="[46.3385, -72.6106]"
|
||||||
|
[zoom]="14"
|
||||||
|
(mapReady)="onMapReady($event)"
|
||||||
|
></open-map>
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
export class AppComponent {
|
||||||
|
private map?: MapFacade;
|
||||||
|
|
||||||
|
onMapReady(facade: MapFacade) {
|
||||||
|
this.map = facade;
|
||||||
|
this.map.addMarker([46.3385, -72.6106], { color: 'blue' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ⚙️ API
|
||||||
|
|
||||||
|
### `MapComponent` Inputs
|
||||||
|
- `center: [lat, lng]` → Initial map center
|
||||||
|
- `zoom: number` → Initial zoom level
|
||||||
|
- `forceRaster: boolean` → Force Leaflet raster mode even if WebGL is available
|
||||||
|
- `styleUrl: string` → MapLibre style URL (default: MapLibre basic style)
|
||||||
|
|
||||||
|
### `MapComponent` Outputs
|
||||||
|
- `(mapReady: MapFacade)` → Emits the `MapFacade` instance once the map is initialized
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### `MapFacade` Methods
|
||||||
|
- `setCenter([lat, lng])` → Move the map center
|
||||||
|
- `setZoom(zoom: number)` → Set zoom level
|
||||||
|
- `addMarker([lat, lng], { color?: string })` → Add a marker
|
||||||
|
- `destroy()` → Clean up map instance
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧩 WebGL Detection Directive
|
||||||
|
|
||||||
|
You can also use the directive directly if you want to check WebGL support:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div webglDetection (webglSupport)="onWebGLCheck($event)">
|
||||||
|
@if (webglOk) {
|
||||||
|
<my-component-using-webgl></my-component-using-webgl>
|
||||||
|
} @else {
|
||||||
|
<p>WebGL not supported → fallback</p>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
```ts
|
||||||
|
webglOk = false;
|
||||||
|
|
||||||
|
onWebGLCheck(supported: boolean) {
|
||||||
|
this.webglOk = supported;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📜 License
|
||||||
|
|
||||||
|
MIT
|
||||||
7
projects/ngx-open-map-wrapper/ng-package.json
Normal file
7
projects/ngx-open-map-wrapper/ng-package.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||||
|
"dest": "../../dist/ngx-open-map-wrapper",
|
||||||
|
"lib": {
|
||||||
|
"entryFile": "src/public-api.ts"
|
||||||
|
}
|
||||||
|
}
|
||||||
29
projects/ngx-open-map-wrapper/package.json
Normal file
29
projects/ngx-open-map-wrapper/package.json
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "@svrnty/ngx-open-map-wrapper",
|
||||||
|
"version": "0.2.1",
|
||||||
|
"keywords": [
|
||||||
|
"maplibre",
|
||||||
|
"leaflet",
|
||||||
|
"maps",
|
||||||
|
"open source",
|
||||||
|
"angular",
|
||||||
|
"ngx"
|
||||||
|
],
|
||||||
|
"author": "Svrnty",
|
||||||
|
"license": "MIT",
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://git.openharbor.io/svrnty/ngx-open-map-wrapper"
|
||||||
|
},
|
||||||
|
"publishConfig": { "access": "public" },
|
||||||
|
"peerDependencies": {
|
||||||
|
"@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"@angular/core": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||||
|
"maplibre-gl": "^5.0.0",
|
||||||
|
"leaflet": "^1.0.0 || ^2.0.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.3.0"
|
||||||
|
},
|
||||||
|
"sideEffects": false
|
||||||
|
}
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import {
|
||||||
|
Map,
|
||||||
|
TileLayer,
|
||||||
|
Marker,
|
||||||
|
} from 'leaflet';
|
||||||
|
|
||||||
|
import {
|
||||||
|
IMapAdapter,
|
||||||
|
LatLng,
|
||||||
|
MapOptions,
|
||||||
|
} from './map-adapter.interface';
|
||||||
|
|
||||||
|
export class LeafletAdapter implements IMapAdapter {
|
||||||
|
private map!: Map;
|
||||||
|
|
||||||
|
init(container: HTMLElement, options: MapOptions): void {
|
||||||
|
this.map = new Map(container).setView(options.center, options.zoom);
|
||||||
|
|
||||||
|
new TileLayer(options.tileUrl, {
|
||||||
|
attribution: '© OpenStreetMap contributors',
|
||||||
|
}).addTo(this.map);
|
||||||
|
}
|
||||||
|
|
||||||
|
setCenter(latLng: LatLng): void {
|
||||||
|
this.map.setView(latLng, this.map.getZoom());
|
||||||
|
}
|
||||||
|
|
||||||
|
setZoom(zoom: number): void {
|
||||||
|
this.map.setZoom(zoom);
|
||||||
|
}
|
||||||
|
|
||||||
|
addMarker(latLng: LatLng, options?: { color?: string }): void {
|
||||||
|
const marker = new Marker(latLng);
|
||||||
|
marker.addTo(this.map);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy(): void {
|
||||||
|
this.map.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,35 @@
|
|||||||
|
import { Map, Marker, NavigationControl } from 'maplibre-gl';
|
||||||
|
import {getLngLat, IMapAdapter, LatLng, MapOptions} from './map-adapter.interface';
|
||||||
|
|
||||||
|
export class LibreAdapter implements IMapAdapter {
|
||||||
|
private map!: Map;
|
||||||
|
|
||||||
|
init(container: HTMLElement, options: MapOptions): void {
|
||||||
|
this.map = new Map({
|
||||||
|
container,
|
||||||
|
style: options.styleUrl!,
|
||||||
|
center: getLngLat(options.center),
|
||||||
|
zoom: options.zoom,
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.addControl(new NavigationControl(), 'top-right');
|
||||||
|
}
|
||||||
|
|
||||||
|
setCenter(latLng: LatLng): void {
|
||||||
|
this.map.setCenter(getLngLat(latLng));
|
||||||
|
}
|
||||||
|
|
||||||
|
setZoom(zoom: number): void {
|
||||||
|
this.map.setZoom(zoom);
|
||||||
|
}
|
||||||
|
|
||||||
|
addMarker(latLng: LatLng, options?: { color?: string }): void {
|
||||||
|
new Marker({ color: options?.color || 'red' })
|
||||||
|
.setLngLat(getLngLat(latLng))
|
||||||
|
.addTo(this.map);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy(): void {
|
||||||
|
this.map.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
export interface MapOptions {
|
||||||
|
center: LatLng;
|
||||||
|
zoom: number;
|
||||||
|
styleUrl: string;
|
||||||
|
tileUrl: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type LatLng = [number, number];
|
||||||
|
|
||||||
|
export function getLngLat(latLng: LatLng): [number, number] {
|
||||||
|
return [latLng[1], latLng[0]];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface IMapAdapter {
|
||||||
|
init(container: HTMLElement, options: MapOptions): void;
|
||||||
|
setCenter(latLng: LatLng): void;
|
||||||
|
setZoom(zoom: number): void;
|
||||||
|
addMarker(latLng: LatLng, options?: { color?: string }): void;
|
||||||
|
destroy(): void;
|
||||||
|
}
|
||||||
40
projects/ngx-open-map-wrapper/src/lib/adapters/map-facade.ts
Normal file
40
projects/ngx-open-map-wrapper/src/lib/adapters/map-facade.ts
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { IMapAdapter, MapOptions, LatLng } from './map-adapter.interface';
|
||||||
|
import { LibreAdapter } from './libre-adapter';
|
||||||
|
import { LeafletAdapter } from './leaflet-adapter';
|
||||||
|
|
||||||
|
export class MapFacade implements IMapAdapter {
|
||||||
|
private readonly adapter: IMapAdapter;
|
||||||
|
private readonly leafletZoomOffset = 1;
|
||||||
|
|
||||||
|
constructor(forceRaster: boolean, webglAvailable: boolean) {
|
||||||
|
if (forceRaster || !webglAvailable) {
|
||||||
|
this.adapter = new LeafletAdapter();
|
||||||
|
} else {
|
||||||
|
this.adapter = new LibreAdapter();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
init(container: HTMLElement, options: MapOptions): void {
|
||||||
|
if (this.adapter instanceof LeafletAdapter)
|
||||||
|
options.zoom += this.leafletZoomOffset;
|
||||||
|
this.adapter.init(container, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
setCenter(latLng: LatLng): void {
|
||||||
|
this.adapter.setCenter(latLng);
|
||||||
|
}
|
||||||
|
|
||||||
|
setZoom(zoom: number): void {
|
||||||
|
if (this.adapter instanceof LeafletAdapter)
|
||||||
|
zoom += this.leafletZoomOffset;
|
||||||
|
this.adapter.setZoom(zoom);
|
||||||
|
}
|
||||||
|
|
||||||
|
addMarker(latLng: LatLng, options?: { color?: string }): void {
|
||||||
|
this.adapter.addMarker(latLng, options);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy(): void {
|
||||||
|
this.adapter.destroy();
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,4 @@
|
|||||||
|
.map-container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
<div #mapContainer class="map-container" webglDetection (webglSupport)="webglDetection($event)">
|
||||||
|
|
||||||
|
</div>
|
||||||
@ -0,0 +1,76 @@
|
|||||||
|
import {
|
||||||
|
AfterViewInit,
|
||||||
|
Component,
|
||||||
|
effect,
|
||||||
|
ElementRef,
|
||||||
|
inject, Injector,
|
||||||
|
input,
|
||||||
|
output,
|
||||||
|
PLATFORM_ID, runInInjectionContext,
|
||||||
|
ViewChild
|
||||||
|
} from '@angular/core';
|
||||||
|
import {isPlatformBrowser} from '@angular/common';
|
||||||
|
import {MapOptions} from '../../adapters/map-adapter.interface';
|
||||||
|
import {MapFacade} from '../../adapters/map-facade';
|
||||||
|
import {WebglDetectionDirective} from '../../directives/webgl-detection.directive';
|
||||||
|
|
||||||
|
export interface OpenMapOptions extends MapOptions {
|
||||||
|
forceRaster: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'open-map',
|
||||||
|
imports: [
|
||||||
|
WebglDetectionDirective
|
||||||
|
],
|
||||||
|
templateUrl: './open-map.component.html',
|
||||||
|
styleUrl: './open-map.component.css',
|
||||||
|
standalone: true,
|
||||||
|
})
|
||||||
|
export class OpenMapComponent implements AfterViewInit {
|
||||||
|
private readonly platformId = inject(PLATFORM_ID);
|
||||||
|
private readonly injector = inject(Injector);
|
||||||
|
|
||||||
|
webglSupported?: boolean;
|
||||||
|
map?: MapFacade;
|
||||||
|
|
||||||
|
@ViewChild('mapContainer', { static: true }) mapContainer!: ElementRef<HTMLDivElement>;
|
||||||
|
|
||||||
|
options = input<OpenMapOptions>({
|
||||||
|
center: [50.426606229502525, 30.56308375468811],
|
||||||
|
zoom: 6,
|
||||||
|
styleUrl: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
|
||||||
|
tileUrl: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
|
||||||
|
forceRaster: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
mapReady = output<MapFacade>();
|
||||||
|
|
||||||
|
ngAfterViewInit(): void {
|
||||||
|
if (false === isPlatformBrowser(this.platformId))
|
||||||
|
return;
|
||||||
|
|
||||||
|
runInInjectionContext(this.injector, () => {
|
||||||
|
effect(() => {
|
||||||
|
if (undefined === this.webglSupported)
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (!this.map)
|
||||||
|
this.initializeMap();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
webglDetection(supported: boolean): void {
|
||||||
|
this.webglSupported = supported;
|
||||||
|
if (undefined === this.map)
|
||||||
|
this.initializeMap();
|
||||||
|
}
|
||||||
|
|
||||||
|
private initializeMap(): void {
|
||||||
|
const options = this.options();
|
||||||
|
this.map = new MapFacade(options.forceRaster, this.webglSupported!);
|
||||||
|
this.map.init(this.mapContainer.nativeElement, options);
|
||||||
|
this.mapReady.emit(this.map);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import {
|
||||||
|
Directive,
|
||||||
|
inject,
|
||||||
|
OnInit, output,
|
||||||
|
PLATFORM_ID
|
||||||
|
} from '@angular/core';
|
||||||
|
import { isPlatformBrowser } from '@angular/common';
|
||||||
|
|
||||||
|
@Directive({
|
||||||
|
selector: '[webglDetection]',
|
||||||
|
standalone: true
|
||||||
|
})
|
||||||
|
export class WebglDetectionDirective implements OnInit {
|
||||||
|
private readonly platformId = inject(PLATFORM_ID);
|
||||||
|
|
||||||
|
webglSupport = output<boolean>();
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
if (!isPlatformBrowser(this.platformId))
|
||||||
|
return;
|
||||||
|
|
||||||
|
const supported = this.checkWebGLSupport();
|
||||||
|
this.webglSupport.emit(supported);
|
||||||
|
}
|
||||||
|
|
||||||
|
private checkWebGLSupport(): boolean {
|
||||||
|
let canvas: HTMLCanvasElement | undefined = undefined;
|
||||||
|
try {
|
||||||
|
canvas = document.createElement('canvas');
|
||||||
|
|
||||||
|
const gl = (
|
||||||
|
canvas.getContext('webgl') ||
|
||||||
|
canvas.getContext('experimental-webgl')
|
||||||
|
) as WebGLRenderingContext | null;
|
||||||
|
|
||||||
|
const supported =
|
||||||
|
!!window.WebGLRenderingContext &&
|
||||||
|
!!(gl);
|
||||||
|
|
||||||
|
return supported;
|
||||||
|
} catch {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
canvas?.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
11
projects/ngx-open-map-wrapper/src/public-api.ts
Normal file
11
projects/ngx-open-map-wrapper/src/public-api.ts
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
/*
|
||||||
|
* Public API Surface of ngx-open-open-map-wrapper
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Interfaces & types
|
||||||
|
export * from './lib/adapters/map-adapter.interface';
|
||||||
|
export * from './lib/adapters/map-facade';
|
||||||
|
|
||||||
|
// Angular components & directives
|
||||||
|
export * from './lib/components/open-map/open-map.component';
|
||||||
|
export * from './lib/directives/webgl-detection.directive';
|
||||||
15
projects/ngx-open-map-wrapper/tsconfig.lib.json
Normal file
15
projects/ngx-open-map-wrapper/tsconfig.lib.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/lib",
|
||||||
|
"declaration": true,
|
||||||
|
"declarationMap": true,
|
||||||
|
"inlineSources": true,
|
||||||
|
"types": []
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"**/*.spec.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
11
projects/ngx-open-map-wrapper/tsconfig.lib.prod.json
Normal file
11
projects/ngx-open-map-wrapper/tsconfig.lib.prod.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "./tsconfig.lib.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"declarationMap": false
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"compilationMode": "partial"
|
||||||
|
}
|
||||||
|
}
|
||||||
15
projects/ngx-open-map-wrapper/tsconfig.spec.json
Normal file
15
projects/ngx-open-map-wrapper/tsconfig.spec.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"extends": "../../tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "../../out-tsc/spec",
|
||||||
|
"types": [
|
||||||
|
"jasmine"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"**/*.spec.ts",
|
||||||
|
"**/*.d.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
33
tsconfig.json
Normal file
33
tsconfig.json
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
|
||||||
|
/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
|
||||||
|
{
|
||||||
|
"compileOnSave": false,
|
||||||
|
"compilerOptions": {
|
||||||
|
"outDir": "./dist/out-tsc",
|
||||||
|
"strict": true,
|
||||||
|
"noImplicitOverride": true,
|
||||||
|
"noPropertyAccessFromIndexSignature": true,
|
||||||
|
"noImplicitReturns": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"paths": {
|
||||||
|
"ngx-open-map-wrapper": [
|
||||||
|
"./dist/ngx-open-map-wrapper",
|
||||||
|
"./projects/ngx-open-map-wrapper/src/public-api.ts"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"importHelpers": true,
|
||||||
|
"target": "ES2022",
|
||||||
|
"module": "ES2022"
|
||||||
|
},
|
||||||
|
"angularCompilerOptions": {
|
||||||
|
"enableI18nLegacyMessageIdFormat": false,
|
||||||
|
"strictInjectionParameters": true,
|
||||||
|
"strictInputAccessModifiers": true,
|
||||||
|
"strictTemplates": true
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user