Gillar du SimCity?

Nej, det handlar inte om spelet SimCity, men resultatet från denna webbkarta baserad på Leaflet.js för onekligen tankarna åt det hållet.

I detta inlägg får du lära dig hur du mycket enkelt bygger en karta med byggnader, bilar och tåg, ja till och med flygplan. Alltsammans i 3D genom en webbläsare.

Mycket enkelt? Ja, faktiskt! Hela exempelkoden kommer här direkt:

Skärmbild_2017-06-10_10-05-39.png(Det strulade med HTML kod i textformat på sidan så här är det i form av en skärmdump)

I praktiken är det en vanlig Leafletkarta med OpenStreetMap, fast man importerar eeGeo.js (som redan innehåller Leaflet) i stället.

Det krävs en API nyckel som man skapar på https://www.wrld3d.com/. För upp till 1’000 användare per månad så är det gratis, men vill man stödja fler så finns det flera nivåer att teckna sig för. Du skall byta ut texten <API-Token> i koden ovan mot din egen skapade token.

Skärmbild_2017-06-10_09-37-10.png

Är det realistiskt? Nja, det är ju beroende på data. Men det som är intressant är att det räcker med en vanlig OpenStreetMap tile server som i exemplet. Det är en förenkling och om det saknas information om byggnader så ”gissar” biblioteket mer eller mindre baserat på de objekt som visas. I bilden ovan är det Stockholms slott som visas, med lite annorlunda textur…

Skärmbild_2017-06-10_09-43-34.png

Kikar man på London (bilden ovan) så kan man se i vilken utsträckning javaskriptet kan realisera data från Open Street Map. Westminster Abby ser skapligt realistiskt ut (detaljer nedan).

Skärmbild_2017-06-10_09-50-33.png

Det som är kul med kartan är att man faktiskt lägger in lite rörelse i kartan. Bilar på vägarna, tåg på spåren, vågor i vattnet, ett och annat flygplan.

Man får naturligtvis välja när man använder denna typ av webbkarta, men på kommunens startsida där man visar centralorten i rolig 3D? Varför inte. Kan man sedan lägga lite tid på att uppdatera Open Street Map eller välja en WMTS tjänst med bättre underlag för eeGeo.JS så kan det bli riktigt ”najs”.

Annonser

Taggar:, ,

Kommentera

Fyll i dina uppgifter nedan eller klicka på en ikon för att logga in:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s

%d bloggare gillar detta: