added markers service

app/Http/Controllers/MarkersController.php

@@ -13,12 +13,19 @@ class MarkersController extends Controller {
  * @return \Illuminate\Http\Response
  */
  public function index () {
- if (request()->input('types')) {
- $types = explode(',', request()->input('types'));
+ if (request()->input('type')) {
+ $types = explode(',', request()->input('type'));
 
  return Marker::whereIn('marker_type_id', $types)
  ->orderBy('marker_name', 'desc')
- ->get();
+ ->get([
+ 'id',
+ 'marker_type_id',
+ 'marker_name',
+ 'x',
+ 'y',
+ 'z'
+ ]);
  }
  // else {
  // $defaultFilters = [

resources/assets/js/app/Marker.model.ts

@@ -0,0 +1,12 @@
+export class Marker {
+ constructor(
+ public id: number,
+ public marker_type_id: number,
+ public marker_name: string,
+ public x: number,
+ public y: number,
+ public z: number,
+ public marker_description?: string,
+ public source?: string
+ ) {}
+}

resources/assets/js/app/MarkerType.model.ts

@@ -0,0 +1,9 @@
+export class MarkerType {
+ constructor(
+ public id: number,
+ public marker_type_name: string,
+ public marker_type_slug: string,
+ public icon: string,
+ public marker_type_description: string
+ ) {}
+}

resources/assets/js/app/app.component.html

@@ -4,13 +4,15 @@
  <!--<div id="search"></div>-->
 
  <app-marker-filters
+ [markerTypes]="markerTypes"
  [selectedMarkerTypes]="selectedMarkerTypes"
  (selectedMarkerTypesChanged)="onSelectedMarkerTypesChanged($event)"
  ></app-marker-filters>
 
  <!--<app-marker-details></app-marker-details>-->
 
  <app-map
+ [markerTypes]="markerTypes"
  [selectedMarkerTypes]="selectedMarkerTypes"
  [selectedMarker]="selectedMarker"
  (markerSelected)="onMarkerSelected($event)"

resources/assets/js/app/app.component.ts

@@ -1,15 +1,32 @@
-import { Component } from '@angular/core';
-import { Marker } from "./marker/marker.model";
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import { Marker } from "./marker.model";
+import { MarkerType } from "./MarkerType.model";
+import { map } from "rxjs/operators";
 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
 })
-export class AppComponent {
- selectedMarkerTypes: number[] = [100, 498, 932, 2013];
+export class AppComponent implements OnInit {
+ markerTypes: MarkerType[];
+
+ selectedMarkerTypes: number[] = [1, 2];
  selectedMarker: Marker;
 
+ constructor(private http:HttpClient) {}
+
+ ngOnInit() {
+ this.http.get<MarkerType[]>('/marker-types')
+ .pipe(map(
+ (markerTypes) => {
+ this.markerTypes = markerTypes;
+ }
+ ))
+ .subscribe();
+ }
+
  private onMarkerSelected(event) {
  console.log(event);
  }

resources/assets/js/app/app.module.ts

@@ -1,12 +1,14 @@
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { HttpClientModule } from "@angular/common/http";
 
 import { AppComponent } from './app.component';
-import { HttpClientModule } from "@angular/common/http";
 import { MapComponent } from "./map/map.component";
 import { MarkerFiltersComponent } from "./marker-filters/marker-filters.component";
 import { MarkerDetailsComponent } from "./marker-details/marker-details.component";
 
+import { MarkersService } from "./markers.service";
+
 @NgModule({
  declarations: [
  AppComponent,
@@ -18,7 +20,9 @@ import { MarkerDetailsComponent } from "./marker-details/marker-details.componen
  BrowserModule,
  HttpClientModule
  ],
- providers: [],
+ providers: [
+ MarkersService
+ ],
  bootstrap: [AppComponent]
 })
 export class AppModule {

resources/assets/js/app/map/map.component.ts

@@ -1,21 +1,26 @@
 import { Component, Input, OnChanges, OnInit, Output, SimpleChanges } from "@angular/core";
-import { Marker } from "../marker/marker.model";
+import { Marker } from "../marker.model";
 
 import * as Leaflet from 'leaflet/dist/leaflet.js';
+import { MarkersService } from "../markers.service";
+import { MarkerType } from "../MarkerType.model";
 
 @Component({
  selector: 'app-map',
  templateUrl: './map.component.html'
 })
 export class MapComponent implements OnInit, OnChanges {
+ @Input() markerTypes: MarkerType[];
  @Input() selectedMarkerTypes: number[];
  @Input() selectedMarker: Marker;
 
  // @Output() markerSelected: any;
 
  public isMapGenerated: boolean = false;
  private map: Leaflet;
- private mapLayers = [];
+ private mapLayers = {};
+
+ constructor(private markersService: MarkersService) {}
 
  ngOnInit() {
  this.generateMap();
@@ -50,7 +55,6 @@ export class MapComponent implements OnInit, OnChanges {
  }
 
  ngOnChanges(changes: SimpleChanges): void {
- console.log(changes);
  if (changes.hasOwnProperty('selectedMarkerTypes')) {
  this.selectedMarkersChanged(changes.selectedMarkerTypes);
  }
@@ -60,9 +64,48 @@ export class MapComponent implements OnInit, OnChanges {
  if (! values.firstChange) {
  let added = values.currentValue.filter(item => values.previousValue.indexOf(item) < 0);
  let removed = values.previousValue.filter(item => values.currentValue.indexOf(item) < 0);
- console.log(added, removed);
+
+ if (added.length > 0) {
+ this.markersService.getByType(added).subscribe((markers: Marker[]) => {
+ });
+ }
  } else {
- console.log(values.currentValue);
+ this.markersService.getByType(values.currentValue).subscribe((markers: Marker[]) => {
+ this.addMarkers(markers);
+ });
+ }
+ }
+
+ private addMarkers(markers: Marker[]) {
+ for (let marker of markers) {
+ if (!this.mapLayers.hasOwnProperty(marker.marker_type_id.toString())) {
+ this.mapLayers[marker.marker_type_id.toString()] = Leaflet.layerGroup();
+ }
+
+ let markerTypeGroup = this.mapLayers[marker.marker_type_id.toString()] = Leaflet.layerGroup();
+
+ if (this.selectedMarkerTypes.includes(marker.marker_type_id)) {
+ let newMarker = Leaflet.marker([
+ -this.normalizeCoord(marker.z),
+ this.normalizeCoord(marker.x)
+ ], {
+ icon: Leaflet.icon({
+ iconUrl: 'images/icons/markers/default.png',
+ iconSize: [32, 32]
+ }),
+ title: marker.marker_name,
+ zIndexOffset: Math.floor(marker.y),
+ });
+ newMarker.markerId = marker.id;
+ newMarker.layerId = marker.marker_type_id;
+
+ markerTypeGroup.addLayer(newMarker);
+ this.map.addLayer(markerTypeGroup);
+ }
  }
  }
+
+ private normalizeCoord(coord: number) {
+ return (coord + 6000) * 0.03125
+ }
 }

resources/assets/js/app/marker-filters/marker-filters.component.ts

@@ -1,21 +1,19 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { MarkerType } from "../MarkerType.model";
 
 @Component({
  selector: 'app-marker-filters',
  templateUrl: './marker-filters.component.html'
 })
 export class MarkerFiltersComponent {
+ @Input() markerTypes: MarkerType[];
  @Input() private selectedMarkerTypes: number[];
 
  @Output() selectedMarkerTypesChanged = new EventEmitter<number[]>();
 
-
-
  markerCategories: {id: number, selected: boolean}[] = [
- {id: 100, selected: true},
- {id: 498, selected: true},
- {id: 932, selected: true},
- {id: 2013, selected: true}
+ {id: 1, selected: true},
+ {id: 2, selected: true}
  ];
 
  toggleType(event) {

resources/assets/js/app/markers.service.ts

@@ -0,0 +1,24 @@
+import { Injectable } from "@angular/core";
+import { HttpClient } from "@angular/common/http";
+import { map } from "rxjs/operators";
+
+import { Marker } from "./marker.model";
+
+@Injectable({
+ providedIn: 'root'
+})
+export class MarkersService {
+ constructor(private http: HttpClient) {
+ }
+
+ public getByType(types: number[]) {
+ const typeString = types.join(',');
+
+ return this.http.get<Marker[]>('http://127.0.0.1:8000/markers?type=' + typeString)
+ .pipe(map(
+ (markers) => {
+ return markers;
+ }
+ ));
+ }
+}