팝업 배경색 사용자 정의

태그를 클릭하거나 원하는 위치에 팝업을 표시할 수 있습니다.
기본 배경색은 '흰색' 이지만 css를 통해 사용자 정의할 수 있습니다.

이런 모양으로 만들 수 있어요.

Mapbox custom popup window - JSFiddle - Code Playground

const opt = {
  container: 'map',
  style: {
    version: 8,
    sources: {
      OSM: {
        type: "raster",
        tiles: [
          "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
        ],
        tileSize: 256,
        attribution:
        "OpenStreetMap",
      },
    },
    layers: [{
      id: "BASEMAP",
      type: "raster",
      source: "OSM",
      minzoom: 0,
      maxzoom: 18,
    }],
  },      
};

opt.center = [138.73072, 35.36286];
opt.zoom = 13;
const map = new mapboxgl.Map(opt);

map.addControl(new mapboxgl.NavigationControl());

const html = `<H3>富士山</H3>
<span>
富士山（ふじさん、英語: Mount Fuji）は、静岡県（富士宮市、裾野市、富士市、御殿場市、駿東郡小山町）と、山梨県（富士吉田市、南都留郡鳴沢村）に跨る活火山である。標高3776.12 m、日本最高峰（剣ヶ峰）の独立峰で、その優美な風貌は日本国外でも日本の象徴として広く知られている。<a href='https://ja.wikipedia.org/wiki/%E5%AF%8C%E5%A3%AB%E5%B1%B1' target="_blank">Wikipedia より</a>
<span>
`;

// create the popup
const popup = new mapboxgl.Popup({ 
  //anchor: 'bottom',
  className: 'my-class', 
  closeButton: false,
})
.setMaxWidth('400px')
.setHTML(html);

// create the marker
new mapboxgl.Marker()
  .setLngLat([138.73072, 35.36286])
  .setPopup(popup) // sets a popup on this marker
  .addTo(map)
  .togglePopup();

body { margin: 0; padding: 0; }

/* $popupBkColor: darkblue; */

.my-class {
  color: white;  
}

.my-class .mapboxgl-popup-content {
  background-color: darkblue;
  box-shadow: 6px 6px 6px rgba(1,1,1,.4);
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
  align-self: center;
  border-bottom: none;
  border-top-color: darkblue;
}

.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
  align-self: center;
  border-top: none;
  border-bottom-color: darkblue;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
  align-self: center;
  border-left: none;
  border-right-color: darkblue;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
  align-self: center;
  border-right: none;
  border-left-color: darkblue;
}

.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip {
  align-self: flex-start;
  border-top: none;
  border-left: none;
  border-bottom-color: darkblue;
}

.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
  align-self: flex-end;
  border-top: none;
  border-right: none;
  border-bottom-color: darkblue;
}

.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
  align-self: flex-end;
  border-bottom: none;
  border-right: none;
  border-top-color: darkblue;
}

.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip {
  align-self: flex-start;
  border-bottom: none;
  border-left: none;
  border-top-color: darkblue;
}

해설

Popup 생성 시 옵션className: 'my-class' 등은 모든 종류의 이름을 지정할 수 있습니다.
그러나 이는 전체 범례(컨텐트 섹션 및 화살표≥삼각형 연결> 섹션)를 나타냅니다.
이 반의 백그라운드-color를 지정해도 기대하지 않을 것이다.
이미 정해진 도례 디자인을 완전히 버리고 오리지널 도례를 설정할 때 사용한다.
팝업의 내용 부분은 .mapboxgl-popup-content 클래스를 덮어써서 배경색을 변경할 수 있습니다.
화살표<삼각형 연결> 부분은 좀 번거롭습니다. 팝업된 8개 방향에 따라bottom,left,top,right,top-left,bottom-right,bottom-left의 각 종류를 덮어써야 합니다.Popup의anchor를 지정하지 않으면 팝업의 출현 방향이 가변적으로 변하기 때문에 8개 방향의 모든 CSS 정의가 필요합니다(이하bottom-right의 예).
anchor가 bottom로 설정되었을 때 팝업은 위에만 표시되고 CSS 덮어쓰기는bottom만 표시됩니다.
팝업 너비는 Popup.setMaxWidth('400px')로 확장할 수 있습니다.높이는 내용을 보고 정해야 하기 때문에 제한하면 스스로 해야 한다.

기몽

anchor의 CSS 선택기

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {

그렇지만

.my-class .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {

이렇게 쓰려고 그랬지?효과가 없었어요.
"로고 하나만 팝업, 배경색 바꾸기"라고 하면 안 돼요?그렇게 생각해요.

참고 자료

클릭 시 팝업

태그 인스턴스에 팝업 추가