Pass MapOptions and turn off fade and delay

osm-americana · Oct 7, 2023 · 700b04a · 700b04a
1 parent 4a7cd09
commit 700b04a
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 30 deletions.
diff --git a/scripts/generate_samples.ts b/scripts/generate_samples.ts
@@ -67,10 +67,6 @@ async function createImage(screenshot: SampleSpecification) {
     await page.waitForFunction(() => window.map?.loaded(), {
       timeout: 3000,
     });
-
-    const waitTime = 500;
-    console.log(`waiting for ${waitTime} ms`);
-    await page.waitForTimeout(waitTime);
   } catch (e) {
     console.log(`Timed out waiting for map load`);
   }

diff --git a/src/americana.js b/src/americana.js
@@ -15,7 +15,7 @@ import * as LegendConfig from "./js/legend_config.js";
 import SampleControl from "openmapsamples-maplibre/OpenMapSamplesControl.js";
 import { default as OpenMapTilesSamples } from "openmapsamples/samples/OpenMapTiles/index.js";
 
-import { createMap, loadRTLPlugin } from "./js/map_builder.js";
+import { createMap, loadRTLPlugin, buildStyle } from "./js/map_builder.js";
 
 function upgradeLegacyHash() {
   let hash = window.location.hash.substr(1);
@@ -28,12 +28,15 @@ upgradeLegacyHash();
 
 loadRTLPlugin();
 
-export const map = createMap(
-  window,
-  (shields) => shieldDefLoad(shields),
-  [-94, 40.5],
-  4
-);
+export const map = createMap(window, (shields) => shieldDefLoad(shields), {
+  container: "map", // container id
+  hash: "map",
+  antialias: true,
+  style: buildStyle(),
+  center: [-94, 40.5],
+  zoom: 4,
+  attributionControl: false,
+});
 
 let options = {};
 

diff --git a/src/bare_americana.js b/src/bare_americana.js
@@ -2,16 +2,20 @@
 
 import "maplibre-gl/dist/maplibre-gl.css";
 
-import { createMap, loadRTLPlugin } from "./js/map_builder.js";
+import { createMap, loadRTLPlugin, buildStyle } from "./js/map_builder.js";
 
 loadRTLPlugin();
 
-export const map = createMap(
-  window,
-  (shields) => shieldDefLoad(),
-  [-94, 40.5],
-  4
-);
+export const map = createMap(window, (shields) => shieldDefLoad(), {
+  container: "map", // container id
+  hash: "map",
+  antialias: true,
+  style: buildStyle(),
+  center: [-94, 40.5],
+  zoom: 4,
+  fadeDuration: 0,
+  attributionControl: false,
+});
 
 function shieldDefLoad() {
   if (window.top === window.self) {

diff --git a/src/js/map_builder.ts b/src/js/map_builder.ts
@@ -16,7 +16,7 @@ import {
 import * as Poi from "../js/poi.js";
 import * as Label from "../constants/label.js";
 import * as Style from "../js/style.js";
-import maplibregl, { LngLatLike, Map, StyleSpecification } from "maplibre-gl";
+import maplibregl, { Map, MapOptions, StyleSpecification } from "maplibre-gl";
 
 export function buildStyle(): StyleSpecification {
   var getUrl = window.location;
@@ -56,19 +56,10 @@ export function loadRTLPlugin(): void {
 export function createMap(
   window,
   shieldDefCallback: (shields: ShieldDefinitions) => void,
-  center: LngLatLike,
-  zoom: number
+  options: MapOptions
 ): Map {
   window.maplibregl = maplibregl;
-  let map: Map = (window.map = new maplibregl.Map({
-    container: "map", // container id
-    hash: "map",
-    antialias: true,
-    style: buildStyle(),
-    center, // starting position [lng, lat]
-    zoom, // starting zoom
-    attributionControl: false,
-  }));
+  let map: Map = (window.map = new maplibregl.Map(options));
 
   const shieldRenderer = new URLShieldRenderer("shields.json", routeParser)
     .filterImageID(shieldPredicate)