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 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.
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.
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 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.
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.
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.
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
Ontdek zelf hoe eenvoudig het is om kaarten in mobiele apps te integreren. Download de gratis te gebruiken MobileTogether Designer, die online hulp en voorbeeld-apps bevat. U kunt ook onze Airport Status app op GitHub 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