I am trying to use Open layers + React js
but trying to target map to a syled component it shows nothing like it doesn’t detect it. Iam following documentation but cant find something similar to this
Map Component:
import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import MapaBase from "../StyledComponents/Map";
export const Mapa = () => {
new Map({
target: "MapaBase",
layers: [
new TileLayer({
source: new XYZ({
url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
}),
}),
],
view: new View ({
center:[0,0],
zoom: 2
})
});
return (
<>
<MapaBase colores="red"/>
</>
);
};
Styled component:
import styled from "styled-components";
const MapaBase = styled.div`
width: 100%;
height: 500px;
background-color:${props => props.colores};
`;
export default MapaBase;