தமிழ்

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, ஒரு வரைபடம். இரண்டு நூலகங்களும் நிலையான பதிப்பில் (pinned) 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 schema 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 மட்டுமே உள்ளது; அது வழித்தட எண்ணின் எழுத்துக்களின் எண்ணிக்கையே தவிர அந்த எண் அல்ல, எனவே அதிலிருந்து வரையப்படும் குறியீடு ஒவ்வொரு நெடுஞ்சாலையிலும் வெற்று வடிவமாகவே இருக்கும்.

நீங்களே ஒரு அடுக்கை எழுதி அதற்கு நிறமிடுதல்

ஒரு அடுக்கு என்பது வடிகட்டி (filter), ஜூம், வடிவம் மற்றும் நிறம் ஆகும். வடிகட்டியில் உள்ள இரண்டு விஷயங்கள் எல்லோரையும் குழப்புகின்றன, மேலும் இரண்டுமே எந்தப் பிழையும் காட்டாமல் தோல்வியடைகின்றன:

எனவே ஒரு சாலை, அதன் பெயர், மற்றும் அந்தக் கோட்டை அணைப்பதற்கான நிலைமாற்றி (toggle):

{
  "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 புலத்தை வாசிக்கும் ஒரு சின்ன (symbol) அடுக்காகும்; அதன் பின்னால் ஒளிவட்டம் (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-இன் சொந்த பாணிகள் தடித்த உரைக்கு Noto Sans Medium-ஐப் பயன்படுத்துகின்றன; இந்தத் தொகுப்பில் Noto Sans Bold இல்லை, அதனால்தான் அதைக் கேட்கும் பாணி சத்தமின்றி எல்லாப் பெயர்களையும் இழக்கிறது.

எந்த ஹோஸ்ட் வேகமானது, அது குறித்து என்ன முடிவெடுக்கப்பட்டது. ஊகிக்கப்படாமல் அளவிடப்பட்டது: ஒரே இணைப்பில், ஒரு நேரத்தில் ஒன்றாக மாறி மாறி அனுப்பப்பட்ட கோரிக்கைகள், முதல் மூன்று மாதிரிகள் விடப்பட்டன, முதல் பைட்டுக்கான நேரம் பரிமாற்ற நேரத்திலிருந்து பிரிக்கப்பட்டது. அந்தச் சோதனையில் இந்த ஒவ்வொரு கோப்புக்கும் ஒரு 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 சரத்தைக் கொடுத்தால் வேலை செய்யாது.

இந்தக் காப்பகம் ஒரு குறிப்பிட்ட நேரப் பதிவு (snapshot), நேரடி ஓடை அல்ல. கால அளவு விவரங்கள் இது எவ்வளவு புதியது? பகுதியில் உள்ளன.

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-இன் டைல் பலகத்தில் (tile pane) ஒரு MapLibre வரைபடத்தை வைக்கிறது. Leaflet-ஆகவே இருக்கும் ஒரு பயன்பாட்டில் மேலே உள்ள பாணிகளில் ஒன்று அல்லது நிலப்பரப்பு (terrain) மற்றும் நிழல் மேடு (hillshade) உங்களுக்குத் தேவைப்படும்போது இதைப் பயன்படுத்தவும்.

<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”

அது ஒரு தரவுப் பிரிப்பு மற்றும் பிரதியெடுப்பு மிரர் (mirror) ஆகுமே தவிர டைல் சேவையகம் அல்ல. அக்டோபர் 2026-இல் முறையற்ற பதிவிறக்கங்களுக்குப் பிறகு அது முகவரிகளைத் தடுத்தது, மேலும் தனித்தனி நேர்வுகளின் அடிப்படையில் அணுகலை மீட்டெடுப்பதாக நிர்வாகிகள் கூறினர். இங்குள்ள எதற்கும் அது தேவையில்லை: இந்தக் காப்பகம் Protomaps வெளியீடுகளிலிருந்து வருகிறது, எனவே நீங்கள் .osm.pbf-ஐ நீங்களே தொகுக்க வேண்டியதில்லை. நீங்கள் OSM தரவை எடுப்பதாக இருந்தால், நிமிட ஓடைக்குப் பதிலாக காலமுறைத் தொகுப்பை (periodic extract) எடுத்துக்கொள்ளவும்.

பாணிகள்

அதே டைல்கள், வெவ்வேறு நிறங்கள். ஒன்றைத் தேர்ந்தெடுங்கள், நகலெடுங்கள், மாற்றுங்கள், அது உங்களுடையது.

பாணிதோற்றம்கோப்பு

டைல்களில் என்ன உள்ளது

பக்கம் ஏற்றப்படும்போது காப்பகத்தின் சொந்த மெட்டாடேட்டாவிலிருந்து வாசிக்கப்படுகிறது. ஒரு பாணி பயன்படுத்த வேண்டிய அடுக்குப் பெயர்கள் இவைதான்.

மூல அடுக்குஜூம்புலங்கள்
ஏற்றப்படுகிறது…

இது என்ன கிடையாது

பின்னால் எதுவும் உங்களை ஆச்சரியப்படுத்தாமல் இருக்க நேரடியான பதில்கள்.

இது எவ்வளவு புதியது?

இந்த டைல்கள் Protomaps Basemap-இன் நகலாகும்; மாதம் ஒருமுறை மீண்டும் உருவாக்கப்படுகிறது.

பாணி JSON

open raw