ਪੰਜਾਬੀ

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 });

ਤਿੰਨ। ਆਪਣੀ ਬਣਾਈ ਸਟਾਈਲ ਕਿੱਥੇ ਰੱਖੀਏ

ਉੱਪਰ ਬਿਲਡਰ ਵਿੱਚ ਦਿੱਤਾ Style JSON ਬਟਨ ਉਸ ਸਟਾਈਲ ਨੂੰ ਖੋਲ੍ਹਦਾ ਹੈ ਜਿਸ ਨੂੰ ਇਹ ਨਕਸ਼ਾ ਇਸ ਵੇਲੇ ਬਣਾ ਰਿਹਾ ਹੈ (ਤੁਹਾਡੇ ਬਦਲਾਵਾਂ ਸਮੇਤ), ਅਤੇ ਉਸ ਡਾਇਲਾਗ ਵਿੱਚ ਕਾਪੀ ਬਟਨ ਹੈ। ਇਸ ਤੋਂ ਮਿਲਣ ਵਾਲੇ 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 ਉੱਤੇ। ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਸਟਾਈਲਾਂ ਇਹਨਾਂ ਤੋਂ ਆਈਕਨ ਬਣਾਉਂਦੀਆਂ ਹਨ, ਇਸ ਲਈ ਇਹਨਾਂ ਨੂੰ ਫੈੱਚ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੀ ਸਟਾਈਲ ਵਿੱਚ ਟਾਊਨਸਪੌਟ, ਹਾਈਵੇ ਸ਼ੀਲਡ ਜਾਂ ਥਾਵਾਂ ਦੇ ਪੁਆਇੰਟ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ 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 ਸਟ੍ਰਿੰਗ ਦੇਣ 'ਤੇ ਉਹ ਕੰਮ ਨਹੀਂ ਕਰੇਗਾ।

ਇਹ ਆਰਕਾਈਵ ਇੱਕ ਸਨੈਪਸ਼ਾਟ ਹੈ, ਲਾਈਵ ਫ਼ੀਡ ਨਹੀਂ। ਸਮੇਂ ਦੀ ਜਾਣਕਾਰੀ ਇਹ ਕਿੰਨਾ ਤਾਜ਼ਾ ਹੈ? ਵਿੱਚ ਹੈ।

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