In the next line where we declare the navigation control we add these lines: With everything done up until now, you should be able see your beautiful map in your browser.Īnother basic thing to add to your map could be a marker of some location. Your App.jsx file should then look like this: components/map.jsx ' Īnd then, add the imported component in your App() function. Create a file named map.css in components folder for the map component style and write the following code to your map.css file: Now we will need simple styling to render the map correctly. We are finished with our basic map component, your map.jsx file should look like this: The ref= specifies that App should be drawn to the HTML page in the element. Add the following code to your component above the closing curly brace of Map(): Now, we will add the return statement to your Map() function. The center and zoom options set the starting position of the map. The style option defines what style is the map going to use. We will assign the ref our component expects to an HTML element, which will act as a container, later in this tutorial. 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.jsx inside the components folder.įirst, we’ll import MapTiler SDK JS 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 of how to use MapTiler maps together with React 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 MapTiler SDK JS.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |