How to fly to a location in react-leaflet

So I’m really new to react and leaflet but all I want to do is basically have the user enter some input, and after they press enter, trigger an event which then flies to the coordinates generated from that input. I am using geocode and the lat long coordinates are successfully generating. However I a not sure how to make the map fly to that location. Here is what I have so far:

import './App.css';
import * as React from "react";
import { ChakraProvider } from "@chakra-ui/react";
import { MapContainer, TileLayer, Marker, Popup, useMapEvents } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import Geocode from "react-geocode";
import SearchBar from './SearchBar';

class App extends React.Component {
    this.state = {
      position: [43.653225, -79.383186]
  mapRef = React.createRef();

  changePos (pos) {
    this.setState({position: pos});

  render () {
    return (
      <ChakraProvider resetCSS = {false}>
        <div className = "App">
          <div id="title">
              <p>A responsive tracker for Covid-19.</p>
          <SearchBar changePos = {this.changePos.bind(this)}></SearchBar>
          <div id="map">
            <MapContainer center={this.state.position} zoom={13} scrollWheelZoom={false} ref={this.mapRef}>
                attribution='&copy; <a href="">OpenStreetMap</a> contributors'
              <Marker position={[43.653225, -79.383186]}>
                  A pretty CSS3 popup. <br /> Easily customizable.

export default App;

also the current code is generating this error:

Unhandled Rejection (TypeError): Cannot read property 'flyTo' of null

80 thoughts on “How to fly to a location in react-leaflet”

  1. In react-leaflet version 3 you can take the map instance using whenCreated prop and then use it to fly to another location when you do not want to use it for a component that is MapContainer's child.

    this.state = {
          position: [43.653225, -79.383186],
          map: null

    Remove ref and use whenCreated prop

    <MapContainer center={this.state.position} zoom={13} scrollWheelZoom={false} whenCreated={map => this.setState({ map })}>

    and then on your changePos event use to fly

     changePos (pos) {
        this.setState({position: pos});
        const {map} = this.state;
        if (map) map.flyTo(pos);
  2. [url=]kamagra tablets online[/url] [url=]when viagra no longer works[/url] [url=]ivermectin cream[/url] [url=]cialis 20 mg buy online[/url] [url=]viagra pills[/url] viagra without prescription online


Leave a Comment