Hausa

Tayilolin Protomaps Basemap

Dukkan Protomaps Basemap, daga zoom 0 zuwa 15, ana bayar da shi a matsayin rumbun fayil ɗaya na PMTiles ta hanyar HTTP zalla. Nuna wa kowane manhajar PMTiles wannan URL ɗin kuma zai yi aiki.

https://tiles.jasontally.com/basemap.pmtiles

An toshe tayil ɗin OpenStreetMap, ko ka sami 403 daga tile.openstreetmap.org? Fara daga nan.

Gwada shi

Rumbun fayil ɗaya a cikin saloli uku. Canza salon kuma tayilolin da aka riga aka ɗora za su ci gaba da zama a wurinsu, don haka yana faruwa nan take.

z0

Ƙirƙiri naka

Canza launi ko kashe wani mataki kuma taswirar za ta sabunta yayin da kake yi. Sa'an nan ka kwafi salon JSON, wanda salon MapLibre ne na yau da kullun da za ka iya ɗaukar nauyin ajiyarsa da kanka. Yana nuna waɗannan tayilolin, don haka yana ci gaba da aiki a duk inda ka saka shi.

Yi amfani da shi

Rumbun fayil ɗin yana amsa buƙatun range na HTTP, don haka kowace manhajar PMTiles za ta iya karanta shi.

Ɗaya. Saka taswira a kan shafin

Kwafi wannan fayil ɗin. Shi ne cikakken misalin: alamomi uku, URL ɗin salo guda ɗaya, taswira ɗaya. Dukkan ɗakunan karatu guda biyu an tsayar da sigarsu kuma suna ƙarƙashin BSD-3-Clause, sannan ana bayar da fayiloli iri ɗaya daga wannan sabar idan ba ka son amfani da 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>

Biyu. Sauya tayilolin a cikin salon da ka riga ka mallaka

Kowane salon MapLibre yana karanta tayilolinsa daga wani tushe. Don amfani da waɗannan tayilolin, canza wannan url ɗin kawai. Babu wani abu kuma a cikin salon da zai canza.

  "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>"
    }
  }

Ko ka yi shi a cikin lamba, wanda ke da amfani idan salon yana fitowa daga sabar da ba ka da iko a kanta:

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

Uku. Inda za ka saka salon da ka ƙirƙira

Maɓallin Salon JSON a cikin wurin ginawa na sama yana buɗe salon da wannan taswirar take zanawa a yanzu, tare da gyare-gyaren da aka yi, kuma akwatin yana da maɓallin kwafi. Akwai hanyoyi biyu na amfani da abin da ya ba ka, kuma duka biyun shafukan yanar gizo ne na yau da kullun.

Ajiye shi a matsayin fayil kusa da shafinka kuma ka nuna style zuwa gare shi, kamar yadda ake amfani da saloli uku a kan wannan sabar. Wannan shi ne abin zaɓa idan salon naka ne kuma yana canzawa tare da shafinka:

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

Ko ka bar shi a cikin HTML, wanda fayil ɗaya ne kawai za a motsa kuma babu abin da za a ɗora a saba. Salo iri ɗaya ne, wurin da yake zama ne kawai ya bambanta:

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

Bar layukan glyphs da sprite yadda suke. Su ne ke zana sunaye da alamomi, kuma suna nuna wannan sabar, don haka salon da ka liƙa a cikin shafinka zai ci gaba da aiki daga duk inda ka bayar da shi. Nuna su zuwa protomaps.github.io/basemaps-assets a maimakon haka idan ba ka son dogara da wannan sabar kwata-kwata.

Abu ɗaya da za a duba kafin ka sauya. Wannan rumbun fayil ɗin Protomaps schema v3 ne. Salon da aka rubuta don wani tsari daban zai ɗoru sannan ba zai zana komai ba, saboda sunayen matakan tushe ba su dace ba. An jera sunayen matakai tara a ƙasa, tare da salon v3 da aka riga aka shirya wanda za ka iya kwafa daga ciki.

Huɗu. Nau'ikan rubutu, sprites da ɗakunan karatu

Taswira ita ce tayiloli, URL na glyphs don rubutu, URL na sprite na zaɓi don alamomi, da kuma ɗakunan karatu don zana kowannensu. Dukkan waɗannan suna nan, a hanyoyin da kowanne ke tsammani, don haka taswira za ta iya fitowa daga sunan saba guda ɗaya idan kana so.

