Vigae vya Protomaps Basemap

Protomaps Basemap yote, ukuzaji 0 hadi 15, ikitolewa kama kumbukumbu moja ya PMTiles kupitia HTTP ya kawaida. Elekeza kiteja chochote cha PMTiles kwenye URL na inafanya kazi.

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

Kigae cha OpenStreetMap kilichozuiwa, au 403 kutoka tile.openstreetmap.org? Anzia hapa.

Ijaribu

Kumbukumbu ileile katika mitindo mitatu. Badilisha mtindo na vigae vilivyokwishapakiwa vinabaki palepale, kwa hivyo ni papo hapo.

z0

Tengeneza yako mwenyewe

Badilisha rangi au zima tabaka na ramani inasasishwa unapoendelea. Kisha nakili JSON ya mtindo, ambayo ni mtindo wa kawaida wa MapLibre unaoweza kupangisha mwenyewe. Inaelekeza kwenye vigae hivi, kwa hivyo inaendelea kufanya kazi popote unapoiiweka.

Itumie

Kumbukumbu inatumia maombi ya masafa ya HTTP, kwa hivyo kila kiteja cha PMTiles kinaweza kuisoma.

Moja. Weka ramani kwenye ukurasa

Nakili faili hili. Ni mfano mzima: lebo tatu, URL moja ya mtindo, ramani moja. Maktaba zote mbili zimefungwa kwenye toleo maalum na zina leseni ya BSD-3-Clause, na faili zilezile zinatolewa kutoka kwa mpangishaji huyu ikiwa hupendi kutumia 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>

Mbili. Badilisha vigae kwenye mtindo ulio nao tayari

Kila mtindo wa MapLibre husoma vigae vyake kutoka kwenye chanzo. Ili kutumia vigae hivi, badilisha url hiyo moja. Hakuna kingine kinachobadilika kwenye mtindo.

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

Au fanya hivyo kwenye msimbo, jambo ambalo linafaa ikiwa mtindo unatoka kwenye seva usiyoidhibiti:

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

Tatu. Mahali pa kuweka mtindo uliotengeneza

Kitufe cha JSON ya mtindo kwenye kiundaji hapo juu hufungua mtindo ambao ramani hii inachora sasa hivi, pamoja na mabadiliko, na kisanduku kina kitufe cha kunakili. Njia mbili za kutumia unachopewa, na zote mbili ni kurasa za kawaida za wavuti.

Hifadhi kama faili kando ya ukurasa wako na uelekeze style hapo, kama vile mitindo mitatu kwenye mpangishaji huyu inavyotumiwa. Hii ndiyo ya kuchagua ikiwa mtindo ni wako na unabadilika pamoja na tovuti yako:

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

Au iweke ndani ya HTML, ambayo ni faili moja ya kuhamisha na hakuna cha kupangisha. Mtindo uleule, mahali unapokaa tu ndipo tofauti:

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

Acha mistari ya glyphs na sprite kama ilivyo. Ndiyo inayochora lebo na aikoni, na inaelekeza kwa mpangishaji huyu, kwa hivyo mtindo unaobandika kwenye ukurasa wako unaendelea kufanya kazi popote unapoipangisha. Ielekeze kwenye protomaps.github.io/basemaps-assets badala yake ikiwa hupendi kumtegemea mpangishaji huyu kabisa.

Jambo moja la kukagua kabla ya kubadilisha. Kumbukumbu hii ni mpangilio wa Protomaps v3. Mtindo ulioandikwa kwa mpangilio tofauti utapakia kisha hautachora chochote, kwa sababu majina ya matabaka ya chanzo hayalingani. Majina tisa ya matabaka yameorodheshwa hapa chini, pamoja na mtindo wa v3 ulio tayari ambao unaweza kunakili.

Nne. Fonti, sprites na maktaba

Ramani ni vigae, URL ya glyphs kwa maandishi, kwa hiari URL ya sprite kwa aikoni, na maktaba za kuchora hayo yote. Vyote viko hapa, kwenye njia ambazo kila moja inatarajia, kwa hivyo ramani inaweza kutoka kwa jina moja la mpangishaji ukitaka.

