React-leaflet: Popup not showing; Getting 'Cannot read property 'x' of null' error

Created on 6 Mar 2018 · 3Comments · Source: PaulLeCam/react-leaflet

Hi,

Thank you for providing such a wonderful library to us. While working with it, I am unable to show pop-ups as expected. Here is my index.html and the component code

index.html -
`

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Fleet Connect</title>
    <!--<link rel="stylesheet" href="build/style.css" />      -->
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">        
    <link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
    <Link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
</head>
<body>
    <div id="app"></div>
</body>`

and component code -
<Map center={coordinates[0].coordinates} zoom={12} style={{height: 700}} zoomControl={false}> <Control position="topleft"> <MapNavbar/> </Control> <TileLayer attribution='© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" /> <MarkerClusterGroup> <Marker position={coordinates[0].coordinates} icon={iconIcon(coordinates[0].status).iconPerson}> <Popup> A pretty CSS3 popup. Easily customizable. </Popup> </Marker> <Marker position={coordinates[1].coordinates} icon={iconIcon(coordinates[1].status).iconPerson}> <Popup> A pretty CSS3 popup. Easily customizable. </Popup> </Marker> </MarkerClusterGroup> <Control position="bottomright"s> <MapCircularPieLegend vehicleCoordinates={coordinates}/> </Control> </Map>

Any help will be appreciated. Thank you! :D

Source

aemdeei

👍2

Most helpful comment

Just for the record, the solution when using custom icons is to set the popup anchor on the icon: e.g. popupAnchor: [-3, -76]

i-schuetz on 11 Jun 2019

👍11 ❤6 🎉5

All 3 comments

try going back to "react-leaflet": "^1.7.8", I had the same issue when I installed the project with npm, then I used yarn and everything went fine.

yoloOnTheBattlefield on 15 Mar 2018

👍1

Hi,
Please only use GitHub issues to report possible bugs in the library.
You can use the react-leaflet tag in StackOverflow for questions related to using it.