Illustreret bykort til hjemmeside

Kort svar

Hvad giver det illustrerede bykort jeres hjemmeside?

Det illustrerede bykort erstatter det generiske Google Maps-embed med en navigerbar WebGL-gengivelse i tegnet stil - forankret til jeres rigtige bys koordinater, med zoom, panorering og søgning. Kortet genereres automatisk fra OpenStreetMap-data og installeres kodefrit på under en time via en guidet wizard. Tilgængeligt på Business-planen.

Kom i gang Se priser

133: Stempel-SVGer til bygninger og ikoner
5 trin: Guidet opsætning fra start til live
under 1 time: Typisk installationstid
0 linjer kode: Kræves af jer

Udfordringer

Fra standard Google Maps til et illustreret kort over jeres rigtige by

Et Google Maps-embed er funktionelt - men generisk. Det ligner alle andre hjemmesiders kort og kommunikerer ikke stedstilhørsforhold. Det illustrerede bykort løser de svagheder, standardløsningen ikke kan.

Google Maps ser ens ud på alle hjemmesider

Et standard Google Maps-embed ligner alle andre siders kort. Det tilfører ingen visuel identitet og kommunikerer ikke stedstilhørsforhold på en måde, besøgende husker.

Det illustrerede bykort erstatter den grå kartegning med en tegnet, navigerbar æstetik - visuelt umiskendeligt jeres, stadig forankret til de rigtige koordinater.

Manuel kortdesign kræver specialkompetencer

At få tegnet et unikt bykort kræver grafiske kompetencer og lang tid. Resultatet er typisk statisk og kan ikke navigeres af besøgende.

Systemet genererer kortet automatisk fra OpenStreetMap-data - ingen tegnearbejde og ingen grafiske kompetencer krævet.

Interaktive kortløsninger kræver kodeudvikling

At implementere et navigerbart WebGL-kort på en hjemmeside kræver normalt front-end-kompetencer og betydelig udviklingstid.

En 5-trins wizard installerer det illustrerede bykort på under en time - ingen terminaler, ingen npm-kommandoer og intet at compile.

Korrektioner kræver adgang til koden

Når et kortdesign er lavet, er ændringer typisk låst bag teknisk adgang - man kan ikke bare flytte en bygning eller justere placeringer.

Træk-og-slip og en AI-editor lader jer redigere kortet direkte i browseren uden teknisk viden.

Processen

Ingen kode, ingen tegnearbejde - installation på under en time

Installationen foregår via en guidet 5-trins wizard på admin-siden. Hvert trin er vejledt og verificeret af systemet - ingen terminaler, ingen npm-kommandoer og intet at compile.

Konfigurer Google Maps

Indsæt jeres Maps API-nøgle og vælg et Map ID til kortet. Guiden vejleder jer igennem hvert felt og validerer, at forbindelsen er korrekt, inden I fortsætter.

Verify-town

Systemet validerer, at den valgte by har tilstrækkelig OpenStreetMap-dækning og den rette koordinatramme. Eventuelle mangler rettes, inden I går videre.

Generate-town

Overpass-fetchen kører og skriver design-JSON'en automatisk med alle bygninger, veje, vandflader og markarealer for jeres by. Ingen manuel datainput.

Provision-GCP

Kortets ressourcer klargøres i Google Cloud Platform til produktion. Systemet håndterer al cloud-konfiguration - I behøver ikke røre en GCP-konsol.

Render-style

Det illustrerede lag aktiveres og forankres visuelt til basemappet. Kortet er klar til at indsætte på hjemmesiden som komponent.

Live eksempel

Proev det illustrerede bykort

Panorer, zoom, skift dag/nat og klik paa en sevaerdighed - paa et rigtigt dansk landsbykort.

Panorer og zoom i det rigtige Velling-kort.

Bygninger, veje, vand og seværdigheder - alt forankret til rigtige koordinater

Det illustrerede bykort er ikke kun smukt - det er funktionsrigt og præcist forankret til de geografiske data, besøgende kender fra virkeligheden.

Automatisk dag og nat-skift

Kortet skifter automatisk mellem dag- og natmodus via ét Google Map ID med colorScheme LIGHT og DARK. Brugeren behøver ikke gøre noget - kortet tilpasser sig enhedens farvetema.

Søgning direkte i kortwidgetten

