Skip to content

WebGL: Warnung wenn deaktiviert #97

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JakobMiksch wants to merge 10 commits into
base: main
Choose a base branch
from
Open

WebGL: Warnung wenn deaktiviert #97

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
e1dae97
Make CSS layout "absolut" for proper display on mobile
JakobMiksch Feb 21, 2026
746c8ff
Merge branch 'main' of github.com:fossgis/karte.openstreetmap.de
JakobMiksch Feb 27, 2026
af46d41
Merge branch 'main' of github.com:fossgis/karte.openstreetmap.de
JakobMiksch Feb 27, 2026
482000d
Merge branch 'main' of github.com:fossgis/karte.openstreetmap.de
JakobMiksch Mar 8, 2026
05c033a
Merge branch 'main' of github.com:fossgis/karte.openstreetmap.de
JakobMiksch May 15, 2026
eb1c2f1
Basic fix
JakobMiksch May 15, 2026
bdc779c
Show warning if WebGL not available
JakobMiksch May 15, 2026
4c1b9ab
Add padding
JakobMiksch May 15, 2026
8228b2f
shorten function isWebGlActivated
JakobMiksch May 16, 2026
7977bd5
Merge branch 'main' of github.com:fossgis/karte.openstreetmap.de into…
JakobMiksch May 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,14 @@
</header>

<!-- map container -->
<main id="map"></main>
<main id="map">
<!-- warning if WebGL not supported-->
<div
id="warning-no-webgl"
style="display: none; justify-content: center; align-items: center; height: 100%; font-size: xx-large; padding: 1rem;"
>
Zur Anzeige dieser Karte muss Ihr Browser WebGL unterstützen.
</div>
</main>
</body>
</html>
158 changes: 89 additions & 69 deletions public/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,84 +8,96 @@ import {
} from "./lib/internal/mapUtils.js";
import { createSearchControl } from "./lib/internal/search.js";

const basemapConfig = {
de: {
displayName: "deutscher Stil",
tiles: ["https://tile.openstreetmap.de/{z}/{x}/{y}.png"],
attribution: "Kartendaten © OpenStreetMap Mitwirkende",
thumbnail: "osmde.png",
},
standard: {
displayName: "Standard",
tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
attribution: "Kartendaten © OpenStreetMap Mitwirkende",
thumbnail: "osmorg.png",
},
oepnv: {
displayName: "ÖPNV",
tiles: [
"https://tile.geofabrik.de/25ab8b065d8149bd90c1876384259ebf/{z}/{x}/{y}.png",
],
attribution:
"ÖPNV Kartenstil von memomaps.de CC-BY-SA, Kartendaten © OpenStreetMap Mitwirkende",
thumbnail: "oepnv.png",
},
};
const setupMap = () => {

@joto joto May 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Kann das nicht eine normale Funktion sein?

@JakobMiksch JakobMiksch May 16, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

könnte schon, aber in dem Fall ist es egal. const setupMenu = () => {} ist auch schon so definiert. Dann würde ich eher die Funktion die WebGL check auch als Arrow Funktoin machen damit es einheitlich ist

const basemapConfig = {
de: {
displayName: "deutscher Stil",
tiles: ["https://tile.openstreetmap.de/{z}/{x}/{y}.png"],
attribution: "Kartendaten © OpenStreetMap Mitwirkende",
thumbnail: "osmde.png",
},
standard: {
displayName: "Standard",
tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],
attribution: "Kartendaten © OpenStreetMap Mitwirkende",
thumbnail: "osmorg.png",
},
oepnv: {
displayName: "ÖPNV",
tiles: [
"https://tile.geofabrik.de/25ab8b065d8149bd90c1876384259ebf/{z}/{x}/{y}.png",
],
attribution:
"ÖPNV Kartenstil von memomaps.de CC-BY-SA, Kartendaten © OpenStreetMap Mitwirkende",
thumbnail: "oepnv.png",
},
};

const map = new maplibregl.Map({
container: "map",
hash: "map",
maplibreLogo: false,
dragRotate: false,
center: [11, 51.5], // center Germany
zoom: 5,
// prevent users changing pitch with keyboard shortcuts
maxPitch: 0,
attributionControl: true,
maxZoom: 19,
locale: {
"AttributionControl.ToggleAttribution": "Quellenangabe ein-/ausblenden",
"GeolocateControl.FindMyLocation": "Meinen Standort finden",
"GeolocateControl.LocationNotAvailable": "Standort nicht verfügbar",
"NavigationControl.ZoomIn": "Hineinzoomen",
"NavigationControl.ZoomOut": "Herauszoomen",
},
});

// on desktop: prevent keyboard rotating using "shift" + arrow keys
map.keyboard.disableRotation();

// on mobile: prevent rotation and pitch, but leave zoom
map.touchZoomRotate.disableRotation();
map.touchPitch.disable();

// set basemaps
Object.entries(basemapConfig).forEach(([id, config]) => {
const { tiles, attribution } = config;
map.addSource(id, {
type: "raster",
tileSize: 256,
attribution,
tiles,
const map = new maplibregl.Map({
container: "map",
hash: "map",
maplibreLogo: false,
dragRotate: false,
center: [11, 51.5], // center Germany
zoom: 5,
// prevent users changing pitch with keyboard shortcuts
maxPitch: 0,
attributionControl: true,
maxZoom: 19,
locale: {
"AttributionControl.ToggleAttribution": "Quellenangabe ein-/ausblenden",
"GeolocateControl.FindMyLocation": "Meinen Standort finden",
"GeolocateControl.LocationNotAvailable": "Standort nicht verfügbar",
"NavigationControl.ZoomIn": "Hineinzoomen",
"NavigationControl.ZoomOut": "Herauszoomen",
},
});

// on desktop: prevent keyboard rotating using "shift" + arrow keys
map.keyboard.disableRotation();

// on mobile: prevent rotation and pitch, but leave zoom
map.touchZoomRotate.disableRotation();
map.touchPitch.disable();

// set basemaps
Object.entries(basemapConfig).forEach(([id, config]) => {
const { tiles, attribution } = config;
map.addSource(id, {
type: "raster",
tileSize: 256,
attribution,
tiles,
});
map.addLayer({ id, source: id, type: "raster" });
});
map.addLayer({ id, source: id, type: "raster" });
});

map.addControl(createSearchControl(maplibregl));
map.addControl(createSearchControl(maplibregl));

map.addControl(new maplibregl.NavigationControl({ showCompass: false }));
map.addControl(new maplibregl.NavigationControl({ showCompass: false }));

map.addControl(new maplibregl.ScaleControl(), "bottom-right");
map.addControl(new maplibregl.ScaleControl(), "bottom-right");

map.addControl(new maplibregl.GeolocateControl());
map.addControl(new maplibregl.GeolocateControl());

map.addControl(new maplibregl.GlobeControl(), "top-right");
map.addControl(new maplibregl.GlobeControl(), "top-right");

setGlobePermalinkUpdate(map);
setGlobePermalinkUpdate(map);

setupLinkUpdate(map);
const basemapSwitcher = new BasemapSwitcher(basemapConfig);
map.addControl(basemapSwitcher);
setupLinkUpdate(map);
const basemapSwitcher = new BasemapSwitcher(basemapConfig);
map.addControl(basemapSwitcher);
};

/**
* Checks if browser supports WebGL
* Inspired by: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Detect_WebGL
*/
function isWebGlActivated() {
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");
return gl instanceof WebGLRenderingContext;
}

@joto joto May 16, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Die Funktion ist schon ganz schön verbose für den kleinen Check, den sie macht. Wir liefern das JS ja nachher so aus, da lohnt es sich schon, darauf ein bischen zu achten. Und das Kommentar könte auch weg und stattdessen in die commit msg.

@JakobMiksch JakobMiksch May 16, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ich habe die Funktion jetzt möglichst klein gemacht. Wobei ich nicht weiß ob das wirklich ins Gewicht schlägt. Unsere beiden externen Libs haben zusammen schon 1MB Speicher. Ein paar Zeilen mehr Kommentar sind da glaub ich nicht so dramatisch


/**
* Make menu of website interactive
Expand Down Expand Up @@ -151,3 +163,11 @@ const setupMenu = () => {

// setup menu after page is loaded
document.addEventListener("DOMContentLoaded", setupMenu);

if (isWebGlActivated()) {
setupMap();
} else {
// show warning that WebGL is not available
const warningNoWebGL = document.getElementById("warning-no-webgl");
warningNoWebGL.style.display = "flex";
}
Loading