StephanWagner / svgMap

svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.
MIT License
254 stars 43 forks source link

Dynamic data update #16

Open ud-klee opened 4 years ago

ud-klee commented 4 years ago

I figured that the applyData() method can be used to update the map data after the map has been rendered, but the tooltips are not aware of the data change. Can it expose the API to rebuild the tooltips, or use custom events to notify the tooltips on model change? Thanks!

ud-klee commented 4 years ago

Aha! Looks like I also need to update options.data too... kind of hacky though, it'd be nice if there's a public API for this :)

StephanWagner commented 4 years ago

Yeah, the tooltips get the data from the options object. Maybe a new method updateData() would be a good solution.

xaja commented 4 years ago

is there any public api methods? how to update map with new data?

StephanWagner commented 4 years ago

At the moment there are none. It's just really what's in the readme or here: https://stephanwagner.me/create-world-map-charts-with-svgmap

It definitely would be a good addition and I hope I'll get around to improve svgmap soon.

arelidev commented 2 years ago

Does anyone find a solution for this? I'm assuming it's not being developed anymore.

xaja commented 2 years ago

Does anyone find a solution for this? I'm assuming it's not being developed anymore.

some thoughts and minimal demo

when you update your map data via computed you change the key with new unique value, that forces component <Svgmap> to rerender with your new data. it is not beautiful, but works

<template>
  <div>
    <Svgmap :data="mapData" :key="componentKeyForceRerender"></Svgmap>
  </div>
</template>
<script>
import Svgmap from "@/components/Svgmap.vue";

export default {
  components: {
    Svgmap
  },
  data() {
    return {
      componentKeyForceRerender: 0
    };
  },
  methods: {
    forceRerender() {
      this.componentKeyForceRerender += 1;
    }
  },
  computed: {
    mapData() {
      const result = "your data for map";
      this.forceRerender();
      return result;
    }
  }
};
</script>
tipsy commented 3 months ago

@ud-klee did you figure out how to do this?

tipsy commented 3 months ago

Okay, it's actually quite simple: https://github.com/StephanWagner/svgMap/issues/121#issuecomment-2259281492