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 below). 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 below).
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.
The figure below 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.
The gif below shows how the flow above works in a browser.
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. The figure below shows the table we’re using in our example.
Given this table (or any other table with a column containing location data) you can plot markers for your data.
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 below). Weave.ly will automatically plot all the markers on the map.
