Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

191
Vistas
Adding Title to React Leaflet Map

I have the relatively simple problem of trying to add a title to a leaflet map, similar to the image below.

enter image description here

I have seen posts like R: Add title to Leaflet map, but have not been able to find an example for react.

My code looks like this

import L from 'leaflet';
import {Map, TileLayer, Marker, Popup} from 'react-leaflet';

class App extends Component {
  render(){
     return (
        <div>
        <Map className="splitViewMap" style={{'fillColor': 'yellow'}}>
         <TileLayer
           attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> 
           contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
       </Map>
       </div>
    );
  }
}
export default App;
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You could have position: absolute to "Map Title" and do something like this:

class App extends Component {
  render() {
    return (
      <div
        style={{
          position: "relative",
          display: "flex",
          justifyContent: "center"
        }}
      >
        <Map className="splitViewMap" style={{ fillColor: "yellow" }}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a>
           contributors'
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          />
        </Map>
        <h1
          style={{
            position: "absolute",
            backgroundColor: "white",
            bottom: "20px",
            zIndex: "99"
          }}
        >
          Map Title
        </h1>
      </div>
    );
  }
}

Live Example:

function App() {
  return (
    <div className="app">
      <div className="map" />
      <h1 className="map-title">Map Title</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
.app {
  position: relative;
  display: flex;
  justify-content: center;
}
.map {
  height: 200px;
  width: 100%;
  background: rgb(209, 209, 209);
}

.map-title {
  position: absolute;
  background: white;
  bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

The answer is really simple (albeit crude!)

Enclosing the map and title text in a div element as such:

<div>
<div className="title">Title</div>
    <Map className="map">
    </Map>
</div>

With css using the z-index element:

.map{
  height: 90vh;
  width: 100vh;
  position:absolute;
  bottom:10px;
  right:10px;
  z-index: 0;
}

.title {
  position:absolute;
  bottom:300px;
  right:420px;
  font-weight: bold;
  font-weight: 900;
  font-size: 30px;
  background-color: rgb(207, 207, 207); 
  z-index: 1;
}

Allows for the title to be placed over the map!

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda