[Vuejs]-How to color GeoJson polygons using another api?

by

0👍

L.geoJSON accepts a style function to dynamically apply styles based on each feature. You can write a style function that maps the feature ID to the color in your dataset. For example:

L.geoJSON(geoJSONData, {
  // The style function receives each feature from your GeoJSON dataset.
  // You can access the feature's properties to lookup the color.
  style: function (feature) {
    const fid = feature.properties.FID,
          color = mockData.colors.find((color) => parseInt(color.id) === fid);

    console.debug(`Feature with id ${fid} has now color ${color.countryColor}`);

    return {
      fillColor: color.countryColor,
      color: "black",
      weight: 2,
      opacity: 0.65,
      fillOpacity: 0.6
    };
  }
}).addTo(map);

I created an example with your code and some sample data as a reference, check it out here: https://codepen.io/strfx/pen/XWYNrBM

Hope this helps!

Leave a comment