Mapbox: Create a Rectangle with border-radius (Layer)

2 min read 05-10-2024

Mapbox: Create a Rectangle with border-radius (Layer)

Creating Rounded Rectangles with Mapbox Layers

Mapbox offers a powerful platform for creating interactive and visually appealing maps. One common task is to highlight specific areas on the map. While Mapbox provides tools for drawing rectangles, you might want to create rounded rectangles for a softer visual effect. This article will guide you through the process of creating rounded rectangles as Mapbox layers.

The Challenge

You want to draw a rounded rectangle on a Mapbox map, but the standard Mapbox drawing tools don't directly support rounded corners. This means you need to find a workaround to achieve the desired visual effect.

The Solution

The key to achieving rounded rectangles in Mapbox is to use the fill-outline-color and fill-outline-width properties of the fill layer. Here's the core logic:

Create a standard rectangle layer: Define a fill layer with the desired rectangle coordinates and fill color.
Use fill-outline-color for the border: Set the fill-outline-color property to the same color as your desired border. This will create a solid border around the rectangle.
Adjust fill-outline-width for the border thickness: Increase the fill-outline-width property to control the thickness of the border.
Use fill-outline-opacity for control over the outline: Control the transparency of the border with the fill-outline-opacity property.

Example Code

const map = new mapboxgl.Map({
  container: 'map', // container ID
  style: 'mapbox://styles/mapbox/streets-v11', // style URL
  center: [-74.0060, 40.7128], // starting position [lng, lat]
  zoom: 12 // starting zoom
});

map.on('load', () => {
  // Add a rounded rectangle layer
  map.addLayer({
    "id": "rounded-rectangle",
    "type": "fill",
    "source": {
      "type": "geojson",
      "data": {
        "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": [[
            [-74.0060, 40.7128], // Bottom Left
            [-74.0060, 40.7128 + 0.01], // Top Left
            [-74.0060 + 0.01, 40.7128 + 0.01], // Top Right
            [-74.0060 + 0.01, 40.7128], // Bottom Right
            [-74.0060, 40.7128] // Closing point
          ]]
        }
      }
    },
    "paint": {
      "fill-color": "#007bff", // Blue fill color
      "fill-outline-color": "#007bff", // Blue border color
      "fill-outline-width": 3, // 3px border width
      "fill-outline-opacity": 1, // Fully opaque border
    }
  });
});

Explanation and Additional Insights

Geometric Precision: The code creates a rectangle by defining its four corners using longitude and latitude coordinates.
fill-outline-width and Rounding: The fill-outline-width creates the effect of rounding because it increases the width of the border, making it visually appear as rounded corners.
Fine-tuning: You can adjust the fill-outline-width to achieve varying levels of rounding. Smaller widths will create more subtle rounding.
Customization: Experiment with different fill colors, border colors, and opacity levels to create diverse rounded rectangle styles.
Dynamic Updates: You can update the coordinates of the rectangle dynamically based on user interaction or other events.

Conclusion

This article provided a simple yet powerful method for adding visually appealing rounded rectangles to your Mapbox maps. By leveraging the fill-outline-color and fill-outline-width properties, you can create custom rounded rectangles that enhance the visual presentation of your map data. Remember to experiment with the code and adjust the parameters to achieve the desired visual effect.