Add files via upload

src/commonIotMap/commonIotMap.ts

@@ -0,0 +1,55 @@
+import * as L from 'leaflet';
+import {Injectable} from "@angular/core";
+import { IotMapMarkers } from '../IotMapMarkers/iopMapMarkers';
+
+
+@Injectable()
+export class CommonIotMap {
+  static readonly DEFAULT_COORDINATES: number[] = [46.603354, 1.8883335];
+  static readonly DEFAULT_ZOOM_LEVEL: number = 5;
+
+  map: any;
+  iotMapMarkers : IotMapMarkers;
+
+  baseLayers: { Satellite: any; Standard: any };
+  //marker: any;
+
+  constructor() {
+    this.iotMapMarkers = new IotMapMarkers();
+  }
+
+  init(selector) {
+    this.map = L.map(selector).setView([44.8888929,4.8849108], 15);
+
+    const defaultLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    }).addTo(this.map);
+
+    const geoportailLayer = L.tileLayer('https://wxs.ign.fr/{apikey}/geoportail/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&STYLE={style}&TILEMATRIXSET=PM&FORMAT={format}&LAYER=ORTHOIMAGERY.ORTHOPHOTOS&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', {
+      attribution: '<a target="_blank" href="https://www.geoportail.gouv.fr/">Geoportail France</a>',
+      apikey: 'choisirgeoportail',
+      format: 'image/jpeg',
+      style: 'normal'
+    });
+
+    this.baseLayers = {
+      Standard: defaultLayer,
+      Satellite: geoportailLayer
+    }
+  };
+
+  addMarkers(markerList: any) {
+    let map = this.map;
+    markerList.forEach(mark => {
+      let marker =  null;
+      if (mark.shape == 'square') {
+        marker = this.iotMapMarkers.getSquareMarker(mark.color);
+      } else if (mark.shape == 'poi') {
+        marker = this.iotMapMarkers.getPoiMarker(mark.color);
+      } else if (mark.shape == 'circle') {
+        marker = this.iotMapMarkers.getCircleMarker(mark.color);
+      }
+      L.marker(mark.position, {icon: marker}).addTo(map);
+    });
+  }
+}

src/iotMapMarkers/iopMapMarkers.ts

@@ -0,0 +1,118 @@
+import * as L from 'leaflet';
+import {Injectable} from "@angular/core";
+
+@Injectable()
+export class IotMapMarkers {
+  borderSquare = `
+       position: absolute;
+       width: 3rem;
+       height: 3rem;
+       left: -1.5rem;
+       top: -1.5rem;
+       border-radius: 0.5rem;
+   `;
+
+  middleSquare = `
+       width: 2rem;
+      height: 2rem;
+      left: 0.5rem;
+      top: 0.5rem;
+      position: absolute;
+      background-color: white;
+      border-radius: 0.25rem;
+      `;
+
+  borderCircle = `
+      width: 3rem;
+      height: 3rem;
+      left: 0rem;
+      top: 1.5rem;
+      position: absolute;
+      border-radius: 3rem;
+      `;
+
+  middleCircle = `
+      width: 2rem;
+      height: 2rem;
+      left: 0.5rem;
+      top: 0.5rem;
+      position: absolute;
+      background-color: white;
+      border-radius: 2rem;
+      `;
+
+  pin1 = `
+      position: absolute;
+      width: 0;
+      height: 0;
+      top: 2.9rem;
+      left: 0.9rem;
+      border-left: 0.6rem solid transparent;
+      border-right: 0.6rem solid transparent;
+    `;
+
+
+  pin2 = `
+       position: absolute;
+      width: 0;
+      height: 0;
+      top: 2.4rem;
+      left: 0.45rem;
+      border-left: 0.6rem solid transparent;
+      border-right: 0.6rem solid transparent;
+       `;
+
+
+  tab = `
+    position: absolute;
+    width: 3rem;
+    height: 3rem;
+    left: -1.5rem;
+    top: -3rem;
+    border-radius: 0.5rem;
+    background-color: white;
+  `;
+
+
+  getCircleMarker(color) {
+    return L.divIcon({
+      className: "my-custom-pin",
+      iconAnchor: [0, 24],
+      labelAnchor: [30, 42],
+      popupAnchor: [15, 42],
+      html: `<div style="${this.tab}"/>
+             <div style="${this.borderCircle} background-color:${color};" />
+             <div style="${this.middleCircle}"/>
+             <div style="${this.pin2} border-top: 0.75rem solid ${color};" />
+
+        `
+    });
+  };
+
+  getSquareMarker(color) {
+    return L.divIcon({
+      className: "my-custom-pin",
+      iconAnchor: [0, 24],
+      labelAnchor: [30, 42],
+      popupAnchor: [15, 42],
+      html: `<div style="${this.borderSquare} background-color:${color};" />
+             <div style="${this.middleSquare}"/>
+             <div style="${this.pin2} border-top: 0.75rem solid ${color};" />
+
+        `
+
+    });
+  }
+
+  getPoiMarker(color) {
+    return L.divIcon({
+      className: "my-custom-pin",
+      iconAnchor: [0, 24],
+      labelAnchor: [30, 42],
+      popupAnchor: [15, 42],
+      html: `<div style="${this.borderSquare} background-color:${color};" />
+             <div style="${this.pin1} border-top: 0.75rem solid ${color};" />
+             `
+    });
+  }
+}

