मराठी

Protomaps Basemap टाईल्स

संपूर्ण Protomaps Basemap, झूम 0 ते 15, साध्या HTTP वर एकाच PMTiles अर्काईव्ह स्वरूपात उपलब्ध. कोणत्याही PMTiles क्लायंटला या URL शी जोडा आणि तो लगेच चालतो.

https://tiles.jasontally.com/basemap.pmtiles

ब्लॉक केलेली OpenStreetMap टाईल, किंवा tile.openstreetmap.org कडून आलेली 403 त्रुटी? येथून सुरुवात करा.

वापरून पहा

तोच अर्काईव्ह तीन स्टाईल्समध्ये. स्टाईल बदला आणि आधीच लोड झालेल्या टाईल्स तशाच राहतात, त्यामुळे बदल तत्काळ दिसतो.

z0

स्वतःची स्टाईल तयार करा

एखादा रंग बदला किंवा लेयर बंद करा, नकाशा लगेच अपडेट होतो. त्यानंतर स्टाईल JSON कॉपी करा; ही एक नेहमीची MapLibre स्टाईल आहे जी तुम्ही स्वतः होस्ट करू शकता. ती या टाईल्सकडे निर्देश करते, त्यामुळे तुम्ही ती कुठेही ठेवली तरी चालत राहते.

वापरा

हा अर्काईव्ह HTTP रेंज विनंत्यांना (range requests) प्रतिसाद देतो, त्यामुळे प्रत्येक PMTiles क्लायंट तो वाचू शकतो.

एक. पेजवर नकाशा समाविष्ट करा

ही फाईल कॉपी करा. हे संपूर्ण उदाहरण आहे: तीन टॅग्स, एक स्टाईल URL, एक नकाशा. दोन्ही लायब्ररी पिन केलेल्या आणि BSD-3-Clause परवान्याखाली आहेत, आणि तुम्हाला CDN वापरायचा नसेल तर याच होस्टवरून त्याच फाईल्स पुरवल्या जातात.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Basemap</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.css">
  <script src="https://cdn.jsdelivr.net/npm/maplibre-gl@5.24.0/dist/maplibre-gl.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/pmtiles@3.2.1/dist/pmtiles.js"></script>
  <style>html, body, #map { margin: 0; height: 100%; }</style>
</head>
<body>
  <div id="map"></div>
  <script>
    // Teach MapLibre how to read a PMTiles archive.
    const protocol = new pmtiles.Protocol();
    maplibregl.addProtocol("pmtiles", protocol.tile);

    new maplibregl.Map({
      container: "map",
      style: "https://tiles.jasontally.com/styles/light.json",
      center: [2.35, 48.85],   // Paris
      zoom: 4
    });
  </script>
</body>
</html>

दोन. तुमच्याकडे आधीच असलेल्या स्टाईलमधील टाईल्स बदला

प्रत्येक MapLibre स्टाईल तिच्या टाईल्स एका स्रोतामधून (source) वाचते. या टाईल्स वापरण्यासाठी फक्त तो एक url बदला. स्टाईलमध्ये इतर काहीही बदलत नाही.

  "sources": {
    "protomaps": {
      "type": "vector",
-     "url": "pmtiles://https://demo-bucket.protomaps.com/v4.pmtiles",
+     "url": "pmtiles://https://tiles.jasontally.com/basemap.pmtiles",
      "attribution": "<a href=\"https://www.openstreetmap.org/copyright\">&copy; OpenStreetMap contributors</a>"
    }
  }

किंवा हे कोडमधून करा; तुमच्या नियंत्रणात नसलेल्या सर्व्हरवरून स्टाईल येत असल्यास हे उपयुक्त ठरते:

// Rewrite every PMTiles source in a style to point at these tiles.
const style = await (await fetch("https://your-server/style.json")).json();

for (const source of Object.values(style.sources)) {
  if (source.url?.startsWith("pmtiles://")) {
    source.url = "pmtiles://https://tiles.jasontally.com/basemap.pmtiles";
  }
}

new maplibregl.Map({ container: "map", style, center: [2.35, 48.85], zoom: 4 });

तीन. तुम्ही तयार केलेली स्टाईल कुठे ठेवावी

वरील बिल्डरमधील स्टाईल JSON बटण हा नकाशा सध्या रेखाटत असलेली स्टाईल (केलेल्या बदलांसह) उघडते, आणि त्या संवादात कॉपी बटण आहे. त्यातून मिळणारा कोड वापरण्याचे दोन मार्ग आहेत, आणि दोन्ही सामान्य वेब पेजेस आहेत.

या होस्टवरील तीन स्टाईल्स जशा वापरल्या जातात, तशीच ती तुमच्या पेजशेजारी एक फाईल म्हणून सेव्ह करा आणि style तिच्याकडे जोडा. जर स्टाईल तुमची स्वतःची असेल आणि तुमच्या साईटसोबत बदलत असेल, तर हा पर्याय निवडा:

// Save the copied JSON as my-basemap.json beside this file.
new maplibregl.Map({
  container: "map",
  style: "my-basemap.json",           // relative, same origin
  center: [2.35, 48.85],
  zoom: 4
});

किंवा ती थेट HTML मध्ये ठेवा; यामुळे हलवण्यासाठी फक्त एकच फाईल राहते आणि वेगळे काही होस्ट करावे लागत नाही. स्टाईल तीच आहे, फक्त ती राहण्याची जागा वेगळी आहे:

// The copied JSON, pasted straight into the page.
const myStyle = {
  "version": 8,
  "name": "Protomaps Basemap — custom",
  "glyphs": "https://tiles.jasontally.com/font/{fontstack}/{range}.pbf",
  "sprite": "https://tiles.jasontally.com/sprites/v4/light",
  "sources": { /* ... as copied ... */ },
  "layers":  [ /* ... as copied ... */ ]
};

new maplibregl.Map({ container: "map", style: myStyle, zoom: 4 });

glyphs आणि sprite या ओळी जशा आहेत तशाच राहू द्या. त्या लेबल्स आणि आयकॉन्स रेखाटतात आणि याच होस्टकडे निर्देश करतात, त्यामुळे तुम्ही तुमच्या पेजमध्ये पेस्ट केलेली स्टाईल तुम्ही कुठूनही सर्व्ह केली तरी चालत राहते. तुम्हाला या होस्टवर अजिबात अवलंबून राहायचे नसेल, तर त्याऐवजी त्यांना protomaps.github.io/basemaps-assets कडे निर्देशित करा.

टाईल्स बदलण्यापूर्वी तपासण्याची एक गोष्ट. हा अर्काईव्ह Protomaps स्कीमा v3 वापरतो. वेगळ्या स्कीमासाठी लिहिलेली स्टाईल लोड होईल पण काहीच रेखाटणार नाही, कारण स्रोत लेयरची नावे जुळत नाहीत. नऊ लेयरची नावे खाली दिली आहेत, आणि कॉपी करण्यासाठी एक तयार v3 स्टाईल देखील दिली आहे.

चार. फॉन्ट्स, स्प्राईट्स आणि लायब्ररी

नकाशा म्हणजे टाईल्स, मजकुरासाठी एक glyphs URL, ऐच्छिकरीत्या आयकॉन्ससाठी एक sprite URL, आणि हे सर्व रेखाटणाऱ्या लायब्ररी. हे सर्व येथे प्रत्येकाला अपेक्षित असलेल्या पाथवर उपलब्ध आहे, त्यामुळे तुम्हाला हवे असल्यास संपूर्ण नकाशा एकाच होस्टनेमवरून येऊ शकतो.

काययेथील URLपरवाना

MapLibre आणि PMTiles फाईल्स jsDelivr वर आणि येथे उपलब्ध आहेत. कोणतीही URL चालते.

