1. Home
  2. Guides & Tutorials
  3. Maps, Markers and Locations

Maps, Markers and Locations

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.

Screenshot of Figma showing how a rectangle can be tagged with the map functionality using the weave.ly plugin
Figure 1: Tagging a rectangle layer with the Map functionality

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).

Figure 2: Tagging a vector with the Custom Map Marker functionality

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.

Screenshot of the weave.ly platform, configuring which map provider to use to render the web application
Figure 3: Configuring which map provider to use

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.

Screenshot of the weave.ly platform, plotting a user's location on a map designed in Figma
Figure 4: Plotting a user’s current location on a map

Figure 5 shows how the flow above works in a browser.

A GIF showing how a map designed in Figma is turned into a working web app using weave.ly
Figure 5: Result of our user-location example on a functioning map

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.

Screenshot of a weave.ly table containing data for venues (title and location)
Figure 6: Table used to explain this 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.

Screenshot of the weave.ly flow editor, showing how you can plot table data on a map
Figure 7: Converting table data into map markers to show on a 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).

Screenshot of the weave.ly flow editor, showing how you can plot table data on a map
Figure 8: Converting table data into map markers to show on a map

Figure 9 shows how the flow above works in a browser.

A GIF showing how a map designed in Figma is turned into a working web application
Figure 9: Our map example, with custom marker, in practice
Updated on January 18, 2023

Was this article helpful?

Related Articles