Using OpenStreetMap inside Angular (v6)

Update: 12 July

Show Lat-Long on mouse click event.

Show Lat-Long on mouse mouse event.

There is no doubt Google map is one of the best map solution. Nevertheless if you are building enterprise/commercial application then you would have to buy the subscription.

If you want to see how to use Google Maps with Angular, you can check my blog:

If your product/solution team is ready to lift some weight for map solution for free then you can consider using OpenStreetMap (OSM)


You can build map solution using OSM and OpenLayer APIs.

In this story, we will try to integrate OSM inside Angular (v6) and perform basic setCenter feature.

Here is the live demo web application:


  1. Link OSM js and css CDN reference in index.html file
<link rel="stylesheet" href="" type="text/css"><script src="" type="text/javascript"></script>

2. Put a <div> inside app.component.html file to host OSM map.

<div id="map" class="map"></div>

3. Declare ol variable globally inside app.component.ts file

declare var ol: any;

4. Declare a map as a class member variable of type any.

5. Initialise map inside ngOnInit()

6. Run ng serve --open You should see OSM map loaded inside browser.

Set Center of map

We can update UI to accept Latitude/Longitude from user and on “go” button click we can set center of map by calling view.setCenter() method.

OSM is open source project and you will find many open source libraries to customise your OSM and export data at your will.

Here is the complete source code of demo application.


Cloud Solution Architect | Author | Full Stack Developer | |

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store