Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

190
Views
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 answers
Answer question

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 Report

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!