markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

How to use it with Vue? #450

Open hifall opened 6 years ago

hifall commented 6 years ago

I am new to datamaps and to Vue (sort of). I'd like to use datamaps inside a Vue-based app. How would I go about doing it?

Thanks!

baranovxyz commented 6 years ago

This example might help https://gist.github.com/baranovxyz/b71a097d87c08983c4df2340447c4e11

3c7 commented 6 years ago

@baranovxyz Do yo know, by chance, how to properly import datamaps in a Vue+Typescript project? I'm getting errors that way, but the script itself works. The "clean" way would be import 'datamaps'; but that way I cannot initialize the map.

Edit:
Using require in the constructor of the specific Vue component made it for me.

class xyz {
    private DataMap: any;
    private myMap!: any;

    constructor() {
        this.DataMap = require('datamaps');
    }

    public mounted() {
        this.myMap = new this.DataMap({
            // ...
        });
    }
}
baranovxyz commented 6 years ago

@3c7 No, I don't, have not used TS in a while.

Seungwoo321 commented 4 years ago

@hifall It is not perfect but consider VueDatamaps.