Ontwikkeling op Google Maps gebaseerde webapplicatie

[Black-Xjuh]

Al enige jaren werk ik aan een webapplicatie welke gebaseerd is op een full screen Google Maps kaart met daarop markers en vele andere tools.

Door middel van overerving heb ik de standaard Google Maps markers uitgebreid met de meer specifieke functionaliteit welke de eigen webapplicatie gebruikt. De benodigde informatie wordt opgehaald door middel van PHP bestanden die een soort van API vormen met JSON files.

Graag zou ik de gehele webapplicatie willen herzien en ben ik op zoek naar een framework om het een en ander gemakkelijker te maken bij de ontwikkeling. Op dit moment maak ik gebruik van JQuery en JQuery UI.

De eigenlijke vraag is of er hier ervaring is met de ontwikkeling van dit soort webapplicaties (Google Maps) en wat hiervoor een handig framework is? De focus ligt op het gebruik van Object Oriented JavaScript. Dit front-end communiceert door middel van een API met het back-end, hier ligt de scheidslijn. De voorkeur heeft een framework welke goede integratie heeft met JSON zodat ik in eerste instantie van het back-end af kan blijven.

De laatste tijd is mijn oog gevallen op Angular maar ik vraag mij af of de integratie met Google Maps hier goed mee samen gaat, er zijn wel Maps modules voor maar het gaat mij voornamelijk ook om het uitbreiden van de standaard functionaliteit van de Maps onderdelen.

[q-enf0rcer.1]

Mocht je voor Angular kiezen dan kan ik deze package aanraden: https://github.com/SebastianM/angular-google-maps

Ik moet voor mijn werk regelmatig Google Maps implementeren binnen Angular applicaties. En dat gaat met deze package uitstekend. Ook als je buiten de standaard zaken wilt gaan. Uiteraard kun je ook op een bepaalt moment kiezen om zelf een fork te maken van de repo om volledige vrijheid te hebben.

Ik kan verder niet beoordelen of React.js bijvoorbeeld een betere keuze is. Ik heb niet in beide frameworks Google Maps geïmplementeerd.

[Edwin88]

Elk framework kan goed met JSON omgaan, maak daar maar geen zorgen om.

Verder zal je eigen kennis ook meetellen. Heb je al eerder met een framework gewerkt of in een andere taal iets soortgelijks hebben gedaan, dan kan het meevallen. Als je van jQuery soep opeens naar Angular 5 moet dan is de stap wat groter.

[gekkie]

Openlayers ?

[Black-Xjuh]

q-enf0rcer.1 schreef op woensdag 21 maart 2018 @ 14:41:
Mocht je voor Angular kiezen dan kan ik deze package aanraden: https://github.com/SebastianM/angular-google-maps

Ik moet voor mijn werk regelmatig Google Maps implementeren binnen Angular applicaties. En dat gaat met deze package uitstekend. Ook als je buiten de standaard zaken wilt gaan. Uiteraard kun je ook op een bepaalt moment kiezen om zelf een fork te maken van de repo om volledige vrijheid te hebben.

Ik kan verder niet beoordelen of React.js bijvoorbeeld een betere keuze is. Ik heb niet in beide frameworks Google Maps geïmplementeerd.

Gister na jouw reactie er meteen een beetje mee aan de slag gegaan als test. Binnen no-time had ik een werkende pagina inclusief Google Maps kaartje. Vervolgens een service geschreven welke een array van (eigen) markers ophaalt welke ik weergeef op de kaart. Ook dit ging redelijk soepel alleen nu kom ik op het punt dat ik (denk ik) verder wil dan de standaard gebruiker en vraag mij af hoe goed dit mogelijk is.

De markers geef ik nu weer met een agm-marker en een custom icon, maar hoe pas ik hier de schaal van aan? Ik ben er redelijk zeker van dat dit niet kan met de standaard agm module welke jij hebt aanbevolen? Is het op een bepaalde manier mogelijk om door middel van overerving (bijvoorbeeld) drie subtypes van de agm-marker te maken en daar extra code in te implementeren waardoor ik bij bepaalde acties de marker groter dan wel kleiner kan schalen?

Een andere mogelijk zou zijn dat ik de agm-map gebruik en dan door middel van de standaard Google Maps API markers toevoeg op de manier zoals ik dat in het verleden ook deed (JavaScript) of ga ik dan het idee van het Angular framework voorbij?

[Black-Xjuh]

Edwin88 schreef op woensdag 21 maart 2018 @ 23:21:
Elk framework kan goed met JSON omgaan, maak daar maar geen zorgen om.

Verder zal je eigen kennis ook meetellen. Heb je al eerder met een framework gewerkt of in een andere taal iets soortgelijks hebben gedaan, dan kan het meevallen. Als je van jQuery soep opeens naar Angular 5 moet dan is de stap wat groter.

De overstap is inderdaad een behoorlijk grote maar wel een die (denk ik) een hoop voordelen oplevert op de lange termijn.

