Skip to content

Changes

Page history
Update angular google maps authored by Timo Heinonen's avatar Timo Heinonen
Hide whitespace changes
Inline Side-by-side
angular-google-maps.md
View page @ d85dc753
Tässä dokumentissa selostetaan Google maps- rajapinnan käyttö ja mahdollinen implementaatio Angular-komponentissa. Tässä dokumentissa selostetaan Google maps- rajapinnan käyttö ja mahdollinen implementaatio Angular-komponentissa. Frontendin koodi löytyy osoitteesta https://gitlab.labranet.jamk.fi/OverFlow/Frontend/tree/staging/src
### Google Maps API-avain ### Google Maps API-avain
Google Maps API avaimen voi generoida alla olevan ohjeen mukaisesti Google Maps API avaimen voi generoida alla olevan ohjeen mukaisesti
...@@ -7,24 +7,34 @@ https://developers.google.com/maps/documentation/javascript/get-api-key ...@@ -7,24 +7,34 @@ 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. 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.
Yksinkertaisempi asennus sivulla https://angular-maps.com/guides/getting-started/ Yksinkertaisempi asennus sivulla https://angular-maps.com/guides/getting-started/
Meidän toteuksessa on outdoor moduuli, jonka lapsena on agm-maps komponentti. Markereiden data haettiin Teilan cumulocity rajapinnasta erillisessä servicessä (device.service). Meidän toteuksessa on outdoor moduuli, jonka lapsena on agm-maps komponentti. Markereiden data haettiin Teilan cumulocity rajapinnasta erillisessä servicessä (device.service).
![apua](/uploads/4545215bf421d1aae972557148e33543/apua.png) ![apua](/uploads/4545215bf421d1aae972557148e33543/apua.png)
Projektin rakenne Projektin rakenne
AGM npm paketti asennetaan komennolla `npm install @agm/core --save` AGM npm paketti asennetaan komennolla `npm install @agm/core --save`
Käytimme erillistä config tiedostoa(app.config.ts) hallinnoimaan API avainta sekä backendin API endpointtia (jälkimmäinen ei liity tähän aiheeseen). Käytimme erillistä config tiedostoa(app.config.ts) hallinnoimaan API avainta sekä backendin API endpointtia (jälkimmäinen ei liity tähän aiheeseen).
![Screenshot_from_2018-07-26_10-09-27](/uploads/c02cca251f61aa8f147f6baf0558d538/Screenshot_from_2018-07-26_10-09-27.png) ![Screenshot_from_2018-07-26_10-09-27](/uploads/c02cca251f61aa8f147f6baf0558d538/Screenshot_from_2018-07-26_10-09-27.png)
Tuo app.config tiedosto importataan outdoor moduulin @NgModuleen Tuo app.config tiedosto importataan outdoor moduulin @NgModuleen
![apuu2](/uploads/19d32b8f5c38383ff7e9810e38a0b918/apuu2.png) ![apuu2](/uploads/19d32b8f5c38383ff7e9810e38a0b918/apuu2.png)
![Screenshot_from_2018-07-26_10-13-14](/uploads/d1ff5a8d8aa5e5168056c55cc7871da0/Screenshot_from_2018-07-26_10-13-14.png) ![Screenshot_from_2018-07-26_10-13-14](/uploads/d1ff5a8d8aa5e5168056c55cc7871da0/Screenshot_from_2018-07-26_10-13-14.png)
Erillistä config tiedostoa ei ole pakko tehdä, seuraa sen sijaan Angular Mapsin virallista getting started ohjetta.
Erillistä config tiedostoa ei ole pakko tehdä, seuraa vaihtoehtoisesti Angular Mapsin virallista getting started ohjetta.
### Datan haku
Markereiden data haetaan Telian cumulocity rajapinnasta. Front end tekee GraphQL kyselyn tietokannasta getDevices functiolla, joka sijaitsee device.servicessä
![Screenshot_from_2018-07-26_10-21-50](/uploads/b7606556437467b3a2b1794fb1ccbb65/Screenshot_from_2018-07-26_10-21-50.png)
Device service importataan outdoor.moduleen
![Screenshot_from_2018-07-26_10-27-19](/uploads/c3c7f005cf696fcdbd635620834f449f/Screenshot_from_2018-07-26_10-27-19.png)
... ...
......