src/iotMapMarkers/iotMapMarkers.css

@@ -0,0 +1,19 @@
+body {
+  background-color: lightblue;
+}
+
+h1 {
+  color: navy;
+  margin-left: 20px;
+}
+
+
+.borderMarker{
+  position: absolute;
+  width: 3rem;
+  height: 3rem;
+  left: -1.5rem;
+  top: -1.5rem;
+  border-radius: 0.5rem;
+}
+

src/map/map-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class MapRoutingModule { }

src/map/map.component.css

@@ -0,0 +1,6 @@
+#iotMap {
+  width: 1200px;
+  height: 700px;
+}
+
+

src/map/map.component.html

@@ -0,0 +1,5 @@
+<!--The content below is only a placeholder and can be replaced.-->
+
+<h2>Voici la carte :</h2>
+<div id="iotMap"></div>
+<router-outlet></router-outlet>

src/map/map.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { MapComponent } from './map.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        MapComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(MapComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'IotMap'`, () => {
+    const fixture = TestBed.createComponent(MapComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('IotMap');
+  });
+
+  it('should render title in a h1 tag', () => {
+    const fixture = TestBed.createComponent(MapComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to IotMap!');
+  });
+});

src/map/map.component.ts

@@ -0,0 +1,46 @@
+import {
+  Component,
+  AfterViewInit
+} from '@angular/core';
+
+import { CommonIotMap } from '../commonIotMap/commonIotMap';
+
+@Component({
+  selector: 'map-component',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.css']
+})
+
+export class MapComponent implements AfterViewInit {
+  commonIotMap : CommonIotMap;
+  title ="IotMap";
+
+  constructor() {
+    this.commonIotMap = new CommonIotMap();
+  }
+
+  ngAfterViewInit(): void {
+    this.commonIotMap.init('iotMap');
+
+    let markersList = [
+      {
+        position: [44.8888929,4.883],
+        color: 'red',
+        shape: 'square'},
+      {
+        position: [44.89,4.884],
+        color: 'yellow',
+        shape: 'square'},
+      {
+        position: [44.886,4.883],
+        color: 'black',
+        shape: 'circle'},
+      {
+        position: [44.887,4.886],
+        color: 'green',
+        shape: 'poi'}];
+
+    this.commonIotMap.addMarkers(markersList);
+  }
+}
+

src/map/map.module.ts

@@ -0,0 +1,18 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { MapRoutingModule } from './map-routing.module';
+import { MapComponent } from './map.component';
+
+@NgModule({
+  declarations: [
+    MapComponent
+  ],
+  imports: [
+    BrowserModule,
+    MapRoutingModule
+  ],
+  providers: [],
+  bootstrap: [MapComponent]
+})
+export class MapModule { }