Aadressivalija juhend

Komponent ElemrootAddressPicker on üks skriptifail ilma sõltuvusteta (kaardi korral laeb ta MapLibre GL JS-i ise). Ta töötab Eesti, Läti ja Leedu aadressidega ning annab iga valiku peale väljundi, mille saad otse oma süsteemi salvestada. Seaded saad kokku panna konfiguraatoris, kust tuleb ka valmis kood.

Paigaldus

Lisa skript, tühi element ja create-kutse. Element saab klassi eap, mitu komponenti ühel lehel on lubatud.

<script src="https://examples.elemroot.com/widget/aadressivalija/v1/aadressivalija.js"></script>
<div id="aadress"></div>
<script>
  var valija = ElemrootAddressPicker.create('#aadress', {
    key: 'SINU_API_VOTI',
    countries: ['ee'],
    map: 'raster',
    onChange: function (a) {
      // a = null (tühjendatud) või väljund (vt allpool)
    }
  });
</script>

Valikud

Sama seadet võib anda kõigile komponentidele korraga: ElemrootAddressPicker.defaults = { endpoints: { … } }.

Kaart

Kui map on seatud, on kaart nähtav kohe. Tühja väärtusega näitab ta konfigureeritud riikide ala (ühe riigi puhul see riik, mitme puhul kõik korraga; riigi vahetamisel selle riigi ala), valitud aadressi puhul markerit suumil 15. Kaarti saab nihutada, suumida nuppudega ja hiirerullikuga. Rasterkaart katab Eesti; Läti ja Leedu aadressidel näitab komponent vektorkaarti ka siis, kui seatud on 'raster'.

Kui drag on sees, paneb klõps kaardil markeri klõpsukohta ja markerit saab lohistada. Punktist leitakse pöördgeokodeerimisega lähim aadress, see otsitakse aadressiotsingust ja valitakse nagu tavaline vaste, seega on väljund sama kujuga kui otsingul. Teise lubatud riigi punkt vahetab riigi. Kui 500 m raadiuses aadressi ei ole, jääb marker eelmise aadressi juurde ja komponent ütleb seda.

Kaardi mõõdud tulevad CSS-muutujatest: --eap-map-h (kõrgus, vaikimisi 180px, kehtib kaardi all olles) ja --eap-map-w (laius kõrval olles, vaikimisi 300px).

Väljund

onChange annab ja getValue() tagastab objekti; sama objekt tuleb ka sündmusega elemroot-address (event.detail) komponendi elemendilt.

{
  "country": "ee",
  "address": "Anne tn 1-1, Tartu linn, Tartu linn, Tartu maakond",
  "addressId": 3124193,
  "postcode": "50604",
  "coordinates": { "lon": 26.742994, "lat": 58.381567 },
  "nationalCoordinates": { "epsg": "EPSG:3301", "x": 6474513.33, "y": 660418.47, "north": 6474513.33, "east": 660418.47 },
  "components": { "county": "Tartu maakond", "municipality": "Tartu linn", "settlement": "Tartu linn", "street": "Anne tänav", "house": "1", "apartment": "1" },
  "adsType": "A8",
  "final": true
}

Meetodid

Stiil

Komponent toob oma stiili kaasa. Värvid ja mõõdud kirjutad üle CSS-muutujatega komponendi elemendil: --eap-accent, --eap-border, --eap-bg, --eap-ink, --eap-muted, --eap-field (valikukastide taust), --eap-radius, --eap-map-h, --eap-map-w. Kõik sisemised klassid algavad eesliitega eap-.

#aadress { --eap-accent: #0a7d4f; --eap-map-h: 260px; --eap-map-w: 360px; }

Ligipääsetavus

Otsinguväli on ekraanilugejale liitkast (role="combobox") ja pakkumised loend (role="listbox", role="option"): avatud olek, aktiivne rida ja valik on atribuutides aria-expanded, aria-activedescendant ja aria-selected. Vihjed loetakse ette (aria-live="polite"). Nooleklahvid, Enter ja Escape töötavad nimekirjas; rippmenüüd ja nupud on tavalised vormielemendid siltidega.