maplibre-tile-sources

Name: maplibre-tile-sources
Author: maplibre

445installs8forks

How to install maplibre-tile-sources?

maplibre/maplibre-agent-skills/maplibre-tile-sources

$npx -y skills add maplibre/maplibre-agent-skills --skill maplibre-tile-sources

Installs into the current project.

Summary

How to choose and configure data sources for MapLibre GL JS — rendering your own data without tiles, hosted tile services, serverless PMTiles, self-hosted tile servers, tile schemas, glyphs, and sprites.

Files · 1

View on GitHub

SKILL.md

1	# MapLibre Tile Sources
2
3	MapLibre GL JS does not ship with map data. You provide a style that references sources — URLs or inline data that MapLibre fetches and renders. MapLibre works equally well for a store locator with 200 addresses, a city transit map, and a global basemap — the right source type depends on geographic scale and level of detail, update frequency, infrastructure constraints, and use case.
4
5	## When to Use This Skill
6
7	- Setting up a new MapLibre map and choosing where your data comes from
8	- Deciding between GeoJSON, serverless tiles, hosted services, a combination thereof, or self-hosted options
9	- Configuring glyphs (fonts) and sprites so labels and icons render
10	- Debugging blank maps or missing tiles
11	- Migrating from Mapbox and need equivalent tile sources and style setup
12
13	## How styles and sources work
14
15	A style (a style JSON, style document, or style object) is the configuration you pass to MapLibre. It contains the specific rendering rules governed by the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), maintained with parity for MapLibre GL JS and MapLibre Native.
16
17	You can use a style URL from a provider — that URL references a style with sources, layers, glyphs, and sprite. Or you can build your own style and configure each yourself.
18
19	A style has three main components:
20
21	- Sources — Point to the actual data. Each source has a `type` and either inline data or a URL. MapLibre requests tiles or data as the viewport changes. The same source can back many layers (e.g. roads, water, and labels all from one vector URL).
22	- Layers — An ordered list defining what to draw and how. Each layer references a source (and for vector tiles, a `source-layer` name) and specifies paint/layout properties.
23	- Glyphs and sprite — Required for text and icons: URLs to font SDF stacks and icon spritesheets. Without them, labels and symbols won't appear.
24
25	Source types:
26
27	\| Type \| Description \|
28	\| ------------ \| -------------------------------------------------------------------------------------------------------- \|
29	\| `vector` \| Vector tiles — binary-encoded geometry and attributes; the primary format for basemaps and data overlays \|
30	\| `raster` \| Raster tile imagery — satellite photos, WMS/WMTS layers \|
31	\| `raster-dem` \| Elevation tiles — for terrain rendering and hillshading \|
32	\| `geojson` \| GeoJSON data — inline object or URL; no tile server needed \|
33	\| `image` \| A single georeferenced image — scanned maps, annotated overlays \|
34	\| `video` \| Georeferenced video \|
35
36	`vector` and `raster` are the most common for basemaps and data overlays. `geojson` is ideal for small datasets or interactive data that doesn't need tiling. `raster-dem` is used for terrain and hillshade effects, as well as emerging use cases in scientific visualization. `image` and `video` sources are the least common, but let you georeference static images (such as a scanned map, chart, or overlay) or georeferenced videos as map layers.
37
38	## GeoJSON and Direct Data Sources
39
40	For many use cases you don't need a tile service. MapLibre can render points, lines, or polygons directly from an inline GeoJSON object or a URL to a GeoJSON file. The entire dataset is downloaded and parsed in the browser; MapLibre handles rendering client-side.
41
42	```javascript
43	map.addSource('my-data', {
44	type: 'geojson',
45	data: '/path/to/data.geojson' // or an inline GeoJSON object
46	});
47	map.addLayer({
48	id: 'my-layer',
49	type: 'fill',
50	source: 'my-data',
51	paint: { 'fill-color': '#0080ff', 'fill-opacity': 0.5 }
52	});
53	```
54
55	### GeoJSON performance thresholds
56
57	GeoJSON downloads the entire file on every load. This works well at small scale and degrades predictably:
58
59	\| Range \| File size / feature count \| Behavior \|
60	\| ---------- \| -------------------------------- \| ----------------------------------------------------------------------------------------------------------- \|
61	\| Sweet spot \| < 2 MB / < 5,000 features \| Instantaneous loading, smooth interaction \|
62	\| Lag zone \| 5–20 MB / up to ~50,000 features \| 1–3s parse delay; mobile may struggle; optimize by simplifying geometries and reducing coordinate precision \|
63	\|

