Het element <geolocation> Experimenteel

Attributen

Dit element bevat de globale attributen.

Beschrijving

Het <geolocation>-element biedt een declaratieve, door de browser gedefinieerde bediening voor het delen van locatiegegevens. In Chrome heeft de knop bijvoorbeeld een "kaartspeld"-pictogram en intuïtieve tekst ("Locatie gebruiken" in Nederlandstalige inhoud).

Het maakt ook intuïtief beheer van gebruikersrechten mogelijk. In Chrome kan de gebruiker bijvoorbeeld, als hij eerder toestemming voor toegang tot locatiegegevens heeft geweigerd, of het toestemmingsvenster heeft gesloten zonder een keuze te maken, gewoon opnieuw op de knop drukken om zijn keuze bij te werken. In gevallen waarin hij eerder toestemming heeft geweigerd, informeren latere vensters hem dat hij eerder niet toestond dat locatiegegevens werden gedeeld, en wordt hem gevraagd of hij dit wil blijven weigeren of alsnog wil toestaan.

Een belangrijk aspect van het <geolocation>-element is dat het de bewuste keuze van de gebruiker weerspiegelt, en mogelijk gebruik blokkeert dat de gebruiker zou kunnen misleiden om onbewust zijn locatiegegevens te verstrekken (zie <geolocation>-blokkering voor meer informatie).

De DOM-API-interface van het element, HTMLGeolocationElement, biedt functies voor toegang tot geretourneerde positiegegevens, de huidige toestemmingsstatus, en fouten als het ophalen van de gegevens mislukte, wat de hoeveelheid JavaScript-logica vermindert die geschreven moet worden. Het heeft ook gebeurtenissen beschikbaar om code uit te voeren als reactie op het ontvangen van locatiegegevens, wijzigingen in toestemmingsstatus, en gebruikersinteracties met het toestemmingsvenster.

Relatie met de Geolocation API

De Geolocation API biedt een oudere manier om locatiegegevens te verwerken. Deze API heeft enkele tekortkomingen die het <geolocation>-element beoogt op te lossen, met name dat de gebruikersinterface en de onderliggende logica voor het opvragen van de gegevens elke keer opnieuw vanaf nul geïmplementeerd moeten worden, en dat de afhandeling van toestemmingen onintuïtief kan zijn.

Het <geolocation>-element gebruikt op de achtergrond functies van de Geolocation API. Standaard vraagt de browser eenmalig locatiegegevens op, alsof de Geolocation.getCurrentPosition()-methode werd aangeroepen. Als het watch-attribuut echter is ingesteld op true, werkt de browser de gegevens bij telkens wanneer de positie van het apparaat verandert, alsof Geolocation.watchPosition() werd aangeroepen.

Als de gegevens succesvol worden opgehaald, zijn ze beschikbaar in de HTMLGeolocationElement.position-eigenschap, die een GeolocationPosition-object bevat. Als het ophalen van de gegevens mislukt, is foutinformatie beschikbaar in de HTMLGeolocationElement.error-eigenschap, die een GeolocationPositionError-object bevat.

De taal van de knop instellen

Het globale lang-attribuut wordt door het <geolocation>-element gebruikt om een taal te kiezen voor de weergegeven tekst. Dit betekent dat u een lang-attribuut rechtstreeks op het <geolocation>-element of op een van zijn voorouders kunt instellen om de browser te vertellen welke taal moet worden gebruikt voor het knoplabel.

Als er geen geschikt lang-attribuut is ingesteld, wordt de voorkeurstaalinstelling van de browser gebruikt.

Terugvalinhoud opnemen

U kunt terugvalinhoud opnemen tussen de openende en sluitende tags van het <geolocation>-element, die wordt weergegeven als het element niet wordt ondersteund. U kunt bijvoorbeeld een bericht "Niet ondersteund" opnemen:

