VueJS, Google Maps & meer

9 maanden geleden • 4 minuten lezen

Anno 2019 is Google Maps zowat dé standaard geworden om met locaties, afstanden, heatmaps en meer te werken. Het is dan niet al te gek dat ik dan ook voor Google Maps koos om met kaarten en locaties te gaan werken.

Google – heatmaps | Maps JavaScript API

Heatmaps

Eén van de eerste features waar ik met heb leren werken uit de grote Google Maps APIs zijn heatmaps. Per definitie is een heatmap een geografische weergave waar individuele data gegroepeerd wordt van warm (rood) naar koud (groen).

Kortweg dus de ideale manier om activiteit op een simpele, maar duidelijke manier te visualiseren op een kaart!

Waar is OOP?

Toen ik in de documentatie dook zag ik echter helaas – tegen mijn verwachtingen in – een groot nadeel: de Google Maps API bleek niet object-georiënteerd te zijn!

Om dit op te lossen, ben ik begonnen met de sample code van Google te ontrafelen en deze daarna te vertalen naar een component binnen VueJS. Door de procedurele code van Google Maps te laten samenvloeien met de lifecycle van components in VueJS, kreeg ik al snel een goede oplossing om verschillende kaarten dynamisch te loopen!

In-depth component!

Nu ik een VueJS Google Maps component had, werd het tijd om de component syntax volledig te benutten. De applicatie moest natuurlijk real-time data tonen, ipv de sample data van Google!

Hiervoor heb ik als eerst props toegevoegd. Hiervoor heb ik geleerd om te werken met default values en prop-validatie. Zo kon ik placeholders toevoegen om coördinaten op te vangen, die dan de real-time data konden opvangen en doorgeven aan de Google API.

props: {
    long: {},
    lat: {},
    coordinates: {
         default: function() { return [] },
         type: Array
    }
}

En met een call naar mijn API services uit de eerste weken, werden er direct heatmaps getekend over de straten van Antwerpen met de Google Maps API! Handig!

Dynamische markers

Met de Google Maps API kan je eenvoudig markers toevoegen. Een interessante vervolgstap hierop is het verwerken van echte data met markers op de API van Google.

Om niet vanaf nul te beginnen, kon ik verdergaan waar ik was begonnen met de heatmap component. Hiervoor voegde ik nieuwe props toe, waarmee ik aan-uit filters kon bouwen via het type boolean.

heatmaps: {
    default: false,
    type: Boolean
},

Dit maakte het mogelijk voor mij om uiteindelijk simpelweg dezelfde component herhaaldelijk op te roepen. Door consistent een lijst van coördinaten door te geven, werd het technisch mogelijk om in een oogwenk kernwoorden aan de code toe te voegen, en zo bv. direct een heatmaps-kaart tevoorschijn toveren of kaart met dynamische markers.

Autocompletion Places API

Ook nog een leuk en interessant onderdeel van de Google Maps of Places API is de autocompletion-feature. Hiermee kan je een map tekenen in een webpagina, waarbij je in een zoekveld live kan zoeken naar locaties wereldwijd.

Toen ik aan deze feature begon besliste ik om een nieuwe component te starten. Zo creëerde ik twee grote blokken die hergebruikt konden worden: de eerste was om data te visualiseren, de tweede om dynamische handelingen uit te voeren met de Google services.

Autocompletion demo – teksten en velden zijn aangepast!

Zo kon ik met mijn nieuwe kennis over de Google Places API vrij snel een autocompletion feature uitbouwen, in een component die makkelijk geloopt kon worden op dezelfde pagina, door simpelweg een paar attributen aan te passen in de front-end.

Charting met VueJS

Nadat ik vorige week alles leerde over het ophalen van statistieken met Eloquent, was het tijd om deze te visualiseren in grafieken! Hiervoor heb ik net zoals ik een OOP-vertaling maakte van de Google Maps API, werd het tijd om ChartJS in een Vue jasje te stoppen!

ChartJS Vue demo – titels en labels aangepast voor geheimhouding applicatie!

En na het afwerken van de ChartJS components, werd het weer mogelijk om verschillende grafiekvormen eenvoudig te renderen, door simpelweg enkel de gewenste data mee te geven!

Wordt vervolgd!

Deze blog was nog maar een een klein onderdeel van mijn JavaScript-avonturen van de afgelopen weken! In mijn volgende blogs zal ik meer schrijven over localization in Laravel, en de stap naar de eerste prototypes van de mobiele app in React Native, gelinkt aan dezelfde Laravel API services. Tot dan!