Adding multiple sources and layers with .each?

Question

I try to simplify my codebase for an ongoing project. I render different lines from different sources. Adding the source and layer one by one works as expected. But if I put this in an object it won't work. I even have no errors in the console. Now I am stuck at the following code

var trip_entries = {
    t2: {
        trip_id: 'trip-entry-2',
        trip_geojson: '[[-0.15591514, 51.51830379],[-0.07571203, 51.51424049],[-0.08533793, 51.50438536],[-0.085793, 51.5036],[-0.084793, 51.503336],[-0.089793, 51.505336]]'
    },
    t3: {
        trip_id: 'trip-entry-3',
        trip_geojson: '[[-0.15514, 51.518],[-0.075703, 51.515],[-0.085793, 51.50],[-0.0793, 51.506],[-0.08473, 51.50336],[-0.0893, 51.536]]'
    },
};

// Set route
$.each(trip_entries,function(key,value){

    // Add sources
    map.addSource(value.trip_id,{
        'type': 'geojson',
        'data': {
            'type': 'FeatureCollection',
            'features': [
                {
                    'type': 'Feature',
                    'geometry': {
                        'type': 'LineString',
                        'coordinates': value.trip_geojson
                    }
                },
            ],
        },
    });

    // Add layers
    map.addLayer({
        'id': value.trip_id,
        'type': 'line',
        'source': value.trip_id,
        'layout': {
            'line-join': 'round',
            'line-cap': 'round'
        },
        'paint': {
            'line-color': 'rgb(160,160,160)',
            'line-width': 6,
        }
    });

});

Answer 1

You are passing the geoJSON as a string, rather than an array of coordinates. You should remove the ' ' on both of your geoJSONs to get the code to run. See below:

mapboxgl.accessToken =
  "pk.eyJ1IjoicGxtYXBib3giLCJhIjoiY2s3MHkzZ3VnMDFlbDNmbzNiajN5dm9lOCJ9.nbbtDF54HIXo0mCiekVxng";
var map = new mapboxgl.Map({
  container: "map", // container id
  style: "mapbox://styles/mapbox/streets-v11", // stylesheet location
  center: [-0.084793, 51.503336], // starting position [lng, lat]
  zoom: 11 // starting zoom
});

var trip_entries = {
  t2: {
    trip_id: "trip-entry-2",
    trip_geojson: [
      [-0.15591514, 51.51830379],
      [-0.07571203, 51.51424049],
      [-0.08533793, 51.50438536],
      [-0.085793, 51.5036],
      [-0.084793, 51.503336],
      [-0.089793, 51.505336]
    ]
  },
  t3: {
    trip_id: "trip-entry-3",
    trip_geojson: [
      [-0.15514, 51.518],
      [-0.075703, 51.515],
      [-0.085793, 51.5],
      [-0.0793, 51.506],
      [-0.08473, 51.50336],
      [-0.0893, 51.536]
    ]
  }
};

map.on("load", function () {
  // Set route
  $.each(trip_entries, function (key, value) {
    // Add sources
    map.addSource(value.trip_id, {
      type: "geojson",
      data: {
        type: "FeatureCollection",
        features: [
          {
            type: "Feature",
            geometry: {
              type: "LineString",
              coordinates: value.trip_geojson
            }
          }
        ]
      }
    });

    // Add layers
    map.addLayer({
      id: value.trip_id,
      type: "line",
      source: value.trip_id,
      layout: {
        "line-join": "round",
        "line-cap": "round"
      },
      paint: {
        "line-color": "rgb(160,160,160)",
        "line-width": 6
      }
    });
  });
});

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css" rel="stylesheet" />
<div id="map"></div>