CODEWITHSUNDEEP
angularnpmangular-cli
Cristiano Fontes
Cristiano Fontes

Reputation: 5088

Can't import datamap library into HTML of a Angular 2 app

I am building a small angular 2 app for learning purposes and I plan to use datamaps for the map interface.

But there is no directive for this lib yet, so I am trying to hotwire it myself.

I've installed data maps

npm install datamaps

and I am using ng serve from angular-cli, but I can't make it work, I've tried importing it directly in the HTML ( just to see if it worked ) and it couldn't find the lib.

I get this from direct HTML import, even with the file in the correct location it is not send to the browser

datamaps.world.hires.min.js:1 Uncaught SyntaxError: Unexpected token <

I added it into my package.json and tried using it in my component, but also could not find it.

like this in my package.json

"datamaps": "^0.5.8"

What should be done for my html to see it if I am using it like this:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AskTheWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="../node_modules/datamaps/dist/datamaps.world.hires.min.js"></script>
</head>
<body>
  <app-geochart-component>Loading...</app-geochart-component>
  <div id="container" style="position: relative; width: 500px; height: 500px;"></div>
  <script>
    var map = new Datamap({element: document.getElementById('container')});
  </script>
</body>
</html>

Also what is the best way to import it into my component? I've seen that datamaps does not have a typings declared or a module from what I could find (I am using TS 2)

Here is my component so far

import {Component, OnInit, ViewChild} from '@angular/core'; import { Datamap } from '../../../node_modules/datamaps/dist/?????????????';

@Component({
  selector: 'app-geochart-component',
  templateUrl: './geochart-component.component.html',
  styleUrls: ['./geochart-component.component.css']
})
export class GeochartComponentComponent implements OnInit {

  @ViewChild('container') canvas;

  constructor() { }

  ngOnInit() {
    var map = new Datamap(this.canvas);
  }

}

}

Upvotes: 4

Views: 2171

Answers (5)

Siddhant
Siddhant

Reputation: 11

Import the datamaps file into your component.

import * as Datamap from 'node_modules/datamaps/dist/datamaps.world.min.js';

Hope this helps

Upvotes: 1

Banu Prakash
Banu Prakash

Reputation: 1

It works after following the below steps:

1) npm install datamaps 2) include "allowJs": true in tsconfig.json 3) include the following in ".angular-cli.json"

"scripts": [
        "../node_modules/d3/d3.js",
        "../node_modules/topojson/build/topojson.js",
        "../node_modules/datamaps/dist/datamaps.world.min.js"
      ],

3) in html:

4) include the following in component ts file:

declare var Datamap:any;
declare var d3:any;



ngAfterContentInit():void {

           var map = new Datamap({

            element: document.getElementById('container'),
            projection: 'mercator',
            fills: {
                defaultFill: "#ABDDA4",
                authorHasTraveledTo: "#fa0fa0"
            },data: {
              USA: { fillKey: "authorHasTraveledTo" },
              JPN: { fillKey: "authorHasTraveledTo" },
              ITA: { fillKey: "authorHasTraveledTo" },
              CRI: { fillKey: "authorHasTraveledTo" },
              KOR: { fillKey: "authorHasTraveledTo" },
              DEU: { fillKey: "authorHasTraveledTo" },
            }
           });

           var colors = d3.scale.category10();
         }

Upvotes: -1

EL missaoui habib
EL missaoui habib

Reputation: 1075

Instead of using javascript to display the maps :

<script> var map = new Datamap({element: document.getElementById('container')}); </script>

create a @ViewChild is not necessary also the ngOnInit() just add the ngAfterContentInit() like this for example :

    ngAfterContentInit():void {

       var map = new Datamap({

        element: document.getElementById('container'),
        projection: 'mercator',
        fills: {
            defaultFill: "#ABDDA4",
            authorHasTraveledTo: "#fa0fa0"
        },data: {
          USA: { fillKey: "authorHasTraveledTo" },
          JPN: { fillKey: "authorHasTraveledTo" },
          ITA: { fillKey: "authorHasTraveledTo" },
          CRI: { fillKey: "authorHasTraveledTo" },
          KOR: { fillKey: "authorHasTraveledTo" },
          DEU: { fillKey: "authorHasTraveledTo" },
        }
       });

       var colors = d3.scale.category10();
     }

Upvotes: 2

Ben Richards
Ben Richards

Reputation: 3575

So you know the way to include the script. Now to use it from Angular, you have a couple of options.

Option 1 (quick and dirty but works): Create a const Datamap (assuming the JavaScript object for the library is called "Datamap") on the top of your component with:

const Datamap;

Then use that object when it comes to calling new datamap:

ngOnInit() {
  var map = new Datamap(this.canvas);
}

Option 2 (the more complicated but the better approach. I haven't done this with that component but the idea is the same for all external components.) Bootstrap the Datamap component in you application startup by injecting it into the Angular component.

More on option too is documented here: How to pass parameters rendered from backend to angular2 bootstrap method

Upvotes: 2

Cristiano Fontes
Cristiano Fontes

Reputation: 5088

Finally got it working after reading this

Not exactly what I was looking for as it is outside of the scope of angular and I can't use it as a part of a component yet... But at least the map is showing now.

Added the lines below to angular-cli.json and it was available.

  "scripts": [
    "../node_modules/datamaps/dist/datamaps.world.min.js"
  ],

Upvotes: 0

Related Questions