NiniURL hapaLeseni

Faili za MapLibre na PMTiles ziko kwenye jsDelivr na hapa. URL yoyote kati ya hizo inafanya kazi.

Safu ya mwisho haitumiwi na ukurasa huu. Ni kichoraji cha vekta cha Leaflet, kilichochapishwa hapa ili mabadiliko yawe lebo moja ya hati. Leaflet yenyewe inabaki kwenye CDN yake.

Mifumo miwili ya fonti, Noto Sans Regular na Noto Sans Medium, iliyogawanywa katika masafa 256 ambayo MapLibre huomba, alama 256 kwa wakati mmoja. Yote 256 yamechapishwa, si ya Kilatini pekee: Protomaps huweka lebo kwenye vipengele kwa majina yao ya asili, kwa hivyo Tokyo au Kairo inahitaji masafa katika makumi ya maelfu. Ukichapisha tu kile ramani ya Kiingereza inatumia, lebo hizo hupotea bila hitilafu ya kueleza sababu.

Karatasi tano za sprite, moja kwa kila aina ya chanzo cha juu, kwa 1x na 2x. Mitindo iliyo hapa chini huchora aikoni kutoka humo, kwa hivyo hizi hupakuliwa. Ukitaka alama za miji, ngao za barabara kuu au alama za maeneo kwenye mtindo wako mwenyewe, elekeza sprite kwenye ile ya aina yako. Majina ya aikoni kwenye karatasi yameorodheshwa katika light.json yake.

Kile ramani inachochora, na mahali kila kitu kinapotoka

Kila tabaka ni mojawapo ya matabaka tisa ya chanzo katika kumbukumbu hii, kwa hivyo hakuna kinachohitaji kumbukumbu ya pili hapa. Mawili kati ya hayo yanafaa kutajwa, kwa sababu yote mawili yanaonekana kama kitu kilichokosekana wakati sivyo:

TabakaLinatokaLimo kwenye toleo hili?
Maumbo, barabara, majengo, maji, ardhiearth, landcover, landuse, water, roads, buildingsndiyo
Majina ya maeneo, barabara na majisehemu ya name kwenye matabaka hayohayondiyo
Aikoni za maeneo, alama za mijipois.kind, places, pamoja na spritendiyo
Ngao za njiaroads.shield_texthapana. Toleo linalotolewa halina sehemu hiyo
Nambari za nyumbabuildings.kind=address na buildings.addr_housenumberhapana, sababu ileile

Hakuna kumbukumbu tofauti ya anwani, na hakuna tabaka la anwani la kupakua. Mradi wa chanzo huweka nukta za anwani ndani ya tabaka la buildings, kama vipengele vyenye kind=address na addr_housenumber. Sehemu hiyo iliingia katika toleo la baadaye la Protomaps kuliko lile ambalo ramani hii inatoa, kwa hivyo tabaka la nambari za nyumba limejengwa na hujiwasha lenyewe wakati usasishaji wa mwezi ujao utakapozileta. Vivyo hivyo kwa maandishi ya ngao: toleo la sasa lina shield_text_length, ambayo ni idadi ya herufi za nambari ya njia na si nambari yenyewe, kwa hivyo ngao inayochorwa kutoka humo ingekuwa umbo tupu kwenye kila barabara kuu.

Kuandika tabaka mwenyewe, na kulipa rangi

Tabaka ni kichujio, ukuzaji, umbo na rangi. Mambo mawili kwenye kichujio humtatiza kila mtu, na yote mawili hushindwa bila kutoa hitilafu:

Kwa hivyo barabara, jina lake, na swichi ya kuzima mstari:

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

Jina ni tabaka la alama linalosoma sehemu ya name, likiwa na mng'ao wa pembeni au bila kitu nyuma yake. Glyph inayokosekana haitoi sauti, kwa hivyo mfumo wa fonti unaoomba lazima uwe mmojawapo wa miwili iliyo kwenye mpangishaji huyu:

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

