/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect, useRef, useCallback } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; // Commodities specific to Bangladesh const COMMODITIES = [ 'Rice', 'Potato', 'Onion', 'Lentils', 'Chicken', 'Egg', 'Wheat', 'Sugar' ]; // Shop types common in Bangladesh const SHOP_TYPES = [ 'Local Market', 'Supermarket', 'Wholesale Market', 'Street Vendor' ]; // Default location for Dhaka const DHAKA_LOCATION = { latitude: 23.8103, longitude: 90.4125 }; // Utility function to dynamically load scripts function loadScript(src) { return new Promise((resolve, reject) => { if (typeof window === 'undefined') { reject(new Error('Window is not defined')); return; } const script = document.createElement('script'); script.src = src; script.async = true; script.onload = () => resolve(script); script.onerror = (error) => reject(error); document.head.appendChild(script); }); } // Utility function to dynamically load CSS function loadCSS(href) { return new Promise((resolve, reject) => { if (typeof document === 'undefined') { reject(new Error('Document is not defined')); return; } const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; link.onload = () => resolve(link); link.onerror = (error) => reject(error); document.head.appendChild(link); }); } function MapComponent({ locations, prices, selectedCommodity, defaultLocation, onLocationFound, onLocationSelect }) { const mapRef = useRef(null); const [searchQuery, setSearchQuery] = useState(''); const [mapInstance, setMapInstance] = useState(null); const [isLeafletLoaded, setIsLeafletLoaded] = useState(false); const [mapLoadError, setMapLoadError] = useState(null); // Load Leaflet dependencies useEffect(() => { const loadLeafletDependencies = async () => { try { // Load CSS first await Promise.all([ loadCSS('https://unpkg.com/leaflet@1.7.1/dist/leaflet.css'), loadCSS('https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css') ]); // Load scripts await Promise.all([ loadScript('https://unpkg.com/leaflet@1.7.1/dist/leaflet.js'), loadScript('https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js') ]); // Set Leaflet as loaded setIsLeafletLoaded(true); } catch (error) { console.error('Failed to load Leaflet dependencies', error); setMapLoadError(error); } }; // Only load if in browser if (typeof window !== 'undefined') { loadLeafletDependencies(); } }, []); // Search functionality const handleSearch = useCallback(async () => { if (!searchQuery || !mapInstance || !window.L) return; try { const response = await fetch( `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(searchQuery)}&countrycodes=BD` ); const results = await response.json(); if (results && results.length > 0) { const firstResult = results[0]; const lat = parseFloat(firstResult.lat); const lon = parseFloat(firstResult.lon); // Remove previous search marker if exists if (window.searchMarker) { mapInstance.removeLayer(window.searchMarker); } // Create a new marker for the searched location const searchMarker = window.L.marker([lat, lon], { icon: window.L.divIcon({ className: 'search-location-marker', html: `

`, iconSize: [20, 20] }) }).addTo(mapInstance); // Store the marker globally to remove it later window.searchMarker = searchMarker; // Center map on searched location mapInstance.setView([lat, lon], 15); // Create a popup for the searched location window.L.popup() .setLatLng([lat, lon]) .setContent(` `) .openOn(mapInstance); // Add event listener to confirm location setTimeout(() => { const confirmBtn = document.querySelector('.confirm-location-btn'); if (confirmBtn) { confirmBtn.onclick = () => { onLocationSelect({ id: Date.now(), name: firstResult.display_name, latitude: lat, longitude: lon, shopType: 'Unknown' }); }; } }, 100); } } catch (error) { console.error('Search failed', error); } }, [searchQuery, mapInstance, onLocationSelect]); // Map initialization effect useEffect(() => { // Ensure Leaflet is loaded and map container exists if (isLeafletLoaded && window.L && mapRef.current && !mapInstance) { try { const L = window.L; const map = L.map(mapRef.current).setView( [defaultLocation.latitude, defaultLocation.longitude], 7 ); // Store map instance setMapInstance(map); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors' }).addTo(map); // Create marker cluster group const MarkerCluster = window.L.markerClusterGroup(); const markerGroup = MarkerCluster.addTo(map); // Add existing location markers locations?.forEach(location => { const marker = L.marker([location.latitude, location.longitude]) .bindPopup(` ${location.name}
Type: ${location.shopType}
Address: ${location.address || 'No address'}
`) .on('popupopen', () => { const selectBtn = document.querySelector('.select-location-btn'); if (selectBtn) { selectBtn.onclick = () => onLocationSelect(location); } }); markerGroup.addLayer(marker); }); // Add click event to select location map.on('click', (e) => { const { lat, lng } = e.latlng; // Remove previous selected location marker if exists if (window.selectedMarker) { map.removeLayer(window.selectedMarker); } // Create a new marker for the selected location const selectedMarker = L.marker([lat, lng], { icon: L.divIcon({ className: 'selected-location-marker', html: `

`, iconSize: [20, 20] }) }).addTo(map); // Store the marker globally to remove it later window.selectedMarker = selectedMarker; // Create a detailed popup for location selection L.popup() .setLatLng(e.latlng) .setContent(` `) .openOn(map); // Add event listener to confirm location setTimeout(() => { const confirmBtn = document.querySelector('.confirm-location-btn'); if (confirmBtn) { confirmBtn.onclick = () => { const locationName = document.getElementById('location-name').value || 'Selected Location'; const locationType = document.getElementById('location-type').value || 'Unknown'; const locationDetails = { id: Date.now(), name: locationName, latitude: lat, longitude: lng, shopType: locationType }; onLocationSelect(locationDetails); }; } }, 100); }); // Try to get user's current location if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition( (position) => { const { latitude, longitude } = position.coords; map.setView([latitude, longitude], 10); onLocationFound({ latitude, longitude }); }, () => { onLocationFound(defaultLocation); } ); } else { onLocationFound(defaultLocation); } return () => { map.remove(); }; } catch (error) { console.error('Map initialization error', error); setMapLoadError(error); } } }, [isLeafletLoaded, locations, defaultLocation, onLocationFound, onLocationSelect, mapInstance]); // Render error state if map loading fails if (mapLoadError) { return (

Map Loading Failed

Unable to load map. Please check your internet connection.

); } return (

setSearchQuery(e.target.value)} />

); } // CSS remains the same as in the previous implementation const css = ` /* Previous CSS remains the same */ .location-selection-popup { min-width: 250px; } .location-selection-popup .location-info { margin-bottom: 10px; background-color: #f4f4f4; padding: 10px; border-radius: 5px; } .location-selection-popup .location-input { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } .location-selection-popup input, .location-selection-popup select { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } .location-selection-popup .confirm-location-btn { width: 100%; padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; } .selected-location-marker, .search-location-marker { z-index: 1000; } .map-error { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; text-align: center; padding: 20px; } `; // Rest of the code remains the same as in the previous implementation

Searched Location

Location Details

Map Loading Failed

Bossbaby