తెలుగు

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 రేంజ్ అభ్యర్థనలకు మద్దతు ఇస్తుంది, కాబట్టి ప్రతి 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 స్టైల్ తన టైల్స్‌ను ఒక సోర్స్ నుండి చదువుతుంది. ఈ టైల్స్‌ను ఉపయోగించడానికి, ఆ ఒక్క 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, MapLibre అడిగే 256 రేంజ్‌లుగా (ఒక్కోసారి 256 కోడ్‌పాయింట్‌లు) విభజించబడ్డాయి. కేవలం లాటిన్ మాత్రమే కాకుండా మొత్తం 256 రేంజ్‌లు ప్రచురించబడ్డాయి: Protomaps ఫీచర్‌లకు వాటి స్థానిక పేర్లతో లేబుల్ చేస్తుంది, కాబట్టి టోక్యో లేదా కైరోకు పదుల వేలలో ఉండే రేంజ్‌లు అవసరం. ఇంగ్లీష్ మ్యాప్ ఉపయోగించే వాటిని మాత్రమే ప్రచురిస్తే ఆ లేబుల్‌లు ఎలాంటి ఎర్రర్ చూపించకుండానే కనిపించకుండా పోతాయి.

ఐదు స్ప్రైట్ షీట్‌లు, ఒక్కో అప్‌స్ట్రీమ్ ఫ్లేవర్‌కు ఒకటి చొప్పున, 1x మరియు 2x వద్ద ఉన్నాయి. క్రింది స్టైల్స్ వీటి నుండే ఐకాన్‌లను గీస్తాయి, కాబట్టి ఇవి పొందబడతాయి. మీ సొంత స్టైల్‌లో టౌన్‌స్పాట్‌లు, హైవే షీల్డ్‌లు లేదా స్థలాల పాయింట్‌లు కావాలంటే, మీ ఫ్లేవర్‌కు తగిన దానికి sprite ని పాయింట్ చేయండి. షీట్‌లోని ఐకాన్ పేర్లు దాని light.json లో జాబితా చేయబడ్డాయి.

మ్యాప్ ఏమి గీస్తుంది, మరియు ప్రతిదీ ఎక్కడి నుండి వస్తుంది

ప్రతి లేయర్ ఈ ఆర్కైవ్‌లోని తొమ్మిది సోర్స్ లేయర్‌లలో ఒకటి, కాబట్టి ఇక్కడ దేనికీ రెండవ ఆర్కైవ్ అవసరం లేదు. వాటిలో రెండింటిని ప్రత్యేకంగా చెప్పుకోవాలి, ఎందుకంటే అవి లోపించినట్లు కనిపిస్తాయి కానీ అసలు లోపించలేదు:

లేయర్ఎక్కడి నుండి వస్తుందిఈ బిల్డ్‌లో ఉందా?
ఆకారాలు, రోడ్లు, భవనాలు, నీరు, భూమిearth, landcover, landuse, water, roads, buildingsఅవును
స్థలం, రోడ్డు మరియు నీటి వనరుల పేర్లుఅదే లేయర్‌లలోని name ఫీల్డ్అవును
స్థలాల పాయింట్ ఐకాన్‌లు, టౌన్‌స్పాట్‌లుpois.kind, places, మరియు స్ప్రైట్అవును
రూట్ షీల్డ్‌లు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 ఫీల్డ్‌ను చదివే సింబల్ లేయర్, దాని వెనుక హాలో ఉండవచ్చు లేదా ఏమీ లేకపోవచ్చు. గ్లిఫ్ లేకపోతే ఎలాంటి ఎర్రర్ రాదు, కాబట్టి మీరు అడిగే ఫాంట్ స్టాక్ ఈ హోస్ట్‌లోని రెండింటిలో ఒకటై ఉండాలి:

{
  "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 సొంత స్టైల్స్ బోల్డ్ టెక్స్ట్ కోసం 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లు మరియు మొబైల్ నెట్‌వర్క్‌లు ఒకే చిరునామాను పంచుకుంటాయి, మరియు బ్లాక్‌లు యాప్‌లతో పాటు చిరునామాలకు కూడా వర్తిస్తాయి. మీ వైపు నుండి మీకు ఏ బ్లాక్ విధించబడిందో మీరు చెప్పలేరు.

కాబట్టి ఆ సర్వర్లను అడగడం ఆపండి. వాటి నుండి బయటపడటానికి మూడు మార్గాలు ఉన్నాయి.

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 అప్‌స్ట్రీమ్‌లో మెయింటెనెన్స్ మోడ్‌లో ఉంది: బగ్ పరిష్కారాలు మాత్రమే ఉంటాయి, కొత్త ఫీచర్‌లు రావు. ఇప్పటికే ఉన్న Leaflet యాప్‌కు ఇది సరిపోతుంది. కొత్త పనిని MapLibre GL లో ప్రారంభించాలి.

Leaflet నే ఉంచి, MapLibre తో రెండర్ చేయండి

@maplibre/maplibre-gl-leaflet అనేది Leaflet యొక్క టైల్ పేన్‌లో MapLibre మ్యాప్‌ను ఉంచుతుంది. Leaflet లోనే కొనసాగే యాప్‌లో పై స్టైల్స్‌లో ఒకటి కావాలన్నా, లేదా టెర్రైన్ మరియు హిల్‌షేడ్ కావాలన్నా దీన్ని ఉపయోగించండి.

<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 కి మారండి

ఒకే లైబ్రరీ, అడాప్టర్ లేదు, మరియు పై స్టైల్స్ ఉన్నవి ఉన్నట్లుగా పనిచేస్తాయి. పూర్తి పేజీ ఒకటి. పేజీలో మ్యాప్‌ను ఉంచండి లో ఉంది. ఈ మార్పులో ప్రధానమైనది కోఆర్డినేట్‌ల క్రమాన్ని మార్చడం:

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