Tabaka lisilochora chochote si hitilafu, na MapLibre haitasema ni ukaguzi upi ulioshindwa. Ikiwa lako ni tupu, kagua kwa mpangilio huu: jina la sehemu, minzoom ya tabaka, mfumo wa fonti, kisha jina la aikoni dhidi ya light.json ya karatasi yenyewe.

Ikiwa una mtindo unaoelekeza glyphs zake kwenye demotiles.maplibre.org, kubadilisha jina hilo la mpangishaji ndilo badiliko pekee. Njia imefanywa kuwa sawa makusudi.

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

Ikiwa mtindo utaomba mfumo wa fonti ambao si mmojawapo wa miwili iliyo hapo juu, hakuna kitakachochorwa kwa ajili yake. Mitindo ya Protomaps yenyewe hutumia Noto Sans Medium kwa maandishi mazito; hakuna Noto Sans Bold katika seti hii, ndiyo maana mtindo unaoomba hiyo hupoteza kila lebo kimyakimya.

Mpangishaji yupi ana kasi zaidi, na nini kiliamuliwa kuhusu hilo. Imepimwa badala ya kukisiwa: maombi yaliyopishana, moja baada ya jingine, kwenye muunganisho mmoja, sampuli tatu za kwanza zikiachwa, muda hadi baiti ya kwanza ukitenganishwa na uhamishaji. Kwenye jaribio hilo CDN ilijibu ms 10 hadi 45 mapema zaidi kwa kila moja ya faili hizi, ambayo ni kanuni nzima ya 15% na tofauti ambayo sampuli zinaivuka waziwazi. Maktaba hupakiwa kutoka jsDelivr kwa sababu hiyo.

Fonti na sprites zinatolewa kutoka hapa ingawa kipimo kilekile kinasema CDN ingezijibu takriban ms 10 mapema. Huo ni uamuzi, si kipimo. Ramani inayotoka kwa jina moja la mpangishaji haivunjiki wakati ya mwingine inapovunjika, na seva ya glyph iliyo chini ni ramani isiyo na lebo. Ikiwa ungependa kupata hizo ms 10, elekeza glyphs kwenye protomaps.github.io/basemaps-assets/fonts na itafanya kazi kwa njia ileile. Nambari za msomaji mmoja kutoka mji mmoja, na kurudia ulinganisho ni amri moja.

Tano. Kuhusu Leaflet

L.tileLayer ya Leaflet huchora picha; hivi ni vigae vya vekta. Ramani ya Leaflet bado inaweza kuvitumia, na njia yoyote kati ya hizo mbili huhifadhi alama zako, madirisha ibukizi na vidhibiti. Njia zote mbili za kubadilisha ziko katika Kuhama kutoka vigae vya OpenStreetMap.

Sita. Soma kumbukumbu kwa maktaba ya PMTiles

Hakuna ramani, data tu. Inafaa kwa hati, majaribio na chochote ambacho si picha.

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

Zingatia madarasa haya mawili. FetchSource ni kisoma baiti kupitia HTTP, na PMTiles ni kisomaji kinachokaa juu yake na kuelewa umbizo. FileSource ni sawa na FetchSource kwa faili ya ndani; ikipewa mfuatano wa URL haitafanya kazi.

Kumbukumbu hii ni picha ya wakati maalum, si mtiririko wa moja kwa moja. Je, hii ni mpya kiasi gani? ina ratiba ya muda.

Kuhama kutoka vigae vya OpenStreetMap

Kizuizi cha sera ya matumizi ya vigae, 403, na cha kufanya kuhusu hayo. Hakuna ufunguo, hakuna mgawo.

Kwa nini ramani inaonyesha kizuizi

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

Seva za vigae zilituma picha hiyo badala ya ramani, kwa makusudi, chini ya sera ya matumizi ya vigae. Si hitilafu, na kurekebisha URL hakuondoi kizuizi hicho.

Kile watu wanachojaribu kwanza:

Ofisi, shule, VPN na mitandao ya simu hushiriki anwani, na vizuizi hutumika kwa anwani pamoja na programu. Kutoka upande wako huwezi kujua ni kipi ulicho nacho.

