Mapbox custom popup window

by amay077

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="map" style="position: absolute; top: 0; bottom: 0; width: 100%;"></div>

CSS

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;
}

JavaScript

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({ 
  //offset: 25, 
  //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();