<geolocation>
  <p>Your browser doesn't support the Geolocation element.</p>
</geolocation>

Een betere praktische oplossing kan echter zijn om een gewoon <button>-element op te nemen dat de Geolocation API gebruikt om locatiegegevens op te halen:

<geolocation>
  <button id="fallback">Use location</button>
</geolocation>

<geolocation>-blokkering

Een belangrijk idee achter het ontwerp van het <geolocation>-element is dat het de bewuste keuze van een gebruiker moet weerspiegelen om positiegegevens vrij te geven, en moet voorkomen dat kwaadwillenden gebruikers misleiden om het te activeren, bijvoorbeeld via clickjacking. Daarom houdt de browser een register bij van zogenaamde blokkeerredenen voor elk weergegeven element.

Wanneer een blokkering actief is op een <geolocation>-element, wordt het verhinderd te functioneren (geblokkeerd), tijdelijk of permanent, afhankelijk van de reden. Wanneer een <geolocation>-element geblokkeerd is, wordt gezegd dat het ongeldig is. U kunt controleren of het ongeldig is door de HTMLGeolocationElement.isValid-eigenschap te bevragen. U kunt ook de reden waarom het ongeldig is opvragen via de HTMLGeolocationElement.invalidReason-eigenschap — zie die pagina voor een volledige lijst van mogelijke redenen.

Stylingbeperkingen

Het <geolocation>-element heeft verschillende beperkingen op de CSS-stijlen die erop toegepast kunnen worden. Sommige van deze beperkingen zijn ontworpen om fundamentele toegankelijkheid af te dwingen, en zullen ertoe leiden dat de knop wordt gedeactiveerd als ze niet worden nageleefd. Sommige dwingen bepaalde waarden of waardenbereiken af voor verschillende eigenschappen.

Eigenschappen die niet vermeld staan in de volgende subsecties, of logisch gelijkwaardig zijn aan een fysieke eigenschap die in de volgende subsecties vermeld staat, worden genegeerd wanneer ze op het <geolocation>-element worden ingesteld.

Toegankelijkheidsbeperkingen

De weergegeven <geolocation>-knop wordt gedeactiveerd (wat betekent dat erop drukken geen effect heeft) als de volgende beperkingen niet worden nageleefd:

• De kleurcontrast-verhouding tussen color en background-color moet minstens 3:1 zijn.
• De font-size mag niet kleiner zijn dan de waarde small (in het geval van sleutelwoordwaarden), of de berekende waarde ervan (in het geval van andere waardetypen).

Waardebeperkingen

De volgende CSS-eigenschapswaardebeperkingen worden toegepast op het <geolocation>-element. Als wordt geprobeerd deze eigenschappen op het <geolocation>-element in te stellen op waarden buiten de vermelde beperkingen, wordt de waarde aangepast om gelijk te zijn aan de beperking (in het geval van een exacte waardebeperking) of gelijk aan de dichtstbijzijnde berekende boven- of ondergrens (in het geval van een bereikbeperking).

Complexe beperkingen

De volgende beperkingen zijn complexer dan eenvoudige waardebeperkingen:

Eigenschappen die normaal ingesteld kunnen worden

De volgende CSS-eigenschappen kunnen normaal worden gebruikt:

• border, border-top, border-right, border-bottom, en border-left
• counter-reset, counter-increment, en counter-set
• flex, flex-grow, flex-shrink, en flex-basis
• outline, outline-color, en outline-style
• overscroll-behavior, overscroll-behavior-inline, overscroll-behavior-block, overscroll-behavior-x, en overscroll-behavior-y
• scroll-margin, scroll-margin-top, scroll-margin-right, scroll-margin-bottom, en scroll-margin-left
• scroll-padding, scroll-padding-top, scroll-padding-right, scroll-padding-bottom, scroll-padding-left, scroll-padding-inline-start, scroll-padding-block-start, scroll-padding-block-start, scroll-padding-inline-end, en scroll-padding-block-end