Kwa hivyo acha kuziomba seva hizo. Kuna njia tatu za kuondoka hapo.

Baki na Leaflet

protomaps-leaflet huchora vigae vya vekta katika Leaflet. Husoma kumbukumbu yenyewe na kujiongeza kama tabaka la kawaida, kwa hivyo alama, madirisha ibukizi, GeoJSON na vidhibiti vinabaki vilipo. Nakala iko hapa, imejaribiwa dhidi ya kumbukumbu hii: https://tiles.jasontally.com/vendor/protomaps-leaflet.js.

Kabla:

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

Baada:

<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 iko katika hali ya matengenezo kwenye mradi wa chanzo: marekebisho tu, si vipengele vipya. Inafaa kwa programu iliyopo ya Leaflet. Kazi mpya inapaswa kuanza kwenye MapLibre GL.

Baki na Leaflet, chora kwa MapLibre

@maplibre/maplibre-gl-leaflet huweka ramani ya MapLibre katika sehemu ya vigae ya Leaflet. Itumie unapotaka mmojawapo wa mitindo iliyo hapo juu, au mandhari ya ardhi na kivuli cha milima, katika programu inayobaki kuwa 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>

Hamia MapLibre GL

Maktaba moja, hakuna adapta, na mitindo iliyo hapo juu inafanya kazi kama ilivyo. Ukurasa mzima uko katika Moja. Weka ramani kwenye ukurasa. Kubadilisha ni hasa kugeuza majira ya nukta:

LeafletMapLibre GL
L.map("map").setView([lat, lng], z)new maplibregl.Map({ container: "map", center: [lng, lat], zoom: z })
L.tileLayer(url).addTo(map)mtindo wenye chanzo cha vekta; tazama hapo juu
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 }), kisha addLayer
L.control.scale()new maplibregl.ScaleControl()
map.invalidateSize()map.resize()

setView([lat, lng]) huchukua latitudo kwanza; kila wito wa MapLibre huchukua [lng, lat]. Ramani iliyo kwenye nusu-duara isiyo sahihi ya dunia inatokana na hilo, si vigae. Vyanzo na matabaka yanayoongezwa kabla ya mtindo kupakia huachwa bila hitilafu, kwa hivyo yaongeze ndani ya map.on("load", …).

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

Hiyo ni pmtiles.leafletRasterLayer, ambayo huchora PMTiles za rasta kama picha. Hivi ni vigae vya vekta, kwa hivyo inavikataa. Hakuna chaguo linalobadilisha hilo, na hakuna nakala ya rasta hapa. Tumia mojawapo ya chaguo zilizo hapo juu.

“download.openstreetmap.fr returned 403”

Hiyo ni seva mbadala ya dondoo na uigaji, si seva ya vigae. Mnamo Oktoba 2026 ilizuia anwani baada ya upakuaji uliopitiliza, na waendeshaji walisema wangerejesha ufikiaji kesi kwa kesi. Hakuna kitu hapa kinachoihitaji: kumbukumbu hii inatoka kwenye matoleo ya Protomaps, kwa hivyo huunganishi .osm.pbf mwenyewe. Ikiwa unavuta data ya OSM, chukua dondoo la mara kwa mara badala ya mtiririko wa kila dakika.

Mitindo

Vigae vilevile, rangi tofauti. Chagua mmoja, uunakili, uubadilishe, ni wako.

MtindoMuonekanoFaili

Kilicho ndani ya vigae

Imesomwa kutoka kwenye metadata ya kumbukumbu yenyewe wakati ukurasa unapopakia. Haya ndiyo majina ya matabaka ambayo mtindo lazima utumie.

Tabaka la chanzoUkuzajiSehemu
inapakia…

Ambavyo huduma hii sivyo

Majibu ya wazi, ili chochote hapa kisikushangaze baadaye.

Je, hii ni mpya kiasi gani?

Vigae hivi ni nakala ya Protomaps Basemap, inayojengwa upya mara moja kwa mwezi.

JSON ya mtindo

open raw