Category: Code Examples

In the ticket below, someone asks about how to make a pop-up tooltip for GeoJson in React-leaflet:

A complete solution is below:

<GeoJSON
  key={dataKey + (cacheBuster++)}
  filter={(segment, index) => {
    // implement this to enable/disable specific tiles in the layer
    return true;
  }}
 onEachFeature={(feature, leafletLayer) => {
    const popupOptions = {
      minWidth: 100,
      maxWidth: 250,
      className: "popup-classname"
    };
      
    leafletLayer.bindPopup(()=>{
      return '<b>tooltip</b>
    }, popupOptions);
  }}
  style={
    (reference) => {
       return {
         color: 'blue'
       }
    }
  }
  data={geojsonData} />