![]() ![]() The container option sets the DOM element in which will the map be rendered. We initialize the map using React effect hook and we also set up some basic options of the map: This code will be right after the component is inserted into the DOM tree. In the next step, we will initialize the map in the Map() function. Here you will need to replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key. Longitude, latitude, and zoom for the map will all change as your user interacts with the map. The state stores the map object, its container. Now we will create a function as our map component. In this step, we will create a simple map component.Ĭreate a new file called map.js inside the components folder.įirst, we’ll import MapLibre GL and the required React functions. Now you should see the black navbar at the top of your browser. Replace the text This is my map App with. To create a new react project run in your command-line: ![]() ![]() In this step, we are going to learn how to create a React app. In this tutorial, you will learn how to install it. JavaScript library for building web maps. Your MapTiler account access key is on your MapTiler Cloud account page or Get API key for FREE. You don’t need a lot of experience using React for this tutorial, but you should be familiar with basic concepts and workflow. Minimal requirements for completing this tutorial.īasic React JS knowledge. Together we will make a simple fullscreen map application as an example on how to use MapTiler maps together with React and MapLibre GL JS for your own React app.īy the end of this tutorial, you will be able to create a full-screen map with a marker at a specified location. In this tutorial, you’ll learn how to create a React JS component to render a map using MapLibre GL JS. How to display MapLibre GL JS map using React JS ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |