FramerX - Mapbox Component

Introduction

This project is a work in progress. The goal of the project is to build a powerful Mapbox prototyping tool in FramerX, allowing us to link between different map states and page element states. In the Demo, we used this tool to link cards to a specific map state of the layers’ visibility and camera position.

Feature Overview

Unchecked items are not on the project yet, but planned for release and should show up in the future.

Camera initial set up (in “Map Component”)

• Latitude/longitude
• Zoom level
• Pitch
• Bearing

Camera state set up (per-card)

• Latitude/longitude
• Zoom level
• Pitch
• Bearing
• Zoom to feature/layer

Visibility

• Hide layers: inherit setting from the map
• Show layers: override

Interaction controllers

• Page Component
• Mouse interactions
• Scroll interactions
• integration with 3rd party components

Data source manipulation

• Override layer info: Target layer and add a custom source file override (url/GeoJSON)
• Filter by layer type

Parametric design

• Dynamic styling: conditional styling based on dataset values.

Much of the initial development of this component has taken place in the “Design Tools Hackathon 2018”, hosted in Tel-Aviv. This component is in active development. Further documentation will be added as we go.