Maak aangepaste kaarten in mobiele apps

In een eerdere post beschreven we hoe u kaarten kunt integreren in mobiele apps die op verschillende platforms werken, en die gebruikmaken van de standaard kaartapplicatie van elk apparaat. Onze voorbeeld-app genereerde een kaart met markeringen die de belangrijkste luchthavens in de Verenigde Staten aangeven. Illustraties toonden kaarten die door dezelfde app werden gegenereerd op een Android-telefoon, een iPhone en een Windows-desktop.

Wat als een lijst van locaties die in kaart moeten worden gebracht niet van tevoren bekend is, maar wordt gegenereerd op basis van de activiteit van de gebruiker tijdens de uitvoering? MobileTogether, het low-code platform voor cross-platform mobiele ontwikkeling van Altova, stelt ontwikkelaars ook in staat om op aanvraag aangepaste kaarten te maken in mobiele apps, gebaseerd op een lijst met geografische locaties die tijdens de uitvoering worden gegenereerd.

Hier is een weergave van een venster in een mobiele app dat een RESTful API-verzoek uitvoert om een lijst met locaties in de buurt op te halen, op basis van een door de gebruiker ingevoerde zoekterm.

Als u een bedrijf bent dat op zoek is naar een locatie om een nieuw datacenter te bouwen, zou een kaart een zeer nuttige toevoeging zijn aan de resultatenlijst.

Zoals we in de app "Airport Status" hebben gezien, die we eerder hebben gepresenteerd, bevat de MobileTogether kaartcomponent eigenschappen die markers definiëren, een weergavevenster voor de kaart en acties die moeten worden uitgevoerd wanneer de gebruiker op een markering op de kaart klikt.

In de app "Airport Status" was de volledige lijst met markeringen voor grote luchthavens vastgecodeerd in het venster voor de XPath/XQuery-editor, specifiek voor de eigenschap "Markeringen"

Een XQuery-expressie om markeringen op een kaart te creëren

De markeringen hoeven niet hardgecodeerd te zijn. In plaats daarvan kan de volledige lijst met markeringen voor aangepaste kaarten in mobiele apps worden opgebouwd met een XQuery-expressie. Om aangepaste kaarten in mobiele apps te maken, hebben we een XQuery FLWOR-expressie (For-Let-Where-Order-Return) nodig, gebaseerd op de resultaten van de REST-zoekopdracht.

De let, where en order parameters in FLWOR-expressies zijn optioneel, en we hebben ze niet nodig voor onze lijst met markeringen. We hebben alleen For en Return nodig om de lijst met locaties te verwerken die door de REST-aanvraag wordt geretourneerd:

Een XQuery-expressie kan moeilijk te construeren zijn, zelfs zonder de parameters "let", "where" en "order". Hier komt het gedeelte "Evaluator" van het XQuery-expressievenster van pas. Door op de knop "Evaluator" te klikken, kunt u de expressie testen terwijl u eraan werkt.

Als de formule een fout bevat, mislukt de berekening en wordt de fout beschreven in het resultatenvenster.

We hebben het venster voor XQuery-expressies geopend in de MobileTogether Designer terwijl de simulator de applicatie die in ontwikkeling was, uitvoerde. Eerst hebben we de simulator gebruikt om een tekstzoekopdracht uit te voeren, waardoor we toegang kregen tot actuele gegevens van de REST-query voor "windenergie" binnen een straal van 160 kilometer rond Amarillo, Texas. Let op dat de naam "Cielo Wind Power LLC" in de zoekresultaten, die op de linkeronderkant van de schermopname hierboven worden weergegeven, wordt gebruikt om het tekstelement voor markering 1 te genereren, zoals te zien is in de resultaten van de Evaluator aan de rechterkant.

Zodra we tevreden zijn met de werkende formule, slepen we eenvoudig een nieuwe kaartcomponent voor geolocatie naar de zoekresultaatpagina. Vervolgens kopiëren we de formule en plakken we deze in het veld "Markeringen". Hieronder een weergave van de pagina met de kaart in de MobileTogether Designer:

We kunnen nu de overige eigenschappen van de kaart instellen om deze optimaal aan te passen aan onze applicatie. We hebben gekozen voor een kaarttype met straatweergave en zoomfuncties. Andere beschikbare kaarttypen zijn een satellietkaart of een hybride kaart die satellietbeelden en straatinformatie combineert. Het veld "Viewport" is leeg, omdat MobileTogether automatisch de weergave instelt om alle markeringen op de kaart weer te geven, zoals gedefinieerd tijdens runtime door de XQuery-expressie. We hebben ook een XQuery-expressie gebruikt om de zichtbaarheid alleen in te stellen wanneer het aantal resultaten van de REST-aanvraag groter is dan nul.

Hieronder een afbeelding van het hulpmiddelvenster voor kaartinstellingen:

De instellingen voor de breedte en hoogte van het controlevenster stellen MobileTogether in staat om automatisch de grootte van de kaart aan te passen voor elk mobiel apparaat.

We willen de gebruiker meer informatie over een locatie tonen wanneer op een markering wordt geklikt. Dit wordt gedefinieerd in de eigenschap "Actie". De knop met de drie puntjes voor "Actie" opent een dialoogvenster waarin de ontwikkelaar meerdere acties kan definiëren:

Onze app gebruikt de MobileTogether-extensiefuncties om informatie over de aangeklikte markering te verzamelen, waarna een subpagina wordt geopend om details over die locatie weer te geven.

Hieronder ziet u de resultatenpagina van de app, zoals deze wordt weergegeven op een iPhone, en de subpagina die verschijnt nadat de gebruiker op een markering heeft geklikt op een Android-telefoon:

De knop met de tekst "Productiedata bekijken" op de subpagina "Resultaatdetails" kan een database raadplegen om historische gegevens over de energieopwekking van het geselecteerde windpark weer te geven.

Ontdek zelf hoe eenvoudig het is om aangepaste kaarten te maken in mobiele apps. Download de gratis te gebruiken MobileTogether Designer, die online hulp en voorbeeld-apps bevat.

Ontdek andere apps die zijn gemaakt met MobileTogether en bekijk video-demonstraties op: https://www.altova.com/mobiletogether/demos