MapPin

mappin-1779394026016.tsx

'use client'
import { useState } from 'react'

const LOCATIONS = [
  { id:1, name:'Paris Office', address:'15 Rue de la Paix', x:30, y:25, type:'office' },
  { id:2, name:'Lyon Branch', address:'3 Place Bellecour', x:55, y:55, type:'branch' },
  { id:3, name:'Marseille HQ', address:'1 Quai du Port', x:65, y:78, type:'hq' },
]
const TYPES = { office:'🏢', branch:'🏪', hq:'🏛️' }

export default function MapPin({ locations = LOCATIONS }) {
  const [selected, setSelected] = useState(null)
  return (
    <div style={{ position:'relative', width:'100%', maxWidth:'400px' }}>
      <div style={{
        height:'240px', background:'linear-gradient(135deg,#dbeafe,#e0f2fe,#d1fae5)',
        borderRadius:'16px', position:'relative', overflow:'hidden',
        border:'2px solid #e2e8f0',
      }}>
        <div style={{ position:'absolute', inset:0, opacity:0.3, backgroundImage:'linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px)', backgroundSize:'30px 30px' }} />
        {locations.map(loc => (
          <button key={loc.id} onClick={() => setSelected(selected?.id===loc.id ? null : loc)} style={{
            position:'absolute', left:loc.x+'%', top:loc.y+'%',
            transform:'translate(-50%,-100%)', background:'none', border:'none', cursor:'pointer',
            fontSize:'28px', filter:selected?.id===loc.id ? 'none' : 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))',
          }}>
            {TYPES[loc.type]}
            {selected?.id===loc.id && (
              <div style={{
                position:'absolute', bottom:'calc(100% + 4px)', left:'50%', transform:'translateX(-50%)',
                background:'#1e1e2e', color:'#fff', padding:'6px 10px', borderRadius:'8px',
                fontSize:'11px', fontWeight:600, whiteSpace:'nowrap', boxShadow:'0 4px 12px rgba(0,0,0,0.3)',
              }}>{loc.name}</div>
            )}
          </button>
        ))}
      </div>
      {selected && (
        <div style={{ marginTop:'12px', background:'#fff', borderRadius:'12px', padding:'14px 16px', boxShadow:'0 2px 12px rgba(0,0,0,0.08)' }}>
          <div style={{ fontWeight:700, color:'#1e293b', fontSize:'15px', marginBottom:'4px' }}>
            {TYPES[selected.type]} {selected.name}
          </div>
          <div style={{ color:'#64748b', fontSize:'13px' }}>{selected.address}</div>
        </div>
      )}
    </div>
  )
}

Component info

CategoryMaps

Frameworkreact

TierFREE

Copies0

About

Interactive map pin cluster with location cards and tooltips

More from Maps

'use client'
import { useState } from 'react'

const LOCATIONS = [
  { name: 'Empire UI HQ', address: '42 Rue de Rivoli, 75001 Paris, France', phone: '+33 1 23 45 67 89', hours: 'Mon-Fri 9am-6pm CET', lat: 48.8566, lng: 2.3522, type: 'office' },
  {

LocationCard

Maps

'use client';
import { useState, useEffect } from 'react';

export default function LiveActivityMap() {
  const cols = 24, rows = 7;
  const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
  const [data, setData] = useState(() =>
    Array.

LiveActivityMap

Maps