ગુજરાતી

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, એક સમયે 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 નથી, અને એટલે જ તેની માંગણી કરતી સ્ટાઇલના બધા લેબલ્સ ચૂપચાપ ગાયબ થઈ જાય છે.

કયો હોસ્ટ ઝડપી છે, અને તેના વિશે શું નિર્ણય લેવાયો. ધારણાને બદલે માપવામાં આવ્યું: એક જ કનેક્શન પર એક સમયે એક એ રીતે વારાફરતી મોકલેલી રિક્વેસ્ટ્સ, પહેલા ત્રણ સેમ્પલ બાકાત રાખ્યા, અને ટ્રાન્સફરમાંથી પહેલા બાઇટનો સમય (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 પર જાઓ

એક લાઇબ્રેરી, કોઈ એડેપ્ટર નહીં, અને ઉપરની સ્ટાઇલ્સ જેમ છે તેમ કામ કરે છે. આખું પેજ એક. પેજ પર નકશો મૂકો માં છે. આ બદલાવમાં મુખ્યત્વે યામ (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