Skip to content

Adding datamap to Vue 3 #541

@ghost

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions