Custom Map with Popup and Hover in Webflow

script.js

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://leafletjs.com/examples/choropleth/us-states.js"></script> <!-- US States GeoJSON -->
<script src="https://unpkg.com/leaflet-ajax/dist/leaflet.ajax.min.js"></script> <!-- For loading external GeoJSON -->

<script>
  document.addEventListener("DOMContentLoaded", function() {
  var map = L.map('map', {
    center: [37.8, -96],
    zoom: 5,
    minZoom: 5,
    maxZoom: 6
  });

  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 6,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(map);

  function getUSColor() {
    return '#A0D1FA';
  }

  function usStyle(feature) {
    return {
      fillColor: getUSColor(),
      weight: 2,
      opacity: 1,
      color: 'white',
      dashArray: '3',
      fillOpacity: 1
    };
  }

  var usGeoJsonLayer = L.geoJson(statesData, {
    style: usStyle,
    onEachFeature: function(feature, layer) {
      layer.on({
        mouseover: function(e) {
          var layer = e.target;
          layer.setStyle({
            weight: 5,
            color: '#EAF6FF',
            dashArray: '',
            fillOpacity: 1,
            cursor: 'pointer'
          });

          // Show state name in Leaflet popup
          var hoverPopupContent = `<div class="hover_popup">
            <b>${feature.properties.name}</b>
          </div>`;

          layer.bindPopup(hoverPopupContent, { closeOnClick: false, className: 'hover_popup_container' }).openPopup();

          // Adjust position of the popup
          var latlng = e.latlng;
          var point = map.latLngToContainerPoint(latlng);
          var popupContainer = document.querySelector('.leaflet-popup-content');
          if (popupContainer) {
            popupContainer.style.left = `${point.x}px`;
            popupContainer.style.top = `${point.y}px`;
          }

          layer.bringToFront();
        },
        mouseout: function(e) {
          var layer = e.target;
          usGeoJsonLayer.resetStyle(layer);

          // Close the popup
          layer.closePopup();
        }
      });
    }
  }).addTo(map);

  var worldGeoJsonLayer = new L.GeoJSON.AJAX("https://raw.githubusercontent.com/samayo/country-json/master/src/country-by-region-in-world.json", {
    style: function(feature) {
      return {
        fillColor: 'red',
        weight: 1,
        opacity: 1,
        color: 'black',
        fillOpacity: 0.5
      };
    },
    onEachFeature: function(feature, layer) {
      layer.on({
        mouseover: function(e) {
          var layer = e.target;
          layer.setStyle({
            weight: 3,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7,
            cursor: 'pointer'
          });
          layer.bringToFront();
        },
        mouseout: function(e) {
          worldGeoJsonLayer.resetStyle(e.target);
        },
        click: function(e) {
          var popupContent = '<b>' + feature.properties.name + '</b>';
          layer.bindPopup(popupContent).openPopup();
        }
      });
    }
  });
  worldGeoJsonLayer.addTo(map);

  function getLocationData() {
    const locationElements = document.querySelectorAll('#location-data .location');
    const locations = [];

    locationElements.forEach(element => {
      const name = element.getAttribute('data-name');
      const lat = parseFloat(element.getAttribute('data-lat'));
      const lng = parseFloat(element.getAttribute('data-lng'));
      const location = element.getAttribute('data-location');
      const size = element.getAttribute('data-size');
      const url = element.getAttribute('data-url');

      const style = element.getAttribute('style');
      const image = style.match(/background-image:\s*url\(["']?([^"']+)["']?\)/)[1];

      if (!isNaN(lat) && !isNaN(lng)) {
        locations.push({ name, lat, lng, image, location, size, url });
      }
    });

    return locations;
  }

  const initializeMarkers = () => {
    const locations = getLocationData();

    if (locations.length === 0) {
      console.error('No locations found.');
      return;
    }

    var mapIcon = L.icon({
      iconUrl: 'https://uploads-ssl.webflow.com/6682c30b5e1a721ffda8b15d/669e5107b3da0fec4b2b1a80_map-pin.svg',
      iconSize: [38, 38]
    });

    locations.forEach(location => {
      const marker = L.marker([location.lat, location.lng], { icon: mapIcon }).addTo(map)
        .bindPopup(`
          <div class="map_popup">
            <img src="${location.image}" alt="${location.name}" style="width: 100%; height: auto;" />
            <div class="map_data">
              <h3>${location.name}</h3>
              <p><i class="fa-solid fa-briefcase"></i> ${location.location}</p>
              <p><i class="fa-solid fa-bolt-lightning"></i> ${location.size}</p>
            </div>
          </div>
        `);
    });
  };

  initializeMarkers();
});

</script>

style.css

// Map_Container ki class div ma add karni ha

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />

<style>
  #map { height: 800px; }

  .hover_popup_container {
    width: 200px; /* Adjust as needed */
  }
  .hover_popup_container .leaflet-popup-close-button {display:none!important;}

  .hover_popup {
    font-size: 16px;
    color: #000;
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    font-family: 'Aeoniktrial', sans-serif!important;
    border-radius:10px;
  }

  .map_popup img {
    height: 15rem;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
  }

  .leaflet-popup-content {
    width:auto!important;
    margin:0!important;
  }
  .leaflet-popup-content-wrapper {
    border-radius: 1.25rem!important;
    padding: 0!important;
  }
  .map_popup {
    width:450px;
  }
  .hover_popup {
    width: 200px;
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    /*display: none;  Initially hidden */
    z-index: 1000;
    pointer-events: none; /* Prevent interaction */
    font-family: "Poppins";
    font-size: 16px;
    color: #000;
  }
  .map_data {
    padding: 0 20px 20px;
  }
  .map_data h3 {
    font-weight: 700;
    color: #151515;
  }
  .leaflet-popup-content p {
    font-size: 18px!important;
  }
  .leaflet-popup-content i,
  .leaflet-popup-content a {
    color: #7fae46;
    margin-right:10px;
    text-decoration:none!important;
  }
  .leaflet-container a.leaflet-popup-close-button {    
    background: #7fae46;
    padding: 0;
    color: #fff;
    border-radius: 100%;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    top: 15px;
    right: 15px;
  }
  .leaflet-container a.leaflet-popup-close-button:hover {
    color: #000;
  }
  .map_popup img {
    height: 15rem!important;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 1.25rem;
    border-top-right-radius: 1.25rem;
  }
  path {
    stroke: #fff;
    fill: #A0D1FA !important;
    transition: fill .4s ease;
    transform-origin: center center;
  }
  .custom-marker-icon {
    width: 30px;
    height: 30px;
    background: url('https://www.nicepng.com/png/full/37-373764_javascript-adding-a-custom-map-marker-icon-to.png') no-repeat center center;
    background-size: contain;
  }
  #us-map {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #details-box {
    width:215px;
    height:225px;
    opacity: 0%;
    padding: 1rem;
    border-radius: 8px;
    font-size: 24px;
    position: fixed;
    color: white;
    font-family: "Poppins";
    transform: translateX(-50%);
    transition: opacity .4s ease;
    z-index: 1;
    background-size: cover; /* Ensures the background image covers the box */
  }
  .legend {
    line-height: 18px;
    color: #555;
  }
  .legend i {
    width: 18px;
    height: 18px;
    float: left;
    margin-right: 8px;
    opacity: 0.7;
  }
  .info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
  }
  .info h4 {
    margin: 0 0 5px;
    color: #777;
  }
</style>