Skjölun / Uppsetning / React / TomTom

Uppsetning á TomTom

Hvernig nota má TomTom Orbis Maps á vefnum gegnum MapConductor, sem vefur @tomtom-org/maps-sdk (sem byggir á maplibre).

PACKAGE

react-for-tomtom

API KEY

Nauðsynlegt

CSS

Enginn

REACT NATIVE

ekkert

Sami þjónustuaðili, aðrir vettvangarAndroid iOS

Skoða sýnidæmiVerslanakort · React ↗

Áður en þú byrjar

Node.js 18 eða nýrra

TomTom Orbis Maps-API-lykill úr Developer Portal

STEP 01

Settu upp

@tomtom-org/maps-sdk og maplibre-gl fylgja bæði pakkanum.

terminalnpm

npm install @mapconductor/js-sdk-core @mapconductor/js-sdk-react \
            @mapconductor/react-for-tomtom

STEP 02

Sendu API-lykilinn til stöðu-hooksins

Lykillinn fer til stöðu-hooksins, ekki í props sýnareiningarinnar — props enda gjarnan í prófunarskrám og skyndimyndum.

TomTomMap.tsxTypeScript · React

const state = useTomTomViewState({
  apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
  mapDesignType: TomTomDesign.Standard,
  cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
});

VARÚÐ

Sendu lykilinn úr umhverfisbreytu við smíði (import.meta.env.VITE_* í Vite) og haltu honum utan við útgáfustýringu. Hann berst í vafrann hvort eð er, svo takmarkaðu hann alltaf eftir tilvísanda eða léni svo það sé meinlaust þótt hann sjáist.

STAÐFESTA

Það sem þú ættir að sjá

Uppsetningunni er lokið þegar TomTom-kortið teiknast.

TomTomMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { TomTomDesign, TomTomMapView2D, useTomTomViewState } from '@mapconductor/react-for-tomtom';

const AMSTERDAM = createGeoPoint({ latitude: 52.3676, longitude: 4.9041 });

export function TomTomMap() {
  const state = useTomTomViewState({
    apiKey: import.meta.env.VITE_TOMTOM_API_KEY,
    mapDesignType: TomTomDesign.Standard,
    cameraPosition: createMapCameraPosition({ position: AMSTERDAM, zoom: 11 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'ams', position: AMSTERDAM }));

  return (
    <TomTomMapView2D state={state} style={{ height: 480 }}>
      <Marker state={markerState} />
    </TomTomMapView2D>
  );
}

Kortahönnun

TomTomDesign nær yfir stíla Orbis Maps, í ljósum og dökkum pörum.

TomTomDesign

Notes

Standard / StandardLight / StandardDark

Staðlaði skoðunarstíllinn

Driving / DrivingLight / DrivingDark

Sniðið að akstri

MonoLight / MonoDark

Einlitt — bakgrunnur fyrir þín eigin gögn

Satellite

Gervihnattamyndir

Bilanaleit

Kortið helst autt

Athugaðu að apiKey sé ekki tómur strengur.
Staðfestu að lykillinn hafi verið gefinn út fyrir Orbis Maps.

Aðdrátturinn er annar en hjá öðrum þjónustuaðilum

Aðdráttur TomTom fer eftir breiddargráðu; MapConductor umreiknar hann á Google-jafngildan kvarða út frá breiddargráðu myndavélarinnar.

Kortið frumstillist tvisvar í þróun

React StrictMode keyrir effect tvisvar. Hver þjónustuaðili greinir það og hendir keyrslunni sem var hætt við, svo þú þarft ekki að slökkva á StrictMode.

Næst

TomTomMapView er þrívíða sýnin og TomTomMapView2D sú tvívíða; þær deila stöðuhlut.