Commit ce2ab61f authored by Michael Underwood's avatar Michael Underwood
Browse files

Add `options-style` prop to LGeoJson 

Closes #258
parent c33e004d

CHANGELOG.md

+5 −1
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).





## [Unreleased]

## [0.8.3] - 2023-02-12



### Fixed
@@ -22,6 +22,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 
- Leaflet objects accessed via the `leafletObject` property of a `ref` are now all marked as raw, so they

  no longer return `Proxy` instances.



### Added



- Ability to style GeoJSON layers through `:options-style` prop.





## [0.8.2] - 2023-02-05

src/functions/geoJSON.js

+10 −0
Original line number Diff line number Diff line
@@ -7,6 +7,10 @@ export const geoJSONProps = { 
    type: [Object, Array],

    custom: true,

  },

  optionsStyle: {

    type: [Object, Function],

    custom: true,

  },

};



export const setupGeoJSON = (props, leafletRef, context) => {
@@ -17,6 +21,9 @@ export const setupGeoJSON = (props, leafletRef, context) => { 
  );



  const options = propsToLeafletOptions(props, geoJSONProps, layerOptions);

  if (Object.prototype.hasOwnProperty.call(props, "optionsStyle")) {

    options.style = props.optionsStyle;

  }



  const methods = {

    ...layerGroupMethods,
@@ -24,6 +31,9 @@ export const setupGeoJSON = (props, leafletRef, context) => { 
      leafletRef.value.clearLayers();

      leafletRef.value.addData(newVal);

    },

    setOptionsStyle(newVal) {

      leafletRef.value.setStyle(newVal);

    },

    getGeoJSONData() {

      return leafletRef.value.toGeoJSON();

    },

src/playground/views/GeoJSON.vue

+4 −1
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ 
      layer-type="base"

      name="OpenStreetMap"

    ></l-tile-layer>

    <l-geo-json :geojson="geojson"></l-geo-json>

    <l-geo-json :geojson="geojson" :options-style="geoStyler"></l-geo-json>

  </l-map>

</template>

<script>
@@ -21,6 +21,9 @@ export default { 
    return {

      zoom: 8,

      geojson: null,

      geoStyler: (feature) => ({

        opacity: feature.properties.code / 100000,

      }),

    };

  },

  async created() {