OpenStreetMapのデータを使った無制限のベクター地図タイル。MapLibre GLやLeafletにすぐ導入できます。APIキーも上限も、予想外の請求もありません。
多くの地図タイルサービスは、最初に無料枠を提供します。しかしアクセスが増えると従量課金が始まり、小さな試みが思わぬ出費に。料金の計算方法は分かりにくく、地図の表示回数に応じて費用が増え、料金表の理解にもひと苦労です。Google MapsやMapboxもこの方式です。無料のつもりが、プロジェクトの負担になるかもしれません。
LFMapsは違います。無料は本当に無料。予想外の請求も、上限も、請求書もありません。
地図の公開に必要なものが、必要なだけ。
地図タイルのURLを指定するだけ。登録もアクセストークンも管理画面も不要です。
利用枠も実質的な上限も、地図の表示回数に応じた課金もありません。必要なだけ使えます。
地図の表示が10回でも1000万回でも、費用はゼロです。
訪問者を追跡せず、Cookieも設定しません。プライバシーポリシーを長く書き直す必要もありません。
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モジュールのみを提供します。以下の例ではインポートマップとモジュールスクリプトで読み込みます。
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を指定するだけで使えます。
利用枠も厳しいリクエスト制限もありません。ただし、タイル一式の大量取得はご遠慮ください。Webサイトやアプリでの通常の地図利用は問題ありません。
はい。推奨するMapLibre GLはベクタータイルをそのまま描画できます。Leafletでもmaplibre-gl-leafletプラグインを使えば利用できます。
OpenStreetMapのデータをOpenFreeMap経由で配信しています。コミュニティが作るデータだからこそ、無料で提供し続けられます。
はい。商用プロジェクトでも利用できます。地図上にOpenStreetMapの帰属表示を見える形で残してください。必要なのはそれだけです。
いいえ。タイルのリクエストで個人情報を収集したりCookieを設定したりしないため、地図の追加に伴ってプライバシーポリシーを変更する必要はありません。
両サービスは無料枠を超えると地図の表示回数に応じて課金されます。LFMapsは従量課金なし。表示が10回でも1000万回でも料金はゼロです。
調和のとれた配色を作成
無料のパスワード生成ツール
カスタムURL短縮ツールを無料で利用
後から編集できるQRコード
SNS投稿に適した画像を作成
圧縮されたコードを読みやすく整形
.gitignoreファイルを簡単に生成
レストラン予約システム
美容室向け予約ソフト
無料のファビコン生成ツール
レストラン向けの無料アレルゲン表示表
Markdownを美しく共有
レストランのメニューを無料でオンライン公開