ZoomRange component for showing/hiding content based on map zoom level.

This component wraps content that should only be visible within a specific zoom range. It listens to map zoom events and automatically shows or hides the content using CSS.

Examples

Show content only at high zoom levels:

<.zoom_range
  id="detail-view"
  map_id="my-map"
  min={12}
>
  <div class="detail-panel">
    Detailed information visible only when zoomed in
  </div>
</.zoom_range>

Show content only at low zoom levels:

<.zoom_range
  id="overview"
  map_id="my-map"
  max={8}
>
  <div class="overview-panel">
    Overview visible only when zoomed out
  </div>
</.zoom_range>

Show content within a specific zoom range:

<.zoom_range
  id="mid-zoom-info"
  map_id="my-map"
  min={8}
  max={14}
>
  <div class="info-box">
    Information for medium zoom levels (8-14)
  </div>
</.zoom_range>

Conditional UI based on zoom:

def render(assigns) do
  ~H"""
  <.map id="my-map" center={[-74.5, 40]} zoom={9} style={@style} class="h-96" />

  <.zoom_range id="zoom-in-msg" map_id="my-map" max={10}>
    <div class="absolute top-4 left-1/2 transform -translate-x-1/2 bg-yellow-100 p-2 rounded">
      Zoom in to see building details
    </div>
  </.zoom_range>

  <.zoom_range id="building-details" map_id="my-map" min={14}>
    <div class="absolute bottom-4 right-4 bg-white p-3 rounded shadow">
      <h3>Building Details</h3>
      <p>Detailed building information</p>
    </div>
  </.zoom_range>
  """
end

Complex example with multiple ranges:

<.zoom_range id="country-level" map_id="my-map" max={4}>
  <div>Country view</div>
</.zoom_range>

<.zoom_range id="state-level" map_id="my-map" min={4} max={8}>
  <div>State view</div>
</.zoom_range>

<.zoom_range id="city-level" map_id="my-map" min={8} max={12}>
  <div>City view</div>
</.zoom_range>

<.zoom_range id="street-level" map_id="my-map" min={12}>
  <div>Street view</div>
</.zoom_range>