CONTACT
Tekst: Maartje Holtslag. Beeld: Esri Nederland
Webdesign is een cruciaal onderdeel van elke moderne webapplicatie. Het bepaalt hoe intuïtief de interface aanvoelt, hoe herkenbaar de stijl is en hoe toegankelijk de applicatie is voor verschillende gebruikers. Een goed ontwerp draagt bij aan betrouwbaarheid, consistentie en gebruikersgemak; elementen die essentieel zijn voor zowel publieke als interne toepassingen. Denk hierbij aan duidelijke navigatie, visuele hiërarchie en het gebruik van kleuren en typografie die aansluiten bij de huisstijl van jouw organisatie.
Met het Calcite Design System en de ArcGIS Maps SDK for JavaScript components heb je als ArcGIS-gebruiker krachtige tools in handen om snel, toegankelijke en visueel consistente webapplicaties te bouwen. Of je nu gebruik maakt van een van de configureerbare oplossingen of een eigen applicatie ontwikkelt, deze componenten helpen je om gebruiksvriendelijke interfaces te realiseren die aansluiten bij de herkenbare stijl van ArcGIS.
Wil je zelf aan de slag? Bekijk de documentatie op developers.arcgis.com/calcite-design-system of probeer een van de components in je eigen applicatie.
Handige webpagina’s
Aan de slag
Design tokens zijn gestandaardiseerde variabelen die ontwerpkeuzes, zoals kleur en lettertype, vastleggen in code. In plaats van deze waarden handmatig in CSS of JavaScript te definiëren gebruik je tokens zoals –calcite-color-brand of –calcite-font-size-1. Dit zorgt voor consistentie binnen je applicatie en maakt het eenvoudig om wijzigingen centraal door te voeren.
Pas bijvoorbeeld snel de kleurstelling van je eerder gemaakte
app aan door een aanpassing van de brand-kleur.
Design tokens en je eigen huisstijl
Bouwen met components
Tot slot kun je met een event listener de Feature component openen op het moment dat een gebruiker op een object in de kaart klikt.
Breid de applicatie vervolgens uit met meer GIS-functionaliteit door de <arcgis-features> component toe te voegen aan het <calcite-shell-panel>. Deze component geeft gebruikers de mogelijkheid om de popup van geselecteerde features te bekijken, de reference-element property kan gebruikt worden om deze component met een kaart op een ander deel van de webpagina te laten communiceren.
Web components zijn een moderne, native browserstandaard en bieden browser- en frameworkonafhankelijke, doelgerichte, configureerbare elementen met ingebouwde functionaliteit, die je als HTML-element in je code kunt gebruiken. Deze elementen bevatten hun eigen structuur, die apart in de browser wordt geladen, waardoor het niet conflicteert met de rest van je code.
Calcite is een verzameling van ontwerp- en ontwikkelmiddelen voor het maken van stijlvolle, gebruiksvriendelijke en consistente webapplicaties met minimale inspanning. Het bevat een User Interface (UI) kit zoals: iconen, kleurenschema’s en een web component library met algemene UI-elementen zoals buttons, panelen, accordeons en vele andere. Voor ontwerpers is er ook een Figma library beschikbaar waar je je applicatie Calcite kan ontwerpen.
Of je nu kiest voor een configureerbare oplossing of voor maatwerk, Calcite helpt je samen met de JavaScript SDK Components om een consistente en toegankelijke gebruikersinterface te realiseren. Bouw jouw eigen applicatie met dezelfde bouwstenen als Esri zelf, profiteer van bewezen workflows, visuele herkenbaarheid en een efficiënter ontwikkelproces.
In de meeste gevallen is een configureerbare oplossing voldoende, maar als je specifieke interacties, complexe logica of integratie met externe systemen nodig hebt, is maatwerk de beste optie. Met de ArcGIS Maps SDK for JavaScript (hierna JavaScript SDK) kun je applicaties ontwikkelen die volledig zijn afgestemd op jouw functionele en technische eisen. Dit vraagt om meer ontwikkelkennis, maar geeft maximale controle over gedrag, performance en gebruikerservaring.
Met applicaties als ArcGIS Instant Apps, ArcGIS Dashboards en ArcGIS Experience Builder klik je op het scherm snel een applicatie samen. Deze oplossingen bieden een groot aantal kant-en-klare templates en widgets, waarmee je interactieve kaarten, dashboards en webpagina’s kunt configureren. Ze zijn ideaal voor veelvoorkomende use cases zoals datavisualisatie, rapportage of burgerparticipatie. Bovendien ondersteunen ze toegankelijkheid, responsief design en styling volgens je eigen huisstijl.
ArcGIS ondersteunt in het bieden van deze consistente gebruikerservaring met behulp van het Calcite Design System (hierna Calcite). Dit design system vormt de visuele en technische basis van bekende applicaties zoals ArcGIS Map Viewer, ArcGIS Instant Apps en ArcGIS Experience Builder. Het is niet beperkt tot standaard Esri-producten: ontwikkelaars kunnen Calcite ook inzetten voor het ontwerpen van hun eigen webapplicaties. Door gebruik te maken van gestandaardiseerde componenten en design mogelijkheden wordt het eenvoudiger om snel, toegankelijk en visueel consistent te bouwen.
De JavaScript SDK components zijn gespecialiseerde componenten die specifiek gericht zijn op GIS-functionaliteit. Deze componenten zijn onderdeel van de bredere JavaScript SDK en vervangen geleidelijk de traditionele widget-architectuur. Ze zijn ontworpen om eenvoudig te integreren in moderne webapplicaties en zijn intern opgebouwd met behulp van de Calcite components.
Door beide component-sets te combineren kun je een applicatie bouwen waarin gebruikerservaring en kaartfunctionaliteit perfect op elkaar aansluiten. Je gebruikt Calcite voor de algemene UI en de JavaScript SDK components voor de kaartinteracties. Ontdek hieronder hoe je deze bouwstenen in de praktijk toepast.
Op dit moment toont de applicatie een interactieve kaart met een zoom-button. De interface kan nu verder opgebouwd worden met behulp van de Calcite Components.
Het <calcite-shell> element kan gebruikt worden om andere componenten te organiseren op een pagina met behulp van slots. Slots bieden placeholders binnen components waaraan je content kunt toevoegen door naar de naam van het slot te verwijzen. Aan deze slots kun je andere Calcite elementen toevoegen. Deze slots zijn met CSS al correct gepositioneerd zodat je hiermee ontzorgd wordt.
Je breidt deze kaart eenvoudig uit met meer functionaliteit door extra components toe te voegen, zoals de mogelijkheid om de kaart in en uit te zoomen.
Vervolgens kun je het <arcgis-map> element gebruiken om met slechts één regel code een webmap tonen:
Volg de stappen om Calcite en de JavaScript SDK components in de praktijk toe te passen aan de hand van een eenvoudige webapplicatie, gebaseerd op dit voorbeeld.
Om gebruik te kunnen maken van Calcite en de Javascript SDK kun je naar beide refereren in het <head> element van je HTML-pagina.
Meer informatie
Wil je met mij of een collega in gesprek?
Neem dan contact op.
Voorbeeld van een Calcite web component waarin een waarschuwingsbericht (alert) wordt getoond
Werken met web components
Het kiezen van een app
als fundament voor het ontwikkelen van moderne GIS-apps
Het resultaat met aangepast design
Het resultaat met ‘standaard’ design
Met het Calcite Design System en de ArcGIS Maps SDK for JavaScript components heb je als ArcGIS-gebruiker krachtige tools in handen om snel, toegankelijke en visueel consistente webapplicaties te bouwen. Of je nu gebruik maakt van een van de configureerbare oplossingen of een eigen applicatie ontwikkelt, deze componenten helpen je om gebruiksvriendelijke interfaces te realiseren die aansluiten bij de herkenbare stijl van ArcGIS.
Wil je zelf aan de slag? Bekijk de documentatie op developers.arcgis.com/calcite-design-system of probeer een van de components in je eigen applicatie.
Aan de slag
Het resultaat met aangepast design
Het resultaat met ‘standaard’ design
In de meeste gevallen is een configureerbare oplossing voldoende, maar als je specifieke interacties, complexe logica of integratie met externe systemen nodig hebt, is maatwerk de beste optie. Met de ArcGIS Maps SDK for JavaScript (hierna JavaScript SDK) kun je applicaties ontwikkelen die volledig zijn afgestemd op jouw functionele en technische eisen. Dit vraagt om meer ontwikkelkennis, maar geeft maximale controle over gedrag, performance en gebruikerservaring.
Met applicaties als ArcGIS Instant Apps, ArcGIS Dashboards en ArcGIS Experience Builder klik je op het scherm snel een applicatie samen. Deze oplossingen bieden een groot aantal kant-en-klare templates en widgets, waarmee je interactieve kaarten, dashboards en webpagina’s kunt configureren. Ze zijn ideaal voor veelvoorkomende use cases zoals datavisualisatie, rapportage of burgerparticipatie. Bovendien ondersteunen ze toegankelijkheid, responsief design en styling volgens je eigen huisstijl.
Het kiezen van een app
als fundament voor
het ontwikkelen van
moderne GIS-apps
CONTACT
Meer informatie
Wil je met mij of een collega in gesprek?
Neem dan contact op.
ArcGIS ondersteunt in het bieden van deze consistente gebruikerservaring met behulp van het Calcite Design System (hierna Calcite). Dit design system vormt de visuele en technische basis van bekende applicaties zoals ArcGIS Map Viewer, ArcGIS Instant Apps en ArcGIS Experience Builder. Het is niet beperkt tot standaard Esri-producten: ontwikkelaars kunnen Calcite ook inzetten voor het ontwerpen van hun eigen webapplicaties. Door gebruik te maken van gestandaardiseerde componenten en design mogelijkheden wordt het eenvoudiger om snel, toegankelijk en visueel consistent te bouwen.
Bouwen met components
Web components zijn een moderne, native browserstandaard en bieden browser- en frameworkonafhankelijke, doelgerichte, configureerbare elementen met ingebouwde functionaliteit, die je als HTML-element in je code kunt gebruiken. Deze elementen bevatten hun eigen structuur, die apart in de browser wordt geladen, waardoor het niet conflicteert met de rest van je code.
Calcite is een verzameling van ontwerp- en ontwikkelmiddelen voor het maken van stijlvolle, gebruiksvriendelijke en consistente webapplicaties met minimale inspanning. Het bevat een User Interface (UI) kit zoals: iconen, kleurenschema’s en een web component library met algemene UI-elementen zoals buttons, panelen, accordeons en vele andere. Voor ontwerpers is er ook een Figma library beschikbaar waar je je applicatie Calcite kan ontwerpen.
Of je nu kiest voor een configureerbare oplossing of voor maatwerk, Calcite helpt je samen met de JavaScript SDK Components om een consistente en toegankelijke gebruikersinterface te realiseren. Bouw jouw eigen applicatie met dezelfde bouwstenen als Esri zelf, profiteer van bewezen workflows, visuele herkenbaarheid en een efficiënter ontwikkelproces.
Weet wanneer feature templates niet meer synchroon zijn en werk ze vervolgens bij
De JavaScript SDK components zijn gespecialiseerde componenten die specifiek gericht zijn op GIS-functionaliteit. Deze componenten zijn onderdeel van de bredere JavaScript SDK en vervangen geleidelijk de traditionele widget-architectuur. Ze zijn ontworpen om eenvoudig te integreren in moderne webapplicaties en zijn intern opgebouwd met behulp van de Calcite components.
Door beide component-sets te combineren kun je een applicatie bouwen waarin gebruikerservaring en kaartfunctionaliteit perfect op elkaar aansluiten. Je gebruikt Calcite voor de algemene UI en de JavaScript SDK components voor de kaartinteracties. Ontdek hieronder hoe je deze bouwstenen in de praktijk toepast.
Vervolgens kun je het <arcgis-map> element gebruiken om met slechts één regel code een webmap tonen:
Breid de applicatie vervolgens uit met meer GIS-functionaliteit door de <arcgis-features> component toe te voegen aan het <calcite-shell-panel>. Deze component geeft gebruikers de mogelijkheid om de popup van geselecteerde features te bekijken, de reference-element property kan gebruikt worden om deze component met een kaart op een ander deel van de webpagina te laten communiceren.
Op dit moment toont de applicatie een interactieve kaart met een zoom-button. De interface kan nu verder opgebouwd worden met behulp van de Calcite Components.
Het <calcite-shell> element kan gebruikt worden om andere componenten te organiseren op een pagina met behulp van slots. Slots bieden placeholders binnen components waaraan je content kunt toevoegen door naar de naam van het slot te verwijzen. Aan deze slots kun je andere Calcite elementen toevoegen. Deze slots zijn met CSS al correct gepositioneerd zodat je hiermee ontzorgd wordt.
Je breidt deze kaart eenvoudig uit met meer functionaliteit door extra components toe te voegen, zoals de mogelijkheid om de kaart in en uit te zoomen.
Volg de stappen om Calcite en de JavaScript SDK components in de praktijk toe te passen aan de hand van een eenvoudige webapplicatie, gebaseerd op dit voorbeeld.
Om gebruik te kunnen maken van Calcite en de Javascript SDK kun je naar beide refereren in het <head> element van je HTML-pagina.
Werken met web components
Webdesign is een cruciaal onderdeel van elke moderne webapplicatie. Het bepaalt hoe intuïtief de interface aanvoelt, hoe herkenbaar de stijl is en hoe toegankelijk de applicatie is voor verschillende gebruikers. Een goed ontwerp draagt bij aan betrouwbaarheid, consistentie en gebruikersgemak; elementen die essentieel zijn voor zowel publieke als interne toepassingen. Denk hierbij aan duidelijke navigatie, visuele hiërarchie en het gebruik van kleuren en typografie die aansluiten bij de huisstijl van jouw organisatie.
Tekst: Maartje Holtslag. Beeld: Esri Nederland
Design tokens en je eigen huisstijl
Design tokens zijn gestandaardiseerde variabelen die ontwerpkeuzes, zoals kleur en lettertype, vastleggen in code. In plaats van deze waarden handmatig in CSS of JavaScript te definiëren gebruik je tokens zoals –calcite-color-brand of –calcite-font-size-1. Dit zorgt voor consistentie binnen je applicatie en maakt het eenvoudig om wijzigingen centraal door te voeren.
Pas bijvoorbeeld snel de kleurstelling van je eerder gemaakte app aan door een aanpassing van de brand-kleur.
Tot slot kun je met een event listener de Feature component openen op het moment dat een gebruiker op een object in de kaart klikt.
Handige webpagina’s