Ik heb niet zozeer ervaring met een ander framework maar wel met het ontwikkelen in JavaScript zelf in combinatie met de Google Maps API. Zou het wat dit betreft een idee kunnen zijn om niet op zoek te gaan naar een Google Maps module maar gewoon de Google Maps API te importeren en deze verder uit te breiden met het gebruik van Angular?

[Black-Xjuh]

gekkie schreef op woensdag 21 maart 2018 @ 23:23:
Openlayers ?

Dit zou een vervanger zijn voor Google Maps? Graag wil ik juist verder met Google Maps maar ben ik op zoek naar een framework hier om heen.

[q-enf0rcer.1]

Black-Xjuh schreef op donderdag 22 maart 2018 @ 10:50:
[...]

Gister na jouw reactie er meteen een beetje mee aan de slag gegaan als test. Binnen no-time had ik een werkende pagina inclusief Google Maps kaartje. Vervolgens een service geschreven welke een array van (eigen) markers ophaalt welke ik weergeef op de kaart. Ook dit ging redelijk soepel alleen nu kom ik op het punt dat ik (denk ik) verder wil dan de standaard gebruiker en vraag mij af hoe goed dit mogelijk is.

De markers geef ik nu weer met een agm-marker en een custom icon, maar hoe pas ik hier de schaal van aan? Ik ben er redelijk zeker van dat dit niet kan met de standaard agm module welke jij hebt aanbevolen? Is het op een bepaalde manier mogelijk om door middel van overerving (bijvoorbeeld) drie subtypes van de agm-marker te maken en daar extra code in te implementeren waardoor ik bij bepaalde acties de marker groter dan wel kleiner kan schalen?

Een andere mogelijk zou zijn dat ik de agm-map gebruik en dan door middel van de standaard Google Maps API markers toevoeg op de manier zoals ik dat in het verleden ook deed (JavaScript) of ga ik dan het idee van het Angular framework voorbij?

Ik zou denk ik css gebruiken om de marker te stijlen. Naar mijn weten is hiervoor geen ingebouwde functionaliteit voor. Je kunt natuurlijk wel zelf bepalen welk icoon je gebruikt, en die kun je met css weer targetten met de attribute selector. [src=icoon1.jpg] bijvoorbeeld. Daarna kun je de scale zelf bepalen met CSS (:

[gekkie]

Black-Xjuh schreef op donderdag 22 maart 2018 @ 10:57:
[...]
Dit zou een vervanger zijn voor Google Maps? Graag wil ik juist verder met Google Maps maar ben ik op zoek naar een framework hier om heen.

Vervanger als API ja, qua kaarten kun je er van alles als layers onder laten leggen (Google maps, Bing maps, Openstreetmaps). Vandaar dat mijn voorkeur daar naar uit zou gaan, tenminste niet zo'n vendor lockin.
Maar goed je kan eens wat examples aflopen om een beeld te krijgen wat je er allemaal mee kan (en met hoe veel of hoe weinig code).

[ Voor 12% gewijzigd door gekkie op 22-03-2018 11:37 ]

[Black-Xjuh]

gekkie schreef op donderdag 22 maart 2018 @ 11:36:
[...]

Vervanger als API ja, qua kaarten kun je er van alles als layers onder laten leggen (Google maps, Bing maps, Openstreetmaps). Vandaar dat mijn voorkeur daar naar uit zou gaan, tenminste niet zo'n vendor lockin.
Maar goed je kan eens wat examples aflopen om een beeld te krijgen wat je er allemaal mee kan (en met hoe veel of hoe weinig code).

Ik snap het, eens een keer naar kijken.

[Black-Xjuh]

Nu ik er een beetje mee bezig ben heb ik misschien een iets algemenere Angular vraag. Heb wat voorbeelden gevolgd maar wil nu een stap verder.

In de eerste plaats heb ik een marker class gemaakt:

code:

export class Marker {
  id: number;
  name: string;
  lat: number;
  lng: number;
}

De gebruik ik met mijn httpClient:

code:

public getMarkers(project: number): Observable<Marker[]> {
  return this.httpClient.get<Marker[]>(this.markersUrl + '?projectid=' + project);
}

Welke ik dan weer uitlees:

code:

ngOnInit() {
  this.websuiteService.getMarkers()
    .subscribe(markers => this.markers = markers);
}

Dit gaat allemaal goed, maar wanneer ik mijn marker class nu uitbreid naar:

code:

export class Marker {
  id: number;
  name: string;
  lat: number;
  lng: number;

  constructor(marker) {
    this.id = marker.id;
    this.name = marker.name;
    this.lat = marker.lat;
    this.lng = marker.lng;
  }
  
  getName() {
    return this.name;
  }
}

Kan ik de functie getName() niet aanroepen. Wel wanneer ik new Marker(marker) gebruik. Mijn eigenlijke vraag is hoe ik van de JSON array van markers die ik ophaal (die ik nu al stop in een Observable van type Marker) echte objecten maak? De Marker objecten nu zitten wel in een array van het type Marker maar ik heb niet de mogelijkheid om de bijbehorende functies aan te roepen.

[q-enf0rcer.1]

[b]Black-Xjuh schreef op donderdag 22 maart 2018 @ 12:30:
Kan ik de functie getName() niet aanroepen. Wel wanneer ik new Marker(marker) gebruik. Mijn eigenlijke vraag is hoe ik van de JSON array van markers die ik ophaal (die ik nu al stop in een Observable van type Marker) echte objecten maak? De Marker objecten nu zitten wel in een array van het type Marker maar ik heb niet de mogelijkheid om de bijbehorende functies aan te roepen.

De value markers is in jouw geval de waarde die je terug krijgt uit je api. Daarom is de method getName niet beschikbaar. Die zul je eerst zelf via Array.map() toe moeten voegen. De markers class die jij nu hebt gemaakt, gebruik jij als type definition, en meer niet.

[Black-Xjuh]

Ik begrijp denk ik wat je bedoeld, heb na wat rondkijken overigens de keus gemaakt om gebruik te gaan maken van de standaard Google Maps API. Voor nu is mijn laatste vraag of de test code die ik heb gemaakt een beetje lijkt op hoe je zoiets zou doen in Angular. Het werkt, maar zet ik nu een stap in de goede richting of kan dit beter op een andere manier?

Ik zit vooral nogal een beetje in de knoop met de WebsuiteMarker, dit is een echte class maar tegelijkertijd ook die type definition. Is dit raar of is het normaal dit op deze manier toe te passen?

JavaScript:

public getMarkers(project: number): Observable<WebsuiteMarker[]> {
  return this.httpClient.get<WebsuiteMarker[]>(this.markersUrl);
}

JavaScript:

export class AppComponent {
  @ViewChild('gmap') gmapElement: any;
  
  //private map: google.maps.Map;
  //private markers: WebsuiteMarker[];
  private markerList: Array<WebsuiteMarker> = new Array<WebsuiteMarker>();

  constructor(
    private websuiteService: WebsuiteService
  ) {}

  ngOnInit() {
    const mapProperties = {
      center: new google.maps.LatLng(30, 0),
      zoom: 3,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    const map = new google.maps.Map(this.gmapElement.nativeElement, mapProperties);

    this.websuiteService.getMarkers(1)
      .subscribe(markers => {
        this.markerList = markers.map(marker => new WebsuiteMarker(map, marker));
        
        this.zoomToBounds(map, this.markerList);
      }
    );
  }
  
  validatePosition(position: google.maps.LatLng): Boolean {
    if (position.lat() != 0 && position.lat() < 85 && position.lat() > -85 && 
        position.lng() != 0 && position.lng() < 180 && position.lng() > -180
    ) {
      return true;
    }
    else {
      return false;
    }
  }

  zoomToBounds(map, markerList) {
    const bounds: google.maps.LatLngBounds = new google.maps.LatLngBounds();
        
    for(const marker of markerList) {
      const position = marker.getPosition();

      if (this.validatePosition(position)) {
        bounds.extend(position);
      }
    }
    
    map.fitBounds(bounds);

    // If zoom level too high lower it to 17
    const listener = google.maps.event.addListener(map, "idle", function() {
      if (map.getZoom() > 17)
        map.setZoom(17);

      google.maps.event.removeListener(listener);
    });
  }
}

JavaScript:

export class WebsuiteMarker extends google.maps.Marker {
  private id: number;
  private name: string;
  private lat: number;
  private lng: number;

  constructor(map, marker) {
    const position = new google.maps.LatLng(marker.lat, marker.lng);   

    const icon = {
      url: '/assets/icons/round/none/1.png',
      size: new google.maps.Size(32, 32),
      scaledSize: new google.maps.Size(32, 32),
      anchor: new google.maps.Point(16, 16)
    };

    super({
      map: map, 
      position: position, 
      icon: icon, 
      title: marker.name
    });

    this.id = marker.id;
    this.name = marker.name;

    console.log(this);
  }
  
  public getId(): number {
    return this.id;
  }
  
  public getName(): string {
    return this.name;
  }
}

[Edwin88]

Ik kan je aanraden van je ouderwetse ideeën af te stappen en eens te kijken naar NgRx.

Angular is tegenwoordig meer gefocust op reactief functioneel programmeren, je _kan_ nog steeds jQuery achtige soep schrijven maar als je eenmaal met Observables en Redux achtige constructies aan de gang gaat wil je nooit meer terug. Trust me.

Ik heb ruim anderhalf jaar in AngularJS gewerkt, en nu een half jaar Angular 5+ met NgRx, en ik wou dat ik dat in het begin had gedaan.


Is dit een hobby project trouwens? In dat geval zeker nog even duiken in de moderne manier van scripten!