Learn in 5 min how to build a map in Angular | 2022 tutorial step by step

Aug 15, 2023

Step-by-step written guide: https://maptiler.link/3QJs4Fl
GitHub repo: https://maptiler.link/3DFfoMX
MapTiler Cloud: https://maptiler.link/3g8uwIA
Step-by-step tutorial on how to create a map from stretch: https://maptiler.link/3U7j0gm

This tutorial shows how to create a map in Angular with MapLibre GL JS and MapTiler Cloud.

Do you need the best maps for your web or mobile app?
Start with MapTiler at maptiler.com/cloud

Thank you for watching this video.
If you find this video helpful, don’t forget to like it and subscribe to our channel for the latest videos: https://maptiler.link/YT_Subscribe

Follow us on
Twitter: https://twitter.com/MapTiler
Facebook: https://www.facebook.com/maptiler
LinkedIn: https://www.linkedin.com/company/mapt…

Content

1.44 -> hello i'm going to show you how to create a simple angular map app with a title and

7.2 -> a marker for my favorite cafe we've created a github repository called get started with

13.44 -> angular and map libre gljs it contains a basic angular map with zoom controls

19.84 -> so the easiest way to get started is to clone it you'll find the link in the description below

25.84 -> all the commands i'm using can be found in the step-by-step guide

29.76 -> there's a link for this in the description as well let's get started download the repository

40 -> go to the project folder my angular map and install all the dependencies these are all

45.76 -> the libraries you'll need to build the map in the source folder navigate to the app

50.96 -> folder and find the app component html file here replace the map tiler api key placeholder text

59.12 -> with your own key to get a key go to maptyler.com and click on the my cloud button to sign up

66.88 -> signing up is free and allows you to try out all of maptyler's apis and data

73.04 -> the key is in the account api key section copy and paste it into the app component html file

80.56 -> then save it next run npm by typing npm start you can find your app on localhost 4200

91.04 -> now let's add the marker your angular map uses the nginx map libre gl library to create the map you

99.6 -> can also use it for creating markers just type mgl marker and specify the geographical coordinates

106.96 -> of your favorite cafe next we'll add the title by creating a new component stop the server with the

114.08 -> control c and install the angular cli tools with these you can easily create a new component folder

122.24 -> with all the necessary commands in this case you are creating a folder for the title component

136.4 -> run npm start again to be able to see the changes in your app you need to connect this component to

142.72 -> your app you can do that by embedding app dash title in the app component html file

150.64 -> no changes should be visible so far now let's define the text of our title

158.24 -> remove the placeholder element in the title component html file and create a div element

163.52 -> with the class heading within this div add the h1 heading now you can see the text of your title but

171.6 -> you might notice the attribution is no longer visible at the bottom of the map that's because

176.72 -> the map occupies 100 of the original screen and the title shifts the attribution off the bottom

183.6 -> we'll adjust this later first let's define the style of the title go to the file title

190.48 -> component css and define the style of the class heading we can align the text to center

196.8 -> set the background colour to angular red the text colour to white and give it a 15 pixel padding

204.16 -> don't forget to declare that the class heading is above h1 with zero margins and zero padding

211.68 -> now let's check how big the title is and adjust the size of the map

215.76 -> it's 68 pixels the map size is in app component css the height should be 100 vh-68 pixels

226.56 -> and that's it you've created an angular map if you found this tutorial useful please

232.32 -> like it and subscribe to our channel for more videos like this bye for now

252.8 -> you

Source: https://www.youtube.com/watch?v=7pxZxjVPNbk