OpenStreetMap डेटा से बनी असीमित वेक्टर मैप टाइलें, जिन्हें सीधे MapLibre GL या Leaflet में इस्तेमाल कर सकते हैं। कोई API कुंजी नहीं, कोई कोटा नहीं, कोई अचानक बिल नहीं।
ज़्यादातर मैप टाइल प्रदाता शुरुआत में मुफ़्त क्रेडिट देते हैं। फिर ट्रैफ़िक बढ़ता है और उपयोग के हिसाब से बिलिंग एक छोटे प्रयोग को बड़े खर्च में बदल देती है — अस्पष्ट हिसाब, हर बार मैप खुलने पर बढ़ते शुल्क और ऐसी मूल्य सूची जिसके लिए स्प्रेडशीट चाहिए। Google Maps और Mapbox दोनों इसी तरह काम करते हैं। जो मुफ़्त लगा था, वह आपके प्रोजेक्ट के लिए अनचाहा खर्च बन जाता है।
LFMaps अलग है। मुफ़्त का मतलब सचमुच मुफ़्त — कोई अचानक शुल्क नहीं, कोई सीमा नहीं, कोई बिल नहीं।
मैप प्रकाशित करने के लिए जो चाहिए, बस वही।
टाइल URL जोड़ें और शुरू करें। न साइन अप, न एक्सेस टोकन, न डैशबोर्ड।
न कोई कोटा, न छिपी सीमा, न हर बार मैप खुलने का शुल्क। जितनी ज़रूरत हो, इस्तेमाल करें।
ट्रैफ़िक चाहे जितना हो, लागत शून्य — दस बार मैप खुले या एक करोड़ बार।
हम आपके विज़िटर को ट्रैक नहीं करते और कुकीज़ नहीं लगाते। आपकी गोपनीयता नीति उतनी ही छोटी रहती है।
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 अपना worker खुद नहीं ढूँढ़ पाता। यह 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 में ऐसा कोई मीटर नहीं है: मैप दस बार खुले या एक करोड़ बार, कीमत शून्य है।
मेल खाते रंगों के पैलेट बनाएँ
मुफ़्त पासवर्ड जनरेटर
अपना URL छोटा करने का मुफ़्त टूल
QR कोड जिन्हें बाद में संपादित कर सकें
सोशल पोस्ट के लिए तैयार चित्र
अपने कोड का मिनिफ़िकेशन हटाएँ
.gitignore फ़ाइलें आसानी से बनाएँ
रेस्तराँ बुकिंग प्रणाली
हेयरड्रेसर के लिए बुकिंग सॉफ़्टवेयर
मुफ़्त फ़ेविकॉन जनरेटर
रेस्तराँ के लिए मुफ़्त एलर्जन पोस्टर
Markdown को खूबसूरती से साझा करें
अपने रेस्तराँ का मेनू मुफ़्त में ऑनलाइन रखें