datamaps icon indicating copy to clipboard operation
datamaps copied to clipboard

Adding datamap to Vue 3

Open ghost opened this issue 3 years ago • 0 comments

Hello everyone, I'm trying to add a world map as a component to my vue3 project (New to vue and js!). I've npm installed 'd3' and 'topojson' and used the datamap script locally. The app.vue looks like the following:

<template>
   <div id="container1" style="position: relative; width: 50%; height: 400px;"></div>
</template>

<script>
   import * as mydatamap from '/public/datamaps.world.hires.min.js';

   export default {
      mounted() {
         var map = new mydatamap.Datamap({
            scope: 'world',
            element: document.getElementById('container1'),
            height: 500,
         })
     map.arc(
        [
           {
               origin: {
                  latitude: 40.639722,
                  longitude: 73.778889
               },
               destination: {
                  latitude: 37.618889,
                  longitude: -122.375
               }
            },
        ], 
        {strokeWidth: 2});
     },
}

Executing the project raises following errors:

 ERROR  Failed to compile with 1 error                                                                                                             

  /.../public/datamaps.world.hires.min.js
      5:38   error  'optionsValues' is not defined                                             no-undef
    125:19   error  'c' is defined but never used                                              no-unused-vars
    148:13   error  'a' is defined but never used                                              no-unused-vars
    148:16   error  'b' is defined but never used                                              no-unused-vars
    284:31   error  'a' is defined but never used                                              no-unused-vars
    342:33   error  'b' is defined but never used                                              no-unused-vars
    408:5    error  'Datamaps' is not defined                                                  no-undef
    409:118  error  'hoverover' is not defined                                                 no-undef
  12253:10   error  Do not access Object.prototype method 'hasOwnProperty' from target object  no-prototype-builtins
  12293:132  error  'define' is not defined                                                    no-undef
  12293:145  error  'define' is not defined                                                    no-undef

✖ 11 problems (11 errors, 0 warnings)

I have tested the above code with different versions of datamap js files, errors are almost the same. Is there a problem with datamaps or am i doing sth wrong?! Thanks

ghost avatar Jul 20 '22 10:07 ghost