People who liked this also viewed

6 picks

Type

maplibre-tile-sources

445installs8forks

View on GitHub

How to install maplibre-tile-sources?

maplibre/maplibre-agent-skills/maplibre-tile-sources

$npx -y skills add maplibre/maplibre-agent-skills --skill maplibre-tile-sources

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# MapLibre Tile Sources
2
3	MapLibre GL JS does not ship with map data. You provide a style that references sources — URLs or inline data that MapLibre fetches and renders. MapLibre works equally well for a store locator with 200 addresses, a city transit map, and a global basemap — the right source type depends on geographic scale and level of detail, update frequency, infrastructure constraints, and use case.
4
5	## When to Use This Skill
6
7	- Setting up a new MapLibre map and choosing where your data comes from
8	- Deciding between GeoJSON, serverless tiles, hosted services, a combination thereof, or self-hosted options
9	- Configuring glyphs (fonts) and sprites so labels and icons render
10	- Debugging blank maps or missing tiles
11	- Migrating from Mapbox and need equivalent tile sources and style setup
12
13	## How styles and sources work
14
15	A style (a style JSON, style document, or style object) is the configuration you pass to MapLibre. It contains the specific rendering rules governed by the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/), maintained with parity for MapLibre GL JS and MapLibre Native.
16
17	You can use a style URL from a provider — that URL references a style with sources, layers, glyphs, and sprite. Or you can build your own style and configure each yourself.
18
19	A style has three main components:
20
21	- Sources — Point to the actual data. Each source has a `type` and either inline data or a URL. MapLibre requests tiles or data as the viewport changes. The same source can back many layers (e.g. roads, water, and labels all from one vector URL).
22	- Layers — An ordered list defining what to draw and how. Each layer references a source (and for vector tiles, a `source-layer` name) and specifies paint/layout properties.
23	- Glyphs and sprite — Required for text and icons: URLs to font SDF stacks and icon spritesheets. Without them, labels and symbols won't appear.
24
25	Source types:
26
27	\| Type \| Description \|
28	\| ------------ \| -------------------------------------------------------------------------------------------------------- \|
29	\| `vector` \| Vector tiles — binary-encoded geometry and attributes; the primary format for basemaps and data overlays \|
30	\| `raster` \| Raster tile imagery — satellite photos, WMS/WMTS layers \|
31	\| `raster-dem` \| Elevation tiles — for terrain rendering and hillshading \|
32	\| `geojson` \| GeoJSON data — inline object or URL; no tile server needed \|
33	\| `image` \| A single georeferenced image — scanned maps, annotated overlays \|
34	\| `video` \| Georeferenced video \|
35
36	`vector` and `raster` are the most common for basemaps and data overlays. `geojson` is ideal for small datasets or interactive data that doesn't need tiling. `raster-dem` is used for terrain and hillshade effects, as well as emerging use cases in scientific visualization. `image` and `video` sources are the least common, but let you georeference static images (such as a scanned map, chart, or overlay) or georeferenced videos as map layers.
37
38	## GeoJSON and Direct Data Sources
39
40	For many use cases you don't need a tile service. MapLibre can render points, lines, or polygons directly from an inline GeoJSON object or a URL to a GeoJSON file. The entire dataset is downloaded and parsed in the browser; MapLibre handles rendering client-side.
41
42	```javascript
43	map.addSource('my-data', {
44	type: 'geojson',
45	data: '/path/to/data.geojson' // or an inline GeoJSON object
46	});
47	map.addLayer({
48	id: 'my-layer',
49	type: 'fill',
50	source: 'my-data',
51	paint: { 'fill-color': '#0080ff', 'fill-opacity': 0.5 }
52	});
53	```
54
55	### GeoJSON performance thresholds
56
57	GeoJSON downloads the entire file on every load. This works well at small scale and degrades predictably:
58
59	\| Range \| File size / feature count \| Behavior \|
60	\| ---------- \| -------------------------------- \| ----------------------------------------------------------------------------------------------------------- \|
61	\| Sweet spot \| < 2 MB / < 5,000 features \| Instantaneous loading, smooth interaction \|
62	\| Lag zone \| 5–20 MB / up to ~50,000 features \| 1–3s parse delay; mobile may struggle; optimize by simplifying geometries and reducing coordinate precision \|
63	\|

People who liked this also viewed

6 picks

Type