Follow the next steps to display the UNL grid lines and cells on the map in the sample JS web application.
First, install the
unl-core library in order to show the grid lines on the map.
Import the library to access its methods.
Create a new method for rendering the grid by adding a new map layer and initializing it with an empty features array.
Next, call this method when the map gets loaded in the app in
Then, create a method for calculating and updating the grid lines according to the map's current setting.
Call this method whenever the map transitions from one view to another in
Now, when you zoom in on the map at a value higher than 18, you should be able to see the grid.
Display UNL cells on the map when selecting a location. Firstly, add a method for rendering the cell.
Then, call the previous method in
index.js when the map is loaded for the first time.
Add a helper method to transform point coordinates from the map into a geoJSON Position array which contains the bounds of that point (the cell corners) by using the
Next, create a method to update the rendered cell according to the selected location on the map.
updateCell method whenever a click event is captured on the map.
A cell should be visible whenever you click somewhere on the map.
Add a new menu component in the application in order to allow the selection of different scenarios, such as creating and importing POIs.
Firstly, add a new
<div> in the
Then, add styling for the new action sheet component.
Create the new menu component (we named it
Finally, initialize the component in the
At this point, the action sheet should be visible in the app.