`react-leaflet` popups, tooltips and stylings are not applied.

[Rounak-Dwary]

So I am using some kml file that are to be displayed on a map using react-leaflet. The code for the kmllayer is :

import { useEffect } from 'react'
import L from 'leaflet'
import { useLeafletContext } from '@react-leaflet/core'
import 'leaflet-kmz'
import markerIcon from 'leaflet/dist/images/marker-icon.png'
L.Marker.prototype.setIcon(
  L.icon({
    iconUrl: markerIcon,
  })
)

const KMZ = () => {
  const context = useLeafletContext()
  const container = context.layerContainer || context.map

  useEffect(() => {
    let track = L.kmzLayer(require('../demo.kml'))
    container.addLayer(track)
    return () => {
      container.removeLayer(track)
    }
  }, [container])

  return null
}

export default KMZ

Now the above code does not display any markers present in the kml file. So I tried adding geometryLayer which solves the problem but it removes all the tooltips and popups present in the kml file and also overrides all styling.I am new to leaflet and using leaflet-kmz for the first time. Could you please hep me?

Code after adding the geometryToLayer():

  useEffect(() => {
    let track = L.kmzLayer(require('../demo.kml'), {
      bindPopup: true,
      bindTooltip: true,
      geometryToLayer: function (data) {
        return L.geoJson(data)
      },
    })
    container.addLayer(track)
    return () => {
      container.removeLayer(track)
    }
  }, [container])

demo.zip

[Raruto]

Hi @Rounak-Dwary

looking at this function it seems to me that it requires a kmz URL rather than a blob file:

https://github.com/Raruto/leaflet-kmz/blob/ed43fe930ddd93267278ad0c734ce699ecdd607a/src/KMZLayer.js#L12-L20

That means, something like the following:

 L.kmzLayer('path/to/your/server/demo.kml' /* and not require('../demo.kml') */, { ...your_custom_options })

👋 Raruto

[Rounak-Dwary]

Thanks for the fast reply . But is there a way to use local files?

[Raruto]

I assume you mean to load raw data, instead of using a local server like:

http://localhost/path/to/your/filename.kmz.

Have you already tried with calling directly the parse(data, props) function?

https://github.com/Raruto/leaflet-kmz/blob/ed43fe930ddd93267278ad0c734ce699ecdd607a/src/KMZLayer.js#L26-L34

For more info:

• https://github.com/Raruto/leaflet-kmz/pull/29#issue-1311619993