Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding datamap to Vue 3 #541

Open
ghost opened this issue Jul 20, 2022 · 0 comments
Open

Adding datamap to Vue 3 #541

ghost opened this issue Jul 20, 2022 · 0 comments

Comments

@ghost
Copy link

ghost commented Jul 20, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

0 participants