Sånn lager du kart med ArcGIS Maps SDK: «Trenger ikke være ekspert!»

– Med bare noen få steg og kodelinjer har du nå en grunnleggende applikasjon som dekker dine behov, skriver Mohammad Jawad Elahi i Geodata i denne guiden.

Mohammad Jawad Elahi i Geodata viser deg hvordan du bruker ArcGIS Maps SDK for Javascript. 📸: Geodata
Mohammad Jawad Elahi i Geodata viser deg hvordan du bruker ArcGIS Maps SDK for Javascript. 📸: Geodata Vis mer

Det er mange utviklere som kommer over oppgaver der de får behov for kart og geografiske data – om det er i en app, en nettside eller som del av en tjeneste for kundene dine.

Flere har nok prøvd ulike JavaScript-bibliotek (f.eks fra Google), men har opplevd at funksjonaliteten blir litt mangelfull og at det ikke gir nok «dybde» i det du forsøker å skape.

Derfor kan ArcGIS Maps SDK for JavaScript være et godt alternativ om du har behov for å gå mer grundig til verks med geografiske data i ditt arbeid.

Dette er et avansert og innholdsrikt, men likevel enkelt, verktøy for å lage god kartfunksjonalitet i webapplikasjoner.

Krever lite kode for god funksjonalitet

ArcGIS Maps SDK for JavaScript er designet spesifikt for å bygge applikasjoner på geografiske data. Dette er fint for deg som har behov for verktøy og funksjonalitet, som kartleggingsfunksjoner, avansert kartografi, geografiske analyser og visualiseringer.

I tillegg gir ArcGIS omfattende muligheter og utvidelser for å tilpasse applikasjonen.

ArcGIS Maps SDK for JavaScript er utviklet av Esri, en av de største i verden innen geografiske informasjonssystemer (GIS) og er svært godt dokumentert.

Det er i bunn og grunn svært lite kode som skal til for å få til god karfunksjonalitet i webapplikasjoner med ArcGIS.

Praktisk eksempel

Å komme i gang med en kartapplikasjon kan virke overveldende, men med ArcGIS Maps SDK for JavaScript kan du raskt skape stor verdi for brukerne.

La oss se på et praktisk eksempel:

Du ønsker å kjøpe en leilighet i Oslo med balkong, og er interessert i å evaluere hvor mye dagslys balkongen får og hvordan skygger fra omkringliggende bygninger varierer gjennom dagen og året.

Dette ønsker du visualisert i 3D.

#1: Første steg, skaffe data

For å komme i gang trenger du et bakgrunnskart med flyfoto, en terrengmodell som kan brukes på toppen av bakgrunnskartet, og en modell av bygninger for å plassere på kartet.

Start prosessen ved å finne passende data. Geodata Online tilbyr en utmerket skyplattform hvor du enkelt kan få tilgang til geografiske data, inkludert bakgrunnskart, 3D-modeller og tematiske kart.

Plattformen er ideell for å hente tilrettelagte og verdiøkte norske data fra ett enkelt sted.

#2: Sette opp applikasjonen

Alt kartinnholdet vil være i en HTML-div kalt «app».

Deretter importerer du nødvendige JavaScript-moduler fra ArcGIS Maps SDK for JavaScript, som refereres fra HTML-siden.

<body> 
    <div id="app"></div> 
    <script type="module" src="/main_popup.js"></script> 
</body> 
import IdentityManager from "@arcgis/core/identity/IdentityManager"; 
import Map from "@arcgis/core/Map"; 
import SceneView from "@arcgis/core/views/SceneView"; 
import TileLayer from "@arcgis/core/layers/TileLayer"; 
import ElevationLayer from "@arcgis/core/layers/ElevationLayer"; 
import SceneLayer from "@arcgis/core/layers/SceneLayer"; 

For å sikre tilgang til Geodata Online, må du opprette et sikkerhetstoken. Prosessen for dette er godt dokumentert og enkel å gjennomføre.

//0. Setter Geodata Online-sikkerhetstoken 
IdentityManager.registerToken({ 
  server: "https://services.geodataonline.no/arcgis/rest/services", 
  token: 
    "<legg inn token her>", 
}); 

#3: Sette opp 3D-kart

Med ArcGIS Maps SDK for JavaScript er det enkelt å sette opp et 3D-kart.

Du kan raskt integrere et flyfoto over Norge, en terrengmodell og 3D-modeller av bygninger. Kartet er forhåndsinnstilt til å zoome inn på Oslo sentrum, og du angir enkelt hvilken div kartet skal rendres i med SceneView.

//1. Lager kartet med flyfoto som bakgrunn 

const map = new Map({ 
  basemap: { 
    baseLayers: [ 
      new TileLayer({ 
        url: "https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheBilder/MapServer", 
      }), 
    ], 
  }, 
  ground: { 
    layers: [ 
      new ElevationLayer({ 
        url: "https://services.geodataonline.no/arcgis/rest/services/Geocache_UTM33_EUREF89/GeocacheTerreng/ImageServer", 
      }), 
    ], 
    navigationConstraint: { type: "stay-above" }, 
  }, 
  layers: [ 
    new SceneLayer({ 
      url: "https://services.geodataonline.no/arcgis/rest/services/Geoscene/GeosceneBygning2/SceneServer", 
    }), 
  ], 
}); 
// 2. Lager selve viewet (visningen av kartet i 3D) 

const view = new SceneView({ 
  map: map, 
  camera: { 
    position: { 
      x: 262631, 
      y: 6648916, 
      z: 75   , 
      spatialReference: { wkid: 25833 }, 
    }, 
    heading: 305, 
    tilt: 90, 
  }, 
  container: "app", 
}); 
image: Sånn lager du kart med ArcGIS Maps SDK: «Trenger ikke være ekspert!»

#4: Analyse av dagslys og skygger

For å analysere hvordan dagslys og skygger endrer seg på balkongen gjennom dagen, bruker vi Daylight-widgeten.

Denne widgeten er en av mange ferdigbygde komponenter i SDK-en som gjør det enkelt å legge til avansert funksjonalitet i din kartapplikasjon.

Du kan enkelt integrere widgeten i ditt view og bruke en Expand widget for å plassere Daylight-kontrollen diskret på kartet.

//3. Lager et sol/skygge-verktøy 
const daylight = new Daylight({ view: view }); 
 
//4. Og legger det til inni en knapp 
view.ui.add( 
  new Expand({ expandIcon: "partly-cloudy", view: view, content: daylight }), 
  "top-right" 
); 

Utvidelser og muligheter

Med bare noen få steg og kodelinjer har du nå en grunnleggende applikasjon som dekker dine behov.

ArcGIS Maps SDK for JavaScript åpner for uendelige muligheter til å utvide applikasjonen din med flere widgets, romlige analyser, eller avanserte data-visualiseringer.

Dette kraftige verktøyet lar oss som utviklere fokusere på å skape nyttige og engasjerende applikasjoner, uten behovet for å være eksperter på GIS (geografiske informasjonssystemer).

I tillegg til JavaScript, tilbyr ArcGIS en rekke SDKer for andre programmeringsspråk og plattformer. SDKene er tilgjengelige for Kotlin, Swift, .NET og Java, og det finnes også plugins for spillmotor som Unity og Unreal Engine. Dette gjør det enkelt for utviklere å integrere kartfunksjoner i applikasjoner på tvers av en rekke plattformer og enheter.