മലയാളം

Protomaps Basemap ടൈലുകൾ

സൂം 0 മുതൽ 15 വരെയുള്ള മുഴുവൻ Protomaps Basemap-ഉം സാധാരണ 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 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 മാത്രമാണുള്ളത്; അത് ഒരു റൂട്ട് നമ്പറിൽ എത്ര അക്ഷരങ്ങളുണ്ട് എന്നതാണ്, ആ അക്ഷരങ്ങൾ എന്താണെന്നല്ല, അതിനാൽ അതിൽ നിന്ന് വരയ്ക്കുന്ന ഷീൽഡ് എല്ലാ ഹൈവേകളിലും ഒഴിഞ്ഞ ആകൃതിയായിരിക്കും.

സ്വന്തമായി ഒരു ലെയർ എഴുതലും അതിന് നിറം നൽകലും

ഒരു ലെയർ എന്നാൽ ഒരു ഫിൽട്ടർ, ഒരു സൂം, ഒരു ആകൃതി, ഒരു നിറം എന്നിവയാണ്. ഫിൽട്ടറിലെ രണ്ട് കാര്യങ്ങൾ എല്ലാവരെയും കുഴയ്ക്കാറുണ്ട്, അവ രണ്ടും യാതൊരു പിശകും കാണിക്കാതെ പരാജയപ്പെടുകയും ചെയ്യുന്നു:

അതിനാൽ ഒരു റോഡ്, അതിന്റെ പേര്, ആ വര ഓഫ് ചെയ്യാനുള്ള ഒരു ടോഗിൾ എന്നിവ ഇതാ:

{
  "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-ന്റെ സ്വന്തം സ്റ്റൈലുകൾ കട്ടിയുള്ള അക്ഷരങ്ങൾക്കായി 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 and 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 ചിത്രങ്ങളായി വരയ്ക്കുന്ന pmtiles.leafletRasterLayer ആണ്. ഇവ വെക്ടർ ടൈലുകളായതിനാൽ അത് ഇവയെ നിരസിക്കുന്നു. ഒരു ഓപ്ഷനും അത് മാറ്റില്ല, ഇവിടെ റാസ്റ്റർ പകർപ്പ് ലഭ്യവുമല്ല. മുകളിലുള്ള മാർഗ്ഗങ്ങളിൽ ഒന്ന് ഉപയോഗിക്കുക.

“download.openstreetmap.fr returned 403”

അതൊരു എക്സ്ട്രാക്റ്റ് ആൻഡ് റെപ്ലിക്കേഷൻ മിറർ (mirror) ആണ്, ടൈൽ സെർവറല്ല. 2026 ഒക്ടോബറിൽ അമിതമായ ഡൗൺലോഡുകൾക്ക് ശേഷം അത് വിലാസങ്ങൾ തടഞ്ഞു, ഓരോ കേസും പരിശോധിച്ച് പ്രവേശനം പുനഃസ്ഥാപിക്കുമെന്ന് ഓപ്പറേറ്റർമാർ അറിയിക്കുകയും ചെയ്തു. ഇവിടുത്തെ ഒന്നിനും അത് ആവശ്യമില്ല: ഈ ആർക്കൈവ് വരുന്നത് Protomaps റിലീസുകളിൽ നിന്നാണ്, അതിനാൽ നിങ്ങൾ സ്വയം .osm.pbf നിർമ്മിക്കേണ്ടതില്ല. നിങ്ങൾ OSM ഡാറ്റ എടുക്കുന്നുണ്ടെങ്കിൽ മിനിറ്റ് സ്ട്രീമിന് പകരം നിശ്ചിത ഇടവേളകളിലുള്ള എക്സ്ട്രാക്റ്റ് (periodic extract) എടുക്കുക.

സ്റ്റൈലുകൾ

അതേ ടൈലുകൾ, വ്യത്യസ്ത നിറങ്ങൾ. ഒന്ന് തിരഞ്ഞെടുക്കുക, പകർത്തുക, മാറ്റം വരുത്തുക, അത് നിങ്ങളുടേതാണ്.

സ്റ്റൈൽരൂപംഫയൽ

ടൈലുകളിൽ എന്താണുള്ളത്

പേജ് ലോഡ് ചെയ്യുമ്പോൾ ആർക്കൈവിന്റെ സ്വന്തം മെറ്റാഡാറ്റയിൽ നിന്ന് വായിക്കുന്നത്. ഒരു സ്റ്റൈൽ ഉപയോഗിക്കേണ്ട ലെയർ പേരുകൾ ഇവയാണ്.

സോഴ്സ് ലെയർസൂംഫീൽഡുകൾ
ലോഡ് ചെയ്യുന്നു…

ഇത് എന്തല്ല

വ്യക്തമായ ഉത്തരങ്ങൾ, അതിനാൽ പിന്നീട് ഒന്നും നിങ്ങളെ അത്ഭുതപ്പെടുത്തില്ല.

ഇത് എത്രത്തോളം പുതിയതാണ്?

ഈ ടൈലുകൾ മാസത്തിലൊരിക്കൽ പുനർനിർമ്മിക്കുന്ന Protomaps Basemap-ന്റെ പകർപ്പാണ്.

സ്റ്റൈൽ JSON

open raw