शेवटची ओळ या पेजद्वारे वापरली जात नाही. तो Leaflet व्हेक्टर रेंडरर आहे, जो येथे प्रकाशित केला आहे जेणेकरून बदल फक्त एका स्क्रिप्ट टॅगने करता येईल. मूळ Leaflet स्वतःच्या CDN वरच राहते.

दोन फॉन्ट स्टॅक्स, Noto Sans Regular आणि Noto Sans Medium, एका वेळी 256 कोडपॉइंट्स याप्रमाणे MapLibre मागवत असलेल्या 256 रेंजमध्ये विभागलेले आहेत. केवळ लॅटिनच नव्हे तर सर्व 256 रेंज प्रकाशित केल्या आहेत: Protomaps ठिकाणांना त्यांच्या स्थानिक नावाने लेबल लावते, त्यामुळे टोकियो किंवा कैरोसाठी हजारोच्या पटीतील रेंज लागतात. जर फक्त इंग्रजी नकाशा वापरत असलेल्या रेंज प्रकाशित केल्या, तर कोणतीही त्रुटी न दाखवता ती लेबल्स गायब होतात.

पाच स्प्राईट शीट्स, प्रत्येक अपस्ट्रीम प्रकारासाठी एक, 1x आणि 2x मध्ये. खालील स्टाईल्स त्यांमधून आयकॉन्स रेखाटतात, त्यामुळे त्या फेच केल्या जातात. तुम्हाला तुमच्या स्वतःच्या स्टाईलमध्ये शहराचे ठिपके (townspots), महामार्ग चिन्हे (highway shields) किंवा ठिकाणांचे आयकॉन्स हवे असल्यास, sprite तुमच्या प्रकाराच्या शीटकडे निर्देशित करा. शीटमधील आयकॉनची नावे तिच्या light.json मध्ये दिलेली असतात.

नकाशा काय रेखाटतो आणि प्रत्येक गोष्ट कुठून येते

प्रत्येक लेयर या अर्काईव्हमधील नऊ स्रोत लेयर्सपैकी एक आहे, त्यामुळे येथे कशासाठीही दुसऱ्या अर्काईव्हची गरज नाही. त्यापैकी दोन विशेष नमूद करण्यासारखे आहेत, कारण दोन्ही प्रत्यक्षात नसतानाही काहीतरी गहाळ असल्यासारखे दिसतात:

लेयरस्रोतया बिल्डमध्ये आहे का?
आकार, रस्ते, इमारती, पाणी, जमीनearth, landcover, landuse, water, roads, buildingsहोय
ठिकाण, रस्ते आणि पाण्याची नावेत्याच लेयर्सवरील name फील्डहोय
ठिकाणांचे आयकॉन्स, शहराचे ठिपकेpois.kind, places, आणि स्प्राईटहोय
महामार्ग क्रमांक चिन्हे (Route shields)roads.shield_textनाही. सध्या सर्व्ह केल्या जाणाऱ्या बिल्डमध्ये ते फील्ड नाही
घर क्रमांकbuildings.kind=address आणि buildings.addr_housenumberनाही, तेच कारण

पत्त्यांसाठी कोणताही स्वतंत्र अर्काईव्ह नाही आणि फेच करण्यासाठी कोणताही स्वतंत्र पत्ता लेयर नाही. अपस्ट्रीम प्रकल्प पत्ता बिंदू buildings लेयरच्या आतच kind=address आणि addr_housenumber असलेल्या फीचर्सच्या स्वरूपात ठेवतो. ते फील्ड हा नकाशा सर्व्ह करत असलेल्या बिल्डनंतरच्या Protomaps बिल्डमध्ये आले, त्यामुळे घर क्रमांकाचा लेयर आधीच तयार ठेवला आहे आणि पुढील मासिक अपडेटमध्ये तो डेटा आल्यावर आपोआप सुरू होईल. महामार्ग चिन्हांच्या मजकुराबाबतही हेच लागू होते: सध्याच्या बिल्डमध्ये shield_text_length आहे, जे मार्ग क्रमांकात किती अक्षरे आहेत हे सांगते पण ती अक्षरे कोणती आहेत हे सांगत नाही, त्यामुळे त्यावरून रेखाटलेले चिन्ह प्रत्येक महामार्गावर एक रिकामा आकार दिसेल.

स्वतः लेयर लिहिणे आणि त्याला रंग देणे

लेयर म्हणजे एक फिल्टर, एक झूम स्तर, एक आकार आणि एक रंग. फिल्टरमधील दोन गोष्टींमुळे अनेकांची चूक होते आणि दोन्ही कोणतीही त्रुटी न दाखवता अयशस्वी होतात:

म्हणून एक रस्ता, त्याचे नाव आणि रेषा बंद करण्यासाठी एक टॉगल:

{
  "id": "road-major",
  "type": "line",
  "source": "protomaps",
  "source-layer": "roads",            // one of the nine
  "minzoom": 4,                                  // not drawn below this
  "filter": ["==", ["get", "kind"], "major_road"],
  "layout": {
    "line-cap": "round",
    "visibility": "visible"          // "none" to hide it
  },
  "paint": {
    "line-color": "#f7c44d",          // any CSS colour
    "line-width": ["interpolate", ["linear"], ["zoom"], 4, 1.7, 12, 6]
  }
}

नाव हा name फील्ड वाचणारा एक सिम्बॉल लेयर असतो, ज्याच्या मागे हॅलो (halo) असतो किंवा काहीच नसते. एखादा ग्लिफ नसल्यास कोणतीही त्रुटी दिसत नाही, त्यामुळे तुम्ही मागितलेला फॉन्ट स्टॅक या होस्टवरील दोनपैकी एक असणे आवश्यक आहे:

{
  "id": "road-label-major",
  "type": "symbol",
  "source": "protomaps",
  "source-layer": "roads",
  "minzoom": 11,
  "layout": {
    "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]],
    "text-font": ["Noto Sans Medium"],  // or Noto Sans Regular
    "text-size": 10,
    "symbol-placement": "line"       // follow the road
  },
  "paint": {
    "text-color": "#2b2a26",
    "text-halo-color": "#ffffff",
    "text-halo-width": 1.1
  }
}

काहीही न रेखाटणारा लेयर ही त्रुटी मानली जात नाही, आणि कोणती तपासणी अयशस्वी झाली हे MapLibre सांगणार नाही. तुमचा लेयर कोरा दिसत असल्यास, या क्रमाने तपासा: फील्डचे नाव, लेयरचा minzoom, फॉन्ट स्टॅक, आणि त्यानंतर शीटच्या स्वतःच्या light.json मधील आयकॉनचे नाव.

जर तुमच्याकडे अशी स्टाईल असेल जी तिचे ग्लिफ्स demotiles.maplibre.org कडे निर्देशित करते, तर फक्त ते होस्टनेम बदलणे पुरेसे आहे. पाथ मुद्दाम तोच ठेवला आहे.

"glyphs": "https://tiles.jasontally.com/font/{fontstack}/{range}.pbf",
"sprite": "https://tiles.jasontally.com/sprites/v4/light"

// before, in a style you already have
- "glyphs": "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
+ "glyphs": "https://tiles.jasontally.com/font/{fontstack}/{range}.pbf",

जर एखाद्या स्टाईलने वरील दोनव्यतिरिक्त इतर कोणत्याही फॉन्ट स्टॅकची मागणी केली, तर त्यासाठी काहीही रेखाटले जाणार नाही. Protomaps च्या स्वतःच्या स्टाईल्स ठळक (bold) मजकुरासाठी Noto Sans Medium वापरतात; या संचात Noto Sans Bold नाही, म्हणूनच त्याची मागणी करणाऱ्या स्टाईलमधील प्रत्येक लेबल कोणतीही सूचना न देता गायब होते.

कोणता होस्ट वेगवान आहे आणि त्याबद्दल काय निर्णय घेतला गेला. अंदाजाऐवजी प्रत्यक्ष मोजमाप: एकाच कनेक्शनवर एका वेळी एक याप्रमाणे आलटून-पालटून केलेल्या विनंत्या, पहिले तीन नमुने वगळले, आणि ट्रान्सफर वेळेपासून पहिल्या बाईटचा वेळ (TTFB) वेगळा मोजला. त्या चाचणीत या प्रत्येक फाईलसाठी CDN ने 10 ते 45 ms लवकर प्रतिसाद दिला, जो 15% नियमापेक्षा आणि नमुन्यांमधील फरकापेक्षा स्पष्टपणे जास्त आहे. याच कारणास्तव लायब्ररी jsDelivr वरून लोड होतात.

फॉन्ट्स आणि स्प्राईट्स येथूनच सर्व्ह केले जातात, जरी त्याच मोजमापानुसार CDN त्यांना सुमारे 10 ms लवकर प्रतिसाद देईल. हा एक निर्णय आहे, मोजमाप नाही. एकाच होस्टनेमवरून येणारा नकाशा दुसऱ्या कोणाचा सर्व्हर बंद पडल्यास तुटत नाही, आणि ग्लिफ सर्व्हर बंद पडणे म्हणजे नकाशावर कोणतेही लेबल न दिसणे. तुम्हाला ते 10 ms वाचवायचे असतील, तर glyphs ला protomaps.github.io/basemaps-assets/fonts कडे निर्देशित करा; तोच पाथ तिथेही चालतो. हे एका शहरातील एका वाचकाचे आकडे आहेत आणि तुलना पुन्हा चालवणे ही फक्त एका कमांडची गोष्ट आहे.

पाच. Leaflet बद्दल

Leaflet चा L.tileLayer चित्रे रेखाटतो; या व्हेक्टर टाईल्स आहेत. तरीही Leaflet नकाशा त्या वापरू शकतो, आणि दोन्ही पर्यायांमध्ये तुमचे मार्कर्स, पॉपअप्स आणि कंट्रोल्स कायम राहतात. दोन्ही बदल OpenStreetMap टाईल्समधून स्थलांतर येथे दिले आहेत.

सहा. PMTiles लायब्ररीने अर्काईव्ह वाचा

नकाशा नाही, फक्त डेटा. स्क्रिप्ट्स, चाचण्या आणि चित्र नसलेल्या कोणत्याही गोष्टीसाठी उपयुक्त.

import { PMTiles, FetchSource } from "pmtiles";

const archive = new PMTiles(new FetchSource("https://tiles.jasontally.com/basemap.pmtiles"));

const header = await archive.getHeader();
console.log(header.minZoom, header.maxZoom);        // 0 15
console.log(header.numAddressedTiles);              // 1431655765

const metadata = await archive.getMetadata();
console.log(metadata.name);                          // "Protomaps Basemap"

const tile = await archive.getZxy(3, 4, 2);          // z, x, y
console.log(tile.data.byteLength);

दोन क्लासेस लक्षात घ्या. FetchSource हा HTTP वरील बाईट रीडर आहे, आणि PMTiles हा त्याच्यावर काम करणारा व फॉरमॅट समजणारा रीडर आहे. FileSource हा FetchSource चा स्थानिक-फाईल पर्याय आहे; त्याला URL स्ट्रिंग दिल्यास तो चालणार नाही.

हा अर्काईव्ह एक स्नॅपशॉट आहे, लाईव्ह फीड नाही. वेळेची माहिती हा डेटा किती ताजा आहे? येथे दिली आहे.

OpenStreetMap टाईल्समधून स्थलांतर

टाईल वापर धोरणाचा ब्लॉक, 403 त्रुटी, आणि त्यावर काय करावे. कोणतीही की नाही, कोणताही कोटा नाही.

नकाशावर ब्लॉक का दिसतो

App is not following the tile usage policy of OpenStreetMap’s volunteer-run servers

General block: app is not following the tile usage policy of openstreetmap volunteer-run servers

403 Forbidden — tile.openstreetmap.org

टाईल सर्व्हर्सनी टाईल वापर धोरणाअंतर्गत नकाशाऐवजी ती प्रतिमा मुद्दाम पाठवली आहे. हा तांत्रिक बिघाड नाही, आणि URL दुरुस्त केल्याने तो दूर होत नाही.

लोक सर्वप्रथम काय करून पाहतात:

कार्यालये, शाळा, VPN आणि मोबाईल नेटवर्क्स एकच पत्ता (IP) सामायिक करतात, आणि ब्लॉक ॲप्सप्रमाणेच पत्त्यांनाही लागू होतात. तुमच्या बाजूने तुम्हाला कोणता ब्लॉक लागला आहे हे कळू शकत नाही.

म्हणून त्या सर्व्हर्सना विनंत्या पाठवणे थांबवा. त्यांच्यापासून बाहेर पडण्याचे तीन मार्ग आहेत.

Leaflet कायम ठेवा

protomaps-leaflet Leaflet मध्ये व्हेक्टर टाईल्स रेखाटते. ते स्वतः अर्काईव्ह वाचते आणि स्वतःला एक सामान्य लेयर म्हणून जोडते, त्यामुळे मार्कर्स, पॉपअप्स, GeoJSON आणि कंट्रोल्स जसे आहेत तसेच राहतात. या अर्काईव्हसोबत तपासलेली एक प्रत येथे आहे: https://tiles.jasontally.com/vendor/protomaps-leaflet.js.

पूर्वी:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
  const map = L.map("map").setView([48.85, 2.35], 12);

  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);
</script>

नंतर:

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
+ <script src="https://tiles.jasontally.com/vendor/protomaps-leaflet.js"></script>

<script>
  const map = L.map("map").setView([48.85, 2.35], 12);

-  L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", { ... }).addTo(map);
+  protomapsL.leafletLayer({
+    url: "https://tiles.jasontally.com/basemap.pmtiles",
+    flavor: "light",
+    lang: "en"
+  }).addTo(map);
</script>

protomaps-leaflet हे अपस्ट्रीमवर देखभाल मोडमध्ये (maintenance mode) आहे: फक्त दुरुस्त्या, नवीन वैशिष्ट्ये नाहीत. सध्या अस्तित्वात असलेल्या Leaflet ॲपसाठी हे ठीक आहे. नवीन कामाची सुरुवात MapLibre GL वर करावी.

Leaflet कायम ठेवा, MapLibre ने रेंडर करा

@maplibre/maplibre-gl-leaflet हे Leaflet च्या टाईल पेनमध्ये MapLibre नकाशा ठेवते. जेव्हा तुम्हाला Leaflet मध्येच राहणाऱ्या ॲपमध्ये वरीलपैकी एखादी स्टाईल किंवा भूभाग (terrain) आणि हिलशेड हवे असेल तेव्हा हे वापरा.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://tiles.jasontally.com/vendor/maplibre-gl.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://tiles.jasontally.com/vendor/maplibre-gl.js"></script>
<script src="https://tiles.jasontally.com/vendor/pmtiles.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@maplibre/maplibre-gl-leaflet@0.1.4/dist/leaflet-maplibre-gl.js"></script>

<script>
  // The style's source is pmtiles://, so MapLibre needs the protocol first.
  maplibregl.addProtocol("pmtiles", new pmtiles.Protocol().tile);

  const map = L.map("map", { minZoom: 1 }).setView([48.85, 2.35], 12);

  const gl = L.maplibreGL({
    style: "https://tiles.jasontally.com/styles/light.json"
  }).addTo(map);

  // gl.getMaplibreMap() is the MapLibre map, for sources and layers.
</script>

