Not everyone likes numbers, so sometimes it’s better not to use any!
Now that you know how to add elements using written down coordinates and actions, next you need to learn how to use the little menu on the map to draw and place elements on the map.
The actions themselves are the same as adding elements using coordinates, the only difference is that you use the menu on the map to draw elements and a plugin event to trigger saving.
First find the interactive menu on the top right of the map:
The 1st top block is line drawing, the 2nd top is polygon drawing and the 3rd top is marker drawing. Currently the other ones are not used and will be implemented in later updates.
If you notice, when you are hovering over the map, you mouse icon is a little hand. To indicate that you are in drawing mode. Press on one of the icons you want to draw and the mouse icon should change into a + when hovering on the map.
With that out of the way let’s first set up the workflow needed.
Each interactive action triggers the custom event noted in
From here there are many ways to trigger the final events as long as it starts from the custom event, the one we use is the most simple one possible.
For example this custom event can be used to open a pop up menu where you choose images or colors and the final adding actions can be created in a different event of a button press of the pop up, etc.
To keep it as simple as possible we will use the values of the fields we created during
to note down the images or colors, the coordinates will come directly from the plugin based on your button presses.
We set up the actions in a similar way, the important thing we need to do here is to add a condition that checks the type of the element drawn, conditions have to be places in all 6 of the actions, depending which action represents which element. This comes straight from the map itself so conditions should look like in these examples the word after “is” is just written by hand as a string, there are 3 types: marker, line and polygon.
Note that this time, for the coordinates, we use values that come from mapbox, not the input ones. If you missed on those, read about them in
The map adding actions are the same result of steps, depending on which step the creation of the element for the database is.
And that’s it!
We can try adding an element interactively!
With the marker, we choose the image in the dropdown, press on the marker image on the map menu and press anywhere on the map. We will see a marker appear, it is also saved in the database and will appear on every refresh:
With the line, we will out the line color input with the color we want, for this example we will use red, which has a HEX code of #FF0000.
To draw a line, choose the line in the map interactive menu, them press on the map. Drag your mouse where you want to and when you are ok with the 2nd point of the line, press on the map again. When you keep doing this, you will notice a temporary orange line appear where you drew:
After you are done and happy with the line, press enter and the permanent line will appear:
If you mess up with you line or polygon, you can use the trash can icon in the interactive menu. Just press on it, don’t mind if the temporary line follows you. Everything will get deleted and you can start over.
For polygon we do the same as the line. We choose red for both outline and fill and opacity of the fill of 0.2.
Draw the polygon:
Press enter and you have your permanent polygon:
And that’s it! You have learned everything you need to know about this plugin for now!
If updates come with any new additions, everything will be documented here, so be sure to come back and check after every update! Good luck mapping!
Some questions may arise after reading through all the tutorial, we hope all of them get answered in
Prepare app for interactive use
