OpenStreetMap 데이터로 만든 벡터 지도 타일을 무제한으로 이용하세요. MapLibre GL이나 Leaflet에 바로 연결할 수 있습니다. API 키도, 사용량 제한도, 예상치 못한 청구서도 없습니다.
대부분의 지도 타일 서비스는 무료 크레딧으로 시작합니다. 하지만 방문자가 늘면 사용량에 따른 요금이 붙어 작은 실험에도 비용이 발생합니다. 사용량 계산은 불투명하고, 지도를 불러올 때마다 요금이 쌓이고, 가격표를 이해하려면 스프레드시트까지 필요하죠. Google Maps와 Mapbox도 이런 방식입니다. 무료인 줄 알았던 서비스가 프로젝트의 부담이 됩니다.
LFMaps는 다릅니다. 무료는 말 그대로 무료입니다. 뜻밖의 요금도, 사용량 제한도, 청구서도 없습니다.
지도 구현에 필요한 기능만 담았습니다.
타일 URL만 넣으면 끝입니다. 회원가입도, 액세스 토큰도, 관리 화면도 필요 없습니다.
할당량도, 숨겨진 제한도, 지도 로드 횟수에 따른 과금도 없습니다. 필요한 만큼 이용하세요.
지도를 10번 보든 1,000만 번 보든 비용은 0원입니다.
방문자를 추적하거나 쿠키를 설정하지 않습니다. 개인정보 처리방침도 복잡해지지 않습니다.
MapLibre GL에 최적화되어 있으며 Leaflet과 React도 지원합니다
<link href="https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.css" rel="stylesheet" />
<script type="importmap">
{ "imports": { "maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs" } }
</script>MapLibre GL v6는 ES 모듈로만 배포되므로, 이 예제에서는 import map과 모듈 스크립트로 불러옵니다.
npm i maplibre-gl@^6그런 다음 JavaScript에서 가져오세요:
import * as maplibregl from 'maplibre-gl'
import 'maplibre-gl/dist/maplibre-gl.css'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
maplibregl.setWorkerUrl(workerUrl)번들 안에서 MapLibre는 워커를 스스로 찾을 수 없습니다. 이 예제는 Vite용입니다. webpack 등 다른 번들러는 다음 문서를 참고하세요: MapLibre 설치 가이드.
<div id="map" style="width: 100%; height: 500px"></div>
<script type="module">
import * as maplibregl from 'maplibre-gl'
const map = new maplibregl.Map({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
})
</script>Core Web Vitals가 개선되면 검색 순위에도 도움이 될 수 있습니다
이 로더로 첫 화면을 더 가볍게 표시하세요:
// Vite용 예제입니다. 다른 번들러는 설치 가이드를 참고하세요
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* 필요할 때 MapLibre GL과 CSS를 지연 로딩합니다
* @returns {Promise} MapLibre GL 모듈
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* MapLibre GL CSS를 동적으로 불러옵니다
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL 지연 로딩 클래스
* maplibregl과 유사한 API에 지연 로딩 기능을 제공합니다
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* 새 지도 인스턴스를 생성하며, 필요하면 MapLibre GL을 지연 로딩합니다
* @param {Object} options - 지도 설정 옵션
* @returns {Promise} MapLibre GL Map 인스턴스
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* MapLibre GL 라이브러리를 가져오며, 필요하면 지연 로딩합니다
* @returns {Promise} MapLibre GL 라이브러리
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();사용 예제:
import MapLibreLoader from './maplibre-loader.js';
// 필요할 때만 지도를 생성합니다(예: 스크롤 또는 사용자 조작 시)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// 컨트롤, 마커 등을 추가합니다
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}고급 기능과 전체 API는 다음 문서를 참고하세요: MapLibre GL JS 문서
Leaflet은 자체적으로 벡터 타일을 읽을 수 없으므로 maplibre-gl-leaflet 플러그인을 함께 사용하세요:
<link href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" rel="stylesheet" />
<script type="importmap">
{ "imports": {
"leaflet": "https://unpkg.com/leaflet@1.9.4/dist/leaflet-src.esm.js",
"maplibre-gl": "https://unpkg.com/maplibre-gl@6.11.2/dist/maplibre-gl.mjs"
} }
</script>
<script type="module">
import * as L from 'leaflet'
import { maplibreGL } from 'https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.1.4/dist/leaflet-maplibre-gl.mjs'
const map = L.map('map').setView([48.6937, 6.1844], 12)
maplibreGL({
style: 'https://data.lfmaps.fr/styles/bright',
}).addTo(map)
</script>이 플러그인은 Leaflet 1.x를 지원합니다. 동일한 무료 타일을 비용 걱정 없이 이용하세요.
npm i react-map-gl maplibre-gl@^6import Map from 'react-map-gl/maplibre'
import { setWorkerUrl } from 'maplibre-gl'
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url'
import 'maplibre-gl/dist/maplibre-gl.css'
setWorkerUrl(workerUrl)
export default function MyMap() {
return (
<Map
initialViewState={{ longitude: 6.1844, latitude: 48.6937, zoom: 12 }}
style={{ width: '100%', height: 500 }}
mapStyle="https://data.lfmaps.fr/styles/bright"
/>
)
}mapbox-gl이나 액세스 토큰은 필요 없습니다. react-map-gl이 MapLibre GL과 직접 연결됩니다.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
CDN으로 타일을 전달해 지도가 빠르게 표시됩니다
99.9% 가동률
전 세계를 아우르는 OpenStreetMap 데이터
MapLibre GL이나 Leaflet 코드 몇 줄이면 바로 사용할 수 있습니다
웹페이지에 지도를 띄우는 일은 같습니다. 월말 청구서는 전혀 다르죠.
대신 한계도 분명합니다. LFMaps는 지도 타일만 제공합니다. 지오코딩, 경로 탐색, 단계별 길 안내는 제공하지 않습니다.
네. 방문자 수에 상관없이 유료 요금제도, 신용카드 등록도, 사용료 청구도 없습니다. 이 페이지의 다른 무료 도구와 마찬가지로 LFMaps도 개인 프로젝트로 운영비를 충당합니다.
아니요. 가입하거나 토큰을 주기적으로 교체할 필요가 없습니다. 지도 스타일에 LFMaps URL을 지정하면 바로 작동합니다.
할당량이나 고정된 요청 속도 제한은 없습니다. 다만 전체 타일 세트를 대량으로 수집하는 것은 삼가 주세요. 웹사이트나 앱에서 일반적으로 지도를 사용하는 데는 문제가 없습니다.
네. 벡터 타일을 기본 지원하는 MapLibre GL을 권장하지만, Leaflet에서도 maplibre-gl-leaflet 플러그인을 통해 사용할 수 있습니다.
OpenStreetMap 데이터를 OpenFreeMap을 통해 제공합니다. 커뮤니티가 함께 만드는 데이터이기에 계속 무료로 제공할 수 있습니다.
네. 상업용 프로젝트에서도 사용할 수 있습니다. 지도에 OpenStreetMap 출처 표시를 유지해 주세요. 이것만 지키면 됩니다.
아니요. 개인정보를 수집하지 않으며 타일 요청에 쿠키도 설정하지 않습니다. 지도를 추가해도 개인정보 처리방침에 별도 내용을 추가할 필요가 없습니다.
이 서비스들은 무료 한도를 제공하고, 사용량이 늘면 지도 로드 횟수에 따라 요금을 청구합니다. LFMaps는 사용량에 따른 과금이 없습니다. 지도를 10번 보든 1,000만 번 보든 0원입니다.
조화로운 색상 팔레트 만들기
무료 비밀번호 생성기
맞춤 단축 URL을 무료로
나중에 수정할 수 있는 QR 코드
소셜 미디어 게시용 이미지 만들기
압축된 코드를 읽기 좋게
.gitignore 파일을 간편하게 생성하세요
레스토랑 예약 시스템
미용실 예약 소프트웨어
무료 파비콘 생성기
레스토랑용 무료 알레르기 유발 성분 안내문
Markdown 문서를 보기 좋게 공유하세요
레스토랑 메뉴를 무료로 온라인에