--- title: "Integreer kaarten in mobiele apps" date: "2019-07-17" categories: - "app-development" - "mobile" - "mobile-development" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "web-services" description: Het is eenvoudig om kaarten te integreren in mobiele apps met behulp van MobileTogether, dat aangepaste geolocatiefuncties en interactieve markeringen biedt voor een verbeterde gebruikerservaring. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #web-services Categories: [mobile-development](/blog/nl/category/mobile-development.md) | [mobile-development](/blog/nl/category/mobile-development.md) | [mobile-development](/blog/nl/category/mobile-development.md) # Integreer kaarten in mobiele apps Ontwikkelaars kunnen zeer op maat gemaakte, locatiegebaseerde apps maken door gebruik te maken van de locatiebepalingsfunctionaliteit in mobiele apparaten. Nu ondersteunt MobileTogether, het [platformonafhankelijke, low-code ontwikkeltool](https://www.altova.com/nl/mobiletogether) van Altova, diepe integratie van kaarten in applicaties voor alle populaire mobiele platforms. Ontwikkelaars kunnen kaarten integreren in mobiele apps, speciale markeringen toevoegen en aangepaste acties definiëren op basis van gebruikersklikken op de kaart. Bijvoorbeeld, een bedrijf kan een app willen die een kaart van alle vestigingslocaties bevat, en vervolgens de huidige voorraad weergeven wanneer een vestiging wordt aangeklikt. In een eerdere post beschreven we een mobiele app die gebruikers in staat stelt om de status van grote Amerikaanse luchthavens te controleren door een luchthavencode te selecteren uit een keuzelijst. Een alternatieve techniek zou zijn om de 47 opties in de keuzelijst te vervangen door markeringen op een kaart. Laten we dit voorbeeld eens bekijken. ![](/blog/images/airport_700x335.jpg) De onderstaande screenshots tonen de nieuwe Airport Status-app, die draait op een Android-telefoon, een iPhone en als een applicatie voor Windows op een desktopcomputer. [![Integreer kaarten in mobiele apps, met ondersteuning voor verschillende platforms](/blog/images/cross-platform-view.png)](cross-platform-view.png) Op elk apparaat wordt de kaart gegenereerd met behulp van de standaard, ingebouwde kaartapplicatie van dat apparaat. Gebruikers zullen automatisch de vertrouwde stijl en lay-out op elk platform zien. Als de kaart bepaalde statusinformatie naar de onderkant van het scherm duwt, is deze zichtbaar door verticaal te scrollen [![Integreer kaarten in mobiele apps met verticale scrollbalken, zodat gebruikers de volledige informatie kunnen bekijken](/blog/images/scroll-view-android.png)](scroll-view-android.png) Integreer kaarten in mobiele apps door de kaartcomponent met de visuele lay-outfunctionaliteit van MobileTogether Designer naar de app te slepen. U kunt de eigenschappen van elke kaart aanpassen. De onderstaande screenshot toont een deel van onze hoofdpagina "Airport Status" met het hulpmiddelvenster voor de kaarteigenschappen aan de rechterkant. [![Integreer kaarten in mobiele apps met behulp van het visuele ontwerp-tool MobileTogether Designer](/blog/images/design-view.png)](design-view.png) De beschikbare kaarttypen zijn straatweergave, satellietweergave of een combinatie van beide. Naast de optionele zoomfuncties ondersteunen alle touchscreens het scrollen van de kaart met één vinger en de bekende "pinch-to-zoom"-beweging met twee vingers om in of uit te zoomen. Het gebied dat op de kaart wordt weergegeven, is gebaseerd op een lijst van één of meerdere markeringen, die gedefinieerd zijn met behulp van de expressie `mt-geo-map-marker`. Elke markering bevat een ID, een titel en een tekstveld. Deze waarden kunnen worden opgehaald wanneer op de markering wordt geklikt. [![Integreer kaarten in mobiele apps met aangepaste kaartmarkeringen](/blog/images/map-markers.png)](map-markers.png) De kleuren van de markeringen kunnen standaardnamen zijn, zoals rood, groen en blauw, of ze kunnen worden gespecificeerd met behulp van aangepaste kleurencodes, zoals we hierboven hebben gedaan. De eigenschap "Viewport" definieert het totale gebied dat in kaart gebracht moet worden, door de coördinaten van de linker bovenhoek en de rechter onderhoek van de kaart in te stellen. Als deze eigenschap leeg wordt gelaten, omvat de standaard "Viewport" alle gedefinieerde markeringen plus een kleine marge. We hebben een "Viewport"-definitie gemaakt met initiële waarden voor een groot deel van Noord-Amerika. [![Een expressie voor de weergave die het zoomniveau van de kaart instelt](/blog/images/viewport-expression.png)](viewport-expression.png) De eigenschap "Actie bij klik" bepaalt wat er gebeurt wanneer de gebruiker op een van de markeringen op de kaart klikt. Onze app leest de titel van de markering, die een luchthavencode van drie letters is, gebruikt die code om de status van de luchthaven op te halen van de FAA-webservice en werkt de weergave bij. Onze app berekent nieuwe weergavecoördinaten om in te zoomen op de locatie van het geselecteerde vliegveld [![Aangepaste zoomniveau, gebaseerd op de viewport-expressie](/blog/images/map_zoom-541x1030.png)](map_zoom.png) Ontdek zelf hoe eenvoudig het is om kaarten in mobiele apps te integreren. Download de [gratis te gebruiken MobileTogether Designer](https://www.altova.com/nl/mobiletogether/download), die online hulp en voorbeeld-apps bevat. U kunt ook onze [Airport Status app op GitHub](https://github.com/altova/MobileTogether-more-examples/tree/master/Web%20Services) downloaden en deze direct in de Designer uitvoeren, of als een proefversie op uw eigen mobiele apparaat. Ontdek andere apps die zijn gemaakt met MobileTogether en bekijk video-demonstraties op: [https://www.altova.com/mobiletogether/demos](https://www.altova.com/nl/mobiletogether/demos)