// ── capitaldepas.com · Map Section (Mapbox GL JS) ────────────────── // // Mapa interactivo con todos los desarrollos como pins. Tambien exporta // MiniMapa para usarse dentro del detalle de un proyecto. // El token de Mapbox se carga async desde /api/config (window.MAPBOX_TOKEN_READY). // ────────────────────────────────────────────────────────────────────────────────── const MAPBOX_STYLE = 'mapbox://styles/mapbox/light-v11'; const MX_CENTER = [-99.1332, 19.4326]; const MX_BOUNDS = [[-118, 14], [-86, 33]]; function applyMapboxToken(tok) { if (typeof mapboxgl === 'undefined') return false; if (!mapboxgl.accessToken && tok) mapboxgl.accessToken = tok; return !!mapboxgl.accessToken; } // Hook: resuelve cuando window.MAPBOX_TOKEN esta listo (o falla). function useMapboxReady() { const [ready, setReady] = React.useState( typeof mapboxgl !== 'undefined' && !!(window.MAPBOX_TOKEN || mapboxgl.accessToken) ); React.useEffect(() => { if (ready) { applyMapboxToken(window.MAPBOX_TOKEN); return; } let cancelled = false; function tryReady() { if (cancelled) return; if (typeof mapboxgl !== 'undefined' && (window.MAPBOX_TOKEN || mapboxgl.accessToken)) { applyMapboxToken(window.MAPBOX_TOKEN); setReady(true); return true; } return false; } if (window.MAPBOX_TOKEN_READY && typeof window.MAPBOX_TOKEN_READY.then === 'function') { window.MAPBOX_TOKEN_READY.then(() => tryReady()); } // Polling de seguridad por si el promise resolvio antes del mount const iv = setInterval(() => { if (tryReady()) clearInterval(iv); }, 250); setTimeout(() => clearInterval(iv), 8000); return () => { cancelled = true; clearInterval(iv); }; }, [ready]); return ready; } // ── MapSection: vista general con todos los pins ────────────────── const MapSection = ({ setPage, setSelectedProperty }) => { const containerRef = React.useRef(null); const mapRef = React.useRef(null); const markersRef = React.useRef([]); const [ready, setReady] = React.useState(false); const [ref, vis] = useScrollReveal(); const tokenReady = useMapboxReady(); React.useEffect(() => { if (!containerRef.current || mapRef.current) return; if (!tokenReady) return; if (!applyMapboxToken(window.MAPBOX_TOKEN)) return; const map = new mapboxgl.Map({ container: containerRef.current, style: MAPBOX_STYLE, center: MX_CENTER, zoom: 4.4, maxBounds: [[-130, 5], [-75, 38]], attributionControl: false, cooperativeGestures: true, }); map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-right'); map.addControl(new mapboxgl.AttributionControl({ compact: true })); mapRef.current = map; map.on('load', () => setReady(true)); return () => { try { map.remove(); } catch(e){} mapRef.current = null; }; }, [tokenReady]); useDataVersion(); React.useEffect(() => { const map = mapRef.current; if (!map || !ready) return; markersRef.current.forEach(m => m.remove()); markersRef.current = []; const valid = PROPERTIES.filter(p => p.hasCoords && Number.isFinite(p.lat) && Number.isFinite(p.lng)); if (valid.length === 0) return; const bounds = new mapboxgl.LngLatBounds(); valid.forEach(p => { const el = document.createElement('div'); el.style.cssText = 'width:32px;height:32px;border-radius:50% 50% 50% 0;background:#1550E8;border:3px solid #fff;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(21,80,232,0.45);cursor:pointer;display:flex;align-items:center;justify-content:center;'; const dot = document.createElement('div'); dot.style.cssText = 'width:10px;height:10px;border-radius:50%;background:#fff;transform:rotate(45deg);'; el.appendChild(dot); const popup = new mapboxgl.Popup({ offset: 28, closeButton: false }) .setHTML( '
' + '
' + p.name + '
' + '
' + (p.location || '') + '
' + '
' + '' + (p.priceStr || '') + '' + 'Ver →' + '
' + '
' ); const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' }) .setLngLat([p.lng, p.lat]).setPopup(popup).addTo(map); markersRef.current.push(marker); bounds.extend([p.lng, p.lat]); popup.on('open', () => { setTimeout(() => { const link = document.querySelector('.capdepas-popup-link[data-slug="' + p.slug + '"]'); if (link) link.onclick = () => { setSelectedProperty && setSelectedProperty(p); setPage && setPage('detail'); }; }, 0); }); }); if (valid.length === 1) { map.flyTo({ center: [valid[0].lng, valid[0].lat], zoom: 12, essential: true }); } else { map.fitBounds(bounds, { padding: 60, duration: 800, maxZoom: 11 }); } }, [ready, vis, PROPERTIES.length]); return (
Cobertura Nacional

Proyectos en todo México

Haz clic en un pin para ver el desarrollo.

); }; // ── MiniMapa: para usar dentro del detalle de un proyecto ─────────────── const MiniMapa = ({ prop, height = 280 }) => { const containerRef = React.useRef(null); const mapRef = React.useRef(null); const tokenReady = useMapboxReady(); React.useEffect(() => { if (!containerRef.current || !prop || !tokenReady) return; if (!applyMapboxToken(window.MAPBOX_TOKEN)) return; if (mapRef.current) { try { mapRef.current.remove(); } catch(e){} mapRef.current = null; } if (!prop.hasCoords || !Number.isFinite(prop.lat) || !Number.isFinite(prop.lng)) return; const map = new mapboxgl.Map({ container: containerRef.current, style: MAPBOX_STYLE, center: [prop.lng, prop.lat], zoom: 14, attributionControl: false, interactive: true, cooperativeGestures: true, }); map.addControl(new mapboxgl.NavigationControl({ showCompass: false }), 'top-right'); map.addControl(new mapboxgl.AttributionControl({ compact: true })); const el = document.createElement('div'); el.style.cssText = 'width:32px;height:32px;border-radius:50% 50% 50% 0;background:#1550E8;border:3px solid #fff;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(21,80,232,0.45);'; new mapboxgl.Marker({ element: el, anchor: 'bottom' }).setLngLat([prop.lng, prop.lat]).addTo(map); mapRef.current = map; return () => { try { map.remove(); } catch(e){} mapRef.current = null; }; }, [tokenReady, prop && prop.slug, prop && prop.lat, prop && prop.lng]); if (!prop) return null; if (!prop.hasCoords) { return (
Ubicación del desarrollo: {prop.location}
); } return (
); }; Object.assign(window, { MapSection, MiniMapa });