From b3bda1da37a4d2c16cab2744bf0dd7ea5e02cdb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Parker?= Date: Sun, 11 Jul 2021 23:40:51 +0200 Subject: [PATCH] fix breaking changes to css classnames --- .stylelintrc | 2 +- CHANGELOG.md | 1 + README.md | 2 +- src/css/maplibre-gl.css | 404 ++++++++++++++++------- src/ui/anchor.js | 4 +- src/ui/control/attribution_control.js | 22 +- src/ui/control/fullscreen_control.js | 8 +- src/ui/control/geolocate_control.js | 88 ++--- src/ui/control/logo_control.js | 8 +- src/ui/control/navigation_control.js | 14 +- src/ui/control/scale_control.js | 2 +- src/ui/handler/box_zoom.js | 6 +- src/ui/handler/shim/drag_pan.js | 4 +- src/ui/handler/shim/touch_zoom_rotate.js | 4 +- src/ui/map.js | 14 +- src/ui/marker.js | 2 +- src/ui/popup.js | 22 +- test/browser/util/browser.js | 2 +- yarn.lock | 6 +- 19 files changed, 385 insertions(+), 230 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 8fa0d8ebfe..3446b0006e 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": "maplibregl-[a-z-]+", + "selector-class-pattern": "map(box|libre)gl-[a-z-]+", "at-rule-no-unknown": [true, { "ignoreAtRules": ["svg-load"] }] diff --git a/CHANGELOG.md b/CHANGELOG.md index f9c9a87aa9..2df23c03b8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,7 @@ ### 🐞 Bug fixes - *...Add new stuff here...* +- Fix breaking changes introduced in v1.15.0 by adoption dual naming scheme for CSS class names ## 1.15.1 diff --git a/README.md b/README.md index 157f16dde5..996be44784 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ If you depend on mapbox-gl directly, simply replace `mapbox-gl` with `maplibre-g } ``` -And replace ```mapboxgl``` with ```maplibregl``` in your JavaScript/HTML/CSS code: +And replace ```mapboxgl``` with ```maplibregl``` in your JavaScript and optionannly in your HTML/CSS code: ```diff - var map = new mapboxgl.Map({ + var map = new maplibregl.Map({ diff --git a/src/css/maplibre-gl.css b/src/css/maplibre-gl.css index 683ccec056..cd22e95405 100644 --- a/src/css/maplibre-gl.css +++ b/src/css/maplibre-gl.css @@ -1,23 +1,28 @@ -.maplibregl-map { +.maplibregl-map, +.mapboxgl-map { font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; overflow: hidden; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } -.maplibregl-canvas { +.maplibregl-canvas, +.mapboxgl-canvas { position: absolute; left: 0; top: 0; } -.maplibregl-map:-webkit-full-screen { +.maplibregl-map:-webkit-full-screen, +.mapboxgl-map:-webkit-full-screen { width: 100%; height: 100%; } .maplibregl-canvas-container.maplibregl-interactive, -.maplibregl-ctrl-group button.maplibregl-ctrl-compass { +.maplibregl-ctrl-group button.maplibregl-ctrl-compass, +.mapboxgl-canvas-container.mapboxgl-interactive, +.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass { cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; @@ -27,71 +32,105 @@ user-select: none; } -.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer { +.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer, +.mapboxgl-canvas-container.mapboxgl-interactive.mapboxgl-track-pointer { cursor: pointer; } .maplibregl-canvas-container.maplibregl-interactive:active, -.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active { +.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active, +.mapboxgl-canvas-container.mapboxgl-interactive:active, +.mapboxgl-ctrl-group button.mapboxgl-ctrl-compass:active { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: grabbing; } .maplibregl-canvas-container.maplibregl-touch-zoom-rotate, -.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas { +.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 { touch-action: pan-x pan-y; } .maplibregl-canvas-container.maplibregl-touch-drag-pan, -.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas { +.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 { 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 { +.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 { touch-action: none; } .maplibregl-ctrl-top-left, .maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-left, -.maplibregl-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; } -.maplibregl-ctrl-top-left { top: 0; left: 0; } -.maplibregl-ctrl-top-right { top: 0; right: 0; } -.maplibregl-ctrl-bottom-left { bottom: 0; left: 0; } -.maplibregl-ctrl-bottom-right { right: 0; bottom: 0; } +.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 { +.maplibregl-ctrl-top-left, +.mapboxgl-ctrl-top-left { top: 0; left: 0; } + +.maplibregl-ctrl-top-right, +.mapboxgl-ctrl-top-right { top: 0; right: 0; } + +.maplibregl-ctrl-bottom-left, +.mapboxgl-ctrl-bottom-left { bottom: 0; left: 0; } + +.maplibregl-ctrl-bottom-right, +.mapboxgl-ctrl-bottom-right { right: 0; bottom: 0; } + +.maplibregl-ctrl, +.mapboxgl-ctrl { clear: both; pointer-events: auto; /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */ transform: translate(0, 0); } -.maplibregl-ctrl-top-left .maplibregl-ctrl { margin: 10px 0 0 10px; float: left; } -.maplibregl-ctrl-top-right .maplibregl-ctrl { margin: 10px 10px 0 0; float: right; } -.maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0 0 10px 10px; float: left; } -.maplibregl-ctrl-bottom-right .maplibregl-ctrl { margin: 0 10px 10px 0; float: right; } -.maplibregl-ctrl-group { +.maplibregl-ctrl-top-left .maplibregl-ctrl, +.mapboxgl-ctrl-top-left .mapboxgl-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-bottom-left .maplibregl-ctrl, +.mapboxgl-ctrl-bottom-left .mapboxgl-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-group, +.mapboxgl-ctrl-group { border-radius: 4px; background: #fff; } -.maplibregl-ctrl-group:not(:empty) { +.maplibregl-ctrl-group:not(:empty), +.mapboxgl-ctrl-group:not(:empty) { -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } @media (-ms-high-contrast: active) { - .maplibregl-ctrl-group:not(:empty) { + .maplibregl-ctrl-group:not(:empty), + .mapboxgl-ctrl-group:not(:empty) { box-shadow: 0 0 0 2px ButtonText; } } -.maplibregl-ctrl-group button { +.maplibregl-ctrl-group button, +.mapboxgl-ctrl-group button { width: 29px; height: 29px; display: block; @@ -103,11 +142,13 @@ cursor: pointer; } -.maplibregl-ctrl-group button + button { +.maplibregl-ctrl-group button + button, +.mapboxgl-ctrl-group button + button { border-top: 1px solid #ddd; } -.maplibregl-ctrl button .maplibregl-ctrl-icon { +.maplibregl-ctrl button .maplibregl-ctrl-icon, +.mapboxgl-ctrl button .mapboxgl-ctrl-icon { display: block; width: 100%; height: 100%; @@ -116,120 +157,147 @@ } @media (-ms-high-contrast: active) { - .maplibregl-ctrl-icon { + .maplibregl-ctrl-icon, + .mapboxgl-ctrl-icon { background-color: transparent; } - .maplibregl-ctrl-group button + button { + .maplibregl-ctrl-group button + button, + .mapboxgl-ctrl-group button + button { border-top: 1px solid ButtonText; } } /* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */ -.maplibregl-ctrl button::-moz-focus-inner { +.maplibregl-ctrl button::-moz-focus-inner, +.mapboxgl-ctrl button::-moz-focus-inner { border: 0; padding: 0; } .maplibregl-ctrl-attrib-button:focus, -.maplibregl-ctrl-group button:focus { +.maplibregl-ctrl-group button:focus, +.mapboxgl-ctrl-attrib-button:focus, +.mapboxgl-ctrl-group button:focus { box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1); } -.maplibregl-ctrl button:disabled { +.maplibregl-ctrl button:disabled, +.mapboxgl-ctrl button:disabled { cursor: not-allowed; } -.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon { +.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon, +.mapboxgl-ctrl button:disabled .mapboxgl-ctrl-icon { opacity: 0.25; } -.maplibregl-ctrl button:not(:disabled):hover { +.maplibregl-ctrl button:not(:disabled):hover, +.mapboxgl-ctrl button:not(:disabled):hover { background-color: rgba(0, 0, 0, 0.05); } -.maplibregl-ctrl-group button:focus:focus-visible { +.maplibregl-ctrl-group button:focus:focus-visible, +.mapboxgl-ctrl-group button:focus:focus-visible { box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1); } -.maplibregl-ctrl-group button:focus:not(:focus-visible) { +.maplibregl-ctrl-group button:focus:not(:focus-visible), +.mapboxgl-ctrl-group button:focus:not(:focus-visible) { box-shadow: none; } -.maplibregl-ctrl-group button:focus:first-child { +.maplibregl-ctrl-group button:focus:first-child, +.mapboxgl-ctrl-group button:focus:first-child { border-radius: 4px 4px 0 0; } -.maplibregl-ctrl-group button:focus:last-child { +.maplibregl-ctrl-group button:focus:last-child, +.mapboxgl-ctrl-group button:focus:last-child { border-radius: 0 0 4px 4px; } -.maplibregl-ctrl-group button:focus:only-child { +.maplibregl-ctrl-group button:focus:only-child, +.mapboxgl-ctrl-group button:focus:only-child { border-radius: inherit; } -.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon, +.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #333); } -.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, +.mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-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 { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #fff); } - .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-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 { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-out .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-zoom-out.svg', fill: #000); } - .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-zoom-in .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-zoom-in.svg', fill: #000); } } -.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon, +.mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #333); } -.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon, +.mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-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 { + .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #fff); } - .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-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 { + .maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-fullscreen .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-fullscreen.svg', fill: #000); } - .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-shrink.svg', fill: #000); } } -.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon, +.mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-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 { + .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { @svg-load ctrl-compass-white url(svg/maplibregl-ctrl-compass.svg) { fill: #fff; #south { fill: #999; } @@ -240,7 +308,8 @@ } @media (-ms-high-contrast: black-on-white) { - .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-compass .mapboxgl-ctrl-icon { background-image: svg-load('svg/maplibregl-ctrl-compass.svg', fill: #000); } } @@ -297,31 +366,38 @@ #dot { display: none; } } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon, +.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { background-image: svg-inline(ctrl-geolocate); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon { +.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon, +.mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-disabled); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon { +.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 { background-image: svg-inline(ctrl-geolocate-active); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon { +.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 { background-image: svg-inline(ctrl-geolocate-active-error); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon { +.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 { background-image: svg-inline(ctrl-geolocate-background); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon { +.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 { background-image: svg-inline(ctrl-geolocate-background-error); } -.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon { +.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 { -webkit-animation: maplibregl-spin 2s infinite linear; -moz-animation: maplibregl-spin 2s infinite linear; -o-animation: maplibregl-spin 2s infinite linear; @@ -330,37 +406,45 @@ } @media (-ms-high-contrast: active) { - .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-white); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-disabled-white); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon { + .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 { background-image: svg-inline(ctrl-geolocate-active); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon { + .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 { background-image: svg-inline(ctrl-geolocate-active-error); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon { + .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 { background-image: svg-inline(ctrl-geolocate-background); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon { + .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 { background-image: svg-inline(ctrl-geolocate-background-error); } } @media (-ms-high-contrast: black-on-white) { - .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-black); } - .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon { + .maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon, + .mapboxgl-ctrl button.mapboxgl-ctrl-geolocate:disabled .mapboxgl-ctrl-icon { background-image: svg-inline(ctrl-geolocate-disabled-black); } } @@ -390,7 +474,8 @@ 100% { transform: rotate(360deg); } } -a.maplibregl-ctrl-logo { +a.maplibregl-ctrl-logo, +a.mapboxgl-ctrl-logo { width: 88px; height: 23px; margin: 0 0 -4px -4px; @@ -401,12 +486,14 @@ a.maplibregl-ctrl-logo { background-image: svg-load('svg/maplibregl-ctrl-logo.svg'); } -a.maplibregl-ctrl-logo.maplibregl-compact { +a.maplibregl-ctrl-logo.maplibregl-compact, +a.mapboxgl-ctrl-logo.mapboxgl-compact { width: 14px; } @media (-ms-high-contrast: active) { - a.maplibregl-ctrl-logo { + a.maplibregl-ctrl-logo, + a.mapboxgl-ctrl-logo { @svg-load ctrl-logo-white url(svg/maplibregl-ctrl-logo.svg) { #outline { opacity: 1; } #fill { opacity: 1; } @@ -418,7 +505,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact { } @media (-ms-high-contrast: black-on-white) { - a.maplibregl-ctrl-logo { + a.maplibregl-ctrl-logo, + a.mapboxgl-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; } @@ -428,14 +516,16 @@ a.maplibregl-ctrl-logo.maplibregl-compact { } } -.maplibregl-ctrl.maplibregl-ctrl-attrib { +.maplibregl-ctrl.maplibregl-ctrl-attrib, +.mapboxgl-ctrl.mapboxgl-ctrl-attrib { padding: 0 5px; background-color: rgba(255, 255, 255, 0.5); margin: 0; } @media screen { - .maplibregl-ctrl-attrib.maplibregl-compact { + .maplibregl-ctrl-attrib.maplibregl-compact, + .mapboxgl-ctrl-attrib.mapboxgl-compact { min-height: 20px; padding: 2px 24px 2px 0; margin: 10px; @@ -444,22 +534,27 @@ a.maplibregl-ctrl-logo.maplibregl-compact { border-radius: 12px; } - .maplibregl-ctrl-attrib.maplibregl-compact-show { + .maplibregl-ctrl-attrib.maplibregl-compact-show, + .mapboxgl-ctrl-attrib.mapboxgl-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 { + .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 { padding: 2px 8px 2px 28px; border-radius: 12px; } - .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { + .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner, + .mapboxgl-ctrl-attrib.mapboxgl-compact .mapboxgl-ctrl-attrib-inner { display: none; } - .maplibregl-ctrl-attrib-button { + .maplibregl-ctrl-attrib-button, + .mapboxgl-ctrl-attrib-button { display: none; cursor: pointer; position: absolute; @@ -476,73 +571,90 @@ a.maplibregl-ctrl-logo.maplibregl-compact { } .maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button, - .maplibregl-ctrl-bottom-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 { left: 0; } .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button, - .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner { + .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 { display: block; } - .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button { + .maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button, + .mapboxgl-ctrl-attrib.mapboxgl-compact-show .mapboxgl-ctrl-attrib-button { background-color: rgba(0, 0, 0, 0.05); } - .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after { + .maplibregl-ctrl-bottom-right > .maplibregl-ctrl-attrib.maplibregl-compact::after, + .mapboxgl-ctrl-bottom-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { bottom: 0; right: 0; } - .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact::after { + .maplibregl-ctrl-top-right > .maplibregl-ctrl-attrib.maplibregl-compact::after, + .mapboxgl-ctrl-top-right > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { top: 0; right: 0; } - .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact::after { + .maplibregl-ctrl-top-left > .maplibregl-ctrl-attrib.maplibregl-compact::after, + .mapboxgl-ctrl-top-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { top: 0; left: 0; } - .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact::after { + .maplibregl-ctrl-bottom-left > .maplibregl-ctrl-attrib.maplibregl-compact::after, + .mapboxgl-ctrl-bottom-left > .mapboxgl-ctrl-attrib.mapboxgl-compact::after { bottom: 0; left: 0; } } @media screen and (-ms-high-contrast: active) { - .maplibregl-ctrl-attrib.maplibregl-compact::after { + .maplibregl-ctrl-attrib.maplibregl-compact::after, + .mapboxgl-ctrl-attrib.mapboxgl-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 { + .maplibregl-ctrl-attrib.maplibregl-compact::after, + .mapboxgl-ctrl-attrib.mapboxgl-compact::after { background-image: svg-load('svg/maplibregl-ctrl-attrib.svg'); } } -.maplibregl-ctrl-attrib a { +.maplibregl-ctrl-attrib a, +.mapboxgl-ctrl-attrib a { color: rgba(0, 0, 0, 0.75); text-decoration: none; } -.maplibregl-ctrl-attrib a:hover { +.maplibregl-ctrl-attrib a:hover, +.mapboxgl-ctrl-attrib a:hover { color: inherit; text-decoration: underline; } -/* stylelint-disable-next-line selector-class-pattern */ -.maplibregl-ctrl-attrib .mapbox-improve-map { +/* stylelint-disable selector-class-pattern */ +.maplibregl-ctrl-attrib .mapbox-improve-map, +.mapboxgl-ctrl-attrib .mapbox-improve-map { font-weight: bold; margin-left: 2px; } +/* stylelint-enable selector-class-pattern */ -.maplibregl-attrib-empty { +.maplibregl-attrib-empty, +.mapboxgl-attrib-empty { display: none; } -.maplibregl-ctrl-scale { +.maplibregl-ctrl-scale, +.mapboxgl-ctrl-scale { background-color: rgba(255, 255, 255, 0.75); font-size: 10px; border-width: medium 2px 2px; @@ -553,7 +665,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact { box-sizing: border-box; } -.maplibregl-popup { +.maplibregl-popup, +.mapboxgl-popup { position: absolute; top: 0; left: 0; @@ -565,43 +678,54 @@ a.maplibregl-ctrl-logo.maplibregl-compact { .maplibregl-popup-anchor-top, .maplibregl-popup-anchor-top-left, -.maplibregl-popup-anchor-top-right { +.maplibregl-popup-anchor-top-right, +.mapboxgl-popup-anchor-top, +.mapboxgl-popup-anchor-top-left, +.mapboxgl-popup-anchor-top-right { -webkit-flex-direction: column; flex-direction: column; } .maplibregl-popup-anchor-bottom, .maplibregl-popup-anchor-bottom-left, -.maplibregl-popup-anchor-bottom-right { +.maplibregl-popup-anchor-bottom-right, +.mapboxgl-popup-anchor-bottom, +.mapboxgl-popup-anchor-bottom-left, +.mapboxgl-popup-anchor-bottom-right { -webkit-flex-direction: column-reverse; flex-direction: column-reverse; } -.maplibregl-popup-anchor-left { +.maplibregl-popup-anchor-left, +.mapboxgl-popup-anchor-left { -webkit-flex-direction: row; flex-direction: row; } -.maplibregl-popup-anchor-right { +.maplibregl-popup-anchor-right, +.mapboxgl-popup-anchor-right { -webkit-flex-direction: row-reverse; flex-direction: row-reverse; } -.maplibregl-popup-tip { +.maplibregl-popup-tip, +.mapboxgl-popup-tip { width: 0; height: 0; border: 10px solid transparent; z-index: 1; } -.maplibregl-popup-anchor-top .maplibregl-popup-tip { +.maplibregl-popup-anchor-top .maplibregl-popup-tip, +.mapboxgl-popup-anchor-top .mapboxgl-popup-tip { -webkit-align-self: center; align-self: center; border-top: none; border-bottom-color: #fff; } -.maplibregl-popup-anchor-top-left .maplibregl-popup-tip { +.maplibregl-popup-anchor-top-left .maplibregl-popup-tip, +.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip { -webkit-align-self: flex-start; align-self: flex-start; border-top: none; @@ -609,7 +733,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact { border-bottom-color: #fff; } -.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { +.maplibregl-popup-anchor-top-right .maplibregl-popup-tip, +.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip { -webkit-align-self: flex-end; align-self: flex-end; border-top: none; @@ -617,14 +742,16 @@ a.maplibregl-ctrl-logo.maplibregl-compact { border-bottom-color: #fff; } -.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { +.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, +.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip { -webkit-align-self: center; align-self: center; border-bottom: none; border-top-color: #fff; } -.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip { +.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, +.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip { -webkit-align-self: flex-start; align-self: flex-start; border-bottom: none; @@ -632,7 +759,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact { border-top-color: #fff; } -.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { +.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip, +.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip { -webkit-align-self: flex-end; align-self: flex-end; border-bottom: none; @@ -640,21 +768,24 @@ a.maplibregl-ctrl-logo.maplibregl-compact { border-top-color: #fff; } -.maplibregl-popup-anchor-left .maplibregl-popup-tip { +.maplibregl-popup-anchor-left .maplibregl-popup-tip, +.mapboxgl-popup-anchor-left .mapboxgl-popup-tip { -webkit-align-self: center; align-self: center; border-left: none; border-right-color: #fff; } -.maplibregl-popup-anchor-right .maplibregl-popup-tip { +.maplibregl-popup-anchor-right .maplibregl-popup-tip, +.mapboxgl-popup-anchor-right .mapboxgl-popup-tip { -webkit-align-self: center; align-self: center; border-right: none; border-left-color: #fff; } -.maplibregl-popup-close-button { +.maplibregl-popup-close-button, +.mapboxgl-popup-close-button { position: absolute; right: 0; top: 0; @@ -664,11 +795,13 @@ a.maplibregl-ctrl-logo.maplibregl-compact { background-color: transparent; } -.maplibregl-popup-close-button:hover { +.maplibregl-popup-close-button:hover, +.mapboxgl-popup-close-button:hover { background-color: rgba(0, 0, 0, 0.05); } -.maplibregl-popup-content { +.maplibregl-popup-content, +.mapboxgl-popup-content { position: relative; background: #fff; border-radius: 3px; @@ -677,54 +810,65 @@ a.maplibregl-ctrl-logo.maplibregl-compact { pointer-events: auto; } -.maplibregl-popup-anchor-top-left .maplibregl-popup-content { +.maplibregl-popup-anchor-top-left .maplibregl-popup-content, +.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content { border-top-left-radius: 0; } -.maplibregl-popup-anchor-top-right .maplibregl-popup-content { +.maplibregl-popup-anchor-top-right .maplibregl-popup-content, +.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content { border-top-right-radius: 0; } -.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content { +.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content, +.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content { border-bottom-left-radius: 0; } -.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content { +.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content, +.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content { border-bottom-right-radius: 0; } -.maplibregl-popup-track-pointer { +.maplibregl-popup-track-pointer, +.mapboxgl-popup-track-pointer { display: none; } -.maplibregl-popup-track-pointer * { +.maplibregl-popup-track-pointer *, +.mapboxgl-popup-track-pointer * { pointer-events: none; user-select: none; } -.maplibregl-map:hover .maplibregl-popup-track-pointer { +.maplibregl-map:hover .maplibregl-popup-track-pointer, +.mapboxgl-map:hover .mapboxgl-popup-track-pointer { display: flex; } -.maplibregl-map:active .maplibregl-popup-track-pointer { +.maplibregl-map:active .maplibregl-popup-track-pointer, +.mapboxgl-map:active .mapboxgl-popup-track-pointer { display: none; } -.maplibregl-marker { +.maplibregl-marker, +.mapboxgl-marker { position: absolute; top: 0; left: 0; will-change: transform; } -.maplibregl-user-location-dot { +.maplibregl-user-location-dot, +.mapboxgl-user-location-dot { background-color: #1da1f2; width: 15px; height: 15px; border-radius: 50%; } -.maplibregl-user-location-dot::before { +.maplibregl-user-location-dot::before, +.mapboxgl-user-location-dot::before { background-color: #1da1f2; content: ''; width: 15px; @@ -737,7 +881,8 @@ a.maplibregl-ctrl-logo.maplibregl-compact { animation: maplibregl-user-location-dot-pulse 2s infinite; } -.maplibregl-user-location-dot::after { +.maplibregl-user-location-dot::after, +.mapboxgl-user-location-dot::after { border-radius: 50%; border: 2px solid #fff; content: ''; @@ -768,15 +913,18 @@ a.maplibregl-ctrl-logo.maplibregl-compact { 100% { transform: scale(1); opacity: 0; } } -.maplibregl-user-location-dot-stale { +.maplibregl-user-location-dot-stale, +.mapboxgl-user-location-dot-stale { background-color: #aaa; } -.maplibregl-user-location-dot-stale::after { +.maplibregl-user-location-dot-stale::after, +.mapboxgl-user-location-dot-stale::after { display: none; } -.maplibregl-user-location-accuracy-circle { +.maplibregl-user-location-accuracy-circle, +.mapboxgl-user-location-accuracy-circle { background-color: #1da1f233; width: 1px; height: 1px; @@ -785,11 +933,15 @@ a.maplibregl-ctrl-logo.maplibregl-compact { .maplibregl-crosshair, .maplibregl-crosshair .maplibregl-interactive, -.maplibregl-crosshair .maplibregl-interactive:active { +.maplibregl-crosshair .maplibregl-interactive:active, +.mapboxgl-crosshair, +.mapboxgl-crosshair .mapboxgl-interactive, +.mapboxgl-crosshair .mapboxgl-interactive:active { cursor: crosshair; } -.maplibregl-boxzoom { +.maplibregl-boxzoom, +.mapboxgl-boxzoom { position: absolute; top: 0; left: 0; diff --git a/src/ui/anchor.js b/src/ui/anchor.js index 158d46c0d0..251b0904c5 100644 --- a/src/ui/anchor.js +++ b/src/ui/anchor.js @@ -26,7 +26,7 @@ export const anchorTranslate: {[_: Anchor]: string} = { export function applyAnchorClass(element: HTMLElement, anchor: Anchor, prefix: string) { const classList = element.classList; for (const key in anchorTranslate) { - classList.remove(`maplibregl-${prefix}-anchor-${key}`); + classList.remove(`maplibregl-${prefix}-anchor-${key}`, `mapboxgl-${prefix}-anchor-${key}`); } - classList.add(`maplibregl-${prefix}-anchor-${anchor}`); + classList.add(`maplibregl-${prefix}-anchor-${anchor}`, `mapboxgl-${prefix}-anchor-${anchor}`); } diff --git a/src/ui/control/attribution_control.js b/src/ui/control/attribution_control.js index 3c5c554154..a8dea88e48 100644 --- a/src/ui/control/attribution_control.js +++ b/src/ui/control/attribution_control.js @@ -54,16 +54,16 @@ class AttributionControl { const compact = this.options && this.options.compact; this._map = map; - this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-attrib'); - this._compactButton = DOM.create('button', 'maplibregl-ctrl-attrib-button', this._container); + this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib'); + this._compactButton = DOM.create('button', 'maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button', this._container); this._compactButton.addEventListener('click', this._toggleAttribution); this._compactButton.type = 'button'; this._setElementTitle(this._compactButton, 'ToggleAttribution'); - this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner', this._container); + this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner', this._container); this._innerContainer.setAttribute('role', 'list'); if (compact) { - this._container.classList.add('maplibregl-compact'); + this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } this._updateAttributions(); @@ -100,11 +100,11 @@ class AttributionControl { } _toggleAttribution() { - if (this._container.classList.contains('maplibregl-compact-show')) { - this._container.classList.remove('maplibregl-compact-show'); + if (this._container.classList.contains('maplibregl-compact-show') || this._container.classList.contains('mapboxgl-compact-show')) { + this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show'); this._compactButton.setAttribute('aria-pressed', 'false'); } else { - this._container.classList.add('maplibregl-compact-show'); + this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show'); this._compactButton.setAttribute('aria-pressed', 'true'); } } @@ -192,9 +192,9 @@ class AttributionControl { if (attributions.length) { this._innerContainer.innerHTML = attribHTML; - this._container.classList.remove('maplibregl-attrib-empty'); + this._container.classList.remove('maplibregl-attrib-empty', 'mapboxgl-attrib-empty'); } else { - this._container.classList.add('maplibregl-attrib-empty'); + this._container.classList.add('maplibregl-attrib-empty', 'mapboxgl-attrib-empty'); } // remove old DOM node from _editLink this._editLink = null; @@ -202,9 +202,9 @@ class AttributionControl { _updateCompact() { if (this._map.getCanvasContainer().offsetWidth <= 640) { - this._container.classList.add('maplibregl-compact'); + this._container.classList.add('maplibregl-compact', 'mapboxgl-compact'); } else { - this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show'); + this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show', 'mapboxgl-compact', 'mapboxgl-compact-show'); } } diff --git a/src/ui/control/fullscreen_control.js b/src/ui/control/fullscreen_control.js index fc719b42d5..3cad78b8b1 100644 --- a/src/ui/control/fullscreen_control.js +++ b/src/ui/control/fullscreen_control.js @@ -58,7 +58,7 @@ class FullscreenControl { onAdd(map: Map) { this._map = map; if (!this._container) this._container = this._map.getContainer(); - this._controlContainer = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group`); + this._controlContainer = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group`); if (this._checkFullscreenSupport()) { this._setupUI(); } else { @@ -84,8 +84,8 @@ class FullscreenControl { } _setupUI() { - const button = this._fullscreenButton = DOM.create('button', (`maplibregl-ctrl-fullscreen`), this._controlContainer); - DOM.create('span', `maplibregl-ctrl-icon`, button).setAttribute('aria-hidden', true); + 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); button.type = 'button'; this._updateTitle(); this._fullscreenButton.addEventListener('click', this._onClickFullscreen); @@ -116,7 +116,9 @@ class FullscreenControl { 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.js b/src/ui/control/geolocate_control.js index fa4bf1e992..f9adf876f2 100644 --- a/src/ui/control/geolocate_control.js +++ b/src/ui/control/geolocate_control.js @@ -127,7 +127,7 @@ class GeolocateControl extends Evented { onAdd(map: Map) { this._map = map; - this._container = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group`); + this._container = DOM.create('div', `maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group`); checkGeolocationSupport(this._setupUI); return this._container; } @@ -177,21 +177,21 @@ class GeolocateControl extends Evented { switch (this._watchState) { case 'WAITING_ACTIVE': this._watchState = 'ACTIVE_ERROR'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-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'); break; case 'ACTIVE_LOCK': this._watchState = 'ACTIVE_ERROR'; - 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'); + 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'); // turn marker grey break; case 'BACKGROUND': this._watchState = 'BACKGROUND_ERROR'; - 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'); + 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'); // turn marker grey break; case 'ACTIVE_ERROR': @@ -234,16 +234,16 @@ class GeolocateControl extends Evented { case 'ACTIVE_LOCK': case 'ACTIVE_ERROR': this._watchState = 'ACTIVE_LOCK'; - 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'); + 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'); break; case 'BACKGROUND': case 'BACKGROUND_ERROR': this._watchState = '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'); + 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'); break; default: assert(false, `Unexpected watchState ${this._watchState}`); @@ -262,7 +262,7 @@ class GeolocateControl extends Evented { } if (this.options.showUserLocation) { - this._dotElement.classList.remove('maplibregl-user-location-dot-stale'); + this._dotElement.classList.remove('maplibregl-user-location-dot-stale', 'mapboxgl-user-location-dot-stale'); } this.fire(new Event('geolocate', position)); @@ -334,11 +334,11 @@ class GeolocateControl extends Evented { if (error.code === 1) { // PERMISSION_DENIED this._watchState = 'OFF'; - 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.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.disabled = true; const title = this._map._getUIString('GeolocateControl.LocationNotAvailable'); this._geolocateButton.title = title; @@ -359,7 +359,7 @@ class GeolocateControl extends Evented { } if (this._watchState !== 'OFF' && this.options.showUserLocation) { - this._dotElement.classList.add('maplibregl-user-location-dot-stale'); + this._dotElement.classList.add('maplibregl-user-location-dot-stale', 'mapboxgl-user-location-dot-stale'); } this.fire(new Event('error', error)); @@ -374,8 +374,8 @@ class GeolocateControl extends Evented { _setupUI(supported: boolean) { this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault()); - this._geolocateButton = DOM.create('button', `maplibregl-ctrl-geolocate`, this._container); - DOM.create('span', `maplibregl-ctrl-icon`, this._geolocateButton).setAttribute('aria-hidden', true); + 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.type = 'button'; if (supported === false) { @@ -397,11 +397,11 @@ class GeolocateControl extends Evented { // 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'); + this._dotElement = DOM.create('div', 'maplibregl-user-location-dot mapboxgl-user-location-dot'); this._userLocationDotMarker = new Marker(this._dotElement); - this._circleElement = DOM.create('div', 'maplibregl-user-location-accuracy-circle'); + this._circleElement = DOM.create('div', 'maplibregl-user-location-accuracy-circle mapboxgl-user-location-accuracy-circle'); this._accuracyCircleMarker = new Marker({element: this._circleElement, pitchAlignment: 'map'}); if (this.options.trackUserLocation) this._watchState = 'OFF'; @@ -421,8 +421,8 @@ class GeolocateControl extends Evented { 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'); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active'); + 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.fire(new Event('trackuserlocationend')); } @@ -470,17 +470,17 @@ class GeolocateControl extends Evented { numberOfWatches--; noTimeout = false; this._watchState = 'OFF'; - 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.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.fire(new Event('trackuserlocationend')); break; case 'BACKGROUND': this._watchState = 'ACTIVE_LOCK'; - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); // set camera to last known location if (this._lastKnownPosition) this._updateCamera(this._lastKnownPosition); @@ -493,22 +493,22 @@ class GeolocateControl extends Evented { // incoming state setup switch (this._watchState) { case 'WAITING_ACTIVE': - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-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'); break; case 'ACTIVE_LOCK': - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active'); break; case 'ACTIVE_ERROR': - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error'); break; case 'BACKGROUND': - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background'); break; case 'BACKGROUND_ERROR': - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting'); - this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error'); break; case 'OFF': break; @@ -523,7 +523,7 @@ class GeolocateControl extends Evented { } 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'); + this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); this._geolocateButton.setAttribute('aria-pressed', 'true'); numberOfWatches++; @@ -555,7 +555,7 @@ class GeolocateControl extends Evented { window.navigator.geolocation.clearWatch(this._geolocationWatchID); this._geolocationWatchID = (undefined: any); - this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting'); + this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting'); this._geolocateButton.setAttribute('aria-pressed', 'false'); if (this.options.showUserLocation) { diff --git a/src/ui/control/logo_control.js b/src/ui/control/logo_control.js index d2a2e25461..709ae48aa2 100644 --- a/src/ui/control/logo_control.js +++ b/src/ui/control/logo_control.js @@ -24,8 +24,8 @@ class LogoControl { onAdd(map: Map) { this._map = map; - this._container = DOM.create('div', 'maplibregl-ctrl'); - const anchor = DOM.create('a', 'maplibregl-ctrl-logo'); + this._container = DOM.create('div', 'maplibregl-ctrl mapboxgl-ctrl'); + const anchor = DOM.create('a', 'maplibregl-ctrl-logo mapboxgl-ctrl-logo'); anchor.target = "_blank"; anchor.rel = "noopener nofollow"; anchor.href = "https://maplibre.org/"; @@ -78,9 +78,9 @@ class LogoControl { if (containerChildren.length) { const anchor = containerChildren[0]; if (this._map.getCanvasContainer().offsetWidth < 250) { - anchor.classList.add('maplibregl-compact'); + anchor.classList.add('maplibregl-compact', 'mapboxgl-compact'); } else { - anchor.classList.remove('maplibregl-compact'); + anchor.classList.remove('maplibregl-compact', 'mapboxgl-compact'); } } } diff --git a/src/ui/control/navigation_control.js b/src/ui/control/navigation_control.js index 2d4cff670f..3f762ae926 100644 --- a/src/ui/control/navigation_control.js +++ b/src/ui/control/navigation_control.js @@ -46,7 +46,7 @@ class NavigationControl { constructor(options: Options) { this.options = extend({}, defaultOptions, options); - this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group'); + this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group'); this._container.addEventListener('contextmenu', (e) => e.preventDefault()); if (this.options.showZoom) { @@ -54,23 +54,23 @@ class NavigationControl { '_setButtonTitle', '_updateZoomButtons' ], this); - 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); + 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); } if (this.options.showCompass) { bindAll([ '_rotateCompassArrow' ], this); - this._compass = this._createButton('maplibregl-ctrl-compass', (e) => { + this._compass = this._createButton('maplibregl-ctrl-compass mapboxgl-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', this._compass); + this._compassIcon = DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._compass); this._compassIcon.setAttribute('aria-hidden', true); } } diff --git a/src/ui/control/scale_control.js b/src/ui/control/scale_control.js index 5823023050..9bfef57cd1 100644 --- a/src/ui/control/scale_control.js +++ b/src/ui/control/scale_control.js @@ -57,7 +57,7 @@ class ScaleControl { onAdd(map: Map) { this._map = map; - this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale', map.getContainer()); + this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale mapboxgl-ctrl mapboxgl-ctrl-scale', map.getContainer()); this._map.on('move', this._onMove); this._onMove(); diff --git a/src/ui/handler/box_zoom.js b/src/ui/handler/box_zoom.js index b331c8e255..a7f1357c01 100644 --- a/src/ui/handler/box_zoom.js +++ b/src/ui/handler/box_zoom.js @@ -95,8 +95,8 @@ class BoxZoomHandler { this._lastPos = pos; if (!this._box) { - this._box = DOM.create('div', 'maplibregl-boxzoom', this._container); - this._container.classList.add('maplibregl-crosshair'); + this._box = DOM.create('div', 'maplibregl-boxzoom mapboxgl-boxzoom', this._container); + this._container.classList.add('maplibregl-crosshair', 'mapboxgl-crosshair'); this._fireEvent('boxzoomstart', e); } @@ -145,7 +145,7 @@ class BoxZoomHandler { reset() { this._active = false; - this._container.classList.remove('maplibregl-crosshair'); + this._container.classList.remove('maplibregl-crosshair', 'mapboxgl-crosshair'); if (this._box) { DOM.remove(this._box); diff --git a/src/ui/handler/shim/drag_pan.js b/src/ui/handler/shim/drag_pan.js index fbc4c63027..4cfbf85f03 100644 --- a/src/ui/handler/shim/drag_pan.js +++ b/src/ui/handler/shim/drag_pan.js @@ -53,7 +53,7 @@ export default class DragPanHandler { this._inertiaOptions = options || {}; this._mousePan.enable(); this._touchPan.enable(); - this._el.classList.add('maplibregl-touch-drag-pan'); + this._el.classList.add('maplibregl-touch-drag-pan', 'mapboxgl-touch-drag-pan'); } /** @@ -65,7 +65,7 @@ export default class DragPanHandler { disable() { this._mousePan.disable(); this._touchPan.disable(); - this._el.classList.remove('maplibregl-touch-drag-pan'); + this._el.classList.remove('maplibregl-touch-drag-pan', 'mapboxgl-touch-drag-pan'); } /** diff --git a/src/ui/handler/shim/touch_zoom_rotate.js b/src/ui/handler/shim/touch_zoom_rotate.js index 5162c77969..61b6e47f79 100644 --- a/src/ui/handler/shim/touch_zoom_rotate.js +++ b/src/ui/handler/shim/touch_zoom_rotate.js @@ -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'); + this._el.classList.add('maplibregl-touch-zoom-rotate', 'mapboxgl-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'); + this._el.classList.remove('maplibregl-touch-zoom-rotate', 'mapboxgl-touch-zoom-rotate'); } /** diff --git a/src/ui/map.js b/src/ui/map.js index cd4ec09f03..70a056176e 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -2284,14 +2284,14 @@ class Map extends Camera { _setupContainer() { const container = this._container; - container.classList.add('maplibregl-map'); + container.classList.add('maplibregl-map', 'mapboxgl-map'); - const canvasContainer = this._canvasContainer = DOM.create('div', 'maplibregl-canvas-container', container); + const canvasContainer = this._canvasContainer = DOM.create('div', 'maplibregl-canvas-container mapboxgl-canvas-container', container); if (this._interactive) { - canvasContainer.classList.add('maplibregl-interactive'); + canvasContainer.classList.add('maplibregl-interactive', 'mapboxgl-interactive'); } - this._canvas = DOM.create('canvas', 'maplibregl-canvas', canvasContainer); + this._canvas = DOM.create('canvas', 'maplibregl-canvas mapboxgl-canvas', canvasContainer); this._canvas.addEventListener('webglcontextlost', this._contextLost, false); this._canvas.addEventListener('webglcontextrestored', this._contextRestored, false); this._canvas.setAttribute('tabindex', '0'); @@ -2301,10 +2301,10 @@ class Map extends Camera { const dimensions = this._containerDimensions(); this._resizeCanvas(dimensions[0], dimensions[1]); - const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container', container); + const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container mapboxgl-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}`, controlContainer); + positions[positionName] = DOM.create('div', `maplibregl-ctrl-${positionName} mapboxgl-ctrl-${positionName}`, controlContainer); }); this._container.addEventListener('scroll', this._onMapScroll, false); @@ -2592,7 +2592,7 @@ class Map extends Camera { if (extension) extension.loseContext(); removeNode(this._canvasContainer); removeNode(this._controlContainer); - this._container.classList.remove('maplibregl-map'); + this._container.classList.remove('maplibregl-map', 'mapboxgl-map'); PerformanceUtils.clearMetrics(); diff --git a/src/ui/marker.js b/src/ui/marker.js index 7fe8adaf8f..85e2fbe6be 100644 --- a/src/ui/marker.js +++ b/src/ui/marker.js @@ -219,7 +219,7 @@ export default class Marker extends Evented { this._offset = Point.convert(options && options.offset || [0, 0]); } - this._element.classList.add('maplibregl-marker'); + this._element.classList.add('maplibregl-marker', 'mapboxgl-marker'); this._element.addEventListener('dragstart', (e: DragEvent) => { e.preventDefault(); }); diff --git a/src/ui/popup.js b/src/ui/popup.js index 435c826535..0dffa2dfba 100644 --- a/src/ui/popup.js +++ b/src/ui/popup.js @@ -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'); + this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); } - this._map._canvasContainer.classList.add('maplibregl-track-pointer'); + this._map._canvasContainer.classList.add('maplibregl-track-pointer', 'mapboxgl-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'); + this._container.classList.remove('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); } - this._map._canvasContainer.classList.remove('maplibregl-track-pointer'); + this._map._canvasContainer.classList.remove('maplibregl-track-pointer', 'mapboxgl-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'); + this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); } - this._map._canvasContainer.classList.add('maplibregl-track-pointer'); + this._map._canvasContainer.classList.add('maplibregl-track-pointer', 'mapboxgl-track-pointer'); } return this; @@ -419,7 +419,7 @@ export default class Popup extends Evented { } } } else { - this._content = DOM.create('div', 'maplibregl-popup-content', this._container); + this._content = DOM.create('div', 'maplibregl-popup-content mapboxgl-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', this._content); + this._closeButton = DOM.create('button', 'maplibregl-popup-close-button mapboxgl-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', this._map.getContainer()); - this._tip = DOM.create('div', 'maplibregl-popup-tip', 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.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'); + this._container.classList.add('maplibregl-popup-track-pointer', 'mapboxgl-popup-track-pointer'); } } diff --git a/test/browser/util/browser.js b/test/browser/util/browser.js index 997e0f1b10..01b8cd376d 100644 --- a/test/browser/util/browser.js +++ b/test/browser/util/browser.js @@ -50,7 +50,7 @@ async function getMapCanvas(url) { } }); - return browser.driver.findElement(By.className('maplibregl-canvas')); + return browser.driver.findElement(By.className('maplibregl-canvas mapboxgl-canvas')); } let server = null; diff --git a/yarn.lock b/yarn.lock index 79c8677d16..4128c627ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2365,9 +2365,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001036: - version "1.0.30001037" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001037.tgz#cf666560b14f8dfa18abc235db1ef2699273af6e" - integrity sha512-qQP40FzWQ1i9RTjxppOUnpM8OwTBFL5DQbjoR9Az32EtM7YUZOw9orFO6rj1C+xWAGzz+X3bUe09Jf5Ep+zpuA== + version "1.0.30001243" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001243.tgz" + integrity sha512-vNxw9mkTBtkmLFnJRv/2rhs1yufpDfCkBZexG3Y0xdOH2Z/eE/85E4Dl5j1YUN34nZVsSp6vVRFQRrez9wJMRA== canvas@^2.6.1: version "2.6.1"