MaplibreX.Components.Sky (MaplibreX v0.1.0)

Copy Markdown View Source

Sky component for adding atmospheric sky rendering to MapLibre maps.

This component adds a realistic sky layer that responds to map pitch and bearing, enhancing 3D terrain and building visualizations. The sky appearance changes dynamically based on the sun position.

Examples

Basic sky with default atmosphere:

<.sky
  map_id="my-map"
  type="atmosphere"
/>

Custom sky with specific sun position:

<.sky
  map_id="my-map"
  type="atmosphere"
  atmosphere_sun={[0.0, 90.0]}
  atmosphere_sun_intensity={5}
/>

Gradient sky:

<.sky
  map_id="my-map"
  type="gradient"
  gradient_center={[0, 0]}
  gradient_radius={90}
  gradient={["#87CEEB", "#E0F6FF", "#98D3E8"]}
/>

Custom sky color:

<.sky
  map_id="my-map"
  type="atmosphere"
  atmosphere_color="rgba(135, 206, 235, 1)"
  atmosphere_halo_color="rgba(255, 255, 255, 1)"
/>

Events

The sky component can emit the following events to LiveView:

def handle_event("sky:added", _params, socket) do
  IO.puts("Sky layer added")
  {:noreply, socket}
end

def handle_event("sky:removed", _params, socket) do
  IO.puts("Sky layer removed")
  {:noreply, socket}
end

Notes

  • Best used with pitched views (pitch: 45-60 degrees)
  • Enhances 3D terrain and building visualizations
  • Sky type can be "atmosphere" or "gradient"
  • Sun position affects atmosphere rendering
  • Automatically responds to camera bearing changes

Summary

Functions

sky(assigns)

Renders a sky layer component.

Functions

sky(assigns)

Renders a sky layer component.

Attributes

  • map_id (required) - ID of the map
  • type - Sky type: "atmosphere" or "gradient" (default: "atmosphere")
  • atmosphere_sun - Sun position [azimuth, polar] in degrees (default: [0.0, 90.0])
  • atmosphere_sun_intensity - Sun intensity (default: 10)
  • atmosphere_color - Sky atmosphere color (default: "rgba(135, 206, 235, 1)")
  • atmosphere_halo_color - Halo color around sun (default: "rgba(255, 255, 255, 1)")
  • gradient_center - Gradient center [azimuth, polar] (default: [0, 0])
  • gradient_radius - Gradient radius in degrees (default: 90)
  • gradient - Array of gradient colors (default: ["#87CEEB", "#E0F6FF", "#98D3E8"])

Sky Types

  • atmosphere - Realistic atmospheric sky with sun simulation
  • gradient - Simple gradient sky

Atmosphere Properties

When using type="atmosphere":

  • atmosphere_sun: [azimuth, polar] where azimuth is 0-360 and polar is 0-180
    • [0, 90] = sun directly overhead
    • [0, 0] = sun on horizon to north
    • [180, 0] = sun on horizon to south
  • atmosphere_sun_intensity: brightness of sun (typically 5-15)
  • atmosphere_color: base sky color
  • atmosphere_halo_color: glow around sun

Best Practices

  • Use with pitched views for best effect
  • Combine with terrain for realistic landscapes
  • Adjust sun position to match time of day
  • Use gradient type for simpler, less realistic sky

Attributes

  • map_id (:string) (required)
  • type (:string) - Defaults to "atmosphere".
  • atmosphere_sun (:list) - Defaults to [0.0, 90.0].
  • atmosphere_sun_intensity (:integer) - Defaults to 10.
  • atmosphere_color (:string) - Defaults to "rgba(135, 206, 235, 1)".
  • atmosphere_halo_color (:string) - Defaults to "rgba(255, 255, 255, 1)".
  • gradient_center (:list) - Defaults to [0, 0].
  • gradient_radius (:integer) - Defaults to 90.
  • gradient (:list) - Defaults to ["#87CEEB", "#E0F6FF", "#98D3E8"].