angularjvectormap

How to implement jvectormap in angular

I'm working on an Angular project (ng-version=4.4.6). I need to have a map which will work without connection. I'd like to try jvectormap. The documentation and every exemples I found are shown for Angular.js. As I am not very experimented in Angular, I have no idea of how to implement this library and use it in my project.

Did anybody ever use it in a project and could show me the way ?

Thanks

Solution

  • You should include both jQuery and jVectorMap files just like described in the official documentation inside your index.html

    Then inside your component you have to declare jQuery by doing this just @Component decorator.

    declare var jQuery: any;

    Then you can inside by example ngAfterViewInit() add this code

    ngAfterViewInit(){
  jQuery('#world-map').vectorMap();
}

    Inside you component html file you add this

    <div id="world-map" style="width: 600px; height: 400px"></div>

    In your index.html

    <link href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.css"></link
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>

    The thing is that with angular 2 due to typescript you can easily use jQuery or pure JS