Workshop Kit · referencia del widget
Publicadomap-radius
Slider de radio alrededor de la dirección del operador, con un placeholder visual de barrio. El plan pide tiles de mapa estáticos pre-horneados en /brand/maps/ por área metropolitana; ese horneado de tiles es una tarea separada de infraestructura, así que hoy el widget renderiza una cuadrícula de calles SVG (sembrada desde un hash de la dirección del operador, así la misma dirección siempre muestra el mismo layout de barrio). Cuando lleguen los tiles reales, el SVG puede intercambiarse por un background-image CSS del PNG del metro sin cambiar el contrato externo del widget.
Demo en vivo
Arrastra el slider de 0.5 a 5 millas. El círculo cambia de tamaño; el texto resumen se actualiza con equivalentes en minutos en auto + minutos a pie (promedio de arterial urbana 15 mph, caminando 3 mph). Si fijaste una dirección de restaurante en otra lección, se muestra debajo del mapa; si no, un prompt enlaza directo a la L10.
Sin bloque de configuración — rango del slider fijo en 0.5–5 millas en incrementos de 0.25
Contrato
| Comportamiento | Notas |
|---|---|
Lee restaurantProfile.address |
Solo display — el widget nunca geocodifica (sin fetch). La dirección se hashea para sembrar el layout de la cuadrícula SVG, así una dirección dada siempre muestra el mismo patrón de barrio. |
Lee deliveryRadius |
Posición inicial del slider. Cae a 1.5 millas. |
Lee palette[0] |
Tinta el círculo de radio + el marcador de la dirección. |
Escribe deliveryRadius |
Número, millas, 0.5..5 en incrementos de 0.25. Se usa en el fraseo de keywords de la L12 y (eventualmente) en el markup de schema del generador de la L14. |
| La dirección llega después | Si el operador termina la L10 (fija su dirección) después de montar este widget en la L4, el widget re-renderiza la cuadrícula + dirección display vía la suscripción a mtn:context-change. Sin necesidad de remontar. |
| Equivalentes de tiempo | Aritmética pura — 15 mph para auto (promedio de arterial urbana en la cena), 3 mph caminando. Órdenes de magnitud razonables; no estimaciones de turn-by-turn. |
Marcado
Sin bloque de configuración. El widget lee restaurantProfile.address + deliveryRadius de MuntinContext.
Accesibilidad
<input type="range">conaria-labelledbyapuntando al encabezado del widget yaria-valuetextseteado a la misma oración que muestra el resumen visible ("2 millas — aproximadamente 8 min en auto o 40 min a pie"). Los lectores de pantalla obtienen el significado, no solo el número crudo.- La visualización SVG es
aria-hidden="true"; la dirección + resumen cargan el significado. - Deslizar anuncia "Radio puesto a … millas — aproximadamente … minutos en auto" vía una región polite en vivo. Debounce de 250ms para que arrastrar no spamee al anunciador.
- La fila de dirección cae a un prompt en cursiva que enlaza directo a la L10 cuando no hay dirección, así el widget nunca se renderiza de manera ambigua.
Por qué un placeholder de cuadrícula, no un mapa real
Los tiles de mapa reales necesitan un fetch a un tile-server (viola "sin fetch") o PNGs pre-horneados para cada metro donde podría estar el operador (una tarea real de infraestructura — elegir un proveedor de tiles, construir el pipeline de assets, decidir qué metros cubrir, refrescarlos periódicamente conforme las ciudades cambian). Hasta que esa infra llegue, la cuadrícula de calles SVG transmite la única señal que la lección realmente necesita: escala. Un comensal mirando "0.5 millas" vs "5 millas" ve la diferencia; no necesita reconocer su propia calle. La siembra por hash de dirección significa que el placeholder es al menos consistente — la misma dirección siempre muestra el mismo patrón de barrio, lo que lo hace sentir intencional en vez de aleatorio.
Cuando el pipeline de tiles llegue, el intercambio del widget es una regla CSS: cambiar .mrw-map a background-image: url("/brand/maps/" + metro + ".webp") y el SVG placeholder desaparece. El círculo de radio, slider, fila de dirección, y el cable de contexto siguen funcionando.
Dónde se publica
Código fuente
/tools/_shared/workshop/map-radius.js — ~210 LOC. Exporta { tag, contextKeys, mount, serialize }. La cuadrícula SVG se construye con buildStreetGrid(addrHash, accent) arriba del archivo; un reemplazo basado en tiles futuros solo intercambiaría esa función. Los helpers de tiempo-equivalente carMinutes() y walkMinutes() usan constantes simples documentadas en comentarios.