From 22e9386d0582d8bec6316e961c73756b5017be4c Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Mon, 29 Aug 2022 10:45:34 +0200 Subject: [PATCH 1/5] Remove deprecated mapbox-css classes --- .stylelintrc | 2 +- README.md | 2 +- src/css/maplibre-gl.css | 396 ++++++++--------------- src/ui/anchor.ts | 4 +- src/ui/control/attribution_control.ts | 20 +- src/ui/control/fullscreen_control.ts | 8 +- src/ui/control/geolocate_control.ts | 78 ++--- src/ui/control/logo_control.ts | 8 +- src/ui/control/navigation_control.ts | 14 +- src/ui/control/scale_control.ts | 2 +- src/ui/control/terrain_control.ts | 14 +- src/ui/handler/box_zoom.ts | 6 +- src/ui/handler/shim/drag_pan.ts | 4 +- src/ui/handler/shim/touch_zoom_rotate.ts | 4 +- src/ui/map.ts | 16 +- src/ui/marker.ts | 2 +- src/ui/popup.ts | 22 +- 17 files changed, 228 insertions(+), 374 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 201bbf035b..fbb9642e9f 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -5,7 +5,7 @@ "declaration-block-semicolon-newline-after": "always-multi-line", "block-opening-brace-space-before": "always-multi-line", "declaration-block-single-line-max-declarations": 3, - "selector-class-pattern": "map(box|libre)gl-[a-z-]+", + "selector-class-pattern": "maplibregl-[a-z-]+", "at-rule-no-unknown": [true, { "ignoreAtRules": ["svg-load"] }], diff --git a/README.md b/README.md index 61212c2115..c0e2be1c4d 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ If you are OK with changes that integrate non-backward compatible features, inst } ``` -And replace `mapboxgl` with `maplibregl` in your JavaScript and optionally in your HTML/CSS code: +And replace `mapboxgl` with `maplibregl` in your JavaScript and your HTML/CSS code: > MapLibre GL JS is distributed via [unpkg.com](https://unpkg.com). For more informations please see [MapLibre GL is on unpkg.com](./docs/README-unpkg.md#maplibre-gl-on-unpkgcom). diff --git a/src/css/maplibre-gl.css b/src/css/maplibre-gl.css index 109b9326dd..4d225274cb 100644 --- a/src/css/maplibre-gl.css +++ b/src/css/maplibre-gl.css @@ -1,28 +1,23 @@ -.maplibregl-map, -.mapboxgl-map { +.maplibregl-map { font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif; overflow: hidden; position: relative; -webkit-tap-highlight-color: rgb(0 0 0 / 0%); } -.maplibregl-canvas, -.mapboxgl-canvas { +.maplibregl-canvas { position: absolute; left: 0; top: 0; } -.maplibregl-map:fullscreen, -.mapboxgl-map:fullscreen { +.maplibregl-map:fullscreen { width: 100%; height: 100%; } .maplibregl-canvas-container.maplibregl-interactive, -.maplibregl-ctrl-group button.maplibregl-ctrl-compass, -.mapboxgl-canvas-container.mapboxgl-interactive, -.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass { +.maplibregl-ctrl-group button.maplibregl-ctrl-compass { cursor: grab; -moz-user-select: none; -webkit-user-select: none; @@ -30,62 +25,44 @@ user-select: none; } -.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer, -.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer { +.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer { cursor: pointer; } .maplibregl-canvas-container.maplibregl-interactive:active, -.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active, -.mapboxgl-canvas-container.mapboxgl-interactive:active, -.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active { +.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active { cursor: grabbing; } .maplibregl-canvas-container.maplibregl-touch-zoom-rotate, -.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas, -.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate, -.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate .mapboxgl-canvas { +.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas { touch-action: pan-x pan-y; } .maplibregl-canvas-container.maplibregl-touch-drag-pan, -.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas, -.mapboxgl-canvas-container.mapboxgl-touch-drag-pan, -.mapboxgl-canvas-container.mapboxgl-touch-drag-pan .mapboxgl-canvas { +.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: pinch-zoom; } .maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan, -.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas, -.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, -.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas { +.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas { touch-action: none; } .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left, -.maplibregl-ctrl-bottom-right, -.mapboxgl-ctrl-top-left, -.mapboxgl-ctrl-top-right, -.mapboxgl-ctrl-bottom-left, -.mapboxgl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; } +.maplibregl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; } -.maplibregl-ctrl-top-left, -.mapboxgl-ctrl-top-left { top: 0; left: 0; } +.maplibregl-ctrl-top-left { top: 0; left: 0; } -.maplibregl-ctrl-top-right, -.mapboxgl-ctrl-top-right { top: 0; right: 0; } +.maplibregl-ctrl-top-right { top: 0; right: 0; } -.maplibregl-ctrl-bottom-left, -.mapboxgl-ctrl-bottom-left { bottom: 0; left: 0; } +.maplibregl-ctrl-bottom-left { bottom: 0; left: 0; } -.maplibregl-ctrl-bottom-right, -.mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; } +.maplibregl-ctrl-bottom-right { right: 0; bottom: 0; } -.maplibregl-ctrl, -.mapboxgl-ctrl { +.maplibregl-ctrl { clear: both; pointer-events: auto; @@ -93,38 +70,30 @@ transform: translate(0, 0); } -.maplibregl-ctrl-top-left .maplibregl-ctrl, -.mapboxgl-ctrl-top-left .mapboxgl-ctrl { margin: 10px 0 0 10px; float: left; } +.maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 10px 0 0 10px; float: left; } -.maplibregl-ctrl-top-right .maplibregl-ctrl, -.mapboxgl-ctrl-top-right .mapboxgl-ctrl { margin: 10px 10px 0 0; float: right; } +.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 10px 10px 0 0; float: right; } -.maplibregl-ctrl-bottom-left .maplibregl-ctrl, -.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl { margin: 0 0 10px 10px; float: left; } +.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0 0 10px 10px; float: left; } -.maplibregl-ctrl-bottom-right .maplibregl-ctrl, -.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl { margin: 0 10px 10px 0; float: right; } +.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 10px 10px 0; float: right; } -.maplibregl-ctrl-group, -.mapboxgl-ctrl-group { +.maplibregl-ctrl-group { border-radius: 4px; background: #fff; } -.maplibregl-ctrl-group:not(:empty), -.mapboxgl-ctrl-group:not(:empty) { +.maplibregl-ctrl-group:not(:empty) { box-shadow: 0 0 0 2px rgb(0 0 0 / 10%); } @media (-ms-high-contrast: active) { - .maplibregl-ctrl-group:not(:empty), - .mapboxgl-ctrl-group:not(:empty) { + .maplibregl-ctrl-group:not(:empty) { box-shadow: 0 0 0 2px ButtonText; } } -.maplibregl-ctrl-group button, -.mapboxgl-ctrl-group button { +.maplibregl-ctrl-group button { width: 29px; height: 29px; display: block; @@ -136,13 +105,11 @@ cursor: pointer; } -.maplibregl-ctrl-group button + button, -.mapboxgl-ctrl-group button + button { +.maplibregl-ctrl-group button + button { border-top: 1px solid #ddd; } -.maplibregl-ctrl button .maplibregl-ctrl-icon, -.mapboxgl-ctrl button .mapboxgl-ctrl-icon { +.maplibregl-ctrl button .maplibregl-ctrl-icon { display: block; width: 100%; height: 100%; @@ -151,147 +118,120 @@ } @media (-ms-high-contrast: active) { - .maplibregl-ctrl-icon, - .mapboxgl-ctrl-icon { + .maplibregl-ctrl-icon { background-color: transparent; } - .maplibregl-ctrl-group button + button, - .mapboxgl-ctrl-group button + button { + .maplibregl-ctrl-group button + button { border-top: 1px solid ButtonText; } } /* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */ -.maplibregl-ctrl button::-moz-focus-inner, -.mapboxgl-ctrl button::-moz-focus-inner { +.maplibregl-ctrl button::-moz-focus-inner { border: 0; padding: 0; } .maplibregl-ctrl-attrib-button:focus, -.maplibregl-ctrl-group button:focus, -.mapboxgl-ctrl-attrib-button:focus, -.mapboxgl-ctrl-group button:focus { +.maplibregl-ctrl-group button:focus { box-shadow: 0 0 2px 2px rgb(0 150 255 / 100%); } -.maplibregl-ctrl button:disabled, -.mapboxgl-ctrl button:disabled { +.maplibregl-ctrl button:disabled { cursor: not-allowed; } -.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon, -.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon { +.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon { opacity: 0.25; } -.maplibregl-ctrl button:not(:disabled):hover, -.mapboxgl-ctrl button:not(:disabled):hover { +.maplibregl-ctrl button:not(:disabled):hover { background-color: rgb(0 0 0 / 5%); } -.maplibregl-ctrl-group button:focus:focus-visible, -.mapboxgl-ctrl-group button:focus:focus-visible { +.maplibregl-ctrl-group button:focus:focus-visible { box-shadow: 0 0 2px 2px rgb(0 150 255 / 100%); } -.maplibregl-ctrl-group button:focus:not(:focus-visible), -.mapboxgl-ctrl-group button:focus:not(:focus-visible) { +.maplibregl-ctrl-group button:focus:not(:focus-visible) { box-shadow: none; } -.maplibregl-ctrl-group button:focus:first-child, -.mapboxgl-ctrl-group button:focus:first-child { +.maplibregl-ctrl-group button:focus:first-child { border-radius: 4px 4px 0 0; } -.maplibregl-ctrl-group button:focus:last-child, -.mapboxgl-ctrl-group button:focus:last-child { +.maplibregl-ctrl-group button:focus:last-child { border-radius: 0 0 4px 4px; } -.maplibregl-ctrl-group button:focus:only-child, -.mapboxgl-ctrl-group button:focus:only-child { +.maplibregl-ctrl-group button:focus:only-child { border-radius: inherit; } -.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #333); } -.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-zoom-in.svg", fill: #333); } @media (-ms-high-contrast: active) { - .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #fff); } - .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-zoom-in.svg", fill: #fff); } } @media (-ms-high-contrast: black-on-white) { - .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-zoom-out.svg", fill: #000); } - .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-zoom-in.svg", fill: #000); } } -.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #333); } -.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-shrink.svg"); } @media (-ms-high-contrast: active) { - .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #fff); } - .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-shrink.svg", fill: #fff); } } @media (-ms-high-contrast: black-on-white) { - .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-fullscreen.svg", fill: #000); } - .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-shrink.svg", fill: #000); } } -.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-compass.svg", fill: #333); } @media (-ms-high-contrast: active) { - .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon { @svg-load ctrl-compass-white url("svg/maplibregl-ctrl-compass.svg") { fill: #fff; #south { fill: #999; } @@ -302,8 +242,7 @@ } @media (-ms-high-contrast: black-on-white) { - .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon { background-image: svg-load("svg/maplibregl-ctrl-compass.svg", fill: #000); } } @@ -318,13 +257,11 @@ #stroke { display: none; } } -.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-terrain .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-terrain); } -.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-terrain-enabled .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-terrain-enabled); } @@ -380,81 +317,66 @@ #dot { display: none; } } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-disabled); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-active); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-active-error); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-background); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-background-error); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon, -.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-waiting .mapboxgl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon { animation: maplibregl-spin 2s infinite linear; } @media (-ms-high-contrast: active) { - .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-white); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-disabled-white); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-active); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active-error .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-active-error); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-background); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background-error .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-background-error); } } @media (-ms-high-contrast: black-on-white) { - .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-black); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon, - .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-disabled-black); } } @@ -464,8 +386,7 @@ 100% { transform: rotate(360deg); } } -a.maplibregl-ctrl-logo, -a.mapboxgl-ctrl-logo { +a.maplibregl-ctrl-logo { width: 88px; height: 23px; margin: 0 0 -4px -4px; @@ -476,14 +397,12 @@ a.mapboxgl-ctrl-logo { background-image: svg-load("svg/maplibregl-ctrl-logo.svg"); } -a.maplibregl-ctrl-logo.maplibregl-compact, -a.mapboxgl-ctrl-logo.mapboxgl-compact { +a.maplibregl-ctrl-logo.maplibregl-compact { width: 14px; } @media (-ms-high-contrast: active) { - a.maplibregl-ctrl-logo, - a.mapboxgl-ctrl-logo { + a.maplibregl-ctrl-logo { @svg-load ctrl-logo-white url("svg/maplibregl-ctrl-logo.svg") { #outline { opacity: 1; } #fill { opacity: 1; } @@ -495,8 +414,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { } @media (-ms-high-contrast: black-on-white) { - a.maplibregl-ctrl-logo, - a.mapboxgl-ctrl-logo { + a.maplibregl-ctrl-logo { @svg-load ctrl-logo-black url("svg/maplibregl-ctrl-logo.svg") { #outline { opacity: 1; fill: #fff; stroke: #fff; } #fill { opacity: 1; fill: #000; } @@ -506,16 +424,14 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { } } -.maplibregl-ctrl.maplibregl-ctrl-attrib, -.mapboxgl-ctrl.mapboxgl-ctrl-attrib { +.maplibregl-ctrl.maplibregl-ctrl-attrib { padding: 0 5px; background-color: rgb(255 255 255 / 50%); margin: 0; } @media screen { - .maplibregl-ctrl-attrib.maplibregl-compact, - .mapboxgl-ctrl-attrib.mapboxgl-compact { + .maplibregl-ctrl-attrib.maplibregl-compact { min-height: 20px; padding: 2px 24px 2px 0; margin: 10px; @@ -525,27 +441,22 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { box-sizing: content-box; } - .maplibregl-ctrl-attrib.maplibregl-compact-show, - .mapboxgl-ctrl-attrib.mapboxgl-compact-show { + .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 2px 28px 2px 8px; visibility: visible; } .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact-show, - .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show, - .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show, - .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact-show { + .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact-show { padding: 2px 8px 2px 28px; border-radius: 12px; } - .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner, - .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner { + .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { display: none; } - .maplibregl-ctrl-attrib-button, - .mapboxgl-ctrl-attrib-button { + .maplibregl-ctrl-attrib-button { display: none; cursor: pointer; position: absolute; @@ -571,82 +482,67 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { } .maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button, - .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button, - .mapboxgl-ctrl-top-left .mapboxgl-ctrl-attrib-button, - .mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib-button { + .maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button { left: 0; } .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button, - .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner, - .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-button, - .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-inner { + .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { display: block; } - .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button, - .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button { + .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { background-color: rgb(0 0 0 / 5%); } - .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after, - .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { + .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after { bottom: 0; right: 0; } - .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact::after, - .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { + .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact::after { top: 0; right: 0; } - .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact::after, - .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { + .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact::after { top: 0; left: 0; } - .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact::after, - .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { + .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact::after { bottom: 0; left: 0; } } @media screen and (-ms-high-contrast: active) { - .maplibregl-ctrl-attrib.maplibregl-compact::after, - .mapboxgl-ctrl-attrib.mapboxgl-compact::after { + .maplibregl-ctrl-attrib.maplibregl-compact::after { background-image: svg-load("svg/maplibregl-ctrl-attrib.svg", fill=#fff); } } @media screen and (-ms-high-contrast: black-on-white) { - .maplibregl-ctrl-attrib.maplibregl-compact::after, - .mapboxgl-ctrl-attrib.mapboxgl-compact::after { + .maplibregl-ctrl-attrib.maplibregl-compact::after { background-image: svg-load("svg/maplibregl-ctrl-attrib.svg"); } } -.maplibregl-ctrl-attrib a, -.mapboxgl-ctrl-attrib a { +.maplibregl-ctrl-attrib a { color: rgb(0 0 0 / 75%); text-decoration: none; } -.maplibregl-ctrl-attrib a:hover, -.mapboxgl-ctrl-attrib a:hover { +.maplibregl-ctrl-attrib a:hover { color: inherit; text-decoration: underline; } -.maplibregl-attrib-empty, -.mapboxgl-attrib-empty { +.maplibregl-attrib-empty { display: none; } -.maplibregl-ctrl-scale, -.mapboxgl-ctrl-scale { +.maplibregl-ctrl-scale { background-color: rgb(255 255 255 / 75%); font-size: 10px; border-width: medium 2px 2px; @@ -657,8 +553,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { box-sizing: border-box; } -.maplibregl-popup, -.mapboxgl-popup { +.maplibregl-popup { position: absolute; top: 0; left: 0; @@ -669,102 +564,84 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { .maplibregl-popup-anchor-top, .maplibregl-popup-anchor-top-left, -.maplibregl-popup-anchor-top-right, -.mapboxgl-popup-anchor-top, -.mapboxgl-popup-anchor-top-left, -.mapboxgl-popup-anchor-top-right { +.maplibregl-popup-anchor-top-right { flex-direction: column; } .maplibregl-popup-anchor-bottom, .maplibregl-popup-anchor-bottom-left, -.maplibregl-popup-anchor-bottom-right, -.mapboxgl-popup-anchor-bottom, -.mapboxgl-popup-anchor-bottom-left, -.mapboxgl-popup-anchor-bottom-right { +.maplibregl-popup-anchor-bottom-right { flex-direction: column-reverse; } -.maplibregl-popup-anchor-left, -.mapboxgl-popup-anchor-left { +.maplibregl-popup-anchor-left { flex-direction: row; } -.maplibregl-popup-anchor-right, -.mapboxgl-popup-anchor-right { +.maplibregl-popup-anchor-right { flex-direction: row-reverse; } -.maplibregl-popup-tip, -.mapboxgl-popup-tip { +.maplibregl-popup-tip { width: 0; height: 0; border: 10px solid transparent; z-index: 1; } -.maplibregl-popup-anchor-top .maplibregl-popup-tip, -.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { +.maplibregl-popup-anchor-top .maplibregl-popup-tip { align-self: center; border-top: none; border-bottom-color: #fff; } -.maplibregl-popup-anchor-top-left .maplibregl-popup-tip, -.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip { +.maplibregl-popup-anchor-top-left .maplibregl-popup-tip { align-self: flex-start; border-top: none; border-left: none; border-bottom-color: #fff; } -.maplibregl-popup-anchor-top-right .maplibregl-popup-tip, -.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { +.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { align-self: flex-end; border-top: none; border-right: none; border-bottom-color: #fff; } -.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, -.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { +.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { align-self: center; border-bottom: none; border-top-color: #fff; } -.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, -.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip { +.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip { align-self: flex-start; border-bottom: none; border-left: none; border-top-color: #fff; } -.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip, -.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { +.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { align-self: flex-end; border-bottom: none; border-right: none; border-top-color: #fff; } -.maplibregl-popup-anchor-left .maplibregl-popup-tip, -.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { +.maplibregl-popup-anchor-left .maplibregl-popup-tip { align-self: center; border-left: none; border-right-color: #fff; } -.maplibregl-popup-anchor-right .maplibregl-popup-tip, -.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { +.maplibregl-popup-anchor-right .maplibregl-popup-tip { align-self: center; border-right: none; border-left-color: #fff; } -.maplibregl-popup-close-button, -.mapboxgl-popup-close-button { +.maplibregl-popup-close-button { position: absolute; right: 0; top: 0; @@ -774,13 +651,11 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { background-color: transparent; } -.maplibregl-popup-close-button:hover, -.mapboxgl-popup-close-button:hover { +.maplibregl-popup-close-button:hover { background-color: rgb(0 0 0 / 5%); } -.maplibregl-popup-content, -.mapboxgl-popup-content { +.maplibregl-popup-content { position: relative; background: #fff; border-radius: 3px; @@ -789,65 +664,54 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { pointer-events: auto; } -.maplibregl-popup-anchor-top-left .maplibregl-popup-content, -.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content { +.maplibregl-popup-anchor-top-left .maplibregl-popup-content { border-top-left-radius: 0; } -.maplibregl-popup-anchor-top-right .maplibregl-popup-content, -.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content { +.maplibregl-popup-anchor-top-right .maplibregl-popup-content { border-top-right-radius: 0; } -.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content, -.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content { +.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content { border-bottom-left-radius: 0; } -.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content, -.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content { +.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content { border-bottom-right-radius: 0; } -.maplibregl-popup-track-pointer, -.mapboxgl-popup-track-pointer { +.maplibregl-popup-track-pointer { display: none; } -.maplibregl-popup-track-pointer *, -.mapboxgl-popup-track-pointer * { +.maplibregl-popup-track-pointer * { pointer-events: none; user-select: none; } -.maplibregl-map:hover .maplibregl-popup-track-pointer, -.mapboxgl-map:hover .mapboxgl-popup-track-pointer { +.maplibregl-map:hover .maplibregl-popup-track-pointer { display: flex; } -.maplibregl-map:active .maplibregl-popup-track-pointer, -.mapboxgl-map:active .mapboxgl-popup-track-pointer { +.maplibregl-map:active .maplibregl-popup-track-pointer { display: none; } -.maplibregl-marker, -.mapboxgl-marker { +.maplibregl-marker { position: absolute; top: 0; left: 0; will-change: transform; } -.maplibregl-user-location-dot, -.mapboxgl-user-location-dot { +.maplibregl-user-location-dot { background-color: #1da1f2; width: 15px; height: 15px; border-radius: 50%; } -.maplibregl-user-location-dot::before, -.mapboxgl-user-location-dot::before { +.maplibregl-user-location-dot::before { background-color: #1da1f2; content: ""; width: 15px; @@ -857,8 +721,7 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { animation: maplibregl-user-location-dot-pulse 2s infinite; } -.maplibregl-user-location-dot::after, -.mapboxgl-user-location-dot::after { +.maplibregl-user-location-dot::after { border-radius: 50%; border: 2px solid #fff; content: ""; @@ -877,18 +740,15 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { 100% { transform: scale(1); opacity: 0; } } -.maplibregl-user-location-dot-stale, -.mapboxgl-user-location-dot-stale { +.maplibregl-user-location-dot-stale { background-color: #aaa; } -.maplibregl-user-location-dot-stale::after, -.mapboxgl-user-location-dot-stale::after { +.maplibregl-user-location-dot-stale::after { display: none; } -.maplibregl-user-location-accuracy-circle, -.mapboxgl-user-location-accuracy-circle { +.maplibregl-user-location-accuracy-circle { background-color: #1da1f233; width: 1px; height: 1px; @@ -897,15 +757,11 @@ a.mapboxgl-ctrl-logo.mapboxgl-compact { .maplibregl-crosshair, .maplibregl-crosshair .maplibregl-interactive, -.maplibregl-crosshair .maplibregl-interactive:active, -.mapboxgl-crosshair, -.mapboxgl-crosshair .mapboxgl-interactive, -.mapboxgl-crosshair .mapboxgl-interactive:active { +.maplibregl-crosshair .maplibregl-interactive:active { cursor: crosshair; } -.maplibregl-boxzoom, -.mapboxgl-boxzoom { +.maplibregl-boxzoom { position: absolute; top: 0; left: 0; diff --git a/src/ui/anchor.ts b/src/ui/anchor.ts index c4a8c65c8b..de2967ca90 100644 --- a/src/ui/anchor.ts +++ b/src/ui/anchor.ts @@ -17,7 +17,7 @@ export const anchorTranslate: { export function applyAnchorClass(element: HTMLElement, anchor: PositionAnchor, prefix: string) { const classList = element.classList; for (const key in anchorTranslate) { - classList.remove(`maplibregl-${prefix}-anchor-${key}`, `mapboxgl-${prefix}-anchor-${key}`); + classList.remove(`maplibregl-${prefix}-anchor-${key}`); } - classList.add(`maplibregl-${prefix}-anchor-${anchor}`, `mapboxgl-${prefix}-anchor-${anchor}`); + classList.add(`maplibregl-${prefix}-anchor-${anchor}`); } diff --git a/src/ui/control/attribution_control.ts b/src/ui/control/attribution_control.ts index 20085f308f..7e50aa8d84 100644 --- a/src/ui/control/attribution_control.ts +++ b/src/ui/control/attribution_control.ts @@ -52,11 +52,11 @@ class AttributionControl implements IControl { onAdd(map: Map) { this._map = map; this._compact = this.options && this.options.compact; - this._container = DOM.create('details', 'maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib'); - this._compactButton = DOM.create('summary', 'maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button', this._container); + this._container = DOM.create('details', 'maplibregl-ctrl maplibregl-ctrl-attrib'); + this._compactButton = DOM.create('summary', 'maplibregl-ctrl-attrib-button', this._container); this._compactButton.addEventListener('click', this._toggleAttribution); this._setElementTitle(this._compactButton, 'ToggleAttribution'); - this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner', this._container); + this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner', this._container); this._updateAttributions(); this._updateCompact(); @@ -94,9 +94,9 @@ class AttributionControl implements IControl { if (this._container.classList.contains('maplibregl-compact')) { if (this._container.classList.contains('maplibregl-compact-show')) { this._container.setAttribute('open', ''); - this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show'); + this._container.classList.remove('maplibregl-compact-show'); } else { - this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show'); + this._container.classList.add('maplibregl-compact-show'); this._container.removeAttribute('open'); } } @@ -162,9 +162,9 @@ class AttributionControl implements IControl { if (attributions.length) { this._innerContainer.innerHTML = attribHTML; - this._container.classList.remove('maplibregl-attrib-empty', 'mapboxgl-attrib-empty'); + this._container.classList.remove('maplibregl-attrib-empty'); } else { - this._container.classList.add('maplibregl-attrib-empty', 'mapboxgl-attrib-empty'); + this._container.classList.add('maplibregl-attrib-empty'); } this._updateCompact(); // remove old DOM node from _editLink @@ -177,12 +177,12 @@ class AttributionControl implements IControl { this._container.setAttribute('open', ''); } else if (!this._container.classList.contains('maplibregl-compact') && !this._container.classList.contains('maplibregl-attrib-empty')) { this._container.setAttribute('open', ''); - this._container.classList.add('maplibregl-compact', 'mapboxgl-compact', 'maplibregl-compact-show', 'mapboxgl-compact-show'); + this._container.classList.add('maplibregl-compact', 'maplibregl-compact-show'); } } else { this._container.setAttribute('open', ''); if (this._container.classList.contains('maplibregl-compact')) { - this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); + this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show'); } } } @@ -190,7 +190,7 @@ class AttributionControl implements IControl { _updateCompactMinimize() { if (this._container.classList.contains('maplibregl-compact')) { if (this._container.classList.contains('maplibregl-compact-show')) { - this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show'); + this._container.classList.remove('maplibregl-compact-show'); } } } diff --git a/src/ui/control/fullscreen_control.ts b/src/ui/control/fullscreen_control.ts index c947792571..0325676880 100644 --- a/src/ui/control/fullscreen_control.ts +++ b/src/ui/control/fullscreen_control.ts @@ -56,7 +56,7 @@ class FullscreenControl implements IControl { onAdd(map: Map) { this._map = map; if (!this._container) this._container = this._map.getContainer(); - this._controlContainer = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group'); + this._controlContainer = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group'); if (this._checkFullscreenSupport()) { this._setupUI(); } else { @@ -82,8 +82,8 @@ class FullscreenControl implements IControl { } _setupUI() { - const button = this._fullscreenButton = DOM.create('button', (('maplibregl-ctrl-fullscreen mapboxgl-ctrl-fullscreen')), this._controlContainer); - DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', button).setAttribute('aria-hidden', 'true'); + const button = this._fullscreenButton = DOM.create('button', (('maplibregl-ctrl-fullscreen')), this._controlContainer); + DOM.create('span', 'maplibregl-ctrl-icon', button).setAttribute('aria-hidden', 'true'); button.type = 'button'; this._updateTitle(); this._fullscreenButton.addEventListener('click', this._onClickFullscreen); @@ -114,9 +114,7 @@ class FullscreenControl implements IControl { if ((fullscreenElement === this._container) !== this._fullscreen) { this._fullscreen = !this._fullscreen; this._fullscreenButton.classList.toggle('maplibregl-ctrl-shrink'); - this._fullscreenButton.classList.toggle('mapboxgl-ctrl-shrink'); this._fullscreenButton.classList.toggle('maplibregl-ctrl-fullscreen'); - this._fullscreenButton.classList.toggle('mapboxgl-ctrl-fullscreen'); this._updateTitle(); } } diff --git a/src/ui/control/geolocate_control.ts b/src/ui/control/geolocate_control.ts index ba05e6d9fc..1af0d8efc3 100644 --- a/src/ui/control/geolocate_control.ts +++ b/src/ui/control/geolocate_control.ts @@ -124,7 +124,7 @@ class GeolocateControl extends Evented implements IControl { onAdd(map: Map) { this._map = map; - this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group'); + this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group'); checkGeolocationSupport(this._setupUI); return this._container; } @@ -174,21 +174,21 @@ class GeolocateControl extends Evented implements IControl { switch (this._watchState) { case 'WAITING_ACTIVE': this._watchState = 'ACTIVE_ERROR'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error'); break; case 'ACTIVE_LOCK': this._watchState = 'ACTIVE_ERROR'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting'); // turn marker grey break; case 'BACKGROUND': this._watchState = 'BACKGROUND_ERROR'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting'); // turn marker grey break; case 'ACTIVE_ERROR': @@ -231,16 +231,16 @@ class GeolocateControl extends Evented implements IControl { case 'ACTIVE_LOCK': case 'ACTIVE_ERROR': this._watchState = 'ACTIVE_LOCK'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active'); break; case 'BACKGROUND': case 'BACKGROUND_ERROR': this._watchState = 'BACKGROUND'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background'); break; default: throw new Error(`Unexpected watchState ${this._watchState}`); @@ -259,7 +259,7 @@ class GeolocateControl extends Evented implements IControl { } if (this.options.showUserLocation) { - this._dotElement.classList.remove('maplibregl-user-location-dot-stale', 'mapboxgl-user-location-dot-stale'); + this._dotElement.classList.remove('maplibregl-user-location-dot-stale'); } this.fire(new Event('geolocate', position)); @@ -330,11 +330,11 @@ class GeolocateControl extends Evented implements IControl { if (error.code === 1) { // PERMISSION_DENIED this._watchState = 'OFF'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error'); this._geolocateButton.disabled = true; const title = this._map._getUIString('GeolocateControl.LocationNotAvailable'); this._geolocateButton.title = title; @@ -355,7 +355,7 @@ class GeolocateControl extends Evented implements IControl { } if (this._watchState !== 'OFF' && this.options.showUserLocation) { - this._dotElement.classList.add('maplibregl-user-location-dot-stale', 'mapboxgl-user-location-dot-stale'); + this._dotElement.classList.add('maplibregl-user-location-dot-stale'); } this.fire(new Event('error', error)); @@ -370,8 +370,8 @@ class GeolocateControl extends Evented implements IControl { _setupUI(supported: boolean) { this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault()); - this._geolocateButton = DOM.create('button', 'maplibregl-ctrl-geolocate mapboxgl-ctrl-geolocate', this._container); - DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._geolocateButton).setAttribute('aria-hidden', 'true'); + this._geolocateButton = DOM.create('button', 'maplibregl-ctrl-geolocate', this._container); + DOM.create('span', 'maplibregl-ctrl-icon', this._geolocateButton).setAttribute('aria-hidden', 'true'); this._geolocateButton.type = 'button'; if (supported === false) { @@ -393,11 +393,11 @@ class GeolocateControl extends Evented implements IControl { // when showUserLocation is enabled, keep the Geolocate button disabled until the device location marker is setup on the map if (this.options.showUserLocation) { - this._dotElement = DOM.create('div', 'maplibregl-user-location-dot mapboxgl-user-location-dot'); + this._dotElement = DOM.create('div', 'maplibregl-user-location-dot'); this._userLocationDotMarker = new Marker(this._dotElement); - this._circleElement = DOM.create('div', 'maplibregl-user-location-accuracy-circle mapboxgl-user-location-accuracy-circle'); + this._circleElement = DOM.create('div', 'maplibregl-user-location-accuracy-circle'); this._accuracyCircleMarker = new Marker({element: this._circleElement, pitchAlignment: 'map'}); if (this.options.trackUserLocation) this._watchState = 'OFF'; @@ -417,8 +417,8 @@ class GeolocateControl extends Evented implements IControl { const fromResize = event.originalEvent && event.originalEvent.type === 'resize'; if (!event.geolocateSource && this._watchState === 'ACTIVE_LOCK' && !fromResize) { this._watchState = 'BACKGROUND'; - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active'); this.fire(new Event('trackuserlocationend')); } @@ -466,17 +466,17 @@ class GeolocateControl extends Evented implements IControl { numberOfWatches--; noTimeout = false; this._watchState = 'OFF'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error'); this.fire(new Event('trackuserlocationend')); break; case 'BACKGROUND': this._watchState = 'ACTIVE_LOCK'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background'); // set camera to last known location if (this._lastKnownPosition) this._updateCamera(this._lastKnownPosition); @@ -489,11 +489,11 @@ class GeolocateControl extends Evented implements IControl { // incoming state setup switch (this._watchState) { case 'WAITING_ACTIVE': - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active'); break; case 'ACTIVE_LOCK': - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active'); break; case 'OFF': break; @@ -508,7 +508,7 @@ class GeolocateControl extends Evented implements IControl { } else if (this._geolocationWatchID === undefined) { // enable watchPosition since watchState is not OFF and there is no watchPosition already running - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting'); this._geolocateButton.setAttribute('aria-pressed', 'true'); numberOfWatches++; @@ -540,7 +540,7 @@ class GeolocateControl extends Evented implements IControl { window.navigator.geolocation.clearWatch(this._geolocationWatchID); this._geolocationWatchID = undefined; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting'); this._geolocateButton.setAttribute('aria-pressed', 'false'); if (this.options.showUserLocation) { diff --git a/src/ui/control/logo_control.ts b/src/ui/control/logo_control.ts index 5b4b36febd..4e499849ac 100644 --- a/src/ui/control/logo_control.ts +++ b/src/ui/control/logo_control.ts @@ -37,8 +37,8 @@ class LogoControl implements IControl { onAdd(map: Map) { this._map = map; this._compact = this.options && this.options.compact; - this._container = DOM.create('div', 'maplibregl-ctrl mapboxgl-ctrl'); - const anchor = DOM.create('a', 'maplibregl-ctrl-logo mapboxgl-ctrl-logo'); + this._container = DOM.create('div', 'maplibregl-ctrl'); + const anchor = DOM.create('a', 'maplibregl-ctrl-logo'); anchor.target = '_blank'; anchor.rel = 'noopener nofollow'; anchor.href = 'https://maplibre.org/'; @@ -66,10 +66,10 @@ class LogoControl implements IControl { const anchor = containerChildren[0]; if (this._map.getCanvasContainer().offsetWidth <= 640 || this._compact) { if (this._compact !== false) { - anchor.classList.add('maplibregl-compact', 'mapboxgl-compact'); + anchor.classList.add('maplibregl-compact'); } } else { - anchor.classList.remove('maplibregl-compact', 'mapboxgl-compact'); + anchor.classList.remove('maplibregl-compact'); } } } diff --git a/src/ui/control/navigation_control.ts b/src/ui/control/navigation_control.ts index 5f57dc2f0d..6679a7edad 100644 --- a/src/ui/control/navigation_control.ts +++ b/src/ui/control/navigation_control.ts @@ -46,7 +46,7 @@ class NavigationControl implements IControl { constructor(options: NavigationOptions) { this.options = extend({}, defaultOptions, options); - this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group'); + this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group'); this._container.addEventListener('contextmenu', (e) => e.preventDefault()); if (this.options.showZoom) { @@ -54,23 +54,23 @@ class NavigationControl implements IControl { '_setButtonTitle', '_updateZoomButtons' ], this); - this._zoomInButton = this._createButton('maplibregl-ctrl-zoom-in mapboxgl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e})); - DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._zoomInButton).setAttribute('aria-hidden', 'true'); - this._zoomOutButton = this._createButton('maplibregl-ctrl-zoom-out mapboxgl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e})); - DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._zoomOutButton).setAttribute('aria-hidden', 'true'); + this._zoomInButton = this._createButton('maplibregl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e})); + DOM.create('span', 'maplibregl-ctrl-icon', this._zoomInButton).setAttribute('aria-hidden', 'true'); + this._zoomOutButton = this._createButton('maplibregl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e})); + DOM.create('span', 'maplibregl-ctrl-icon', this._zoomOutButton).setAttribute('aria-hidden', 'true'); } if (this.options.showCompass) { bindAll([ '_rotateCompassArrow' ], this); - this._compass = this._createButton('maplibregl-ctrl-compass mapboxgl-ctrl-compass', (e) => { + this._compass = this._createButton('maplibregl-ctrl-compass', (e) => { if (this.options.visualizePitch) { this._map.resetNorthPitch({}, {originalEvent: e}); } else { this._map.resetNorth({}, {originalEvent: e}); } }); - this._compassIcon = DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._compass); + this._compassIcon = DOM.create('span', 'maplibregl-ctrl-icon', this._compass); this._compassIcon.setAttribute('aria-hidden', 'true'); } } diff --git a/src/ui/control/scale_control.ts b/src/ui/control/scale_control.ts index 5ad736f956..13518e1559 100644 --- a/src/ui/control/scale_control.ts +++ b/src/ui/control/scale_control.ts @@ -56,7 +56,7 @@ class ScaleControl implements IControl { onAdd(map: Map) { this._map = map; - this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale mapboxgl-ctrl mapboxgl-ctrl-scale', map.getContainer()); + this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale', map.getContainer()); this._map.on('move', this._onMove); this._onMove(); diff --git a/src/ui/control/terrain_control.ts b/src/ui/control/terrain_control.ts index ce3b68a356..79d8ed9013 100644 --- a/src/ui/control/terrain_control.ts +++ b/src/ui/control/terrain_control.ts @@ -37,9 +37,9 @@ export default class TerrainControl implements IControl { onAdd(map: Map) { this._map = map; - this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group'); - this._terrainButton = DOM.create('button', 'maplibregl-ctrl-terrain mapboxgl-ctrl-terrain', this._container); - DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._terrainButton).setAttribute('aria-hidden', 'true'); + this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group'); + this._terrainButton = DOM.create('button', 'maplibregl-ctrl-terrain', this._container); + DOM.create('span', 'maplibregl-ctrl-icon', this._terrainButton).setAttribute('aria-hidden', 'true'); this._terrainButton.type = 'button'; this._terrainButton.addEventListener('click', this._toggleTerrain); @@ -64,13 +64,13 @@ export default class TerrainControl implements IControl { } _updateTerrainIcon() { - this._terrainButton.classList.remove('maplibregl-ctrl-terrain', 'mapboxgl-ctrl-terrain'); - this._terrainButton.classList.remove('maplibregl-ctrl-terrain-enabled', 'mapboxgl-ctrl-terrain-enabled'); + this._terrainButton.classList.remove('maplibregl-ctrl-terrain'); + this._terrainButton.classList.remove('maplibregl-ctrl-terrain-enabled'); if (this._map.style.terrain) { - this._terrainButton.classList.add('maplibregl-ctrl-terrain-enabled', 'mapboxgl-ctrl-terrain-enabled'); + this._terrainButton.classList.add('maplibregl-ctrl-terrain-enabled'); this._terrainButton.title = this._map._getUIString('TerrainControl.disableTerrain'); } else { - this._terrainButton.classList.add('maplibregl-ctrl-terrain', 'mapboxgl-ctrl-terrain'); + this._terrainButton.classList.add('maplibregl-ctrl-terrain'); this._terrainButton.title = this._map._getUIString('TerrainControl.enableTerrain'); } } diff --git a/src/ui/handler/box_zoom.ts b/src/ui/handler/box_zoom.ts index 9f1a9e02f6..04a27cdd3c 100644 --- a/src/ui/handler/box_zoom.ts +++ b/src/ui/handler/box_zoom.ts @@ -94,8 +94,8 @@ class BoxZoomHandler { this._lastPos = pos; if (!this._box) { - this._box = DOM.create('div', 'maplibregl-boxzoom mapboxgl-boxzoom', this._container); - this._container.classList.add('maplibregl-crosshair', 'mapboxgl-crosshair'); + this._box = DOM.create('div', 'maplibregl-boxzoom', this._container); + this._container.classList.add('maplibregl-crosshair'); this._fireEvent('boxzoomstart', e); } @@ -144,7 +144,7 @@ class BoxZoomHandler { reset() { this._active = false; - this._container.classList.remove('maplibregl-crosshair', 'mapboxgl-crosshair'); + this._container.classList.remove('maplibregl-crosshair'); if (this._box) { DOM.remove(this._box); diff --git a/src/ui/handler/shim/drag_pan.ts b/src/ui/handler/shim/drag_pan.ts index 7093655ece..7772535dc5 100644 --- a/src/ui/handler/shim/drag_pan.ts +++ b/src/ui/handler/shim/drag_pan.ts @@ -51,7 +51,7 @@ export default class DragPanHandler { this._inertiaOptions = options || {}; this._mousePan.enable(); this._touchPan.enable(); - this._el.classList.add('maplibregl-touch-drag-pan', 'mapboxgl-touch-drag-pan'); + this._el.classList.add('maplibregl-touch-drag-pan'); } /** @@ -63,7 +63,7 @@ export default class DragPanHandler { disable() { this._mousePan.disable(); this._touchPan.disable(); - this._el.classList.remove('maplibregl-touch-drag-pan', 'mapboxgl-touch-drag-pan'); + this._el.classList.remove('maplibregl-touch-drag-pan'); } /** diff --git a/src/ui/handler/shim/touch_zoom_rotate.ts b/src/ui/handler/shim/touch_zoom_rotate.ts index 097e115c3b..94531359f9 100644 --- a/src/ui/handler/shim/touch_zoom_rotate.ts +++ b/src/ui/handler/shim/touch_zoom_rotate.ts @@ -46,7 +46,7 @@ export default class TouchZoomRotateHandler { this._touchZoom.enable(options); if (!this._rotationDisabled) this._touchRotate.enable(options); this._tapDragZoom.enable(); - this._el.classList.add('maplibregl-touch-zoom-rotate', 'mapboxgl-touch-zoom-rotate'); + this._el.classList.add('maplibregl-touch-zoom-rotate'); } /** @@ -59,7 +59,7 @@ export default class TouchZoomRotateHandler { this._touchZoom.disable(); this._touchRotate.disable(); this._tapDragZoom.disable(); - this._el.classList.remove('maplibregl-touch-zoom-rotate', 'mapboxgl-touch-zoom-rotate'); + this._el.classList.remove('maplibregl-touch-zoom-rotate'); } /** diff --git a/src/ui/map.ts b/src/ui/map.ts index e6489fa5c5..ac85114cff 100644 --- a/src/ui/map.ts +++ b/src/ui/map.ts @@ -2419,14 +2419,14 @@ class Map extends Camera { _setupContainer() { const container = this._container; - container.classList.add('maplibregl-map', 'mapboxgl-map'); + container.classList.add('maplibregl-map'); - const canvasContainer = this._canvasContainer = DOM.create('div', 'maplibregl-canvas-container mapboxgl-canvas-container', container); + const canvasContainer = this._canvasContainer = DOM.create('div', 'maplibregl-canvas-container', container); if (this._interactive) { - canvasContainer.classList.add('maplibregl-interactive', 'mapboxgl-interactive'); + canvasContainer.classList.add('maplibregl-interactive'); } - this._canvas = DOM.create('canvas', 'maplibregl-canvas mapboxgl-canvas', canvasContainer); + this._canvas = DOM.create('canvas', 'maplibregl-canvas', canvasContainer); this._canvas.addEventListener('webglcontextlost', this._contextLost, false); this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false); this._canvas.setAttribute('tabindex', '0'); @@ -2436,10 +2436,10 @@ class Map extends Camera { const dimensions = this._containerDimensions(); this._resizeCanvas(dimensions[0], dimensions[1], this.getPixelRatio()); - const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container mapboxgl-control-container', container); + const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container', container); const positions = this._controlPositions = {}; ['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach((positionName) => { - positions[positionName] = DOM.create('div', `maplibregl-ctrl-${positionName} mapboxgl-ctrl-${positionName}`, controlContainer); + positions[positionName] = DOM.create('div', `maplibregl-ctrl-${positionName} `, controlContainer); }); this._container.addEventListener('scroll', this._onMapScroll, false); @@ -2471,7 +2471,7 @@ class Map extends Camera { this._onCooperativeGesture(e, this._metaPress, 1); }, false); // Remove the traditional pan classes - this._canvasContainer.classList.remove('mapboxgl-touch-drag-pan', 'maplibregl-touch-drag-pan'); + this._canvasContainer.classList.remove('maplibregl-touch-drag-pan'); } _resizeCanvas(width: number, height: number, pixelRatio: number) { @@ -2792,7 +2792,7 @@ class Map extends Camera { if (this._cooperativeGestures) { DOM.remove(this._cooperativeGesturesScreen); } - this._container.classList.remove('maplibregl-map', 'mapboxgl-map'); + this._container.classList.remove('maplibregl-map'); PerformanceUtils.clearMetrics(); diff --git a/src/ui/marker.ts b/src/ui/marker.ts index 333cd7a4c6..f614b4eb6b 100644 --- a/src/ui/marker.ts +++ b/src/ui/marker.ts @@ -218,7 +218,7 @@ export default class Marker extends Evented { this._offset = Point.convert(options && options.offset || [0, 0]); } - this._element.classList.add('maplibregl-marker', 'mapboxgl-marker'); + this._element.classList.add('maplibregl-marker'); this._element.addEventListener('dragstart', (e: DragEvent) => { e.preventDefault(); }); diff --git a/src/ui/popup.ts b/src/ui/popup.ts index cda6b49f07..d4be69c1e4 100644 --- a/src/ui/popup.ts +++ b/src/ui/popup.ts @@ -148,9 +148,9 @@ export default class Popup extends Evented { this._map.on('mousemove', this._onMouseMove); this._map.on('mouseup', this._onMouseUp); if (this._container) { - this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); + this._container.classList.add('maplibregl-popup-track-pointer'); } - this._map._canvasContainer.classList.add('maplibregl-track-pointer', 'mapboxgl-track-pointer'); + this._map._canvasContainer.classList.add('maplibregl-track-pointer'); } else { this._map.on('move', this._update); } @@ -270,9 +270,9 @@ export default class Popup extends Evented { this._map.on('move', this._update); this._map.off('mousemove', this._onMouseMove); if (this._container) { - this._container.classList.remove('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); + this._container.classList.remove('maplibregl-popup-track-pointer'); } - this._map._canvasContainer.classList.remove('maplibregl-track-pointer', 'mapboxgl-track-pointer'); + this._map._canvasContainer.classList.remove('maplibregl-track-pointer'); } return this; @@ -297,9 +297,9 @@ export default class Popup extends Evented { this._map.on('mousemove', this._onMouseMove); this._map.on('drag', this._onDrag); if (this._container) { - this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); + this._container.classList.add('maplibregl-popup-track-pointer'); } - this._map._canvasContainer.classList.add('maplibregl-track-pointer', 'mapboxgl-track-pointer'); + this._map._canvasContainer.classList.add('maplibregl-track-pointer'); } return this; @@ -419,7 +419,7 @@ export default class Popup extends Evented { } } } else { - this._content = DOM.create('div', 'maplibregl-popup-content mapboxgl-popup-content', this._container); + this._content = DOM.create('div', 'maplibregl-popup-content', this._container); } // The close button should be the last tabbable element inside the popup for a good keyboard UX. @@ -491,7 +491,7 @@ export default class Popup extends Evented { _createCloseButton() { if (this.options.closeButton) { - this._closeButton = DOM.create('button', 'maplibregl-popup-close-button mapboxgl-popup-close-button', this._content); + this._closeButton = DOM.create('button', 'maplibregl-popup-close-button', this._content); this._closeButton.type = 'button'; this._closeButton.setAttribute('aria-label', 'Close popup'); this._closeButton.innerHTML = '×'; @@ -517,8 +517,8 @@ export default class Popup extends Evented { if (!this._map || !hasPosition || !this._content) { return; } if (!this._container) { - this._container = DOM.create('div', 'maplibregl-popup mapboxgl-popup', this._map.getContainer()); - this._tip = DOM.create('div', 'maplibregl-popup-tip mapboxgl-popup-tip', this._container); + this._container = DOM.create('div', 'maplibregl-popup', this._map.getContainer()); + this._tip = DOM.create('div', 'maplibregl-popup-tip', this._container); this._container.appendChild(this._content); if (this.options.className) { this.options.className.split(' ').forEach(name => @@ -526,7 +526,7 @@ export default class Popup extends Evented { } if (this._trackPointer) { - this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); + this._container.classList.add('maplibregl-popup-track-pointer'); } } From 94d6644a15997a12eabbde582ac607f9d2e0fdbe Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Mon, 29 Aug 2022 10:46:15 +0200 Subject: [PATCH 2/5] add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e5395865ee..8865bb6502 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - *...Add new stuff here...* - Add map.getCameraTargetElevation() (#1558) +- Remove deprecated mapboxgl css classes ### 🐞 Bug fixes From de343b7d763f77d2d79c4cd1e50232ed76cedc41 Mon Sep 17 00:00:00 2001 From: Birk Skyum Date: Mon, 29 Aug 2022 11:44:15 +0200 Subject: [PATCH 3/5] Update readme to how things are today --- README.md | 44 ++++++++++++++++---------------------------- 1 file changed, 16 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index c0e2be1c4d..930ab213d9 100644 --- a/README.md +++ b/README.md @@ -51,53 +51,41 @@ Check out the features through [examples](https://maplibre.org/maplibre-gl-js-do
-## Migrating from mapbox-gl +## Migrating from mapbox-gl to maplibre +The libraries are very similar, but diverge with newer features happening from v2 in both libraries where mapbox turned proprietary. -If you depend on mapbox-gl directly, simply replace `mapbox-gl` with `maplibre-gl` in `package.json`: - -Use +The overall migration happens by uninstalling `mapbox-gl` and installing `maplibre-gl` in your node packages (or see below for cdn links), and replace `mapboxgl` with `maplibregl` througout your TypeScript, JavaScript and HTML/CSS. ```diff - "dependencies": { -- "mapbox-gl": "^1.13.0" -+ "maplibre-gl": ">=1.15.2" - } -``` +- var map = new mapboxgl.Map({ ++ var map = new maplibregl.Map({ -if it is important to you that the behaviour is similar to `mapbox-gl` version 1.x. +-