MBCDN

<link rel="stylesheet" href="maplibre-gl.css" />
<script src="maplibre-gl.js"></script>
<script src="pmtiles.js"></script>

// PMTiles-Protokoll bei MapLibre registrieren
const protocol = new pmtiles.Protocol();
maplibregl.addProtocol("pmtiles", protocol.tile);
// Karte erzeugen
const map = new maplibregl.Map({
    container: "map", // Die div-id in welches Div die Map geladen wird
    center: [10.0, 51.0], // Startposition
    zoom: 6,
    style: {
        "version": 8,
        "sources": {
            "omt": {
                "type": "vector",
                "url": "pmtiles://http://localhost/wien-edited.pmtiles",
                "attribution": "© OpenStreetMap and contributors"
            }
        },
        "layers": [{
            "id": "background",
            "type": "background",
            "paint": {
                "background-color": "#f2efe9"
            }
        }, {
            "id": "landcover",
            "type": "fill",
            "source": "omt",
            "source-layer": "landcover",
            "paint": {
                "fill-color": ["match",
                    ["get", "class"], "forest", "#d8e8c8", "wood", "#d8e8c8", "grass", "#e6efd8", "#e9efe3"
                ]
            }
        }, {
            "id": "landuse",
            "type": "fill",
            "source": "omt",
            "source-layer": "landuse",
            "paint": {
                "fill-color": ["match",
                    ["get", "class"], "residential", "#ece7e1", "industrial", "#e3ddd5", "commercial", "#e9e1d6", "farmland", "#eef3d6", "#ebe7df"
                ],
                "fill-opacity": 0.7
            }
        }, ]
    }
});
map.addControl(new maplibregl.NavigationControl(), "top-right");
map.on("load", () => {
    console.log("Karte geladen");
});

im map load Event

map.on("load", () => {
        console.log("Karte geladen");
	map.addSource("punkte", {
		type: "geojson",
		data: "pt.geojson"
	});
	map.addLayer({
		id: "punkte-layer",
		type: "circle",
		source: "punkte",
		paint: {
		  "circle-radius": 5,
		  "circle-color": "#e60000"
		}
	});
});

// GeoJSON-Layer hinzufügen oder aktualisieren
function addGeoJsonLayerToMap(map, options) {
	const {
		sourceId,
		layerId,
		data,
		type = "circle",
		paint = {},
		layout = {},
		filter = null,
		beforeId = null,
		onClick = null
	} = options;
 
	if (map.getSource(sourceId)) {
		map.getSource(sourceId).setData(data);
	} else {
		map.addSource(sourceId, {
			type: "geojson",
			data: data
		});
	}
 
	if (!map.getLayer(layerId)) {
		const layerConfig = {
			id: layerId,
			type: type,
			source: sourceId,
			paint: paint,
			layout: layout
		};
 
		if (filter) {
			layerConfig.filter = filter;
		}
 
		if (beforeId && map.getLayer(beforeId)) {
			map.addLayer(layerConfig, beforeId);
		} else {
			map.addLayer(layerConfig);
		}
 
		if (onClick) {
			map.on("click", layerId, (e) => {
				if (!e.features || !e.features.length) return;
				onClick(e.features[0], e);
			});
 
			map.on("mouseenter", layerId, () => {
				map.getCanvas().style.cursor = "pointer";
			});
 
			map.on("mouseleave", layerId, () => {
				map.getCanvas().style.cursor = "";
			});
		}
	}
}
 
// GeoJSON-Layer entfernen
function removeGeoJsonLayerFromMap(map, layerId, sourceId) {
	if (map.getLayer(layerId)) {
		map.removeLayer(layerId);
	}
 
	if (map.getSource(sourceId)) {
		map.removeSource(sourceId);
	}
}

Beispiele

addGeoJsonLayerToMap(map, {
    sourceId: "pt-source",
    layerId: "pt-layer",
    data: "pt.geojson",
    type: "circle",
    paint: {
        "circle-radius": 6,
        "circle-color": "#ff0000"
    },
    onClick: (feature, e) => {
        new maplibregl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(`
        <b>${feature.properties.name || "Ohne Name"}</b><br>
        ID: ${feature.properties.id || "-"}
      `)
            .addTo(map);
    }
});
 
removeGeoJsonLayer(map, "pt-layer", "pt-source");

function loadExternalGeoJson(url, idBase, type) {
    addGeoJsonLayer(map, {
        sourceId: `${idBase}-source`,
        layerId: `${idBase}-layer`,
        data: url,
        type: type,
        paint: type === "circle" ?
            {
                "circle-radius": 5,
                "circle-color": "#ff0000"
            } :
            type === "line" ?
            {
                "line-color": "#0000ff",
                "line-width": 3
            } :
            {
                "fill-color": "#00aa00",
                "fill-opacity": 0.4
            }
    });
}
 
loadExternalGeoJson("radwege.geojson", "radwege", "line");
loadExternalGeoJson("orte.geojson", "orte", "circle");