OpenStreetMap verilerinden üretilen sınırsız vektör harita döşemelerini MapLibre GL veya Leaflet ile hemen kullanın. API anahtarı, kota veya sürpriz fatura yok.
Çoğu harita döşemesi sağlayıcısı sizi ücretsiz krediyle karşılar. Trafiğiniz artınca kullanıma dayalı ücretlendirme küçük bir denemeyi ciddi bir faturaya dönüştürür: anlaşılmaz sayaçlar, her harita yüklemesinde artan ücretler ve anlamak için hesap tablosu gerektiren fiyatlar. Google Maps ve Mapbox da böyle çalışır. Başta ücretsiz görünen hizmet, projeniz için istemediğiniz bir masrafa dönüşebilir.
LFMaps farklıdır. Ücretsiz gerçekten ücretsizdir: sürpriz, sınır ve fatura yok.
Harita yayınlamak için gereken her şey burada. Fazlası yok.
Döşeme URL'sini ekleyin, kullanmaya başlayın. Kayıt, erişim belirteci veya kontrol paneli yok.
Kota, örtülü sınır veya harita yüklemesi başına sayaç yok. İhtiyacınız kadar kullanın.
Trafiğiniz ne olursa olsun sıfır maliyet: on görüntüleme de on milyon görüntüleme de.
Ziyaretçilerinizi izlemeyiz, çerez kullanmayız. Gizlilik politikanıza yeni maddeler eklemeniz gerekmez.
En iyi MapLibre GL ile çalışır; Leaflet ve React ile de uyumludur
<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 yalnızca ES modülleri olarak sunulur. Bu nedenle örnekler onu bir import map ve modül betiğiyle yükler.
npm i maplibre-gl@^6Ardından JavaScript kodunuza aktarın:
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)Paket içinde MapLibre kendi worker dosyasını bulamaz. Bu örnek Vite içindir; webpack ve diğerleri için şu kaynağa bakın: MapLibre kurulum kılavuzu.
<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>Daha iyi Core Web Vitals değerleri arama sıralamasına da yardımcı olabilir
Daha hızlı bir ilk görüntüleme için bu yükleyiciyi kullanın:
// Vite örneği; diğer paketleyiciler için kurulum kılavuzuna bakın
import workerUrl from 'maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url';
let maplibrePromise = null;
let cssLoaded = false;
/**
* MapLibre GL ve CSS dosyasını gerektiğinde yükler
* @returns {Promise} MapLibre GL modülü
*/
async function loadMapLibre() {
if (!maplibrePromise) {
maplibrePromise = Promise.all([
import('maplibre-gl'),
loadMapLibreCSS()
]).then(([module]) => {
module.setWorkerUrl(workerUrl);
return module;
});
}
return maplibrePromise;
}
/**
* MapLibre GL CSS dosyasını dinamik olarak yükler
*/
async function loadMapLibreCSS() {
if (!cssLoaded) {
await import('maplibre-gl/dist/maplibre-gl.css');
cssLoaded = true;
}
}
/**
* MapLibre GL için gecikmeli yükleyici sınıfı
* Gecikmeli yüklemeyle maplibregl benzeri bir API sunar
*/
export class MapLibreLoader {
constructor() {
this.maplibregl = null;
}
/**
* Gerekirse önce MapLibre GL'yi yükleyerek yeni bir harita örneği oluşturur
* @param {Object} options - Harita yapılandırma seçenekleri
* @returns {Promise} Bir MapLibre GL Map örneği
*/
async createMap(options) {
this.maplibregl = await loadMapLibre();
return new this.maplibregl.Map(options);
}
/**
* Gerekirse yükleyerek MapLibre GL kitaplığını getirir
* @returns {Promise} MapLibre GL kitaplığı
*/
async getLibrary() {
this.maplibregl = await loadMapLibre();
return this.maplibregl;
}
}
export default new MapLibreLoader();Kullanım örneği:
import MapLibreLoader from './maplibre-loader.js';
// Haritayı yalnızca gerektiğinde oluşturun (ör. kaydırma veya kullanıcı etkileşiminde)
async function initMap() {
const map = await MapLibreLoader.createMap({
style: 'https://data.lfmaps.fr/styles/bright',
center: [6.1844, 48.6937],
zoom: 12,
container: 'map',
});
// Kontroller, işaretçiler vb. ekleyin
const maplibregl = await MapLibreLoader.getLibrary();
map.addControl(new maplibregl.NavigationControl());
}Gelişmiş özellikler ve API'nin tamamı için şu kaynağa bakın: MapLibre GL JS belgeleri
Leaflet vektör döşemelerini tek başına okuyamaz; maplibre-gl-leaflet eklentisiyle birlikte kullanın:
<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>Eklenti Leaflet 1.x sürümünü destekler: aynı ücretsiz döşemeler, sıfır fatura.
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 veya erişim belirteci gerekmez; react-map-gl doğrudan MapLibre GL ile çalışır.
https://data.lfmaps.fr/styles/bright
https://data.lfmaps.fr/styles/positron
https://data.lfmaps.fr/styles/liberty
Döşemeler CDN üzerinden sunulur; haritalar göz açıp kapayıncaya kadar görünür
%99,9 çalışma süresi
Tüm dünyayı kapsayan OpenStreetMap verileri
Birkaç satır MapLibre GL veya Leaflet koduyla yayına başlayın
Aynı iş: sayfanızda bir harita. Ay sonunda ise çok farklı bir fatura.
Açık konuşalım: LFMaps yalnızca harita döşemeleri sunar. Adres arama, rota oluşturma ve adım adım yol tarifi hizmete dahil değildir.
Evet. Trafiğiniz ne olursa olsun ücretli paket, kredi kartı veya kullanım faturası yok. LFMaps, bu sayfadaki diğer ücretsiz araçlar gibi bir yan proje olarak finanse edilir.
Hayır. Kayıt olmanıza veya belirteç yenilemenize gerek yok. Harita stilinizi bir LFMaps URL'sine yönlendirmeniz yeterli.
Kota veya katı bir hız sınırı yok. Yalnızca tüm döşeme kümesini topluca indirmenizi istemiyoruz; web sitesi veya uygulamadaki normal harita kullanımı serbesttir.
Evet. Vektör döşemelerini yerel olarak işleyen MapLibre GL'yi öneriyoruz. Leaflet de maplibre-gl-leaflet eklentisiyle çalışır.
Veriler OpenStreetMap'ten gelir ve OpenFreeMap üzerinden sunulur. Topluluk tarafından üretildikleri için ücretsiz kalabilirler.
Evet, ticari projelerde de kullanabilirsiniz. Tek koşul, OpenStreetMap kaynak bilgisini haritada görünür tutmanızdır.
Hayır. Döşeme isteklerinde kişisel veri toplamıyor veya çerez kullanmıyoruz. Harita eklemek gizlilik politikanıza yeni bir yük getirmez.
Onlar ücretsiz bir kullanım katmanı sunar, büyüdüğünüzde harita yüklemesi başına ücret alır. LFMaps'te sayaç yoktur: on görüntülemede de on milyon görüntülemede de fiyat sıfırdır.
Uyumlu renk paletleri oluşturun
Ücretsiz parola oluşturucu
Ücretsiz özel URL kısaltıcı
Sonradan düzenleyebileceğiniz QR kodları
Sosyal medya paylaşımlarına hazır görseller
Kodunuzu okunabilir biçime dönüştürün
.gitignore dosyalarını kolayca oluşturun
Restoran rezervasyon sistemi
Kuaförler için randevu yazılımı
Ücretsiz favicon oluşturucu
Restoranlar için ücretsiz alerjen afişi
Markdown metinlerini güzelce paylaşın
Restoran menünüzü ücretsiz olarak internette yayınlayın