We're happy to share that the Base map markers have landed in Base Web! These map markers have been an integral part of our products and our design system at Uber and we're excited to release this component to the open-source community.

Map markers can be used to mark a specific location on a map with content, such as an UberX pickup spot, an UberEats restaurant, or a nearby Lime bike.

The map markers come in two different flavors:

• Fixed marker
• Floating marker

Fixed marker

The fixed marker is a marker with a pinhead and an optional needle.

It's recommended to use a fixed marker when you are showcasing specific points or areas. Think of it like a pin pushed into a wallmap. The content won’t move around or adjust, it’s not travelling around, and it’s not attached to something dynamic.

The fixed marker can be customized with:

• 5 different pinhead configurations (size + shape)
• 4 different needle configurations
• start and end enhancers to display icons or symbols

Floating marker

The floating marker is a marker with a floating label and an optional attached anchor.

Use a floating marker when showcasing ambient, moving, intermediary, or unpredictable content. Floating markers can move around easily to fit a frame, they can move around easily if the element they are attached to is moving, and they can reposition themselves as needed.

Markers on a route line or pickup points are frequently floating markers.

The floating marker can be customized with:

• 4 different label sizes
• 5 different anchor positions
• 2 different anchor types
• start and end enhancers to display icons or symbols

The position of the label can be animated around the marker. This is helpful for when the map data or the viewport is changing dynamically in the application and you need to reposition the floating marker label.

How to use

The map marker components are normal React components that can be rendered on the DOM like any other HTML element. However, you can fully take advantage of the map markers by rendering them in a web maps SDK like Mapbox GL JS, deck.gl, or Leaflet. This way, the map markers can be properly positioned on a map.

The recommended SDK for working with these markers is react-map-gl. react-map-gl is a library to interact with Mapbox GL JS while using React. However, you are welcome to use any maps SDK of your choice with the map markers.

Interested in learning more about the Base map marker? Check out these resources:

• How I programmatically built 256 new design system components in Figma
• Usage rules for Base map markers at Uber

Thanks to Kelly Hudiono and Filip Spiridonov for the help developing this component.