Add Highway Link Attributes sample.

Author: adamfranco

demo.js

@@ -5,6 +5,7 @@ import Sample from "openmapsamples/lib/Sample";
 import Layer from "openmapsamples/lib/Layer";
 import { ExamplePlaceData, ExampleTransportationData } from "openmapsamples/lib/SampleData/ExampleSampleData";
 import { default as highwayAttributesSample, sampleData as highwayAttributesSampleData } from "openmapsamples/samples/OpenMapTiles/HighwayAttributes";
+import { default as highwayLinkAttributesSample, sampleData as highwayLinkAttributesSampleData } from "openmapsamples/samples/OpenMapTiles/HighwayLinkAttributes";
 // import MaplibreInspect from "maplibre-gl-inspect";
 // import "maplibre-gl-inspect/dist/maplibre-gl-inspect.css";
 
@@ -43,6 +44,21 @@ async function main() {
     }
   });
 
+  // Add our Highway Link Attributes sample.
+  sampleControl.addSample(highwayLinkAttributesSample);
+  // Set a custom row-hight callback to give more space to motorways at high zooms.
+  // This isn't needed for all styles, but the osm-standard style
+  // inflates widths of motorways and trunk at high zooms.
+  highwayLinkAttributesSampleData.setRowHeightCallback(function(zoom, row, numRows) {
+    if (zoom > 18 && row < 2) {
+      return 24 / numRows / Math.pow(2, zoom - 4);
+    } else if (zoom > 16 && row < 2) {
+      return 22 / numRows / Math.pow(2, zoom - 4);
+    } else {
+      return 20 / numRows / Math.pow(2, zoom - 4);
+    }
+  });
+
   let sample = sampleControl.addSample(
     new Sample('example', 'Example', 'This is an example sample showing hand-crafted GeoJSON that mocks OpenMapTiles data. (<a href="https://github.com/adamfranco/OpenMapSamples/blob/main/lib/SampleData/ExampleSampleData.js">source</a>)', [-100.85664, 39.71282], 7)
   );