In this short tutorial we’ll show you how to use weave.ly’s map-and location-related functionality.
Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!
Designing Maps & Markers for weave.ly in Figma
From a design perspective weave.ly’s location-related functionality focuses on two elements.
First, any rectangle layer can be tagged with the Map functionality (see Figure 1). Once the web application is published, a functioning map will be rendered within the bounds of this rectangle. You can try this directly by publishing your design with a tagged rectangle.
Second, any vector can be tagged with the Custom Map Marker functionality. In doing so you’ll be able to use the vector image as a marker on your map (see Figure 2).
It is important to note that your vector must be part of a frame to be taggable
For the moment we don’t support rendering maps in rotated rectangles or other shapes, you can tag a rotated rectangle with the Map functionality. However, weave.ly will automatically straighten the rectangle in your web application.
Configuring Maps in the Editor
Once you tagged your rectangle with the Map functionality, and optionally designed a custom marker, you can configure which map provider to use. You can do this by selecting a Map block in the flow editor and choosing a map provider from the dropdown in the configuration panel on the right.
Rendering a map in itself isn’t very useful. In the following two sections we’ll showcase how you can plot live and static locations on a map.
Showing a User’s Live Location
A Map block has a single input port through which it accepts markers. In other words, if you want to show anything on a map you’ll need to first create a marker for it. In case of a user’s location this can be done using the CurrentLocation block which you’ll find in the block menu.
Figure 4 showcases an example flow to plot a user’s current location on a map. The Startup Trigger block will output a trigger whenever your web application is loaded, in turn the Current Location block will request the user’s current location (i.e. via the browser). Subsequently the Map Marker block will use this location to create a map marker and plot it on your map.
You’ll notice that the Map Marker block enables you to configure two settings. First, whether or not the marker should move as the location changes. If the moveMarker box isn’t ticked then every location change will generate a new marker. Second the panToMarker box will ensure that the map always pans to the latest drawn marker.
Figure 5 shows how the flow above works in a browser.
For the moment we don’t allow any interaction on map markers (e.g. opening overlays on click). If you’re interested in this or any other feature feel free to send us an e-mail at info@weave.ly
Showing Locations from Sets of Data
Besides showing live locations you can also plot markers for static data contained in a weave.ly table.
If you’re new to the concept of tables, we recommend you to first have a look at this and this tutorial.
For our example we’re assuming a table containing at least one column with location data. Figure 6 shows the table we’re using in our example.
Given this table (or any other table with a column containing location data) there are two ways you can plot markers for your data.
The Easy Way
You can directly link a Table block with the Table To Markers block. You need to configure the latter to select which column contains the location data you want to plot on the map (see Figure 7). Weave.ly will automatically plot all the markers on the map.
The (Less) Easy Way
Alternatively, you can also extract the rows from the table and “manually” create markers for the location item in each row. The advantage of this approach is the ability to use a custom map marker (see Figure 8).
Figure 9 shows how the flow above works in a browser.
