Mapbox, Google Maps 또는 MapLibre에서 이미 실행 중인 지도에 렌더러를 교체하지 않고 AI 채팅을 추가할 수 있습니다. 호스트 애플리케이션은 인터페이스, 권한, 비즈니스 로직과 지도 공급자 계정을 그대로 유지하고, Kaleidr는 대화 계층만 제공합니다. 이 계층은 위치 질문을 해석하고, 장소 및 지도 동작 데이터를 스트리밍하며, 확인된 위치를 지도에 표시하고, 답변이 진행되는 동안 실시간 지도를 이동합니다.
도우미를 추가한다고 해서 모든 제품 책임이 모델로 넘어가는 것은 아닙니다. 프로덕션 통합에는 오리진이 제한된 브라우저 키, 근거가 되는 원천 데이터, 공급자별 수명 주기 처리, 오류 상태, 접근성, 분석이 여전히 필요합니다. 다음 섹션에서는 SDK 마운트, 공급자별 설정, 키 보안, 답변의 근거 제시, UX, 테스트, 그리고 도우미가 실제 작업에 도움이 되는지 보여 주는 지표를 차례로 설명합니다. 이 글은 기능 개요가 아니라 아키텍처 및 통합 참고 자료로 활용하세요. SDK를 연결하기 전에 대화형 지도를 시험하려면 Kaleidr AI에서 시작할 수 있습니다. 수작업으로 만든 맞춤 지도와의 차이는 Kaleidr와 Google My Maps 비교를 참고하세요.
구축할 결과
완성된 경험은 동기화 상태를 유지하는 두 개의 표면, 즉 애플리케이션에서 이미 실행 중인 대화형 맵과 Kaleadr가 해당 맵 옆 또는 위에 장착하는 AI 채팅 패널을 조정합니다.사용자는 자연 언어로 목표를 표현하고 조수는 산문과지도 상태에서 동시에 응답합니다.어느 표면도 다른 표면을 이끌지 않습니다. 왜냐하면 그 값은 그것들을 함께 읽는 것에서 비롯되기 때문입니다.대표 요청은 다음과 같습니다.
오늘 오후에 열리는 해안가 근처에서 가족 친화적 인 장소를 보여주세요.
조수는 지리적 의도를 해결하고, 관련 장소를 반환하고, 라이브 맵에 핀을 추가하고, 결과 영역을 구성하고, 독자가 후속 질문으로 구체화 할 수있는 답변을 제공합니다.Kaleidr의 채팅 첨부 파일은 정확히이 루프를 중심으로 구축됩니다. product: "chat" 통합은 응용 프로그램이 이미 렌더링 한지도를 통해 Kaleidr Control Tower를 장착하고, 렌더러를 감지하고, 해결 된 장소를 플롯하고, 대화가 위치간에 이동함에 따라 카메라를 업데이트합니다.현재 문서에는 지원되는 라이브 맵 인스턴스 중 Mapbox, Google Maps, MapLibre 및 Leaflet이 나열되어 있습니다. Kaleidr 채팅 첨부 파일 참조 및 개발자 퀵스타트를 참조하십시오.대화 맵은 고정 필터에 저항하는 컨텍스트 질문에 적합하지만 기존 검색 상자는 알려진 저장소 ID를 찾거나 고정 카테고리를 선택하거나 미리 정의된 경로를 표시하는 것과 같은 결정적 작업에 여전히 더 나은 인터페이스일 수 있습니다.
아키텍처 작동 방식
대화식 AI를 추가한다고해서 모든 책임이 모델에 전달되는 것은 아닙니다. 신뢰할 수있는 구현은 응용 프로그램, 렌더러, AI 계층, 소스 시스템 및 보안 경계를 구분합니다.각 계층은 다른 사람들이 수행하지 말아야 할 작업을 소유하며, 그 분리는 답변을 근거로 유지하고 권한을 시행 할 수 있도록합니다.아래 다이어그램은 질문이 해당 레이어를 가로 질러 어떻게 흐르는지 추적하고 다음 표는 각 책임의 이름을 지정합니다.
| 컴포넌트 | 일차 책임 |
|---|---|
| 호스트 응용 프로그램 | 사용자 인터페이스, 로그인 사용자, 임차인 컨텍스트, 권한, 워크플로, 오류 복구 |
| 지도 렌더러 | 지도 표시, 카메라, 레이어, 마커, 컨트롤 및 공급자별 동작 |
| Kaleidr AI 레이어 | 의도 해석, 스트리밍 장소 답변, 지원되는 맵 작업 및 채팅 인터페이스 |
| 위치 서비스 | 구현에서 사용하는 해상도, 지오코딩, 공간 컨텍스트, 경로 및 공급자 데이터 |
| 비즈니스 시스템 | 권한 있는 개인, 운영, 재고, 고객 또는 재산 기록 |
| 호스트 백엔드 | 보안 검색, 승인, 임차인 격리, 감사 및 서버 측 API 호출 |
언어 모델은 주소, 영업 시간, 재고, 자격, 경로, 재산 상태 또는 내부 비즈니스 사실에 대한 권위있는 출처가되어서는 안됩니다.AI 계층은 요청을 해석하고 지원되는 작업을 조정하는 반면, 권위 있는 서비스는 답변이 의존하는 사실을 검증합니다.Kaleidr의 스트리밍 계약은 분리를 반영합니다. 산문은 점진적으로 도착하고 해결 된 장소는 구조화 된 place 이벤트로 도착하고지도 작업은 early_actions에 도착할 수 있으며 소스 정보는 grounding에 도착할 수 있으며 최종 end 이벤트는 전체 텍스트, 장소 및 작업을 수행합니다.kaleidr.js를 사용하는 개발자는 이러한 이벤트를 손으로 구문 분석하지 않으며 사용자 지정 클라이언트를 구축하는 팀은 SSE 와이어 계약 참조를 따를 수 있습니다.
시작 전 준비 사항
채팅 패널을 장착하기 전에 짧은 전제 조건 목록을 확인하여 런타임에 조용히 통합이 아닌 설정시 크게 실패합니다.이 단계에서 대부분의 문제는 하나의 누락 된 항목 (설정되지 않은 원본, 높이가없는지도 또는 올바른 범위가없는 키)으로 거슬러 올라갑니다.여기에 몇 분 동안 사용하면 브라우저가 간접적으로만 보고하는 오류에 대한 디버깅 세션이 저장되어 있습니다.다음 각 것을 확인합니다.
- 작업 Mapbox, Google Maps 또는 MapLibre 맵 인스턴스
- 채팅 API 액세스가 있는 Kaleidr 조직;
ai범위를 수행하는 Kaleidr 게시 가능한 브라우저 키;- 라이브 게시 가능한 키에 대해 적어도 하나의 허용 브라우저 출처;
- 현재
kaleidr.js로더; - 명시적 높이가 있는 맵 컨테이너;
- 채팅 컨테이너 또는 지원되는 사용자 지정 요소;
- Mapbox 또는 Google지도에서 요구하는 공급자 자격 증명;
- 실제 사용자 워크플로에서 도출한 대표 질문;
- 모든 운영 사실에 대한 정의 된 진실 소스 시스템.
전체 개발자 API 액세스(publishable keys, server keys 및 embed 지원)는 Kaleidr Pro 및 Enterprise 계획과 함께 제공되며, 무료 액세스는 타일 범위형 브라우저 키만 노출할 수 있습니다.빌드하기 전에 현재 Kaleidr 가격 책정 페이지 및 API 키 문서를 확인하여 가정한 계획이 실제로 발행할 수 있는 자격 증명과 일치합니다.API 키 페이지가 귀하의 계정에 대해 제한되는 경우 브라우저 코드에서 서버 자격 증명을 대체하는 대신 Kaleidr 팀으로부터 액세스를 요청하십시오.
Kaleidr SDK로 지도에 AI 채팅 추가하기
현재 로더는 단일 스크립트 태그입니다.공급자의 자체 스크립트보다 앞서 또는 옆에 페이지당 한 번 추가하면 공격적으로 캐시하는 것이 안전합니다.태그는 이 가이드의 모든 나중에 호출이 의존하는 글로벌 진입점을 설치합니다.
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
로더는 window.Kaleidr 및 <kaleidr-map> 요소를 설치하고 필요한 경우에만 백그라운드에서 선택한 제품 번들을 가져옵니다. 로더 자체는 MapLibre 또는 React를 번들로 만듭니다.SDK는 chat, viewer, editor 및 타일 제품을 지원하므로 빌드하는 특정 임베드에 대해 현재 페이지에 표시된 정확한 제품 값을 따르십시오.이미 소유하고 있는 라이브 맵의 경우 명령형 API가 가장 명확한 경로입니다.아래 예제는 기존 맵 개체를 Kaleidr에 바로 제공합니다.
<div class="map-chat-layout">
<div id="map" aria-label="Interactive location map"></div>
<aside id="chat" aria-label="AI map assistant"></aside>
</div>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<script>
function mountKaleidrChat(map) {
if (!map) {
throw new Error("A live map instance is required.");
}
return Kaleidr.mount("#chat", {
product: "chat",
publishableKey: "kld_pk_live_REPLACE_ME",
map,
});
}
</script>
Kaleidr.mount(target, options)는 제품 번들이 백그라운드에서 로드되는 동안 핸들을 동기적으로 반환하고 해당 핸들의 대기열 호출은 로딩이 완료되면 적용됩니다.호스트 응용 프로그램이 카메라를 업데이트하거나 경로 변경, 계정 스위치 또는 구성 요소가 마운트 해제되는 동안 통합을 분해 할 수 있도록 반환 된 핸들을 유지하십시오.다음과 하는 공급자 예제는 각 렌더러의 현재 설정을 이 마운트 호출과 결합합니다. 프로덕션에 배포하기 전에 스테이징에서 고정 공급자 버전과 최신 Kaleidr SDK 동작을 검증합니다.
Mapbox에 AI 채팅 추가하기
Mapbox GL JS는 브라우저 컨테이너 내부에 mapboxgl.Map 인스턴스를 생성하며 액세스 토큰이 필요합니다.Mapbox는 클라이언트 애플리케이션이 필요로 하는 것만으로 범위가 지정된 공개 토큰을 권장하며, URL 제한이 적용되고 비밀 범위 작업이 서버에 유지됩니다.아래 예제는 Kaliedr의 문서화된 마운트 호출과 해당 지침을 페어링합니다.두 스크립트를 모두 로드하고 맵을 만들고 맵이 load 이벤트를 타오면 채팅을 마운트합니다.
<link
href="https://api.mapbox.com/mapbox-gl-js/v3.27.0/mapbox-gl.css"
rel="stylesheet"
/>
<script src="https://api.mapbox.com/mapbox-gl-js/v3.27.0/mapbox-gl.js"></script>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<div class="map-chat-layout">
<div id="map" aria-label="Mapbox map"></div>
<aside id="chat" aria-label="AI map assistant"></aside>
</div>
<script>
const map = new mapboxgl.Map({
accessToken: "YOUR_MAPBOX_PUBLIC_TOKEN",
container: "map",
center: [-0.12, 51.5],
zoom: 11,
});
map.on("load", () => {
try {
window.kaleidrChat = Kaleidr.mount("#chat", {
product: "chat",
publishableKey: "kld_pk_live_REPLACE_ME",
map,
});
} catch (error) {
console.error("Kaleidr chat failed to mount:", error);
}
});
map.on("error", (event) => {
console.error("Mapbox error:", event.error ?? event);
});
</script>
Kaleidr의 공급자 가이드는 현재 Mapbox GL JS v3.0.0를 시연하는 반면 Mapbox의 CDN 가이드는 나중에 v3.27.0 빌드를 문서화하므로 응용 프로그램이 이미 테스트한 버전을 유지하고 이 통합을 위해서만 업그레이드하기 전에 호환성을 확인하십시오.Mapbox 토큰과 Kaleidr 게시 가능한 키는 서로 다른 시스템과 청구서를 별도로 인증합니다. 토큰은 렌더러와 Mapbox 서비스를 인증하고 게시 가능한 키는 브라우저 SDK를 통해 AI 채팅 범위를 인증합니다.가장 일반적인 설정 실패는 누락된 맵-컨테이너 높이, 거부되거나 지나치게 범위가 넓은 Mapbox 토큰이며 애플리케이션이 맵 인스턴스를 설정하기 전에 채팅을 설치하는 것입니다.
Google Maps에 AI 채팅 추가하기
Google Maps Platform에는 Maps JavaScript API 키가 필요하며 동적 라이브러리 가져오기, 직접 스크립트 로드 및 NPM 로더를 지원합니다.Kaleidrr의 공식 통합 가이드는 첫 번째 통합을 위한 가장 예측 가능한 옵션인 직접 콜백 패턴을 사용합니다.콜백은 google.maps.Map 인스턴스를 생성하고 Kaleidr.mount로 바로 전달합니다.아래 예제는 키, 콜백 및 마운트를 함께 연결합니다.
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<div class="map-chat-layout">
<div id="map" aria-label="Google map"></div>
<aside id="chat" aria-label="AI map assistant"></aside>
</div>
<script>
function initMap() {
try {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 51.5, lng: -0.12 },
zoom: 11,
});
window.kaleidrChat = Kaleidr.mount("#chat", {
product: "chat",
publishableKey: "kld_pk_live_REPLACE_ME",
map,
});
} catch (error) {
console.error("Google Maps or Kaleidr initialization failed:", error);
}
}
window.gm_authFailure = function () {
console.error("Google Maps authentication failed.");
};
</script>
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_KEY&callback=initMap"
async
></script>
Google 지도 키와 Kaleidr 키는 서로 다른 시스템과 청구서를 독립적으로 제공하므로 Google 키를 필요한 웹 사이트 및 API로 제한하고 Kaleidr 키를 정확한 허용된 출처로 제한합니다.Google의 Maps JavaScript API 키는 Google 맵을 로드하고 청구하는 반면 Kaleidr는 AI 채팅 기능을 로드하고 청구합니다.한 가지 더 중요한 차이점이 있습니다. 이 통합은 응용 프로그램 내부의 Google Maps JavaScript API 인스턴스를 대상으로하며 별도의 제품 인 Google My Maps 문서에는 첨부하지 않습니다.
MapLibre에 AI 채팅 추가하기
MapLibre GL JS는 벡터 타일 맵을 위한 오픈 소스 브라우저 렌더러이며 MapLibre 응용 프로그램은 스타일과 스타일 참조를 스타일링하는 타일, 글리프 및 스프라이트 소스를 제공해야 합니다.따라서 호스트 팀은 완전히 관리되는 맵 서비스보다 렌더러 및 인프라 결정을 더 많이 소유하고 있습니다.현재 MapLibre 문서는 버전 6에서 ES 모듈을 사용합니다.아래 예제는 해당 패턴을 Kaleaidr의 마운트 호출에 맞게 조정합니다.
<link
href="https://unpkg.com/maplibre-gl@6.0.0/dist/maplibre-gl.css"
rel="stylesheet"
/>
<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>
<div class="map-chat-layout">
<div id="map" aria-label="MapLibre map"></div>
<aside id="chat" aria-label="AI map assistant"></aside>
</div>
<script type="module">
import * as maplibregl from "https://unpkg.com/maplibre-gl@6.0.0/dist/maplibre-gl.mjs";
const map = new maplibregl.Map({
container: "map",
style: "https://demotiles.maplibre.org/style.json",
center: [-0.12, 51.5],
zoom: 11,
});
map.on("load", () => {
try {
window.kaleidrChat = Kaleidr.mount("#chat", {
product: "chat",
publishableKey: "kld_pk_live_REPLACE_ME",
map,
});
} catch (error) {
console.error("Kaleidr chat failed to mount:", error);
}
});
map.on("error", (event) => {
console.error("MapLibre error:", event.error ?? event);
});
</script>
Kaleidr의 현재 MapLibre 가이드는 글로벌 UMD 스타일의 MapLibre 빌드와 Kaleidr 호스팅 스타일 URL을 사용하는 반면 공급자의 문서는 버전 6 ES 모듈로 이동하므로 글로벌 및 모듈 빌드를 혼합하는 대신 애플리케이션에 대해 일관된 MapLibre 버전과 로드 방법을 선택하십시오.MapLibre는 자체 범용 호스팅 베이스맵을 제공하지 않습니다. 즉, 타사 타일 또는 스타일 제공업체는 따라야 하는 자체 자격 증명, 속성, 라이선스, 사용 및 청구 요구 사항을 제공합니다.Kaleidr가 디자인한 타일은 현재 계획 및 스타일 구성이 해당 워크플로를 지원하는 MapLibre와 페어링할 수도 있습니다.
도우미가 지도를 이해하는 방식
범용 대화 도우미는 장소를 설명 할 수 있지만 페이지의지도와 조정할 수는 없습니다.그 격차를 좁히는 것은 단순히 대화식이 아닌 보조지도를 인식하게 만드는 것입니다.지도 인식 도우미는 언어를 렌더러 상태와 연결하는 구조화된 상호 작용 루프가 필요합니다.각 회전은 다음 시퀀스를 통해 실행됩니다.
- 사용자가 위치 질문을 제출합니다.
- Kaleidr는 장소, 지역, 근접성, 카테고리 또는 경로 의도를 식별합니다.
- 관련 서비스는 장소를 해결하거나 승인 된 데이터를 검색합니다.
- 구조화된 장소 및 액션 이벤트는 클라이언트로 스트리밍합니다.
- 통합은 핀을 추가하거나, 영역을 프레임하거나, 결과를 강조 표시하거나, 지원되는 다른 맵 작업을 적용합니다.
- 인터페이스는 눈에 보이는 지리적 증거와 함께 산문 답변을 제공합니다.
Kaleidr는 루프를 작은 스트림 이벤트 집합으로 노출하고 각각은 단일 종류의 결과를 전달합니다.클라이언트는 하나의 최종 페이로드를 기다리는 대신 한 번 구독하고 각 이벤트에 반응합니다.이러한 방식으로 스트림을 읽는 것은 대답이 여전히 형성되는 동안 인터페이스의 반응성을 유지합니다.문서화 된 이벤트는 다음과 같습니다.
place는 해결된 장소와 좌표를 운반합니다.place_linked는 기존 장소를 풍부하게합니다.early_actions는 피팅 바운드 또는 결과 강조와 같은 초기 맵 작업을 수행할 수 있습니다.grounding는 근거 제시된 회전을 위한 소스를 운반합니다.end는 전체 텍스트, 장소 및 작업을 포함하는 권위 있는 최종 봉투입니다.error는 오류 메시지로 스트림을 종료합니다.
이러한 구조화된 이벤트를 애플리케이션 계약으로 취급하고 SDK 또는 API가 이미 해결된 장소 개체를 제공할 때 산문에서 장소 이름을 긁지 마십시오.산문은 이름을 의역할 수 있기 때문에 구별이 중요하며, 해결된 장소 개체는 안정적인 식별자를 전달하고 렌더러가 결과를 올바르게 플롯해야 하는 좌표를 조정합니다.텍스트가 아닌 개체에 구축하면 모델의 문구가 릴리스 간에 변경될 때 통합이 안정적으로 유지됩니다.
게시 가능 키와 서버 키
Kaleidr는 동일한 조직 및 기능 범위에 대해 두 가지 자격 증명 양식을 제공하며, 이를 똑바로 유지하는 것이 브라우저 통합에서 가장 중요한 단일 보안 결정입니다.게시 가능한 키는 브라우저에 속하며 서버 키는 절대 없습니다.그것들을 섞는 것은 작업 데모를 유출 된 자격 증명으로 바꿀 가능성이 가장 높은 실수입니다.아래 다이어그램과 표는 각 사람이 어떻게 이동하는지 요약합니다.
| 결정 영역 | 게시 가능한 키 | 서버 키 |
|---|---|---|
| 접두사 | kld_pk_live_…는 |
kld_sk_live_…는 |
| 런타임 | 브라우저 SDK, HTML, <kaleidr-map> |
백엔드 서비스만 |
| 브라우저 노출 | 페이지 소스에 표시되도록 설계 | 페이지 소스에 절대 나타나지 마십시오. |
| 인증하는 방법 | SDK는 짧은 수의 오리진 바운드 세션을 위해 교환합니다. | Authorization: Bearer … 또는 X-Api-Key로 전송 |
| Origin 컨트롤 | 라이브 키는 승인 된 출처가 필요합니다. | 브라우저 지원되지 않음; CORS 보조금 없음 |
| 적절한 사용 | SDK를 통한 채팅, 편집기 및 타일 임베드 | 서버 간 플랫폼 API 호출 |
| 주요 규칙 | 정확한 출처로 제한하고 SDK를 통해서만 사용 | 안전하게 보관하고 브라우저 및 버전 제어에서 벗어나게하십시오. |
허용된 출처가 없는 라이브 게시 가능한 키는 문서화된 흐름에서 거부되므로 키를 발행할 때 정확한 제작 및 준비 기원을 추가합니다.각 요청의 브라우저 Origin 헤더는 목록과 정확히 일치하므로 허용된 출처는 경로나 후행 슬래시가 없는 구성 및 호스트인 https://app.example.com와 같은 맨손으로 원본이어야 하며 로컬 개발 출처를 포함하여 귀하가 제공하는 모든 출처를 나열합니다.키는 또한 기능 범위를 수행합니다. 채팅 및 추론용 ai, 편집기 경로용 design, 설계된 베이스맵 및 타일용 maps입니다.
플랫폼은 별개의 상태 코드로 자격 증명 문제를 신호하고 인터페이스는 각각을 다르게 처리해야합니다.누락, 유효하지 않음, 취소 또는 만료된 자격 증명은 401를 반환합니다. 필요한 범위가 없는 유효한 키는 insufficient_scope로 403를 반환합니다. 할당량 또는 동시 통화 한도는 인터페이스가 일반 제품 실패가 아닌 용량 또는 계획 조건으로 취급해야 하는 429를 반환합니다.Mapbox 및 Google Maps 자격 증명은 Kaleidr 자격 증명과 별도로 유지되므로 각 공급자의 제한 사항을 독립적으로 적용하십시오.
신뢰할 수 있는 위치 데이터로 AI 답변에 근거 제공하기
장소 관련 환각은지도가 잘못된 대답을 구체적이고 신뢰할 수있게 만들기 때문에 특히 해롭습니다.일반 텍스트의 잘못된 주소가 두 번째 보기를 초대하는 반면 좌표에 고정된 동일한 오류가 확인된 대로 읽습니다.지도의 권위는 통합이 가정하기보다는 반드시 얻어야 하는 것입니다.일반적인 실패 모드는 디자인하기 전에 명명할 가치가 있습니다.
- 날조된 사업 또는 시설;
- 잘못된 도시로 해결된 모호한 장소 이름;
- 오래된 주소 또는 영업 시간;
- 같은 장소를 나타내는 중복 레코드;
- 신청서가 승인하지 않은 서비스를 통해 요청되는 경로;
- 가시 또는 허용된 지역 외부의 추천;
- 내부 시스템과 충돌하는 운영 주장.
근거 제시된 아키텍처는 자유 형식 생성이 아닌 해상도와 검색을 통해 모든 답변을 라우팅하여 모델을 차선에 유지합니다.이 모델은 의도를 제안하고 권위있는 서비스는 어떤 것이지도에 도달하기 전에 무엇이 사실인지 결정합니다.각 단계는 모델이 자체적으로 수행하는 단계가 아닌 애플리케이션 컨트롤의 검문소입니다.흐름은 사용자의 단어에서 눈에 보이는 확인 결과에 이르기까지 한 방향으로 읽습니다.
사용자 의도 → AI 해석 → 권위 있는 검색 또는 장소 해상도 → 허용지도 동작 → 눈에 보이는 답변
실용적인 통제는 그 흐름에서 이어집니다.플롯하기 전에 장소를 좌표와 안정적인 식별자로 해결하고, 답변에 사용되는 지리적 영역을 표시하고, 응답이 근거가 될 때 소스 링크 또는 레이블을 유지하고, 공공 장소 사실을 개인 운영 데이터와 구별합니다.즉흥적으로 지원하는 대신 지원되지 않는 작업을 거부하고, 눈에 보이는 무결과 상태를 제공하고, 사용자가 위치 모호성을 수정하고, 비즈니스 답변에 사용되는 소스 및 임차인 컨텍스트를 기록합니다.무엇보다도 최종 구조화 된 결과를 그것을 수반하는 자유 형식 산문이 아닌 계약으로 취급하십시오.장소 정체성, 증거 및 추천 신호에 대한 광범위한 논의는 AI 기반 지역 비즈니스 발견에 대한 Kaleidr 기사와 대화 표면 뒤의 아키텍처 및 보안 원칙을 참조하십시오. 대화식지도에 AI 채팅 도우미 추가.
도우미가 비공개 비즈니스 데이터를 사용할 수 있나요?
AI 채팅 패널은 회사의 운영 데이터베이스에 무제한 액세스 권한을 받아서는 안 됩니다. 단일 오버브로드 쿼리가 현재 질문 요구 사항보다 훨씬 더 많이 노출될 수 있기 때문입니다.따라서 개인 데이터 통합은 모델이 방황 할 수있는 개방형 연결이 아닌 명시 적 검색 및 승인 설계가 필요합니다.가장 안전한 기본값은 특정 데이터 집합, 필드 세트 및 액세스 규칙이 각 추가를 정당화할 때까지 아무 것도 노출하지 않는 것입니다.개인 소스를 조수에게 연결하기 전에 아래 경계를 설정하십시오.
- 어시스턴트가 쿼리할 수 있는 데이터 집합
- 어떤 속성이 소스 시스템을 떠날 수 있습니까?
- 사용자 및 임차인이 각 레코드에 액세스할 수 있는 경우;
- 세입자 격리가 시행되는 방법;
- 어떤 필드가 민감한가;
- 검색이 호스트 백엔드를 통해 실행되는지 여부;
- 무엇이 기록되고 얼마나 오래;
- 소스 속성이 보존되는 방법;
- 지역, 계약 또는 유지 요구 사항이 적용되는 경우;
- 어떤 작전이 인간의 확인이 필요한가.
Kalaidr Enterprise는 위치 인식 제품 스택에 대한 추론 API, 순위 시스템, 분석 및 배포 지원을 설명하지만 공개 문서는 모든 개인 데이터베이스에 대해 하나의 범용 커넥터를 설정하지 않습니다.검색 경로는 일반 커넥터가 귀하를 대신하여 가정할 수 없는 자체 시스템, 권한 모델 및 규정 준수 제약 조건에 따라 다릅니다.귀하의 환경에 대해 정확한 소스, 승인 및 검색 메커니즘이 문서화될 때까지 개인 데이터 경로를 구현별 또는 엔터프라이즈 통합으로 취급합니다.
유용한 지도 채팅을 위한 UX 패턴
기술적으로 올바른 통합은 채팅과지도가 협력하기보다는주의를 끌기 위해 경쟁하는 경우에도 실패 할 수 있습니다.지도를 숨기는 패널 또는 설명 없이 점프하는 지도는 사용자가 신뢰할 수 있는 표면을 확신하지 못합니다.아래 패턴은 두 가지가 하나의 답변으로 작동하도록 유지하며, 각각은 페어링이 깨지는 경향이있는 특정 방법을 해결합니다.
지도를 계속 표시하기
지도는 대화가 다룰 수 있는 배경이 아니라 대답의 일부입니다.데스크톱에서는 전체 화면 채팅 표면 뒤에 숨기지 말고 모바일에서는 재현 가능한 시트 또는 결과를 이해하기에 충분한 맵 컨텍스트를 보존하는 컴팩트 한 채팅 모드를 사용하십시오.핀을 볼 수 없는 사용자는 대답이 올바른지 판단할 수 없습니다.
도우미가 변경한 내용을 보여 주기
조수가 마커를 추가하거나, 카메라를 변경하거나, 영역을 강조 표시하거나, 경로를 시작하면 작업을 인식 할 수 있습니다.눈에 보이는 원인이 없는 지도 상태가 갑자기 점프하는 것은 버그로 읽으므로 변경 사항을 애니메이션으로 만들거나 주석을 지정합니다.사용자는 지도가 왜 이동했는지 항상 이해해야 합니다.
수동 컨트롤 유지하기
사용자는 여전히 보조자가 작동한 후에도 팬, 확대/축소, 재설정, 위치, 필터 및 직접 마커 선택이 필요합니다.AI는 사용자가 이미 의존하는 기존 복구 경로를 제거하지 않고 상호 작용 경로를 추가해야 합니다.대화를 대체하는 것이 아니라 표준과 함께 하나 더 통제 할 수있는 것으로 취급하십시오.
실행 취소와 재설정 지원하기
보조 마커를 지우고, 이전 카메라를 복원하고, 대화를 다시 시작하는 명확한 방법을 제공합니다.돌이킬 수 없는 맵 상태는 탐색 질문 중에 혼란을 야기하며, 여기서 사용자는 종종 마지막 답변과 한 가지 답변을 비교하려고 합니다.하나의 리셋 경제는 막다른 골목을 탐험으로 다시 바꾼다.
추천 질문 제공하기
제안은 시스템에서 수행 할 수있는 작업을 사용자에게 가르치고 빈 요청 또는 지원되지 않는 요청을 줄입니다.일반 관광 프롬프트가 아닌 실제 제품 워크 플로우에 대한 예제를 기반으로합니다. 실제 작업을 반영하는 제안은 가치를 보여주고 잘 대답 할 수있는 쿼리를 향해 모델을 조종하기 때문입니다.제품이 성장함에 따라 회전하므로 패널은 냉동 스타터 세트가 아닌 현재 기능을 광고합니다.
결과 없음 및 오류 상태 설계하기
모호한 장소, 만료된 세션, 허용되지 않는 출처, 공급자 오류, 할당량 조건 및 지원되지 않는 요청에서 경기 금지 결과를 구별합니다."뭔가 잘못되었습니다"는 맵 워크 플로우에 충분히 실행 가능하지 않습니다. 복구 단계는 나쁜 출처와 빈 결과 집합 사이에 크게 다릅니다.조건을 지정하고 다음 단계를 제공합니다.
접근성을 고려해 설계하기
채팅 영역과 지도에 레이블을 지정하고 키보드 주문을 보존하며 화면 판독기를 압도하지 않고 스트리밍 상태를 발표합니다.마커 색상만을 통해 전달되는 모든 정보는 텍스트로도 제공되어야 하므로 색상을 구별할 수 없는 사용자는 여전히 전체 답변을 받습니다.여기서 접근성은 근거 제시와 동일한 규율입니다. 대답은 단순히 살펴보는 것이 아니라 읽히는 데 살아남아야 합니다.
추적할 이벤트와 지표
원시 채팅이 열리면 가치가 증명되지 않으므로 실제로 사용자가 맵 작업을 완료하는 데 도움이되는지 여부를 측정하는 도우미를 계측하십시오.아래 이벤트 이름은 자동으로 방출되는 Kaleidr Analytics 이벤트에 대한 주장이 아닌 편집 권장 사항입니다.자신의 스키마에 맞게 조정하지만 나중에 메트릭이 의존하는 시도, 성공 및 실패 사이의 분할을 유지합니다.다음과 같은 이벤트 세트에서 시작합니다.
map_chat_opened
map_chat_question_submitted
map_chat_answer_returned
map_chat_no_result
map_chat_error
map_action_applied
map_result_selected
map_marker_opened
map_chat_followup_submitted
map_chat_shared
map_chat_to_editor
이러한 이벤트에서 실제로 유용성을 반영하는 메트릭은 볼륨보다는 완료 및 결과 측정입니다.열기 및 질문 횟수는 트래픽을 설명하지만 조수가 작업을 해결했는지 여부에 대해서는 아무 말도하지 않습니다.따라서 유용한 대시 보드는 각 활동 수와 생성 예정인 결과를 쌍으로합니다.다음과 같이 완성된 작업을 추적하는 조치에 무게를 두십시오.
- 질문 완료율;
- 성공률에 대한 답변;
- 결과 없음 비율;
- 기술적 오류율;
- 지도-행동 성공률;
- 결과 선택률;
- 마커 개방 속도;
- 후속 질문 비율;
- 유용한 결과에 시간;
- 저장 또는 공유 비율;
- 다운스트림 변환;
- 채팅 중심 지도 작업을 완료한 사용자 중 7일 반환율.
공급자, 장치, 쿼리 유형, 고객 계정 및 활성화된 워크플로별로 결과를 세분화합니다. 집계 번호는 어시스턴트가 작동하는 곳과 그렇지 않은 위치를 숨기기 때문입니다.낮은 결과 선택률과 결합 된 높은 공개 비율은 일반적으로 제품 가치보다는 호기심을 나타냅니다. 이는 추적만으로도 열리는 것이 잘못 읽은 것입니다.세그먼트를 함께 읽으면 어떤 표면이 더 많은 투자를받을 자격이 있고 어떤 표면이 재고가 필요한지 알 수 있습니다.
프로덕션 테스트 체크리스트
내부 데모 프롬프트는 일반적으로 프로덕션 사용자가 실제로 입력하는 질문보다 깨끗하고 구체적입니다.깔끔한 입력에 대해서만 테스트하면 철자가 틀린 장소에서 만료 된 세션에 이르기까지 가장 중요한 실패 상태를 숨 깁니다.아래 목록은 모호한 언어, 공급자 오류 및 수명 주기 이벤트를 의도적으로 혼합합니다. 각 목록은 통합의 다른 부분을 연습하기 때문입니다.배송하기 전에 이러한 지저분한 입력 및 오류 조건에 대해 조수를 연습하십시오.
- 막연한 질문;
- 철자가 틀린 위치;
- 다른 지역의 중복 장소 이름;
- 빈 결과 집합;
- 잘못된 게시 가능한 키;
- 불허된 출처;
- 만료된 브라우저 세션;
- 누락 된 기능 범위;
429할당량 또는 동시성 응답;- 느리거나 중단된 네트워크;
- 공급자 할당량 또는 인증 실패;
- 지도 스타일 재장전;
- 모바일 크기 조정 및 방향 변경;
- 키보드 전용 탐색;
- 스크린 리더 라벨 및 라이브 업데이트;
- 지원되지 않는 요청;
- 승인되지 않은 개인 데이터 요청;
- 지도 준비 전에 채팅 장착;
- 한 페이지에 여러 맵 인스턴스;
- 경로 변경 및 구성 요소 unmounting;
- 사용자, 조직 또는 임차인 전환.
흔한 구현 실수
아래 실패는 통합에서 반복되며 각 실패는 깨끗한 수정이 있습니다.아무도 이국적이지 않기 때문에 우연히 배송하기 쉽습니다.휴식을 취하는 이유, 깨는 이유 및 대신해야 할 일에 대한 체크리스트로 테이블을 읽으십시오.
| 실수 | 무슨 일이 일어나는지 | 추천 수정 |
|---|---|---|
| 사용 가능한 맵 인스턴스가 존재하기 전에 채팅을 장착 | 조수가 의도한 렌더러를 제어할 수 없음 | 공급자의 문서화된 초기화 지점 후 마운트하고 라이브 맵 개체를 전달 |
| Kaleidr 서버 키 노출 | 백엔드 베어러가 공개적으로 회복 가능해진다. | 브라우저에서 원본 제한 게시 가능한 키 사용 |
| 허용한 기원을 잊기 | 라이브 브라우저 인증이 거부되거나 불필요하게 노출됩니다. | 키를 발행 할 때 정확한 생산 및 준비 기원을 추가 |
| 모델 산문을 소스 데이터로 취급 | 잘못된 사실은 권위있는 것으로 제시 될 수 있습니다. | 해결된 장소, 근거 제시 및 권위 있는 비즈니스 시스템 사용 |
| 무제한 지도 작업 허용 | 인터페이스가 예기치 않은 상태로 들어갈 수 있습니다. | 문서화되고 허용된 작업만 적용 |
| 수동 컨트롤 교체 | 사용자는 복구 및 직접 탐색을 잃게 | 표준 맵 컨트롤 및 재설정 경로 보존 |
| 채팅만 열림 추적 | 참여는 작업 성공으로 오인됩니다. | 답변, 맵 동작, 결과 선택 및 다운스트림 결과 추적 |
| 무과자 상태 무시 | 사용자는 침묵을 깨진 제품으로 해석합니다. | 특정 빈 상태 메시지와 복구 제안 반환 |
| 혼합 공급자 및 Kaleidrr 자격 증명 | 청구, 보안 및 디버깅이 불분명 해집니다. | 자격 증명, 제한 및 모니터링을 별도로 유지 |
| 모바일 레이아웃 테스트 실패 | 채팅은지도를 가리거나 터치 탐색을 깨뜨립니다. | 반응형 패널 및 테스트 방향 변경 사용 |
Mapbox, Google Maps, MapLibre 중 무엇을 선택해야 하나요?
Kaleidr는 AI 상호 작용 계층이므로 렌더러 결정은 여전히 조수가 아닌 호스트 제품에 속합니다.올바른 렌더러는 기존 툴링, 스타일링 제어 및 인프라 식욕에 따라 다르며 채팅 계층은 변경되지 않습니다.아래 표는 각 렌더러가 맞는 곳과 호스트 팀이 계속 소유하고 있는 내용을 요약한 것으로, Kaleidr는 세 가지 모두에 걸쳐 일관된 대화 계층으로 추가됩니다.
| 공급자 | 강한 적합 때 | 호스트 팀 고려 사항 |
|---|---|---|
| Mapbox | 이 응용 프로그램은 Mapbox의 관리형 개발자 툴링, 스타일, 데이터 생태계 및 GL JS 렌더러를 사용합니다. | 공개 토큰, URL 제한, 공급자 사용, 스타일 라이프사이클 및 Mapbox 청구 |
| Google 지도 | 응용 프로그램은 Google Maps Platform, Google 장소 컨텍스트 또는 기존 Maps JavaScript 구현에 의존합니다. | 제한된 Google API 키, 지원 API, Google 청구, 콜백 또는 로더 수명 주기 |
| MapLibre | 팀은 오픈 소스 렌더러와 스타일, 타일 및 인프라에 대한 더 큰 제어를 원합니다. | 스타일 및 타일 소스, 속성, 호스팅, 성능, 공급자 라이센스 및 버전 관리 |
| Kaleidr | 응용 프로그램은 지원되는 렌더러에 대한 대화식 위치 상호 작용이 필요합니다. | 게시 가능한 키, ai 범위, 허용 기원, g 할당량, 근거 제시 및 제품 분석 |
현재 맵이 이미 애플리케이션의 렌더링 요구 사항을 충족할 때 렌더링을 채팅만 추가하도록 전환하지 마십시오.기존 라이브 맵 인스턴스를 대신 Kaleidr에 전달하고 대화 계층이 특정 정의된 사용자 작업을 개선하는지 여부를 측정합니다.렌더러 마이그레이션은 크고 별도의 결정이며 채팅 기능보다는 자체 렌더링 및 인프라 장점에 따라 서야합니다.
최종 구현 체크리스트
- 기존 맵 워크플로우 확인
- 지원되는 렌더러 확인
- 공급자 맵 로드 성공
- 공급자 자격 증명 제한
- Kaleidr 계획 및 액세스 확인
- Publishable key 생성
ai범위 확인- 허용된 origins configured
- 브라우저 코드에서 제외된 서버 키
kaleidr.js한 번 적재Kaleidr.mount에 전달 하는 라이브 맵 인스턴스- 애플리케이션 라이프사이클과 연결된 채팅 라이프사이클
- 지원되는 맵 동작 확인
- Source-of-truth systems 문서화
- No-result 및 오류 상태 구현
- Quota 처리 구현
- 분석 이벤트 추가
- 보안 및 개인 정보 보호 검토 완료
- 접근성 테스트
- 모바일 동작 테스트
- 실제 사용자 질문 테스트
결론
Mapbox, Google Maps 및 MapLibre는 지도 인식 AI 채팅을 추가하기 위해 교체 할 필요가 없습니다. 레더러가지도 표시 및 공급자 별 동작을 계속 소유하고 있기 때문입니다.호스트 애플리케이션은 사용자, 권한, 비즈니스 논리 및 데이터 거버넌스를 계속 소유하고 있으며, Kaleidr는 장소 의도를 해결하고, 구조화된 위치 결과를 스트리밍하고, 장소를 플롯하고, 지원되는 맵 작업을 조정하는 대화 계층을 추가합니다.두 가지 책임은 구별되며, 이는 통합을 디버그할 수 있고 답변이 근거가 있는 것입니다.
이 통합은 자연 언어가 페이지에 채팅 상자를 추가 할 때가 아니라 위치 워크 플로우에서 의미있는 마찰을 줄일 때 그 자리를 얻습니다.답변이 근거가 있고, 브라우저 및 서버 자격 증명이 분리되어 있고, 공급자 책임이 명시적으로 유지되며, 채팅 활동만으로 완료된 맵 작업을 측정하는 경우에만 성공합니다.그 네 가지 조건에 반하여 건설하고, 조수는 참신하기보다는 진정한 상호 작용 경로가됩니다.프롬프트 첫 번째 맵 저작이 필요한 팀(기존 맵에서 채팅할 뿐만 아니라)은 Kaleidr Studio에서 시작할 수 있습니다.
기존 지도에 AI 상호작용 추가하기
레너를 교체하지 않고 이미 실행한 Mapbox, Google Maps 또는 MapLibre 맵에 Kaleidr 채팅을 연결합니다.현재 SDK는 라이브 맵 인스턴스와 원본 제한 게시 가능한 키만 필요하며 마운트 호출은 세 가지 모두 동일합니다.ai 범위로 키를 만들고 허용된 출처를 추가하고 지도를 Kaleidr.mount에 전달합니다.
전체 구현 검토하기
Kaleidr의 개발자 문서는 이 가이드가 요약한 조각을 프로덕션 빌드 요구 깊이에서 다룹니다.SDK 퀵스타트, 공급자별 가이드 및 인증 모델은 뷰어, 편집기, 타일 및 플랫폼-API 참조와 함께 있습니다.작업 프로토 타입에서 경화 된 통합으로 이동할 때 거기에서 시작하십시오.
자주 묻는 질문
기존 지도에 AI 채팅을 추가할 수 있나요?
네.Kaleidr의 채팅 제품은 라이브 맵 인스턴스를 허용하며 현재 Mapbox, Google Maps, MapLibre 및 Leaflet 첨부 파일을 문서화합니다.기존 렌더러는 맵을 표시할 책임이 있으며 Kaleidr는 그 위에 대화 레이어를 추가합니다.
Mapbox, Google Maps 또는 MapLibre를 교체해야 하나요?
아니.호스트 애플리케이션은 기존 렌더러를 유지할 수 있으며, Kaleidr는 라이브 맵 인스턴스에 연결된 AI 상호 작용 계층으로 작동합니다.맵 인스턴스를 Kaleidr.mount에 전달하는 것으로 충분합니다. 렌더러 마이그레이션이 필요하지 않습니다.
Kaleidr는 실시간 지도에 어떻게 연결되나요?
kaleidr.js를 로드하고 공급자의 라이브 맵 개체를 생성하거나 획득하고 product: "chat", 게시 가능한 키 및 맵 인스턴스로 Kaleidr.mount를 호출합니다.Kaleidr는 지원되는 렌더러를 자동으로 감지하고 마커와 카메라를 조정합니다.
게시 가능 키와 서버 키 중 무엇을 사용해야 하나요?
브라우저 SDK를 통해 게시 가능한 키를 사용하여 채팅, 편집기 또는 타일 임베드를 사용하고 백엔드 플랫폼 API 요청에만 서버 키를 사용합니다.게시 가능한 키는 페이지 소스에 표시되도록 설계되었습니다. 서버 키는 절대 그렇게 해서는 안됩니다.
존재하지 않는 장소를 답변하지 않도록 하려면 어떻게 해야 하나요?
권위있는 위치 서비스를 통해 장소를 해결하고, 구조화 된 장소와 근거 제시 이벤트를 사용하고, 비즈니스 시스템을 진실의 원천으로 유지합니다.조수가 취할 수있는지도 작업을 허용하고 명시 적 결과 및 모호성 상태를 제공하여 장소를 발명하는 대신 불확실한 대답 표면을 제공합니다.
Kaleidr가 Mapbox 또는 Google Maps 사용료를 지불하나요?
아니.공급자 계정과 Kaleidr 계정은 별개입니다. Mapbox 또는 Google은 렌더러 및 관련 공급자 서비스를 청구하고 Kaleidr는 Kaleidr 조직에 대한 AI 기능을 청구합니다.각 공급자는 자체 제한 및 할당량을 독립적으로 적용합니다.
AI 채팅은 모든 지도에 적합한가요?
아니.고정 검색 상자, 필터 또는 직접 맵 컨트롤은 알려진 저장소를 열거나 하나의 카테고리를 선택하는 것과 같은 간단한 결정적 작업에 더 좋습니다.AI 채팅은 사용자가 고정 필터가 캡처할 수 없는 컨텍스트, 변경 또는 다변량 위치 의도를 표현해야 할 때 가장 유용합니다.
참고 문헌
- Google. Load the Maps JavaScript API. Google Maps Platform documentation. Accessed 24 July 2026. https://developers.google.com/maps/documentation/javascript/load-maps-js-api
- Google. Google Maps Platform security guidance. Google Maps Platform documentation. Accessed 24 July 2026. https://developers.google.com/maps/api-security-best-practices
- Kaleidr. Attach Kaleidr AI to a Google map. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/guides/attach-ai-to-google-maps
- Kaleidr. Attach Kaleidr AI to a Mapbox map. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/guides/attach-ai-to-mapbox
- Kaleidr. Attach Kaleidr AI to a MapLibre map. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/guides/attach-ai-to-maplibre
- Kaleidr. Auth & scopes. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/platform-api/auth-and-scopes
- Kaleidr. Chat — attach AI to your map. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/sdk/chat-attach
- Kaleidr. CORS & allowed origins. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/platform-api/cors-and-allowed-origins
- Kaleidr. Get an API key. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/get-an-api-key
- Kaleidr. Pricing & Plans. kaleidr.com. Accessed 24 July 2026. https://kaleidr.com/pricing
- Kaleidr. Quickstart. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/quickstart
- Kaleidr. SSE wire contract. Kaleidr Developer Docs. Accessed 24 July 2026. https://docs.kaleidr.com/platform-api/sse-wire-contract
- Mapbox. Get started with Mapbox GL JS using a CDN. Mapbox GL JS documentation. Accessed 24 July 2026. https://docs.mapbox.com/mapbox-gl-js/guides/get-started/use-with-cdn/
- Mapbox. How to use Mapbox securely. Mapbox Help. Accessed 24 July 2026. https://docs.mapbox.com/help/dive-deeper/how-to-use-mapbox-securely/
- MapLibre. Display a map. MapLibre GL JS documentation. Accessed 24 July 2026. https://maplibre.org/maplibre-gl-js/docs/examples/display-a-map/
- MapLibre. Map event types. MapLibre GL JS API documentation. Accessed 24 July 2026. https://maplibre.org/maplibre-gl-js/docs/API/type-aliases/MapEventType/
@misc{kaleidr_chat_attach,
title = {Chat — attach AI to your map},
author = {{Kaleidr}},
note = {Kaleidr Developer Docs; accessed 24 July 2026},
url = {https://docs.kaleidr.com/sdk/chat-attach}
}
@misc{kaleidr_auth_scopes,
title = {Auth \& scopes},
author = {{Kaleidr}},
note = {Kaleidr Developer Docs; accessed 24 July 2026},
url = {https://docs.kaleidr.com/platform-api/auth-and-scopes}
}
@misc{kaleidr_mapbox_guide,
title = {Attach Kaleidr AI to a Mapbox map},
author = {{Kaleidr}},
note = {Kaleidr Developer Docs; accessed 24 July 2026},
url = {https://docs.kaleidr.com/guides/attach-ai-to-mapbox}
}
@misc{kaleidr_google_maps_guide,
title = {Attach Kaleidr AI to a Google map},
author = {{Kaleidr}},
note = {Kaleidr Developer Docs; accessed 24 July 2026},
url = {https://docs.kaleidr.com/guides/attach-ai-to-google-maps}
}
@misc{kaleidr_maplibre_guide,
title = {Attach Kaleidr AI to a MapLibre map},
author = {{Kaleidr}},
note = {Kaleidr Developer Docs; accessed 24 July 2026},
url = {https://docs.kaleidr.com/guides/attach-ai-to-maplibre}
}
@misc{mapbox_cdn_guide,
title = {Get started with Mapbox GL JS using a CDN},
author = {{Mapbox}},
note = {Mapbox GL JS documentation; accessed 24 July 2026},
url = {https://docs.mapbox.com/mapbox-gl-js/guides/get-started/use-with-cdn/}
}
@misc{google_maps_js_loader,
title = {Load the Maps JavaScript API},
author = {{Google}},
note = {Google Maps Platform documentation; accessed 24 July 2026},
url = {https://developers.google.com/maps/documentation/javascript/load-maps-js-api}
}
@misc{maplibre_display_map,
title = {Display a map},
author = {{MapLibre}},
note = {MapLibre GL JS documentation; accessed 24 July 2026},
url = {https://maplibre.org/maplibre-gl-js/docs/examples/display-a-map/}
}