Toegankelijkheid

Het <geolocation>-element heeft een toegankelijke naam geschreven in de taal waarop het is ingesteld. Het heeft ook een role van button, zodat het door schermlezers als een knop wordt herkend.

Bovendien heeft het <geolocation>-element standaard een tabindex-waarde van 0, zodat het zich met betrekking tot toetsenbordfocus gedraagt als een echte <button>.

Zie ten slotte de sectie Toegankelijkheidsbeperkingen voor informatie over stylingbeperkingen die op het <geolocation>-element worden toegepast om fundamentele toegankelijkheidsvereisten af te dwingen.

Voorbeelden

Basisgebruiksvoorbeeld

Dit voorbeeld gebruikt het <geolocation>-element om uw huidige locatie op te halen, die onder de knop wordt weergegeven in een <p>-element. Het voorbeeld gebruikt ook een gewone <button>-terugval om de locatiegegevens op te halen in browsers die het element niet ondersteunen.

HTML

We nemen een <geolocation>-element op met een <button>-terugval erin genest, die wordt weergegeven in browsers die <geolocation> niet ondersteunen. We nemen ook een <p> op om locatiegegevens en fouten in weer te geven.

<geolocation>
  <button id="fallback">Use location</button>
</geolocation>
<p id="output"></p>

JavaScript

In ons script beginnen we met het ophalen van een verwijzing naar het uitvoer-<p>-element. Vervolgens detecteren we of het <geolocation>-element wordt ondersteund door typeof HTMLGeolocationElement === "function" te testen:

• Als het wordt ondersteund, halen we eerst een verwijzing naar het <geolocation>-element op en voegen we vervolgens een location-gebeurtenislistener toe. Wanneer op de knop wordt gedrukt en de gegevens worden opgehaald, drukt de listener de (lat, long)-coördinaten af naar de uitvoer-<p> (opgehaald via de position-eigenschap), of een foutmelding als het ophalen van de gegevens mislukte (opgehaald via de error-eigenschap).
• Als het niet wordt ondersteund, halen we een verwijzing naar het terugval-<button>-element op en halen en drukken we dezelfde gegevens af, behalve dat we dit keer een click-gebeurtenislistener op de knop gebruiken, en een Geolocation.getCurrentPosition()-aanroep om de gegevens op te halen.

const outputElem = document.querySelector("#output");

if (typeof HTMLGeolocationElement === "function") {
  const geo = document.querySelector("geolocation");
  geo.addEventListener("location", () => {
    if (geo.position) {
      outputElem.textContent += `(${geo.position.coords.latitude},${geo.position.coords.longitude}), `;
    } else if (geo.error) {
      outputElem.textContent += `${geo.error.message}, `;
    }
  });
} else {
  const fallback = document.querySelector("#fallback");
  fallback.addEventListener("click", () => {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        outputElem.textContent += `(${position.coords.latitude}, ${position.coords.longitude}), `;
      },
      (error) => {
        outputElem.textContent += `${error.message}, `;
      },
    );
  });
}

Resultaat

Bekijk deze code live in werking (broncode). U kunt ook een versie van dit voorbeeld vinden die het watch-attribuut op het <geolocation>-element bevat en daarom telkens locatiegegevens ophaalt wanneer de positie van het apparaat van de gebruiker verandert (bekijk hem live in werking, en de broncode).

Probeer de demo's zo mogelijk te bekijken in zowel een ondersteunende als een niet-ondersteunende browser, en let op het verschil in de toestemmingsvensterstroom wanneer u ervoor kiest toestemming voor het gebruik van geolocation te verlenen of te weigeren.

Voor een doorloop van een uitgebreider voorbeeld dat locatiegegevens gebruikt om een kaart van uw eigen omgeving te maken, zie de referentiepagina van HTMLGeolocationElement.

Technische samenvatting