Is it possible to style the popup that es with react-leaflet.js? I've been hacking away with the styles but can you get ui templates for the popup/ or what is the correct way to totally change how the popup looks?

Code snippet

<Marker
    key={message._id}
    position={[message.latitude, message.longitude]}
    icon="">

      <Popup className="request-popup">
        <p>...</p>
        <p>...</p>
    </Popup> 
</Marker>

I would like to style the popup to look something like the following

Thanks,

Is it possible to style the popup that es with react-leaflet.js? I've been hacking away with the styles but can you get ui templates for the popup/ or what is the correct way to totally change how the popup looks?

Code snippet

<Marker
    key={message._id}
    position={[message.latitude, message.longitude]}
    icon="">

      <Popup className="request-popup">
        <p>...</p>
        <p>...</p>
    </Popup> 
</Marker>

I would like to style the popup to look something like the following

Thanks,

• javascript
• reactjs
• leaflet
• popup
• react-leaflet

2 Answers 2

You can manipulate the built-in appearance of leaflet's popup via the class you assigned request-popup to change for instance the border-radius of popup

.request-popup .leaflet-popup-content-wrapper {
  border-radius: 0px;
}

To write custom text and give it your personal style I would remend creating a file called f.i popupStyles.js. There you declare all your popuup style. Then you import it in the Map p and write your one html. Use bootstrap to achieve desired margins and other goodies.

popupStyles.js

const popupContent = {
  textAlign: "center",
  height: "350px",
  marginTop: "30px"
};
const popupHead = {
  fontWeight: "bold",
  fontSize: "22px"
};

const popupText = {
  fontSize: "15px",
  marginBottom: "20px"
};

const okText = {
  fontSize: "15px"
};

export { popupContent, popupHead, popupText, okText };

and then in the p

import { popupContent, popupHead, popupText, okText } from "./popupStyles";

<Marker position={center} icon={defaultMarker}>
    <Popup className="request-popup">
      <div style={popupContent}>
        <img
          src="https://cdn3.iconfinder./data/icons/basicolor-arrows-checks/24/149_check_ok-512.png"
          width="150"
          height="150"
        />
        <div className="m-2" style={popupHead}>
          Success!
        </div>
        <span style={popupText}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
          enim ad minim veniam, quis nostrud exercitation ullamco laboris
          nisi ut aliquip ex ea modo consequat.
        </span>
        <div className="m-2" style={okText}>
          Okay
        </div>
      </div>
    </Popup>
  </Marker>

Demo

I just tried to style it with Styled Components and... it works awesome! :)

import React, { useCallback, useState } from "react";
import styled from "styled-ponents";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import { Icon } from "leaflet";

const StyledPop = styled(Popup)`
  background-color: red;
  border-radius: 0;
  .leaflet-popup-content-wrapper {
    border-radius: 0;
  }

  .leaflet-popup-tip-container {
    visibility: hidden;
  }
`;

const icon = new Icon({
  iconUrl: "/marker.svg",
  iconSize: [25, 25],
});

export const MapView = () => {
  const [position, setPosition] = useState(null);

  const handleOnContextMenu = useCallback(
    (event) => {
      setPosition([event.latlng.lat, event.latlng.lng]);
    },
    [setPosition]
  );

  return (
    <Container>
      <Map
        center={[50.061252, 19.915738]}
        zoom={15}
        oncontextmenu={handleOnContextMenu}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
        />

        {position && (
          <StyledPop position={position} onClose={() => setPosition(null)}>
            <div>
              <h2>menu</h2>
            </div>
          </StyledPop>
        )}

        {position && <Marker position={position} icon={icon} />}
      </Map>
    </Container>
  );
};