MapLibre GL कडे वळा

एकच लायब्ररी, कोणताही अडॅप्टर नाही, आणि वरील स्टाईल्स जशा आहेत तशा चालतात. संपूर्ण पेज एक. पेजवर नकाशा समाविष्ट करा येथे आहे. या बदलामध्ये मुख्यतः फक्त निर्देशांकांचा (coordinates) क्रम उलटा होतो:

LeafletMapLibre GL
L.map("map").setView([lat, lng], z)new maplibregl.Map({ container: "map", center: [lng, lat], zoom: z })
L.tileLayer(url).addTo(map)व्हेक्टर स्रोत असलेली स्टाईल; वर पहा
L.marker([lat, lng]).bindPopup(html)new maplibregl.Marker().setLngLat([lng, lat]).setPopup(new maplibregl.Popup().setHTML(html))
L.geoJSON(data)addSource(id, { type: "geojson", data }), त्यानंतर addLayer
L.control.scale()new maplibregl.ScaleControl()
map.invalidateSize()map.resize()

setView([lat, lng]) मध्ये आधी अक्षांश (latitude) येतो; तर प्रत्येक MapLibre कॉलमध्ये [lng, lat] येतो. नकाशा चुकीच्या गोलार्धात दिसत असल्यास त्याचे कारण हेच असते, टाईल्स नाही. स्टाईल लोड होण्यापूर्वी जोडलेले स्रोत आणि लेयर्स कोणतीही त्रुटी न दाखवता वगळले जातात, त्यामुळे ते map.on("load", …) मध्ये जोडा.

“archive contains MVT vector tiles, but leafletRasterLayer is for displaying raster tiles”

हे pmtiles.leafletRasterLayer मुळे घडते, जे रास्टर PMTiles प्रतिमा म्हणून रेखाटते. या व्हेक्टर टाईल्स आहेत, त्यामुळे ते त्यांना नाकारते. कोणताही पर्याय हे बदलू शकत नाही, आणि येथे कोणतीही रास्टर प्रत उपलब्ध नाही. वरीलपैकी एक पर्याय वापरा.

“download.openstreetmap.fr returned 403”

तो एक एक्स्ट्रॅक्ट आणि रेप्लिकेशन मिरर आहे, टाईल सर्व्हर नाही. ऑक्टोबर 2026 मध्ये गैरवापर करणाऱ्या डाउनलोड्सनंतर त्याने पत्ते ब्लॉक केले, आणि ऑपरेटर्सनी सांगितले की ते प्रत्येक प्रकरणाची तपासणी करून प्रवेश पूर्ववत करतील. येथील कोणत्याही गोष्टीला त्याची गरज नाही: हा अर्काईव्ह Protomaps रिलीझमधून येतो, त्यामुळे तुम्हाला स्वतः .osm.pbf एकत्र करावे लागत नाही. जर तुम्ही OSM डेटा घेत असाल, तर मिनिटांच्या स्ट्रीमऐवजी नियतकालिक एक्स्ट्रॅक्ट वापरा.

स्टाईल्स

त्याच टाईल्स, वेगळे रंग. एक निवडा, कॉपी करा, बदला; ती तुमचीच आहे.

स्टाईलकशी दिसतेफाईल

टाईल्समध्ये काय आहे

पेज लोड होताना अर्काईव्हच्या स्वतःच्या मेटाडेटामधून वाचलेले. स्टाईलने वापरली पाहिजेत अशी ही लेयरची नावे आहेत.

स्रोत लेयरझूमफील्ड्स
लोड होत आहे…

ही सेवा काय नाही

स्पष्ट उत्तरे, जेणेकरून नंतर तुम्हाला कशाचेही आश्चर्य वाटणार नाही.

हा डेटा किती ताजा आहे?

या टाईल्स Protomaps Basemap ची प्रत आहेत, ज्या महिन्यातून एकदा पुन्हा तयार केल्या जातात.

स्टाईल JSON

open raw