Besøgende kan søge på adresser og steder direkte i kortwidgetten. Søgeresultater vises på det illustrerede kort uden at forlade hjemmesiden.

Seværdigheder og POI-lag

Kortets POI-lag viser seværdigheder med ikoner og navne fra OpenStreetMap og egne datakilder, placeret præcist på de rigtige koordinater.

Infopanel ved klik

Klik på en bygning eller seværdighed og se navn, beskrivelse og eventuel kontaktinfo direkte i kortet. Nyttigt til turistguider og lokale forretninger.

AI-editor med sproginstruktioner

Giv instruktioner på dansk og engelsk - fx flyt rådhuset 10 meter mod nord eller roter kirken 15 grader. AI-editoren patcher designfilen servervalideret, så kortet aldrig havner i en ugyldig tilstand.

Træk-og-slip redigering

Flyt individuelle bygninger og seværdigheder direkte på kortet med musen. Intuitivt og egnet til mindre justeringer af placering og orientering - ingen kode kræves.

By-agnostisk kortgenerator

Bykort-generatoren fungerer med enhver by, der har OpenStreetMap-dækning. Bboxen, slug og town-parametrene sættes til den by, I ønsker, og wizarden gør resten.

Servervalideret kortdata

Alle ændringer fra AI-editor og træk-og-slip valideres på serveren, inden de skrives til designfilen. Kortet kan aldrig havne i en ugyldig tilstand.

FAQ

Ofte stillede spørgsmål om illustreret bykort

Svar på de mest almindelige spørgsmål - fra teknisk opbygning og geodata til redigering og målgrupper.

Hvad er forskellen på et illustreret bykort og et standard Google Maps-embed?

Et Google Maps-embed er generisk og ligner alle andre siders kort. Det illustrerede bykort placerer et WebGL-lag oven på Google Maps' basemap og erstatter den grå kartegning med en illustreret, trykt-kort-æstetik - stadig forankret til de rigtige koordinater og stadig navigerbar med zoom og panorering.

Kræver installation af kortet kodekundskaber?

Nej. Installation foregår via en guidet 5-trins wizard. Der er ingen terminaler, ingen npm-kommandoer og intet at compile. Hvert trin er vejledt og verificeret af systemet, og hele flowet kan gennemføres på under en time.

Hvilke geodata bruges til at generere kortets bygninger, veje og seværdigheder?

Systemet henter data fra OpenStreetMap via Overpass API. For en given bounding box hentes bygningspolygoner, vejcentrelinjer, vandflader og markarealer automatisk. Kortet inkluderer 133 stempel-SVGer organiseret i et 12x12 atlas ved 3072px opløsning til bygnings- og seværdighedsikoner.

Kan vi redigere kortet efter generering, og kræver det teknisk adgang?

Ja. Kortet redigeres fra admin-siden via to tilgange. Træk-og-slip lader jer flytte bygninger og seværdigheder direkte med musen. AI-editoren modtager naturlige sproginstruktioner på dansk og engelsk - fx flyt rådhuset 10 meter mod nord - og patcher designfilen servervalideret. Ingen teknisk adgang kræves.

Fungerer kortet på mobile enheder?

Ja. Kortet er WebGL-baseret og bruger merged BufferGeometry med et enkelt draw call pr. ca. 180 bygninger. Det giver glatte animationer og hurtig genindlæsning selv på mobile enheder, uden at browseren lider under tunge DOM-opdateringer.

Hvem er det illustrerede bykort tilpasset?

Bykort-løsningen passer til hjemmesider, hvor lokalt tilhørsforhold er en central del af identiteten - lokalsamfund og kommuner, destinationer og turistattraktioner samt multi-location-brands. Se AI til jeres branche for løsninger målrettet specifikke sektorer.

Er der live eksempler på det illustrerede bykort i brug?

Ja. Velling-kortet og thirdwave Kaffekort er aktive deployments med rigtige koordinater, 133 stempel-SVGer og WebGL-lag over Google basemap. Velling-kortet er hostet på Lavprishjemmeside-platformen, der driver komponentbiblioteket og de øvrige bykort-deployments.

Klar til at give jeres hjemmeside et kort, der faktisk ser ud som jeres by?

Det illustrerede bykort er tilgængeligt på Business-planen. Kom i gang med en guidet opsætning på under en time.

Se Business-niveau priser