Angular 2でインタラクティブなUS Mapを使用する方法またはAngular2で外部JavaScriptをインポートして使用する方法

Question

https://github.com/robflaherty/us-map-raphaelにアクセスし、Angular2アプリケーションでこれを使用したいと考えました。プレーンなJSの世界で

、我々はLIBをインポートし、Angular2コンポーネントベースのフレームワークで

<script> window.onload = function() { 
    var R = Raphael("container", 1000, 900) 
</script> 

をインスタンス化することができ、ラファエルは、外部のJS libにあることは、まず、私は私のpackage.jsonに

"dependencies": { 
      ... 
      "raphael": "^2.2.7" } 

を依存性を提供しようとしました

ただし、インポートしてインスタンスを作成することは困難です。

私は

import * as raphaelJS from 'raphael/raphael.js'; 
... 
ngOnInit() { 
     let inst = raphaelJS.Raphael("container", 1000, 900); 
... 

をインポートしようとしましたが、コンパイルの代わりに

中にエラー「モジュール 『ラファエロ/Raphaël.jsの』を見つけることができません」の取得、私はVARを宣言しようとしています：任意のインスタンスを作成しますが、それは「名前 『ラファエル』を見つけることができません。）」を訴え

declare var jsVar: any; 
... 
ngOnInit() { 
     jsVar = Raphael("container", 1000, 900); 

1. 私は外部のライブラリを使用する方法を知っているかもしれませんAngular2
2. Angular2でインタラクティブたちマップを使用するには、任意のより良い解決策があるかどうか、私は知っているかもしれ

PS：私は、プロジェクトを生成するために、NG-CLIを使用し、[そのWebPACKのがベース]

任意のアドバイスに感謝これ！

Answer 1

私は、SVGタグを使用してそれを行うと、あなたは、このリンクでplnkrを表示することができます私自身のインタラクティブマップを作成するために管理 - コード

<svg 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2000 800"> 
    <svg:path 
    *ngFor="let country of countries; let i = index" 
    [attr.data-index]="i" 
    (mouseover)="countryHover = country.country_country" 
    (click)="clicked(i)" 
    class="blob" 
    [class.selected]="hasCountry(i)" 
    [attr.d]="country.country_path" 
    fill="currentColor"> 
    </svg:path> 
</svg> 

enter image description here

https://plnkr.co/edit/2heVmd7l4UokqR2OcNgm?p=preview

Answer 2

ラファエル・マップをご覧くださいライブラリはMapの良いソースの1つです。外部のjavascriptソースをAngular 2に管理するのは非常に難しく、イベントを変更したり抜けたりする可能性が非常に高いからです。

angular us mapは、要件を満たす優れた情報源の1つです。このパッケージを使用すると、独自のイベントをバインドしてさらに処理することができます。すなわち、状態をクリックすることによって行われる。