Adding Title to React Leaflet Map

Question

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

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;

Ryan Le · Answer 1 · 2021-09-12T14:09:59.610

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>

Thank you - this is helpful. Would you know how to add a title as a TileLayer by any chance? — munkaboo, Sep 12 '21 at 14:34

score 0 · Answer 2 · answered Sep 13 '21 at 20:41

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!

Adding Title to React Leaflet Map

2 Answers2