CODEWITHSUNDEEP
popupreact-leaflet
interpolated
interpolated

Reputation: 47

react-leaflet popup not working, cursor doesn't change on mouseover

I am using react-leaflet, and can get a market to appear. The is just not working.

I've simply copied the example code. Could there be conflicts with other packages? Or do I need particular versions of leaflet, react and react-dom for this to work?

My cursor doesn't change on mouseover the map.

I have made sure I have the correct css so the map and marker render correctly.

Any help would be greatly appreciated, I am fairly new at this, so it is likely a silly error.

import React from 'react';
import ReactDOM from 'react-dom';

import { Map, TileLayer, Marker, Popup } from 'react-leaflet';

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      lat: 51.505,
      lng: -0.09,
      zoom: 13,
    };
  }

  render() {
    const position = [this.state.lat, this.state.lng]
    return (
      <Map center={position} zoom={this.state.zoom}>
        <TileLayer
          attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Marker position={position}>
          <Popup>
            <span>A CSS3 popup. <br /> Easily customizable.</span>
          </Popup>
        </Marker>
      </Map>
    );
  }
}

ReactDOM.render(<SimpleExample />, document.getElementById('root'));

Upvotes: 2

Views: 1326

Answers (1)

Michael Stearn
Michael Stearn

Reputation: 623

Check your index file and see if the css file/js file for leaflet are for version 0.7.7 or 1.0. If it is on 1.0, replace them with:

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css

https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js

Upvotes: 2

Related Questions