custom.js

Separate Tree, Green and White States

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://leafletjs.com/examples/choropleth/us-states.js"></script>

<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(stateCategory) {
      return stateCategory === 'Develop in' ? '#7fae46' : 'white';
    }

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

      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 categories = element.getAttribute('data-categories');
        const state = element.getAttribute('data-state');
        const tree = element.getAttribute('data-tree');

        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, categories, state, tree });
          if (state) {
            statesCategories[state] = categories;
          }
        }
      });

      return { locations, statesCategories };
    }

    const initializeMarkers = () => {
      const { locations, statesCategories } = getLocationData();

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

      var usGeoJsonLayer = L.geoJson(statesData, {
        style: function(feature) {
          const stateName = feature.properties.name;
          const stateCategory = statesCategories[stateName] || null;

          return {
            color: 'black',
            fillColor: getUSColor(stateCategory),
            weight: 2,
            fillOpacity: 1
          };
        },
        onEachFeature: function(feature, layer) {
          layer.on({
            mouseover: function(e) {
              var layer = e.target;
              layer.setStyle({
                weight: 5,
                color: '#EAF6FF',
                dashArray: '',
                fillOpacity: 1,
                cursor: 'pointer'
              });

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

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

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

      locations.forEach(location => {
        let iconUrl;

        // Check if data-tree is 'yes'
        if (location.tree === 'Yes') {
          iconUrl = 'https://uploads-ssl.webflow.com/6682c30b5e1a721ffda8b15d/669e5107b3da0fec4b2b1a80_map-pin.svg'; // Tree icon URL
        } else {
          return; // Agar tree 'yes' nahi hai, to marker nahi dikhana
        }

        var mapIcon = L.icon({
          iconUrl: iconUrl,
          iconSize: [38, 38]
        });

        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>