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
Here is the live demo web application:
- Link OSM js and css CDN reference in index.html file
2. Put a
app.component.html file to host OSM map.
<div id="map" class="map"></div>
ol variable globally inside
declare var ol: any;
4. Declare a
map as a class member variable of type
5. Initialise map inside
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
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.
ng-openstreetmap-demo - Displaying OpenStreetMap inside Angular 6