0
187
VistasAgregar título al mapa del folleto de React
Tengo el problema relativamente simple de intentar agregar un título a un mapa de folleto, similar a la imagen a continuación.
He visto publicaciones como R: Add title to Leaflet map , pero no he podido encontrar un ejemplo para reaccionar.
Mi código se ve así
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='&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;
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Podría tener position: absolute para "Título del mapa" y hacer algo como esto:
class App extends Component { render() { return ( <div style={{ position: "relative", display: "flex", justifyContent: "center" }} > <Map className="splitViewMap" style={{ fillColor: "yellow" }}> <TileLayer attribution='&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> ); } }Ejemplo en vivo:
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>
·
Juan Pablo Isaza
Denunciar
0
La respuesta es realmente simple (¡aunque cruda!)
Encerrando el mapa y el texto del título en un elemento div como tal:
<div> <div className="title">Title</div> <Map className="map"> </Map> </div>Con css usando el elemento z-index :
.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; }¡Permite colocar el título sobre el mapa!
·
Juan Pablo Isaza
Denunciar
Responde la pregunta