Mene neURL a nanLasisi

Fayilolin MapLibre da PMTiles suna kan jsDelivr da kuma nan. Kowanne URL yana aiki.

Wannan shafin ba ya amfani da layin ƙarshe. Shi ne mai zana vector na Leaflet, an wallafa shi a nan don sauyin ya zama alamar script guda ɗaya. Ita kanta Leaflet tana zama a kan nata CDN.

Jerin nau'ikan rubutu guda biyu, Noto Sans Regular da Noto Sans Medium, an raba su zuwa zanguna 256 da MapLibre ke nema, maki 256 a lokaci guda. An wallafa dukkan 256, ba na haruffan Latin kaɗai ba: Protomaps yana sa wa wurare suna da yarensu na asali, don haka Tokyo ko Alƙahira suna buƙatar zanguna a cikin dubbai da yawa. Idan aka wallafa abin da taswirar Turanci ke amfani da shi kaɗai, waɗannan sunayen za su ɓace, ba tare da wani kuskure da zai faɗi dalilin ba.

Takardun sprite guda biyar, ɗaya ga kowane nau'in tushe, a girman 1x da 2x. Salolin da ke ƙasa suna zana alamomi daga gare su, don haka ana ɗauko waɗannan. Idan kana son ɗigon garuruwa, garkuwar manyan hanyoyi ko alamomin wurare a cikin naka salon, nuna sprite zuwa na nau'in da ka zaɓa. An jera sunayen alamomin da ke cikin takarda a cikin light.json ɗinta.

Abin da taswirar ke zanawa, da kuma inda kowane abu ke fitowa

Kowane mataki ɗaya ne daga cikin matakan tushe tara a cikin wannan rumbun fayil, don haka babu abin da ke nan da ke buƙatar rumbun fayil na biyu. Biyu daga cikinsu sun cancanci a bayyana su, saboda duka biyun suna kama da wani abu da ya ɓace alhali ba haka ba ne:

MatakiYana fitowa dagaYana cikin wannan ginin?
Siffofi, hanyoyi, gine-gine, ruwa, ƙasaearth, landcover, landuse, water, roads, buildingseh
Sunayen wurare, hanyoyi da ruwafilin name a kan waɗannan matakaneh
Alamomin wurare, ɗigon garuruwapois.kind, places, tare da spriteeh
Garkuwar hanyoyiroads.shield_texta'a. Ginin da ake bayarwa ba shi da wannan filin
Lambobin gidabuildings.kind=address da buildings.addr_housenumbera'a, dalili ɗaya

Babu rumbun fayil na adireshi daban, kuma babu matakin adireshi da za a ɗauko. Aikin tushe yana saka ɗigon adireshi a cikin matakin buildings, a matsayin abubuwa masu kind=address da addr_housenumber. Wannan filin ya zo a wani ginin Protomaps na baya fiye da wanda wannan taswirar ke bayarwa, don haka an riga an gina matakin lambar gida kuma zai kunna kansa lokacin da sabuntawar wata mai zuwa ta shigo da su. Haka abin yake ga rubutun garkuwar hanya: ginin yanzu yana ɗauke da shield_text_length, wanda shi ne adadin haruffan da lambar hanya take da shi ba ko mene ne su ba, don haka garkuwar da aka zana daga gare shi za ta zama siffa mara rubutu a kan kowace babbar hanya.

Rubuta mataki da kanka, da kuma ba shi launi

Mataki shi ne mataci, girman zoom, siffa da launi. Abubuwa biyu a cikin matacin suna ruɗar kowa, kuma duka biyun suna kasa aiki ba tare da kuskure ba:

Don haka hanya, sunanta, da maɓallin kunnawa da kashewa don kashe layin:

{
  "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]
  }
}

Suna matakin alama ne da ke karanta filin name, tare da haske zagaye da shi ko babu komai a bayansa. Glyph ɗin da babu shi ba ya ba da kuskure, don haka jerin rubutun da ka nema dole ne ya zama ɗaya daga cikin biyun da ke kan wannan sabar:

{
  "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
  }
}

