Externalise the map interface methods to an angular service

.github/workflows/main.yml

@@ -35,8 +35,14 @@ jobs:
         run: npm run lint
       - name: License check
         run: npm run license-check
-      - name: Build
-        run: npm run build-release
+      - name: Build components
+        run: npm run build-components
+      - name: Build arlas-map
+        run: npm run build-map
+      - name: Build arlas-maplibre
+        run: npm run build-maplibre
+      - name: Build arlas-mapbox
+        run: npm run build-mapbox
       - name: Test
         run: npm run test
       - name: Documentation

README.md

@@ -1,35 +1,65 @@
-# ARLAS web components :
-
 [![Build Status](https://travis-ci.org/gisaia/ARLAS-web-components.svg?branch=develop)](https://travis-ci.org/gisaia/ARLAS-web-components)
 [![npm version](https://badge.fury.io/js/arlas-web-components.svg)](https://badge.fury.io/js/arlas-web-components)
 
-## About
+# About this repo:
+
+This repository contains 4 Angular libraries and one demo Angular application.
+
+The 4 libraries are:
+- **arlas-web-components**: contains a set of graphical component to explore data such as : donuts, histograms, powerbars, resultlits, metrics, metrics table,..
+- **arlas-map**: contains one map component dedicated to display ARLAS data. This component is cartographical-framework-free. The libarary also comes with a number of services. Those services provide cartographical interfaces that should be implemented according to your chosen map framework.
+- **arlas-maplibre**: this library provides a maplibregl implementation of the arlas-map library.
+- **arlas-mapbox**: this library provides a maboxgl implementation of the arlas-map library.
+
+> Note 1: **arlas-maplibre** and **arlas-mapbox** both have **arlas-map** as a dependency.
+
+> Note 2: As a consequence, you can install **arlas-maplibre** or **arlas-mapbox** directly without the need of installing **arlas-map** precedently.
+
+
+The demo application is composed of several tabs. Each tab provides an example of one component of **arlas-web-components** library or an implementation of **arlas-map** library.
 
-ARLAS-web-components is an Angular library that provides a set of data analytics components.
+## Artchitecture of **arlas-map**, **arlas-maplibre** and **arlas-mapbox**
 
-## Install
+<img src="./images/arlas-map-library.png">
 
-To install this library in your npm Angular web app project add the dependency in your package.json :
+- **arlas-map** provides the Angular components to be used in your apps.
+- **arlas-map** components logic is declared in different services. Some are implemented when they don't depend directly on a cartographical framework. The rest are declared as abstract.
+- The mapboxgl-js (v1.13) and maplibregl-js implementations are respectively coded in **arlas-mapbox** and **arlas-maplibre** libraries.
 
+
+
+# Install
+
+To install these libraries in your npm Angular web app project add the dependency in your package.json :
+
+For arlas-web-components:
 ```shell
 $ npm install --save arlas-web-components
 ```
 
-## Documentation
+For arlas-map:
+```shell
+$ npm install --save arlas-maplibre
+```
+Or
+```shell
+$ npm install --save arlas-mapbox
+```
 
-Please find the documentation of all the components [here](https://docs.arlas.io/classes/DonutComponent/).
+# Build
 
-## Build
+## Prequesites:
 
-To build the project you need to have installed
-- [Node](https://nodejs.org/en/) version ^16.0.0 
-- [npm](https://github.com/npm/npm) version ^8.0.0
-- [Angular CLI](https://github.com/angular/angular-cli) version ^14.2.13
+To build the projects you need to have installed
+- [Node](https://nodejs.org/en/) version ^18.19.1 
+- [npm](https://github.com/npm/npm) version ^10.0.0
+- [Angular CLI](https://github.com/angular/angular-cli) version ^18.2.12
   ```
-  $ npm install -g @angular/cli@^14.2.13
+  $ npm install -g @angular/cli@^18.2.12
   ```
+## Proceed to build
 
-Then, clone the project
+Clone the project
 
 ```shell
 $ git clone https://github.com/gisaia/ARLAS-web-components
@@ -41,16 +71,33 @@ Move to the folder
 $ cd ARLAS-web-components
 ```
 
-Install all the project's dependencies
+Install all the projects dependencies
 
 ```shell
 $ npm install
 ```
 
 Build the project with `ng` :
 
+For arlas-web-components
+```shell
+$ npm run build-components
+```
+
+For arlas-map
+```shell
+$ npm run build-map
+```
+
+For arlas-maplibre
+```shell
+$ npm run build-maplibre
+```
+
+
+For arlas-mapbox
 ```shell
-$ npm run build-release
+$ npm run build-mapbox
 ```
 
 The build artifacts will be generated in the `dist/` directory. 
@@ -94,8 +141,8 @@ See also the list of [contributors](https://github.com/gisaia/ARLAS-web-componen
 
 ## License
 
-This project is licensed under the Apache License, Version 2.0 - see the [LICENSE.txt](https://github.com/gisaia/ARLAS-web-components/blob/develop/LICENSE.txt) file for details.
+These projects are licensed under the Apache License, Version 2.0 - see the [LICENSE.txt](https://github.com/gisaia/ARLAS-web-components/blob/develop/LICENSE.txt) file for details.
 
 ## Acknowledgments
 
-This project has been initiated and is maintained by Gisaïa.
+This repository has been initiated and is maintained by Gisaïa.

angular.json

@@ -32,6 +32,7 @@
             "styles": [
               "src/styles.css",
               "node_modules/mapbox-gl/dist/mapbox-gl.css",
+              "node_modules/maplibre-gl/dist/maplibre-gl.css",
               "node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css",
               "node_modules/iv-viewer/dist/iv-viewer.css"
             ],
@@ -94,6 +95,7 @@
             "styles": [
               "src/styles.css",
               "node_modules/mapbox-gl/dist/mapbox-gl.css",
+              "node_modules/maplibre-gl/dist/maplibre-gl.css",
               "node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css",
               "node_modules/iv-viewer/dist/iv-viewer.css"
             ],
@@ -153,11 +155,9 @@
           "options": {
             "main": "projects/arlas-components/src/test.ts",
             "tsConfig": "projects/arlas-components/tsconfig.spec.json",
-            "karmaConfig": "projects/arlas-components/karma.conf.js",
+            "karmaConfig": "./karma.conf.js",
             "styles": [
               "src/styles.css",
-              "node_modules/mapbox-gl/dist/mapbox-gl.css",
-              "node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css",
               "node_modules/iv-viewer/dist/iv-viewer.css"
             ]
           }
@@ -167,9 +167,135 @@
           "options": {
             "eslintConfig": ".eslintrc.json",
             "lintFilePatterns": [
-              "projects/**/*.spec.ts",
-              "projects/**/*.d.ts",
-              "projects/**/*.ts"
+              "projects/arlas-components/**/*.spec.ts",
+              "projects/arlas-components/**/*.d.ts",
+              "projects/arlas-components/**/*.ts"
+            ]
+          }
+        }
+      }
+    },
+    "arlas-mapbox": {
+      "projectType": "library",
+      "root": "projects/arlas-mapbox",
+      "sourceRoot": "projects/arlas-mapbox/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/arlas-mapbox/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/arlas-mapbox/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/arlas-mapbox/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/arlas-mapbox/src/test.ts",
+            "tsConfig": "projects/arlas-mapbox/tsconfig.spec.json",
+            "karmaConfig": "./karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "eslintConfig": ".eslintrc.json",
+            "lintFilePatterns": [
+              "projects/arlas-mapbox/**/*.spec.ts",
+              "projects/arlas-mapbox/**/*.d.ts",
+              "projects/arlas-mapbox/**/*.ts"
+            ]
+          }
+        }
+      }
+    },
+    "arlas-maplibre": {
+      "projectType": "library",
+      "root": "projects/arlas-maplibre",
+      "sourceRoot": "projects/arlas-maplibre/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/arlas-maplibre/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/arlas-maplibre/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/arlas-maplibre/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/arlas-maplibre/src/test.ts",
+            "tsConfig": "projects/arlas-maplibre/tsconfig.spec.json",
+            "karmaConfig": "./karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "eslintConfig": ".eslintrc.json",
+            "lintFilePatterns": [
+              "projects/arlas-maplibre/**/*.spec.ts",
+              "projects/arlas-maplibre/**/*.d.ts",
+              "projects/arlas-maplibre/**/*.ts"
+            ]
+          }
+        }
+      }
+    },
+    "arlas-map": {
+      "projectType": "library",
+      "root": "projects/arlas-map",
+      "sourceRoot": "projects/arlas-map/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/arlas-map/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/arlas-map/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/arlas-map/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/arlas-map/src/test.ts",
+            "tsConfig": "projects/arlas-map/tsconfig.spec.json",
+            "karmaConfig": "./karma.conf.js"
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "eslintConfig": ".eslintrc.json",
+            "lintFilePatterns": [
+              "projects/arlas-map/**/*.spec.ts",
+              "projects/arlas-map/**/*.d.ts",
+              "projects/arlas-map/**/*.ts"
             ]
           }
         }

karma.conf.js

@@ -5,20 +5,15 @@ module.exports = function (config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
+    plugins,
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
+    webpack: { node: { fs: 'empty', } },
 
     reporters: ['progress', 'kjhtml'],
     port: 9876,
@@ -27,6 +22,17 @@ module.exports = function (config) {
     autoWatch: true,
     browsers: ['ChromeHeadless'],
     singleRun: true,
-    webpack: { node: { fs: 'empty', } }
   });
 };
+
+const plugins = [
+  require('karma-jasmine'),
+  require('karma-chrome-launcher'),
+  require('karma-jasmine-html-reporter'),
+  require('karma-coverage-istanbul-reporter'),
+  require('@angular-devkit/build-angular/plugins/karma')
+]
+
+
+
+