title: Open Pop Up on Click Outside of Map
body: <p>I have a list, and through clicking on the list Elements, I want to open the pop up on the marker.  Currently, the pop up only opens when the marker is clicked.</p>
  
  <p>This is how I create the marker and the pop ups</p>
  
  <pre><code>import React from 'react';
  import {
    CircleMarker,
    Popup,
  } from 'react-leaflet';
  
  class PointsLayer extends React.Component {
    render() {
      const { data } = this.props;
      return (
        data.map(point =&gt; {
          return (
            &lt;CircleMarker
              key={point.id}
              center={point.coordinates}&gt;
              &lt;Popup&gt;
                Fancy Pop Up
              &lt;/Popup&gt;
            &lt;/CircleMarker&gt;
          )
        })
      )
    }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import {
    Map,
  } from 'react-leaflet';
  import L from 'leaflet';
  import PointsList from './PointsList;
  import PointsLayer from './PointsLayer;
  
  class Map extends React.Component {
  
  componentDidMount() {
      this.map = this.mapInstance.leafletElement;
  }
  
  render() {
    const { data } = this.props;
    return (
      &lt;&gt;
        &lt;Map
          ref={e =&gt; { this.mapInstance = e }}}&gt;
          &lt;TileLayer
            url=..." /&gt;
          &lt;PointsLayer
             data={data} /&gt;
         &lt;/Map&gt;
         &lt;PointsList
           data={data} /&gt;
       &lt;/&gt;
     )
   }
  </code></pre>
  
  <p>}</p>
  
  <p>Each data point from <code>data</code> is a marker on the <code>&lt;Map /&gt;</code> through the <code>&lt;PointsLayer /&gt;</code> component, and a listentry in <code>&lt;PointsList /&gt;</code>.
  I want to open the pop up in <code>&lt;PointsLayer /&gt;</code> when the corrresponding entry in <code>&lt;PointsList /&gt;</code> is clicked.</p>
  
  <p>How would I do that?</p>