I have successfully used filter() to retrieve only Estate (UF) data from my country using Axios:
async created() {
await axios.get('https://raw.githubusercontent.com/fititnt/gis-dataset-brasil/master/mesorregiao/geojson/mesorregiao.json')
.then((response) => {
const myUf = 'GO'
const data = response.data.features.filter(item => item.properties.UF = myUf)
console.log(response.data.features.filter(item => item.properties.UF = myUf))
this.geojson = data;
}
)
}
Everything is working fine, as I can see all the data in the log! However, when I display it on my page, all regions are colored. Is there any additional configuration that needs to be done?
I want to color only the specific regions that I filtered.
I couldn't find anything in the LeafLet or Vue-Leaflet documentation!
https://i.sstatic.net/5Czk1.png
As requested, here's a look at my code: In my data() method, where I call geojson in Vue
data() {
return {
zoom: 6.4,
center: latLng(-15.7745457, -48.3575684),
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors | TRE-GO',
geojson: null,
fillColor: "#6a0dad",
}
},
Here's my L-map component:
<l-map
:zoom="zoom"
:center="center"
style="height: 500px; width: 100%"
>
<l-tile-layer
:url="url"
:attribution="attribution"
/>
<l-geo-json :geojson="geojson"
:options-style="styleFunction"/>
</l-map>