Interactive Map

Component 341

About

An interactive GPS map with multiple visualization styles and custom map markers

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Interactive Map to your project and fits it to your theme.

Code

How Interactive Map is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React, { useState } from "react";
import { AdvancedMap } from "@/components/ui/interactive-map";

export default function DemoOne() {
  const [markers, setMarkers] = useState([
    {
      id: 1,
      position: [51.505, -0.09],
      color: "blue",
      size: "medium",
      popup: {
        title: "London",
        content: "Capital of England",
        image:
          "https://cdn.21st.dev/assets/localized/2a96f091fa7b599f6752c827c4d5ba36fa15456d4d3a80a9aa89cf43aead2a9f.jpg",
      },
    },
    {
      id: 2,
      position: [51.51, -0.1],
      color: "red",
      size: "large",
      popup: {
        title: "Westminster",
        content: "Political center",
      },
    },
  ]);

  const polygons = [
    {
      id: 1,
      positions: [
        [51.515, -0.09],
        [51.52, -0.1],
        [51.52, -0.12],
      ],
      style: { color: "green", weight: 2, fillOpacity: 0.4 },
      popup: "Hyde Park Area",
    },
  ];

  const circles = [
    {
      id: 1,
      center: [51.508, -0.11],
      radius: 500,
      style: { color: "purple", fillOpacity: 0.3 },
      popup: "500m radius from center",
    },
  ];

  const handleMarkerClick = (marker) => {
    console.log("Marker clicked:", marker);
  };

  const handleMapClick = (latlng) => {
    console.log("Map clicked at:", latlng);
  };

  return (
    <div style={{ width: "75%" }}>
      <h1>Advanced Map Example</h1>
      <AdvancedMap
        center={[51.505, -0.09]}
        zoom={13}
        markers={markers}
        polygons={polygons}
        circles={circles}
        onMarkerClick={handleMarkerClick}
        onMapClick={handleMapClick}
        enableClustering={true}
        enableSearch={true}
        enableControls={true}
        style={{ height: "600px", width: "full" }}
      />
    </div>
  );
}