---
title: Style by opening_date
description: Use a javascript transform and custom style to show if shops are currently open
options:
  zoom: 15
  center: [-77.481242, 37.553525]
style:
  layers:
    - type: symbol
      icon-image: maki:shop
      icon-halo-color: white
      icon-halo-width: 2
      icon-size: 0.5
      icon-overlap: always
      icon-color:
        - match
        - [get, open]
        - open
        - green
        - close
        - red
        - unknown
        - grey
        - black
transform: |
  import opening_hours from "https://esm.sh/opening_hours";
  export default (data) => {
    data.features = data.features.map((f) => {
      try {
        const oh = new opening_hours(f.properties.opening_hours);
        f.properties.open = oh.getStateString();
      } catch {}
      return f;
    });
    return data;
  };
---
[out:json][bbox:{{bbox}}];
nwr[shop];
out center;