Style with leaflet kml

[zcemycl]

I am trying to change the fillColor of the kml component.

{Kml && <ReactLeafletKml kml={Kml} 
                        style={{fillColor:'green',
                        fillOpacity: 0.1}}
                        />}

But it does not work like geojson.

<GeoJSON key="my-geojson" data={geojsonLondon}
                        style={{fillColor:'blue',
                                fillOpacity: 0.1}}/>

Are there any solves?

[aviklai]

@zcemycl Hi,
Also - why don't you specify the color inside the kml itself?
I think that what you are trying to do is not supported by leaflet-kml:
https://github.com/windycom/leaflet-kml

And the way to do it is specify the color inside the kml itself.
You can see a working example here with the polygons filled with color:
https://codesandbox.io/s/basic-usage-react-leaflet-v3-pzcvt
And here is the kml:
https://github.com/aviklai/react-leaflet-kml/blob/master/src/assets/example1.kml

[zcemycl]

@aviklai Thanks for the reply. I did look into those examples before, and tried to add tags in it.
For example, https://github.com/andreafalzetti/uk-counties-list/blob/master/uk-areas/kml/England/England_East_of_England.kml

    useEffect(() => {
        fetch(kmlUrl)
            .then((response)=> response.text())
            .then((kmlText)=>{
                const parser = new DOMParser();
                // const re = new RegExp('(<Style\b[^>]*>)[^<>]*(<\/Style>)','i');
                // kmlText = kmlText.replace(re,
                //     "$1<PolyStyle><color>71ff33</color></PolyStyle>$2")
                // console.log(kmlText)
                var doc = parser.parseFromString(kmlText,'text/html');
                var style = doc.createElement("Style");
                var polystyle = doc.createElement("PolyStyle");
                var color = doc.createElement("color");
                var colorcode = doc.createTextNode("71ff33");
                color.appendChild(colorcode);
                polystyle.appendChild(color);
                style.appendChild(polystyle);
                console.log(style.outerHTML)
                var oldstyle = doc.querySelector("style");
                var parent = doc.querySelector("placemark");
                parent.replaceChild(style,oldstyle);
                console.log(doc)
                setKml(doc);
            })
    },[]);

Within placemark's style, I added polystyle color before passing into kml. But it does not work.

[aviklai]

@zcemycl Can you try:
<PolyStyle> <color>7dff0000</color> </PolyStyle>

[zcemycl]

@aviklai No. It does not work.

[aviklai]

@zcemycl Is this what you are trying to achieve?

If so - check this updated kml (I changed the file extension to txt to be able to upload it here):

england.txt

[zcemycl]

@aviklai Yes and no. I do want to colorize the kml file, but do not want online conversion of kml files to another format like json or txt.

I wonder if there is any easy method to make many conversions, like having 100 kml files.

Anyway, thanks for your help.

[aviklai]

@zcemycl just to clarify - I didn't convert the file - I just changed the extension so I could upload it here, as github doesn't allow uploading a file with the kml extension.