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
    } = 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);
        }
    }
}
 
// GeoJSON-Layer entfernen
function removeGeoJsonLayerFromMap(map, layerId, sourceId) {
    if (map.getLayer(layerId)) {
        map.removeLayer(layerId);
    }
 
    if (map.getSource(sourceId)) {
        map.removeSource(sourceId);
    }
}

Beispiele

map.on("load", () => {
    addGeoJsonLayerToMap(map, {
        sourceId: "punkte-source",
        layerId: "punkte-layer",
        data: "pt.geojson",
        type: "circle",
        paint: {
            "circle-radius": 5,
            "circle-color": "#e60000"
        }
    });
});
 
addGeoJsonLayerToMap(map, {
    sourceId: "linien-source",
    layerId: "linien-layer",
    data: "linien.geojson",
    type: "line",
    paint: {
        "line-color": "#0066cc",
        "line-width": 3
    }
});
 
addGeoJsonLayerToMap(map, {
    sourceId: "flaechen-source",
    layerId: "flaechen-layer",
    data: "flaechen.geojson",
    type: "fill",
    paint: {
        "fill-color": "#00aa66",
        "fill-opacity": 0.4
    }
});
 
removeGeoJsonLayer(map, "punkte-layer", "punkte-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");