MapConductor React SDK Samples

Code example

import { useMemo } from 'react';
import { createGeoPoint, createMapCameraPosition, createPolygonState } from '@mapconductor/js-sdk-core';
import { Polygon } from '@mapconductor/js-sdk-react';
import { MapLibreDesign, MapLibreMapView, useMapLibreViewState } from '@mapconductor/react-for-maplibre';


// (1) Create the map


const initialCamera = createMapCameraPosition({
  position: createGeoPoint({ latitude: 35.6812, longitude: 139.7671 }),
  zoom: 12,
});


const mapViewState = useMapLibreViewState({
  mapDesignType: MapLibreDesign.OsmBrightJa,
  cameraPosition: initialCamera,
});


// (2) Prepare the data and interaction state
const geodesicPolygon = useMemo(() => createPolygonState({
  id: 'geodesic', points: longDistancePoints, geodesic: true,
}), [longDistancePoints]);
const straightPolygon = useMemo(() => geodesicPolygon.copy({
  id: 'straight', geodesic: false,
}), [geodesicPolygon]);
const polygons = [geodesicPolygon, straightPolygon];


// (3) Render the map and its overlays


<MapLibreMapView state={mapViewState}>
  {polygons.map(polygon => (
    <Polygon key={polygon.id} state={polygon} />
  ))}
</MapLibreMapView>

How the code works

Compare geodesic and non-geodesic polygon edges over long distances and across the antimeridian.

geodesicPolygon is built with geodesic:true, and straightPolygon is a .copy of it with geodesic:false over the same longDistancePoints.

Rendering both shows how geodesic edges curve to follow the shortest path while straight edges stay flat on the map projection.