Working with map it's really hard there's a lot of configuration API keys and libraries and etc but I found this

MapCN component this is basically ready to use style with tailwind CSS and work perfectly with ShadcnUI and it's really easy to implement as you can see the example in here for example active user map in here we can hover that and we have the information on it and also the delivery you can implement delivery as well and the trending the AV charging for example as you can see it is offline this is available and also locate me so let's take a look how we can using that let's go to get started in here as you can see mapCN is basically built on MapLibre GL styled with TailwindCSS, and design to work with ShadcnUI so in this article I'm going to use Nextjs to generate react typescript project. So now we are going to install the ShadcnUI into the application.

So let's try to working with the mapCN. Right. Let's just copy this command in here and just paste that to the terminal. And this basically will clone some component.

npx shadcn@latest add @mapcn/map

Let's take a look in here. This basically will adding some styling for the map and then also it create the source component UI and then we have the map component. And how we can using that? Pretty simple. So, I'm going to use page.tsx. Let's do NewYork. And then what I'm going to do is just paste that.

import { Map } from "@/components/ui/map";

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 sm:items-start">
        <div className="h-[400px] w-full">
          <Map center={[-74.006, 40.7128]} zoom={12} />
        </div>
      </main>
    </div>
  );
}

Let’s see the output

In the docs we have multiple components that we can use this is just the basic usage let’s try to use

So as you can see on the map component we can send center props and send this an array. Right? This basically longitude and latitude and we can zoom in. Right? So you can use any coordinates, right? And also you can go to map controls tab, there's other controls that we can use.

import { Map, MapControls } from "@/components/ui/map";

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 sm:items-start">
        <div className="h-[400px] w-full">
          <Map center={[2.3522, 48.8566]} zoom={11}>
            <MapControls
              position="bottom-right"
              showZoom
              showCompass
              showLocate
              showFullscreen
            />
          </Map>
        </div>
      </main>
    </div>
  );
}

So on the code in here we can change the position. By default is basically on the bottom right. Let's see the showZoom, showCompass, showLocate, showFullscreen. Use these props and you can see, we have all the controls. We can full screen, zoom out and zoom in as well. And also, we can add marker as well on that map. If I hover, we have the location name, the information. If I click that, we also have that information as well.

So now I'm going to use Marker in here. As you can see on this marker component, I have the map, This the center, this the zoom and also the map marker right here. This the longitude and latitude. And inside that, I'm going to render some icon on it. I'm going to save that. Let's take a look what we have.

"use client";

import { useState } from "react";
import { Map, MapMarker, MarkerContent, MarkerPopup } from "@/components/ui/map";
import { MapPin } from "lucide-react";

export default function Home() {
  const [draggableMarker, setDraggableMarker] = useState({
    lng: -73.98,
    lat: 40.75,
  });
  return (
    <div className="flex min-h-screen items-center justify-center">
      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 sm:items-start">
        <div className="h-[400px] w-full">
          <Map center={[-73.98, 40.75]} zoom={12}>
            <MapMarker
              draggable
              longitude={draggableMarker.lng}
              latitude={draggableMarker.lat}
              onDragEnd={(lngLat) => {
                setDraggableMarker({ lng: lngLat.lng, lat: lngLat.lat });
              }}
            >
              <MarkerContent>
                <div className="cursor-move">
                  <MapPin
                    className="fill-black stroke-white dark:fill-white"
                    size={28}
                  />
                </div>
              </MarkerContent>
              <MarkerPopup>
                <div className="space-y-1">
                  <p className="font-medium text-foreground">Coordinates</p>
                  <p className="text-xs text-muted-foreground">
                    {draggableMarker.lat.toFixed(4)},{" "}
                    {draggableMarker.lng.toFixed(4)}
                  </p>
                </div>
              </MarkerPopup>
            </MapMarker>
          </Map>
        </div>
      </main>
    </div>
  );
}

And of course you can always change the icon in here to whatever you want. We can adding this the marker tool tip and marker popup basically the marker tool tip is when we hover the marker, it's basically show this text. And also when I click that icon or that marker, it's basically will render the marker popup.

So basically there's other features like popups in here like a road you can do that with like a delivery application the clusters right and also I think this one in here is also super nice which is the custom control we can do like 3D view if you need Try it out if you want to working with map. So, yep, that's it for this article. Hopefully, this is helpful.

Add Interactive Maps to React Easily