Matakin da ba ya zana komai ba kuskure ba ne, kuma MapLibre ba zai faɗi wane gwaji ne ya kasa ba. Idan naka babu komai a ciki, duba bisa wannan tsarin: sunan filin, minzoom na matakin, jerin nau'in rubutu, sa'an nan sunan alamar a cikin light.json na takardar.

Idan kana da salon da ke nuna glyphs ɗinsa zuwa demotiles.maplibre.org, sauya wannan sunan sabar shi ne dukkan canjin. Hanyar iri ɗaya ce da gangan.

"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",

Idan salo ya nemi jerin nau'in rubutu wanda ba ɗaya daga cikin biyun da ke sama ba ne, ba za a zana masa komai ba. Salolin Protomaps na kansa suna amfani da Noto Sans Medium don rubutu mai kauri; babu Noto Sans Bold a cikin wannan rukuni, shi ya sa salon da ya nemi ɗaya yake rasa kowane suna ba tare da kuskure ba.

Wace saba ce ta fi sauri, da abin da aka yanke shawara a kai. An auna maimakon zato: buƙatu masu bin juna, ɗaya bayan ɗaya, a kan haɗi guda ɗaya, an zubar da gwaje-gwaje uku na farko, an raba lokacin samun byte na farko daga na saukar da bayanan. A wannan gwajin CDN ya amsa da wuri da ms 10 zuwa 45 ga kowane ɗaya daga cikin waɗannan fayilolin, wanda ya cika ƙa'idar 15% gaba ɗaya kuma tazara ce da gwaje-gwajen suka wuce a fili. Don wannan dalilin ne ɗakunan karatu suke ɗoruwa daga jsDelivr.

Ana bayar da nau'ikan rubutu da sprites daga nan duk da cewa wannan gwajin ya nuna CDN zai amsa su da wuri da kusan ms 10. Wannan shawara ce, ba awo ba. Taswirar da ke fitowa daga sunan saba guda ɗaya ba ta lalacewa lokacin da ta wani ta samu matsala, kuma sabar glyph da ta tsaya tana nufin taswira mara sunaye. Idan ka fi son samun wannan ms 10, nuna glyphs zuwa protomaps.github.io/basemaps-assets/fonts kuma zai yi aiki da hanya iri ɗaya. Lambobin mai karatu ɗaya daga birni ɗaya, kuma sake gudanar da kwatancen umarni ɗaya ne.

Biyar. Game da Leaflet

L.tileLayer na Leaflet yana zana hotuna; waɗannan tayilolin vector ne. Taswirar Leaflet har yanzu tana iya amfani da su, kuma kowace hanya tana barin alamominka, akwatunan bayani da maɓallan sarrafawa yadda suke. Dukkan sauye-sauyen biyu suna cikin Koma daga tayilolin OpenStreetMap.

Shida. Karanta rumbun fayil tare da ɗakin karatun PMTiles

Babu taswira, bayanai kawai. Yana da amfani ga scripts, gwaje-gwaje da duk wani abu da ba hoto ba.

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

Lura da rukunai biyun. FetchSource shi ne mai karanta byte ta HTTP, kuma PMTiles shi ne mai karantawa da ke zaune a samansa kuma ya fahimci tsarin. FileSource shi ne takwaransa na fayil ɗin cikin na'ura ga FetchSource; idan aka ba shi rubutun URL ba zai yi aiki ba.

Rumbun fayil ɗin hoton lokaci ɗaya ne, ba bayanan kai tsaye ba. Yaya sabuntakar wannan? yana ɗauke da lokutan.

Koma daga tayilolin OpenStreetMap

Toshewar manufar amfani da tayil, kuskuren 403, da abin da za a yi game da su. Babu maɓalli, babu kason adadi.

Me ya sa taswirar ke nuna toshewa

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

Sabobin tayil sun aiko wannan hoton a maimakon taswirar, da gangan, a ƙarƙashin manufar amfani da tayil. Ba matsala ba ce, kuma gyara URL ɗin ba ya cire ta.

Abin da mutane ke fara gwadawa:

Ofisoshi, makarantu, VPN da hanyoyin sadarwa na wayar hannu suna raba adireshi ɗaya, kuma toshewa tana shafar adiresoshi kamar yadda take shafar manhajoji. Daga ɓangarenka ba za ka iya gane wanne ne ya same ka ba.

Don haka daina tambayar waɗannan sabobin. Akwai hanyoyi uku na fita daga gare su.

Ci gaba da amfani da Leaflet

protomaps-leaflet yana zana tayilolin vector a cikin Leaflet. Yana karanta rumbun fayil ɗin da kansa kuma yana ƙara kansa a matsayin mataki na yau da kullun, don haka alamomi, akwatunan bayani, GeoJSON da maɓallan sarrafawa suna ci gaba da zama a inda suke. Akwai kwafi a nan, an gwada shi da wannan rumbun fayil: https://tiles.jasontally.com/vendor/protomaps-leaflet.js.

Kafin:

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

Bayan:

<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 yana cikin yanayin kulawa kawai a tushe: gyare-gyare, ba sabbin fasaloli ba. Yana da kyau ga manhajar Leaflet da take aiki a yanzu. Sabon aiki ya kamata ya fara a kan MapLibre GL.

Ci gaba da Leaflet, zana da MapLibre

@maplibre/maplibre-gl-leaflet yana saka taswirar MapLibre a cikin bangon tayil na Leaflet. Yi amfani da shi lokacin da kake son ɗaya daga cikin salolin da ke sama, ko tudu da inuwar tsaunuka, a cikin manhajar da za ta ci gaba da zama 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>

Koma zuwa MapLibre GL

Ɗakin karatu guda ɗaya, babu mai haɗawa, kuma salolin da ke sama suna aiki yadda suke. Cikakken shafin yana cikin Ɗaya. Saka taswira a kan shafin. Sauyin yawanci juya tsarin lissafin wurare ne kawai:

LeafletMapLibre GL
L.map("map").setView([lat, lng], z)new maplibregl.Map({ container: "map", center: [lng, lat], zoom: z })
L.tileLayer(url).addTo(map)salo mai tushen vector; duba sama
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 }), sa'an nan addLayer
L.control.scale()new maplibregl.ScaleControl()
map.invalidateSize()map.resize()

setView([lat, lng]) yana ɗaukar latitude da farko; kowane kiran MapLibre yana ɗaukar [lng, lat]. Taswirar da ta bayyana a ɓangaren duniya da ba daidai ba wannan ne dalilin, ba tayilolin ba. Tushe da matakan da aka ƙara kafin salon ya ɗoru ana watsar da su ba tare da kuskure ba, don haka ƙara su a cikin map.on("load", …).

“archive contains MVT vector tiles, but leafletRasterLayer is for displaying raster tiles”

Wannan shi ne pmtiles.leafletRasterLayer, wanda ke zana PMTiles na raster a matsayin hotuna. Waɗannan tayilolin vector ne, don haka yana ƙin karɓarsu. Babu wani zaɓi da ke canza hakan, kuma babu kwafin raster a nan. Yi amfani da ɗaya daga cikin zaɓuɓɓukan da ke sama.

“download.openstreetmap.fr returned 403”

Wannan sabar kwafi ce da cire bayanai, ba sabar tayil ba. A watan Oktoba 2026 ta toshe adiresoshi bayan sauke bayanai ba bisa ƙa'ida ba, kuma masu kula da ita sun ce za su dawo da damar shiga daki-daki. Babu abin da ke nan da ke buƙatarta: wannan rumbun fayil yana fitowa ne daga fitowar Protomaps, don haka ba ka haɗa .osm.pbf da kanka. Idan kana jawo bayanan OSM, ɗauki kwafin lokaci-lokaci maimakon na kowane minti.

Saloli

Tayiloli iri ɗaya, launuka daban-daban. Zaɓi ɗaya, kwafe shi, canza shi, naka ne.

SaloKamanninsaFayil

Abin da ke cikin tayilolin

Ana karantawa daga bayanan rumbun fayil ɗin kansa yayin buɗe shafin. Waɗannan su ne sunayen matakai da dole ne salo ya yi amfani da su.

Matakin tusheZoomFilaye
yana ɗorawa…

Abin da wannan ba shi ba ne

Amsoshi na gaskiya a fili, don kada wani abu a nan ya ba ka mamaki daga baya.

Yaya sabuntakar wannan?

Tayilolin kwafin Protomaps Basemap ne, ana sake gina su sau ɗaya a wata.

Salon JSON

open raw