Hoe bouw je een applicatie omtrent bezienswaardigheden in de gemeente waarbij de toeristen de mogelijkheid hebben om een overzicht te bekomen van de bezienswaardigheden, maar waarbij ze eveneens kunnen nagaan welke bezienswaardigheden er in een bepaalde straal liggen en waarbij je je egien route kant uitzetten op kaart.

Met een Web AppBuilder kunt u zelf uw eigen app creëren: u kiest zelf hoe uw app eruit zal zien en welke widgets deze app zal hebben. Het schrijven van een code is niet nodig.

In dit voorbeeld, gaan we zelf een app samenstellen, waarbij

·       vanuit een bepaalde locatie of adres in Brussel:

o   bezienswaardigheden binnen een bepaalde buffer rond deze locatie of adres worden getoond op een kaart,

o   deze bezienswaardigheden worden opgesomd,

o   de beste weg tussen de locatie of adres en een bezienswaardigheid wordt weergegeven.

·       het mogelijk is om bezienswaardigheden te selecteren en een route tussen de locatie en een geselecteerd punt kan worden berekend.

·       door te klikken op een bezienswaardigheden krijg je alle informatie en heb je tevns de mogelijkheid om de route te berekenen.

1. Creëer een nieuwe app

De eerste stap is om van een bestaande web map een app te maken. In dit voorbeeld, vertrekken we van een bestaande web map, namelijk ‘toeristische bezienswaardigheden in Brussel’. Deze web map toont de bezienswaardigheden op een kaart en geeft per bezienswaardigheid een beschrijving, het adres en een foto van de bezienswaardigheid.

Ga naar uw ArcGIS Online subscription account en log in. Ga naar Content, klik op de gewenste web map en klik op Openen in Map Viewer.

In de Map Viewer, klik op klik Delen > Een Webapp maken. Klik Web AppBuilder. Vul een titel en labels in en kies de folder waar u de app op wilt slaan. Klik op Aan de slag.

U komt terecht op een nieuwe pagina van de Web AppBuilder.

Opmerking: een nieuwe app creëren kan ook vanuit Esri featured content > Apps-sectie van de Gallerij en AppsBuilders.

of start vanaf Mijn Content > Maken > De WebAppBuilder gebruiken.

2. Kies een thema

In de Web AppBuilder, kunt u de look-and-feel van uw app veranderen door een bepaald thema en een bepaalde kleur te kiezen. Elk thema bestaat uit een zelf te kiezen paneel, een stijl, een lay-out en vooraf geconfigureerde widgets. Aan de rechterkant van het scherm ziet u onmiddellijk hoe de app er met dat bepaald thema, stijl en layout eruit zal zien.

3. Selecteer een kaart

Selecteer een zelf aangemaakte kaart of kies een kaart uit uw organisatie. Als u de Web AppBuilder vanuit de Map Viewer hebt geopend, had u al op voorhand een kaart geselecteerd. Indien gewenst, kunt u hier een andere kaart kiezen.

Verder kunt u de begin-extent van de kaart selecteren bij het opstarten van de applicatie, de zichtbare kaartschaal aanpassen waarop de kaart kan in-of uitzoomen en een vernieuwingsinterval instellen.

4. Configureer widgets

Widgets zorgen voor de functionaliteit van de app. Elk thema heeft al een set op voorhand geconfigureerde widgets, die u eventueel kunt uitschakelen, en u kunt andere widgets aan toevoegen.

De widgets die in het voorbeeld zijn inbegrepen zijn onder andere het opvragen van attributentabel, de home-knop, de zoekfunctie en locatie opvragen.

De eerste drie functionaliteiten die wij bij onze app willen toevoegen, zijn:

·       bezienswaardigheden die binnen een bepaalde buffer van een locatie of ingegeven adres zien op een kaart,

·       een opsomming van deze bezienswaardigheden verkrijgen,

·       de beste weg tussen de locatie en een bezienswaardigheid weergeven.

De widget ‘Bij mij in de buurt’ is het meest geschikt hiervoor.

De andere gewenste functionaliteiten zijn:

·       het selecteren van bezienswaardigheden en het berekenen route tussen de locatie en een geselecteerd punt.

De widget ‘Selecteren’ gecombineerd met ‘Routebeschrijving zijn hiervoor aangewezen.

Tenslotte willen we wel pop-ups maar niet de achterliggende attributentabel tonen.

a) Verbergen van de attributentabel

Allereest gaan we de widget voor het tonen van de attributentabel uitschakelen. Hiervoor plaatsen we onze muis op deze widget en klikken we op het kleine oogicoon, die de widget weergeeft of verbergt.

b) Toevoegen en configureren van de widget ‘Bij mij in de buurt’

We klikken op Widget kiezen, waarna we een overzicht van de verschillende widgets krijgen. In dit overzicht klikken we op het icon ‘Bij mij in de …’ en opOK.

Vervolgens configureren we de widget door de velden onder de verschillende tabs in te vullen of te wijzigen.

Klik op OK.

c) Toevoegen en configureren van de widget ‘Selecteren’ en ‘Routebeschrijving’

We klikken opnieuw op Widget kiezen en kiezen‘Selecteren’, veranderen eventueel de instellingen en klikken op OK.

Vervolgens klikken we opnieuw op Widget kiezen, kiezen ‘Routebeschrijving’, configureren optioneel de attributen en klikken op OK.

5. Configureer attributen

Met de attributen, kunt u de app banner met een logo, titel, hyperlinks veranderen. Ook kunt u extra koppelingen, gegevensbronnen, … aan toe voegen.

In dit voorbeeld, willen we enkel een titel in onze applicatie en gaan we daarom het standaardlogo weglaten. We hoveren met de muis over het logo en klikken op Verwijderen.

Klik onderaan op Opslaan.  

Uw app is nu klaar voor gebruik.

Deel 2: Bekijk de app

U kunt de app zowel op uw desktop als op uw mobiel apparaat gebruiken.

1. Bekijk de app op een desktop

Om de app op een desktop te zien, klikt u op Openen onderaan de pagina. Een nieuwe webpagina opent zich.

We zien de widget Bij mij in de buurt, Selecteren en Routebeschrijving rechts bovenaan in banner

a) Voorbeeld ‘Bij mij in de buurt’-widget

Als voorbeeld van de ‘Bij mij in de buurt’-widget, gaan we op zoek naar toeristische bezienswaardigheden in een buffer van 2 kilometer rond Anspachlaan 100, Brussel. In de webbrowser, klikken we op de widget, vullen het adres in, zetten de bufferschuifbalkknop op 2 kilometer en drukken op enter.

De kaart zoomt automatisch in naar het ingegeven adres, toont de buffer op de kaart en de bezienswaardigheden, die binnen deze buffer vallen, worden opgesomd.

Als we dan op een bezienswaardigheid klikken, bijvoorbeeld Grote markt, krijgen we onder het tabblad Informatie depop-up informatie van deze bezienswaardigheid.

Klikken we op het tabblad Routebeschrijving, dan krijgen we de route op de kaart, de routebeschrijving van Anspachlaan 100 naar de Grote markt en de geschatte reistijd.

b) Voorbeeld ‘Selecteren’- en ‘Routebeschrijving’-widget

Nu willen we graag de informatie opvragen van enkele geselecteerde bezienswaardigheden.

We klikken eerst Selecteren, daarna trekken we een kader rond de bezienswaardigheden die wij willen selecteren. De geselecteerde bezienswaardigheden zijn nu gehighlight.

Als we dan op het tabblad klikken, krijgen we een drop-down menu met verschillende acties. 

Klikken we dan op ‘Bezienswaardigheden’, dan krijgen we een overzicht van de selectie

Als we daarna bijvoorbeeld op Justitiepaleis klikken, komt de pop-up tevoorschijn en kunnen we onder andere een routebeschrijving opvragen.  

We klikken hier op Routebeschrijving naar dit punt. De widget Routebeschrijving opent automatisch. We vullen de velden in en, via een drop-down menu, krijgen we een keuze uit verschillende vervoersmiddelen, zoals reistijd met de auto, te voet.