Beautiful Maps - Mapbox
  • Introduction
    • 👋Welcome
    • Key use cases
    • Key features
    • Demo apps
  • Getting Started
    • Registering for a Mapbox account
    • Install the plugin
    • Adding the access token
    • Adding a map to your app
  • Loading a Map
    • Selecting a default location
    • Setting zoom levels
    • Setting a map style
    • Adding controls to a map
  • Loading Markers
    • Structuring your database for markers
    • Adding multiple markers
    • Adding a single marker
    • Adding popups to markers
    • Using custom icons
    • Changing marker on hover
    • Removing markers from a map
    • Trigger an action when marker is clicked
  • Geolocation
    • Show the user's current location
  • Drawing Mode
    • Drawing shapes on a map
    • Saving drawings
    • Loading drawings
  • Route Navigation
    • Adding navigation
Powered by GitBook
On this page
  • Load a custom map in your Bubble app
  • Load markers on a map
  • Geolocation
  • Drawing Mode
  • Google-map style route navigation
  1. Introduction

Key features

Load a custom map in your Bubble app

  • Use a predefined style or design your own in Mapbox Studio

  • Set the starting coordinates of the map

  • Set the initial zoom level and min/max zoom levels

  • Add 'controls' to the map (geolocation, directions, navigation)

Load markers on a map

  • Load markers at specific locations on you map

  • Use custom images for each marker icon or use the default style

  • Show a popup when a marker is clicked on with location-specific info

  • Change a marker icon when its hovered by the user

  • Trigger an action when a marker is clicked

  • Fly to a certain location

Geolocation

  • Show the current user's location on a map

  • Track the user as they move

Drawing Mode

  • Users can draw shapes on the map (polygons, lines points)

  • Save down the drawings (GeoJSON) and load them at a later stage

Google-map style route navigation

  • Add directions to your map

  • Users can choose a start and end point and get turn-by-turn directions

  • Choose from traffic, driving, walking or cycling directions

PreviousKey use casesNextDemo apps

Last updated 3 months ago