angular-google-maps.md

@@ -5,7 +5,7 @@ Google Maps API avaimen voi generoida alla olevan ohjeen mukaisesti
 
 https://developers.google.com/maps/documentation/javascript/get-api-key
 
-### Angular Google Maps
+# Angular Google Maps
 
 Overflowin MoTrak järjestelmässä käytettiin Angular Google Mapsia (lyh. AGM) paikantamaan apuvälineitä ulkotilassa. Koska teimme front endin angularilla (Angular 2 JS), me käytiimme Angular Google Mapsia erillisenä angular komponenttina.
 
@@ -28,6 +28,10 @@ Tuo app.config tiedosto importataan outdoor moduulin @NgModuleen
 
 Erillistä config tiedostoa ei ole pakko tehdä, seuraa vaihtoehtoisesti Angular Mapsin virallista getting started ohjetta.
 
+## Karttaelementin luonti
+
+
+
 ### Datan haku
 
 Markereiden data haetaan Telian cumulocity rajapinnasta. Front end tekee GraphQL kyselyn tietokannasta getDevices functiolla, joka sijaitsee device.servicessä
@@ -52,3 +56,11 @@ Data sijoitetaan agm-map.componentissa markers muuttujaan
 
 Markers taulukon arvot käydään läpi agm-marker elementissä *ngFor loopilla. agm-map.component.html
 ![Screenshot_from_2018-07-26_12-19-13](/uploads/714c59837266294b5766e79c4d69b822/Screenshot_from_2018-07-26_12-19-13.png)
+
+## Markereiden klusterointi
+
+Npm paketin asennus `npm i @agm/js-marker-clusterer`
+
+Importataan outdoor.module tiedostoon
+![Screenshot_from_2018-07-26_12-27-50](/uploads/41c0949460a4ab8ea7f8b69c13c6657e/Screenshot_from_2018-07-26_12-27-50.png)
+`<agm-map>` elementin sisään tehdään `<agm-marker-cluster>`elementti. `<agm-marker>` elementin tulee olla kokonaan `<agm-marker-clister>` elementin sisässä.
\ No newline at end of file