I am trying to create a minimap but for some reason, react-leaflet renders the map twice.
I think its the container is not big enough to contain the map so it translates it out but I don't get how big it's supposed to be.
The documentation doesn't really mention this.
import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';
const MapStyle = {
height: '100px',
width: '100px',
};
const MiniMap = assetLocation => {
return (
<MapContainer center={[45.4, -75.7]} zoom={13} scrollWheelZoom={false} style={MapStyle}>
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
</MapContainer>
);
};
I implement it inside Antd's grid system
<Row>
<Space>
<Col>
<MiniMap assetLocation={item} />
<NavButtons id={id} />
</Col>
<Col>{ ...otherComponents }</Col>
</Space>
I was missing the Leaflet's CSS.
Just need to import it into the react component:
import 'leaflet/dist/leaflet.css';
Related
I tried for many hours but nothing shows up on the following code...
Does anyone know what the failure is?
// material-ui
import { TileLayer, MapContainer } from 'react-leaflet'
import 'leaflet/dist/leaflet.css';
// ==============================|| SAMPLE PAGE ||============================== //
const Dashboard_5G = () => {
return (
<MapContainer Center={[0, 0]} zoom={4} style={{height: '100%'}}>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
</MapContainer>
)
};
export default Dashboard_5G;
This is what It displays
I would like to add a custom Legend in react-leaflet v4 map, but i can't understand how to do it correctly. I have already read the https://react-leaflet.js.org/docs/example-react-control/ example but it is quite complicated.
Please check the image
to better understand the issue.
Map.js (Main map component)
import React from 'react'
import { MapContainer, TileLayer, Marker } from 'react-leaflet'
import MapLegendControl from './map/MapLegendControl'; //Custom control i want to add
function Map() {
return (
<>
<MapContainer
center={[37.983810, 23.727539]}
zoom={6}
style={{ height: '100%' }}
>
<TileLayer
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
attribution='© OpenStreetMap contributors'
/>
<MapLegendControl map={map} />
</MapContainer>
</>
)
}
Custom Control (Legend)
import React from 'react'
function MapLegendControl({ map }) {
return (
<div className='leaflet-control leaflet-bar map-legend'>
<button> Test </button>
</div>
)
}
export default MapLegendControl;
Thank you in advance.
I am integrating/including react-leaflet-editable to my existing project which relies 100% on react-leaflet v2.8.0. I am not able to upgrade at the moment as it requires too much changes to the entire project. Something we cannot afford at the moment. (Why change everything for one when one can change for all. Yes we will probably do this someday but not now)
so here is the code below. it works perfectly with react-leaflet v.3.x but the moment I siwtch to `version 2.8.0' it seizes to work.
What I have tried; Map is renamed to MapContainer in 3.x so I change that but the problem then becomes the whenCreated={setMap} parameter. I need a way to get that linked to the ReactLeafletEditable. or at least I think that is the problem.
I hope I have explained well. the code and link is below.
import React, { useRef } from "react";
import L, { Icon } from "leaflet";
import "leaflet-editable";
import ReactLeafletEditable from "react-leaflet-editable";
import {
MapContainer,
TileLayer,
LayersControl,
LayerGroup
} from "react-leaflet";
import "leaflet/dist/leaflet.css";
function Demo() {
const editRef = useRef();
const [map, setMap] = React.useState();
const editPolygon = () => {
editRef.current.startPolygon();
};
return (
<ReactLeafletEditable ref={editRef} map={map}>
<button onClick={editPolygon} className="editable-btn">
Create Polygon
</button>
<MapContainer
style={{
height: "700px",
backgroundColor: "",
flexGrow: "1",
cursor: `10`
}}
editable={true}
zoom={4}
maxZoom={18}
center={[35, 105]}
whenCreated={setMap}
>
<LayerGroup>
<TileLayer
attribution='© OpenStreetMap contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<TileLayer url="http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png" />
</LayerGroup>
</MapContainer>
</ReactLeafletEditable>
);
}
export default Demo;
Link to project in 3.0: https://codesandbox.io/s/react-leaflet-editable-z7tnq?file=/src/App.js
link to react-leaflet-editable : https://www.npmjs.com/package/react-leaflet-editable
PS: You can just switch the react-leaflet version on the side to 2.8.0 see the behavior.
Thank you for all support
Use a ref in combination with a useEffect to get the map instance in react-leaflet v.2.x. With that way you imitate what whenCreated does in version 3.x
const [map, setMap] = React.useState();
const mapRef = useRef();
useEffect(() => {
if (!mapRef.current) return;
setMap(mapRef.current.leafletElement);
}, []);
<ReactLeafletEditable ref={editRef} map={map}>
<button onClick={editPolygon} className="editable-btn">
Create Polygon
</button>
<Map
style={{
height: "700px",
backgroundColor: "",
flexGrow: "1",
cursor: `10`
}}
ref={mapRef}
...
Demo
I am writing my first React App (using create-react-app) and I wrote a Map component using google-maps-react. However, the links BELOW the map cannot be clicked.
Actually, on my webpage, this issue is present only on small and medium-sized screens, while it works perfectly on large screens (small, medium and large as defined by materializecss). I tried to reproduce the issue on a minimal working example, without materialize, just using the boilerplate code created by `npx create-react-app my-app' and adding the following:
MapComponent.js
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);
and then in App.js:
import React, { Component } from 'react';
import MapComponent from './MapComponent';
class App extends Component {
render() {
return (
<div className="Appr">
<MapComponent />
</div>
);
}
}
export default App;
(the key is not reported in the example, so maps will display the frame with an error message, but the issue is the same with the key). The first link to google.com can be clicked and works, while the second does not. Any solution/workaround?
Finally, I went through the source code of google-maps-react and found the solution. It is very simple but rather undocumented. Apart from style the Map component accepts a containerStyle prop, allowing to change the tyle of the container wrapping Map. By default, the position is set to position: absolute giving the aforementioned behavior. The following code solves the issue for me:
import React from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
const mapStyles = {
width: '80vw',
height: '45vw',
marginLeft: 'auto',
marginRight: 'auto',
display: 'block'
};
const containerStyle = { {/* Added style */}
position: 'static'
}
const MapComponent = (props) => {
return (
<div className="MapComponent">
<div>
Google
</div>
<Map
google={props.google}
zoom={10}
style={mapStyles}
containerStyle={containerStyle} {/* Added prop */}
initialCenter={{
lat: 40,
lng: 12
}}
/>
<div>
Google
</div>
</div>
);
}
export default GoogleApiWrapper({
apiKey: "Key"
})(MapComponent);
I am showing a basic example of Google Maps React with a valid key but isntead of showing me the map it shows me a text saying "Loading map..."
import {GoogleApiWrapper, Map, MapProps} from 'google-maps-react';
import * as React from 'react'
export class MapContainer extends React.Component<MapProps> {
public render() {
return (
<Map
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
);
}
}
export default GoogleApiWrapper({
apiKey: (API_KEY)
})(MapContainer)
There is no error in console log and anything.
First of all please make sure on the places you're including the MapContainer you're using the default export as follows:
import MapContainer from './pathToContainer/MapContainer'
Otherwise importing it via named export { MapContainer } you will skip GoogleApiWrapper HOC.
Also you may need to provide the width and height maps properties as follows:
<Map
style={{ width: '100%', height: '100%' }}
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
Or you may need to style the map's wrapper div:
<div
style={{
position: "relative",
height: "calc(100vh - 20px)"
}}
>
<Map
google={this.props.google}
centerAroundCurrentLocation={true}
zoom={20}
/>
</div>
Here's a complete working example, taken from the docs.