Hey there! Let’s work through getting your route layer added and removed smoothly in Mapbox GL. I’ll break down the correct approach, share full code examples, and cover common pitfalls that might be tripping you up.

1. Properly Adding the Route Layer #

First off, always make sure you add layers after the map has finished loading—trying to add a layer before the map is ready will cause errors. Use the load event to wrap your layer addition code. I’ll also add some basic paint properties to ensure your line is visible (you can tweak these to match your needs):

// Initialize your Mapbox map first
const map = new mapboxgl.Map({
  container: 'map', // Replace with your map container ID
  style: 'mapbox://styles/mapbox/streets-v12',
  center: [-122.4836, 37.8338], // Center on your route's starting point
  zoom: 14
});

// Wait for the map to load completely before adding layers
map.on('load', () => {
  map.addLayer({
    "id": "route",
    "type": "line",
    "source": {
      "type": "geojson",
      "data": {
        "type": "Feature",
        "properties": {},
        "geometry": {
          "type": "LineString",
          "coordinates": [
            [-122.48369693756104, 37.83381888486939],
            [-122.48348236083984, 37.83317489144141],
            [-122.48339653015138, 37.83270036637107],
            [-122.48356819152832, 37.832056363179625],
            [-122.48404026031496, 37.83114119107971],
            // Important: Make sure your coordinate array is complete (no trailing ...)
            [-122.48404026031496, 37.830497] // Replace with your full final coordinate
          ]
        }
      }
    },
    "paint": {
      "line-color": "#ff4040", // Bright red to ensure visibility
      "line-width": 4
    }
  });
});

Quick Note on Your Coordinates #

Your code has a trailing ... in the coordinates array—make sure to replace that with the full, valid coordinate pair. Incomplete GeoJSON data will prevent the layer from rendering correctly.

2. Safely Removing the Route Layer #

Never call removeLayer without checking if the layer exists first—this will throw an error if the layer isn’t present. Here’s a safe way to remove both the layer and its source (if you don’t need to reuse the source later):

// Create a reusable function to remove the route layer
function removeRouteLayer() {
  // Check if the layer exists before trying to remove it
  if (map.getLayer('route')) {
    map.removeLayer('route');
    
    // Optional: Remove the source too if you won't use it again
    if (map.getSource('route')) {
      map.removeSource('route');
    }
  }
}

// Example: Bind the function to a button click
document.getElementById('remove-route-btn').addEventListener('click', removeRouteLayer);

3. Troubleshooting Common Issues #

If your layer still isn’t behaving as expected, check these common culprits:

• Layer not showing up?
  • Verify your GeoJSON coordinates are complete and valid (no missing commas or truncated values).
  • Adjust the layer’s position using the optional beforeId parameter in addLayer (e.g., map.addLayer(layerConfig, 'road-label') to place it below road labels).
  • Ensure your paint properties have enough contrast with the map style (e.g., a thin white line on a light map might be hard to see).
• Remove function throwing errors?
  • Make sure you’re calling removeRouteLayer after the map has loaded (same as adding layers).
  • Double-check the layer ID matches exactly ("route"—case-sensitive!).

内容的提问来源于stack exchange，提问作者Pablo Estrada