Skjölun / Uppsetning / React / Mapbox

Uppsetning á Mapbox

Hvernig nota má Mapbox á vefnum gegnum MapConductor. Aðgangsteiknið þarf aðeins fyrir stíla sem Mapbox hýsir — þá sem byrja á mapbox://.

PACKAGE

react-for-mapbox

API KEY

Fer eftir stíl

CSS

Nauðsynlegt

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

Opinbert aðgangsteikn, ef þú notar stíla sem Mapbox hýsir

STEP 01

Settu upp

mapbox-gl fylgir pakkanum — engin sérstök uppsetning. Það er engin React Native-hliðstæða.

terminalnpm

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

STEP 02

Fluttu inn stílblaðið

Fluttu hana inn einu sinni úr inngangsskrá forritsins. Gleymist það kemur umbrot kortsins og stýringar rangt út.

main.tsxTypeScript

import '@mapconductor/react-for-mapbox/style.css';

STEP 03

Sendu aðgangsteiknið (ef þarf)

Teiknið fer til stöðu-hooksins, sem setur mapboxgl.accessToken á heimsvísu. Notarðu aðeins OSM-byggðu hannanirnar? Slepptu því alveg.

HelloMap.tsxTypeScript · React

const mapState = useMapboxViewState({
  id: 'mapbox-map',
  accessToken: import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
  mapDesignType: MapboxDesign.Streets,
  cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
});

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

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á

Með OsmBright geturðu sannreynt uppsetninguna án nokkurs teiknis.

HelloMap.tsxTypeScript · React

import { useState } from 'react';
import { createGeoPoint, createMapCameraPosition, createMarkerState } from '@mapconductor/js-sdk-core';
import { Marker } from '@mapconductor/js-sdk-react';
import { MapboxDesign, MapBoxMapView2D, useMapboxViewState } from '@mapconductor/react-for-mapbox';
import '@mapconductor/react-for-mapbox/style.css';

const TOKYO = createGeoPoint({ latitude: 35.6812, longitude: 139.7671 });

export function HelloMap() {
  // No token needed for the OsmBright design
  const mapState = useMapboxViewState({
    id: 'mapbox-map',
    mapDesignType: MapboxDesign.OsmBright,
    cameraPosition: createMapCameraPosition({ position: TOKYO, zoom: 12 }),
  });
  const [markerState] = useState(() => createMarkerState({ id: 'tokyo', position: TOKYO }));

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

Stöðuhlutur

Það sem useMapboxViewState tekur við. Taktu eftir útfluttu heitunum: MapBoxMapView og MapBoxMapView2D, með stóru B.

signatureTypeScript

useMapboxViewState({
  id?: string;
  accessToken?: string;
  mapDesignType?: MapboxMapDesignType; // default MapboxDesign.Streets
  cameraPosition?: MapCameraPosition;  // default MapCameraPosition.Default
})

Kortahönnun

MapboxDesign skiptist í stíla sem þurfa teikn og stíla sem þurfa það ekki.

MapboxDesign

Notes

Streets / Outdoors / Light / Dark

Hýst af Mapbox — teikn nauðsynlegt

SatelliteStreets

Gervihnattamyndir hýstar af Mapbox — teikn nauðsynlegt

OsmBright / OsmBrightEn / OsmBrightJa

OSM-stílarnir sem deilt er með MapLibre — ekkert teikn

MapTilerToner* / MapTilerBasic* / OpenMapTiles

Einnig deilt með MapLibre — ekkert teikn

Bilanaleit

Það eru aðeins Mapbox-stílarnir sem teiknast ekki

Stílar sem byrja á mapbox:// þurfa teikn — athugaðu að accessToken sé sent.
Staðfestu að þetta sé opinbert teikn og að það hafi ekki verið afturkallað.

Aðdráttarstigin eru önnur en hjá öðrum þjónustuaðilum

MapConductor staðlar aðdráttinn gegn kvarða Google; Mapbox er umreiknað með mældri hliðrun, googleZoom ≈ mapboxZoom + 1,0.

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

Byggingin er sú sama og hjá MapLibre, svo breyting á mapDesignType frumstillir kortið upp á nýtt.