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 · Accepted Answer · 2021-09-12 14:09:59Z

2

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>

edited Sep 12, 2021 at 14:09

answered Sep 12, 2021 at 14:04

Ryan Le

8,5181 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

munkaboo Over a year ago

Thank you - this is helpful. Would you know how to add a title as a TileLayer by any chance?

Ryan Le Over a year ago

Sorry, I have not used that yet. So... I have not clues

munkaboo · Accepted Answer · 2021-09-13 20:41:16Z

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!

answered Sep 13, 2021 at 20:41

munkaboo

651 silver badge9 bronze badges

Collectives™ on Stack Overflow

Adding Title to React Leaflet Map

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related