Widgets til din hjemmeside
Levende eksempler på de samme JavaScript-widgets som det anonyme overblik i portalen. Overblikskortene kræver ingen iframe, konto eller API-nøgle. Købskortet kræver en offentlig Google Maps-browsernøgle.
Findes på denne kildekodebranch; endnu ikke udgivet. Deploy API og Web fra samme release, før løsningen bruges på en offentlig hjemmeside.
Vejledning og begrænsninger
Kopiér et eksempel til din egen side. Brug tenantens API-værtsnavn og det rigtige release-miljø. Modulet opretter sin egen Shadow DOM og indlæser sit stylesheet, så hjemmesidens CSS ikke ændrer kortene. Tekster, navne og standardfarver kommer fra API’et. Elementets bredde bestemmer layoutet: kortene bruger mindst 300 px og fordeles automatisk på rækker. Brug machineCount: 1, 2 eller 3 til forskellige tilfældigt valgte kørende maskiner. Brug mountProgressWidgets til et bestemt unit-, location- eller bank-KID.
Modulet sender kun GET-kald uden credentials. Disse offentlige widget-læsninger tillader eksterne origins; manager- og sessionsoperationer beholder deres CORS-begrænsninger til præcise origins. Har hjemmesiden Content Security Policy, skal API-origin tillades i script-src, connect-src, img-src og style-src; dynamisk fremdrift kræver også inline styles, købsgrafen kræver data: i img-src, og WashDoc-visninger kræver blob: i img-src. Brug HTTPS og en browser med ES-moduler, Shadow DOM, fetch og AbortSignal.timeout. Indsæt aldrig credentials. Data er live og kan være utilgængelige; 503 betyder utilgængelig, aldrig nul. Hvert kort prøver igen automatisk og markerer bevarede tal som utilgængelige efter fejl. ready-promise fortæller om initialiseringsfejl; unavailableText angiver en lokaliseret fejltekst ved opstart. Kald destroy(), når en widget-gruppe fjernes eller udskiftes. Polling stopper også automatisk, når elementet fjernes.
Antal kørende maskiner opdateres hvert 15. sekund; køb, reservationer og maskinpuljen hvert minut; aktive brugere hvert minut (API’et cacher antallet i fem minutter). Kald deler et snapshot på siden. Nedtællingen sker lokalt hvert sekund ud fra servertid, beholder valgte maskiner og viser afslutningen i 20 sekunder. Puljens afgrænsning og offentlige felter er uændrede; billederne er API-genererede SVG’er. Beløb holdes adskilt pr. valuta.
Indsæt det kanoniske KID fra denne tenant. Der kræves ikke login. Lokation og bank omfatter alle offentlige units, også dem der ikke kører. Brug Hent flere til de næste sider; indlæste sider opdateres hvert minut. Ukendt resttid markeres uden en opdigtet nedtælling.
Kort-widget med køb
Indlejr det kompakte live-købskort direkte i sin egen Shadow DOM. Ingen iframe, portalskal, login eller bearer-token er nødvendig. API-sitet vælger tenant. Data opdateres hvert 10. sekund; fejl giver 30 sekunders ventetid. Kald destroy(), når widgetten fjernes. Angiv googleMapsBrowserKey fra den indlejrende hjemmesides offentlige browsernøglekonfiguration; brug aldrig en servernøgle til geokodning. Indstillingen har forrang for den nullable googleMapsBrowserKey fra GetPublicWidgetPresentation (kun tilgængelig, hvis API allerede har GoogleMaps:ApiKey konfigureret). API behøver ikke indstillingen, når hjemmesiden angiver sin egen nøgle. Uden en af kilderne afvises ready. Googles HTTP-referrer-begrænsninger skal tillade hjemmesiden; widgetten ændrer dem ikke. Ved Content Security Policy skal Googles Maps CSP-vejledning også følges.
<div id="purchase-map" style="width:100%;height:400px"></div>
<script type="module">
import { mountPurchaseMap } from 'https://YOUR-API/docs/widgets.mjs';
const widget = mountPurchaseMap(document.querySelector('#purchase-map'), {
apiBase: 'https://YOUR-API', language: 'en-GB',
googleMapsBrowserKey: 'YOUR_PUBLIC_BROWSER_KEY'
});
await widget.ready;
// Call widget.destroy() before removing the host.
</script>Kortlag: showCoins er som standard true; showHeatmap er som standard false. Brug showCoins: false, showHeatmap: true til et kort med kun heatmap. Implementeret i kildekoden; ikke udgivet.
Brug zoom: 7 til et fast zoomniveau efter centrering på data. Værdier fra 0 til 22 understøttes. Udelad zoom for automatisk at vise alle lokationer. Ikke udgivet.
Brug startPosition: { latitude: 56.2, longitude: 10.5 } til at vælge kortets startposition. Breddegrad skal være fra -90 til 90 og længdegrad fra -180 til 180. Kombinér med zoom: 6. Med startPosition springes automatisk tilpasning til data over; kortet kan stadig følge nye køb og flyttes manuelt. Udelad parameteren for automatisk tilpasning. Implementeret i kildekoden; ikke udgivet.
Efter widget.ready returnerer widget.getView() den aktuelle { startPosition: { latitude, longitude }, zoom }, eller null når kortet er utilgængeligt eller afmonteret. Manuelle kortbevægelser medtages. Ikke udgivet.
Seneste billeder
mountRecentPhotos(host, options) viser én offentlig miniature ad gangen, skifter hvert tredje sekund og opdaterer hvert minut. Angiv apiBase samt alt, loadingText, emptyText og unavailableText. Returnerer ready og destroy(). Originaler forbliver beskyttede. Ny eksport: ikke udgivet.
const photos = mountRecentPhotos(element, { apiBase, alt: "Photo", emptyText: "No photos", unavailableText: "Unavailable" });
await photos.ready;
// On removal:
photos.destroy();