Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions src/css/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,15 @@
font-size: 12px;
}

/* Prevent themes that set svg { max-width: 100%; height: auto; } from
collapsing Leaflet renderer SVGs to 0×0. The pane <div> is position:absolute
with no explicit width, so 100% resolves to 0, wiping out the SVG dimensions
that Leaflet sets via attributes. */
.leaflet-pane > svg {
max-width: none !important;
height: auto !important;
}

/* map toggle work with twenty twenty template */

/* .leaflet-control-layers-list {
Expand Down
7 changes: 6 additions & 1 deletion src/map-engine/Spotmap.ts
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,12 @@ export class Spotmap {
this.layers,
dbg
);
const canvasRenderer = L.svg( { pane: 'markerPane' } );
// Use a dedicated pane (z-index 450, above overlayPane 400) so that
// circle-dot markers render above polylines. Avoids theme CSS targeting
// .leaflet-marker-pane which can set the SVG to 0×0.
this.map.createPane( 'spotmapCirclePane' );
( this.map.getPane( 'spotmapCirclePane' ) as HTMLElement ).style.zIndex = '450';
const canvasRenderer = L.svg( { pane: 'spotmapCirclePane' } );
this.markerManager = new MarkerManager(
this.map,
this.layers,
Expand Down
6 changes: 6 additions & 0 deletions src/map-engine/__tests__/Spotmap.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ let capturedGpxEmitter: ReturnType< typeof createEventEmitter > | null;
function buildLeafletMock() {
capturedGpxEmitter = null;

const mockPane = Object.assign( document.createElement( 'div' ), {
style: { zIndex: '' },
} );

const mockMap = {
scrollWheelZoom: { enable: jest.fn(), disable: jest.fn() },
once: jest.fn(),
Expand All @@ -69,6 +73,8 @@ function buildLeafletMock() {
invalidateSize: jest.fn(),
removeLayer: jest.fn(),
attributionControl: { setPrefix: jest.fn() },
createPane: jest.fn(),
getPane: jest.fn().mockReturnValue( mockPane ),
};

const mockLayerControl = {
Expand Down
Loading