Data Visualization of OpenStreetMap and Angular CLI
📅 May 06, 2018
•⏱️2 min read
I had been working recently for the past few weeks while picking up skills to develop the front end portion using Angular 5.
Here is what i had found for a few weeks of what i had been doing that is condensed in this article.
Where Do I Get Maps?
There is multiple options to use maps which lead me to this stackshare that allows you to compare between Openstreetmap, Google Maps and Mapbox.
Openstreetmap is the free option out of Google Maps and Mapbox. Which is used commonly by a lot of non profit organizations for disaster relief efforts.
These map API providers requires something called a Map Tile. Think of map tile like it's a blank piece of canvas with a certain dimensions that you specify.
To specify the size of the map tile you provide them with Latitude, Longitude and Zoom to map api providers like OpenStreetMap, Google Maps or Mapbox.
How Do I Use The Map Tile?
Once your map tile has been generated by specifying the coordinates and their zoom using the either of those map API providers above.
You use a library called Leaflet which is a simple to use javascript mapping library that is customisable to create your own layers with.
Besides that if your using Angular CLI and D3 for visualization of your maps. I would recommend you visit this short tutorial by Asymmetrik to create your first map.
To replace the map tile layer of google map to openstreetmap map tile. You need to change the map API provider link as shown below.
Google Map API Provider Link
http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}
to
OpenStreet Map API Provider Link
http://{s}.tile.osm.org/{z}/{x}/{y}.png
Links
Leaflet
Getting Started with NGX-Leaflet
https://www.asymmetrik.com/ngx-leaflet-tutorial-angular-cli/
StackShare
https://stackshare.io/stackups/google-maps-vs-mapbox-vs-openstreetmap