Integrate a global javascript UI library into Angular application

Question

I have to use mapwize sdk (https://github.com/Mapwize/mapwize.js-dist/blob/master/doc/doc.md#_install-mapwize), a pure javascript library, inside an Angular application (Angular4.x).

I've tried to put a script tag in index.html to include the library (js and css) and added some script to display a MapWize map, like below and I've got the map displayed:

<head>    
    <link rel="stylesheet" href="./assets/bower_components/mapwize/dist/mapwize.css">
    <script src="./assets/bower_components/mapwize/dist/mapwize.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>
    <script>   
        var bounds = new L.LatLngBounds(
            new L.LatLng(49.742313935073504183, 4.5989323407411575317),
            new L.LatLng(49.742851692813445652, 4.5997658371925345122)
        );
        var map = Mapwize.map('map', {
            apiKey: '1f04d780dc30b774c0c10f53e3c7d4ea', 
            accessKey: 'demo'                
        });
        map.fitBounds(bounds);
    </script>
</body>

All I want now is to integrate the map into a component in the app, and I have no idea how to do that, is that possible? have someone faced a similar issue?

Vamshi · Accepted Answer · 2017-06-22 13:35:04Z

1

Just outside your component/service do this

declare const Mapwize; 


@Component({
  selector: 'my-component',
  template: `
    <div>Hello my name is {{name}}.
      <button (click)="sayMyName()">Say my name</button>
    </div>
   `
})

export class MyComponent {
  name: string;
  constructor() {
    this.name = 'Max'
  }
  abc() {
    //Mapwise...()
  }
}

You should be able to use it

edited Jun 22, 2017 at 13:35

answered Jun 22, 2017 at 13:30

Vamshi

9,3615 gold badges41 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Faly Over a year ago

There is no controller, it's Angular4.x application. What do you mean by outside?

Vamshi Over a year ago

Typo, I meant component

Collectives™ on Stack Overflow

Integrate a global javascript UI library into Angular application

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related