Evals

1{
2  "skill_name": "mapbox-google-maps-migration",
3  "evals": [
4    {
5      "id": 1,
6      "prompt": "I'm migrating a store locator from Google Maps to Mapbox. In Google Maps I created `new google.maps.Marker()` for each of my 500 store locations. I've translated this directly and I'm now creating `new mapboxgl.Marker()` for each store. My map is noticeably sluggish when displaying all 500 markers. What's the issue and how do I fix it?",
7      "expectations": [
8        "Identifies that mapboxgl.Marker() creates individual DOM elements — 500 DOM markers causes performance issues (not GPU-rendered)",
9        "Recommends switching to a GeoJSON source + symbol layer for large marker counts (100+ markers)",
10        "Explains that symbol layers are WebGL-rendered and can handle thousands of points efficiently",
11        "Shows the correct pattern: map.addSource() with GeoJSON FeatureCollection, then map.addLayer() with type 'symbol' or 'circle'"
12      ]
13    },
14    {
15      "id": 2,
16      "prompt": "I want to remove a GeoJSON layer from my Mapbox map. I'm calling `map.removeSource('stores')` but getting this error: 'Source \"stores\" cannot be removed while layer \"stores-layer\" is using it.' In Google Maps I just called `polygon.setMap(null)`. Why is Mapbox different and how do I fix it?",
17      "expectations": [
18        "Explains that Mapbox separates data (sources) from visual representation (layers) — multiple layers can reference one source",
19        "To remove cleanly: call map.removeLayer('stores-layer') first, then map.removeSource('stores')",
20        "Explains why this design exists — the same source can power multiple layers (e.g., both a circle layer and a label layer)",
21        "Contrasts with Google Maps' object model where the visual and data are combined in one object"
22      ]
23    },
24    {
25      "id": 3,
26      "prompt": "My Mapbox map loads a GeoJSON source with all 1000 stores. When a user filters by category, I call `map.removeLayer('stores')`, `map.removeSource('stores')`, then `map.addSource()` and `map.addLayer()` with filtered data. It works but there's a visible flash when the layer disappears and reappears. Is there a better pattern?",
27      "expectations": [
28        "Recommends map.getSource('stores').setData(filteredGeoJSON) to update data in place — no layer removal, no flash",
29        "OR recommends map.setFilter('stores', filterExpression) with a Mapbox GL JS filter expression — even better, no data re-upload, the full dataset stays in GPU memory",
30        "Explains that remove+re-add reinitializes WebGL resources causing the flash — setData() or setFilter() avoids this",
31        "Shows a concrete example of setFilter() with an expression like ['==', ['get', 'category'], selectedCategory]"
32      ]
33    }
34  ]
35}