SDK 연동

# .npmrc
@team-draftype:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}

const res = await fetch('<BASE>/api/v1/maps', {
  headers: { 'X-API-Key': 'admap_xxxxxxxx', Accept: 'application/json' },
});

import { AdMap } from '@team-draftype/map-sdk';
import 'maplibre-gl/dist/maplibre-gl.css';

const map = new AdMap({
apiBase: '<BASE>/api/v1',
mapId: 'main',
container: '#map',
apiKey: 'admap_xxxxxxxx', // 순수 프론트엔드만; same-origin 프록시면 생략
theme: 'light',           // 'light' | 'dark' | 'minimal' | 'satellite'
brand: 'downy',           // 선택. 미설정 시 서버가 'main' 으로 정규화
center: [126.978, 37.566],
zoom: 12,
initialViewMode: '2d',    // '2d' | '3d'
});

// 클릭한 피처 수신 — logicalLayerId 는 카탈로그(논리) 레이어, layerId 는 실제 style 레이어
const off = map.on('feature-click', ({ layerId, logicalLayerId, feature, lngLat }) => {
console.log(logicalLayerId, layerId, feature.properties, lngLat);
});

map.setViewMode('3d');                    // pitch easeTo + 건물 extrusion 자동 적용
map.setTheme('dark');
await map.setBrand('mediheal');           // 403(brand_not_allowed) 시 이전 brand 로 silent rollback
const brands = await map.listBrands();    // 이 키가 쓸 수 있는 brand 목록
map.setLayerVisibility('poi_cafe', false);          // 논리 id — main + companion 함께 토글
map.setFilter('poi_cafe', ['==', 'category', 'cafe']); // family 전체, baseline 과 AND 합성
map.setLayerOpacity('poi_cafe', 0.4);               // 파생(__casing/__cluster/__3d)까지 일괄
map.flyTo({ center: [127.02, 37.5], zoom: 14 });

off();          // 리스너 해제
map.destroy();  // 정리

import { ApiClient, ApiClientError } from '@team-draftype/map-sdk';

const api = new ApiClient('<BASE>/api/v1', {
  headers: { 'X-API-Key': 'admap_xxxxxxxx' }, // 순수 프론트엔드만
});

try {
  const { maps } = await api.listMaps();
  const style = await api.getStyle('main', 'light', 'downy'); // MapLibre style spec v8
  const { layers } = await api.listLayers('main');
  const taxonomy = await api.getLayerTaxonomy('main');
  const { sprites } = await api.listIcons();
  const { icons } = await api.getSprite(sprites[0].id);
} catch (err) {
  if (err instanceof ApiClientError && err.isRateLimit) {
    // 429 — 백오프 후 재시도 (SDK 는 재시도하지 않는다)
  }
}

import { useAvailableBrands, useLayerTaxonomy, useIcons } from '@team-draftype/react';

const API = '<BASE>/api/v1';
const auth = { headers: { 'X-API-Key': 'admap_xxxxxxxx' } }; // 순수 프론트엔드만

function Sidebar() {
  const { brands } = useAvailableBrands({ apiBase: API, mapId: 'main', ...auth });
  const { taxonomy } = useLayerTaxonomy({ apiBase: API, mapId: 'main', ...auth });
  const { sprites } = useIcons({ apiBase: API, ...auth });

  return (
    <ul>
      {brands.map((b) => <li key={b.id}>{b.name}</li>)}
      {taxonomy.segments.map((c) => <li key={c.id}>{c.name}</li>)}
      {sprites.map((s) => <li key={s.id}>{s.name} ({s.iconCount})</li>)}
    </ul>
  );
}

import { useConsumerLayers } from '@team-draftype/react';

function LayerManager() {
  const { create, list, remove, pending, error } = useConsumerLayers({
    apiBase: '<BASE>/api/v1',
    mapId: 'main',
    headers: { 'X-API-Key': 'admap_xxxxxxxx' }, // 순수 프론트엔드만; 프록시면 생략
  });

  async function upload(file: File) {
    // GeoJSON File/Blob 또는 순수 객체 모두 허용
    const layer = await create({ file, name: 'my-pois', category: 'point_poi' });
    const { layers } = await list();
    console.log(layer.layerId, layers.length);
  }

  return (
    <>
      <input type="file" accept=".geojson,.json" onChange={(e) => e.target.files && upload(e.target.files[0])} />
      {pending && <span>uploading…</span>}
      {error && <span>{error.message}</span>}
    </>
  );
}

const layer = await api.createConsumerLayer('main', {
  file: geojson,          // Blob/File 또는 GeoJSON 객체
  name: 'my-pois',
  category: 'point_poi',
});
const { layers } = await api.listConsumerLayers('main');