MaplibreX.Components.GeoJSONLayer (MaplibreX v0.1.0)

GeoJSON Layer component for rendering GeoJSON data on MapLibre maps.

This component allows you to display GeoJSON data with full styling control and support for various layer types including fill, line, circle, symbol, and heatmap.

Examples

Basic GeoJSON fill layer:

<.geojson_layer
  id="countries"
  map_id="my-map"
  data={@countries_geojson}
  type="fill"
  paint=%{
    "fill-color" => "#088",
    "fill-opacity" => 0.4
  }
/>

Line layer with styling:

<.geojson_layer
  id="routes"
  map_id="my-map"
  data={@routes_geojson}
  type="line"
  paint=%{
    "line-color" => "#f00",
    "line-width" => 3
  }
  layout=%{
    "line-cap" => "round",
    "line-join" => "round"
  }
/>

Circle layer with data-driven styling:

<.geojson_layer
  id="cities"
  map_id="my-map"
  data={@cities_geojson}
  type="circle"
  paint=%{
    "circle-radius" => [
      "interpolate", ["linear"], ["get", "population"],
      0, 4,
      1000000, 20
    ],
    "circle-color" => "#ff0000"
  }
/>

Heatmap layer:

<.geojson_layer
  id="earthquake-heat"
  map_id="my-map"
  data={@earthquakes_geojson}
  type="heatmap"
  paint=%{
    "heatmap-weight" => ["get", "magnitude"],
    "heatmap-intensity" => 1,
    "heatmap-radius" => 20
  }
/>

Layer with clustering:

<.geojson_layer
  id="poi-clusters"
  map_id="my-map"
  data={@poi_geojson}
  type="circle"
  cluster={true}
  cluster_max_zoom={14}
  cluster_radius={50}
  paint=%{
    "circle-color" => "#51bbd6",
    "circle-radius" => 10
  }
/>

Layer with event handling:

def render(assigns) do
  ~H"""
  <.geojson_layer
    id="interactive-layer"
    map_id="my-map"
    data={@features}
    type="fill"
    paint=%{"fill-color" => "#088"}
  />
  """
end

def handle_event("layer:feature_clicked", %{"layerId" => id, "feature" => feature}, socket) do
  IO.inspect(feature, label: "Clicked feature")
  {:noreply, socket}
end

Summary

Functions

geojson_layer(assigns)

Renders a GeoJSON layer on the map.

hide(layer_id)

Hides a layer by setting visibility to "none".

set_data(layer_id, data)

Updates the source data for a layer.

set_filter(layer_id, filter)

Sets a filter on a layer.

set_layout_property(layer_id, property, value)

Sets a layout property on a layer.

set_paint_property(layer_id, property, value)

Sets a paint property on a layer.

show(layer_id)

Shows a layer by setting visibility to "visible".

Functions

geojson_layer(assigns)

Renders a GeoJSON layer on the map.

Attributes

id (required) - Unique identifier for the layer
map_id (required) - ID of the map to add the layer to
data (required) - GeoJSON data as a map or JSON string
type (required) - Layer type: "fill", "line", "circle", "symbol", "heatmap", or "fill-extrusion"
paint - Paint properties for styling the layer
layout - Layout properties for the layer
filter - Filter expression to show only specific features
min_zoom - Minimum zoom level to show the layer
max_zoom - Maximum zoom level to show the layer
before_id - ID of layer to insert this layer before
source_layer - For vector sources, the source layer to use
cluster - Enable point clustering. Defaults to false
cluster_max_zoom - Maximum zoom to cluster points. Defaults to 14
cluster_radius - Cluster radius in pixels. Defaults to 50
cluster_properties - Aggregate properties for clusters
generate_id - Generate unique IDs for features. Defaults to false

Slots

None - This component has no slots

Events

The layer emits the following events:

layer:feature_clicked - Fired when a feature is clicked
layer:feature_mouseenter - Fired when mouse enters a feature
layer:feature_mouseleave - Fired when mouse leaves a feature
layer:source_loaded - Fired when the source data is loaded

JavaScript Commands

You can control layers from LiveView using:

# Update layer paint properties
MaplibreX.Components.GeoJSONLayer.set_paint_property("layer-id", "fill-color", "#ff0000")

# Update layer layout properties
MaplibreX.Components.GeoJSONLayer.set_layout_property("layer-id", "visibility", "none")

# Update layer filter
MaplibreX.Components.GeoJSONLayer.set_filter("layer-id", ["==", ["get", "type"], "park"])

# Update source data
MaplibreX.Components.GeoJSONLayer.set_data("layer-id", new_geojson_data)

Attributes

id (:string) (required)
map_id (:string) (required)
data (:any) (required)
type (:string) (required)
paint (:map) - Defaults to %{}.
layout (:map) - Defaults to %{}.
filter (:any) - Defaults to nil.
min_zoom (:integer) - Defaults to nil.
max_zoom (:integer) - Defaults to nil.
before_id (:string) - Defaults to nil.
source_layer (:string) - Defaults to nil.
cluster (:boolean) - Defaults to false.
cluster_max_zoom (:integer) - Defaults to 14.
cluster_radius (:integer) - Defaults to 50.
cluster_properties (:map) - Defaults to nil.
generate_id (:boolean) - Defaults to false.
Global attributes are accepted.

hide(layer_id)

Hides a layer by setting visibility to "none".

Examples

<button phx-click={MaplibreX.Components.GeoJSONLayer.hide("layer-id")}>
  Hide Layer
</button>

set_data(layer_id, data)

Updates the source data for a layer.

Examples

<button phx-click={MaplibreX.Components.GeoJSONLayer.set_data("layer-id", @new_data)}>
  Update Data
</button>

set_filter(layer_id, filter)

Sets a filter on a layer.

Examples

<button phx-click={MaplibreX.Components.GeoJSONLayer.set_filter("layer-id", ["==", ["get", "type"], "park"])}>
  Show Parks Only
</button>

set_layout_property(layer_id, property, value)

Sets a layout property on a layer.

Examples

<button phx-click={MaplibreX.Components.GeoJSONLayer.set_layout_property("layer-id", "visibility", "none")}>
  Hide Layer
</button>

set_paint_property(layer_id, property, value)

Sets a paint property on a layer.

Examples

<button phx-click={MaplibreX.Components.GeoJSONLayer.set_paint_property("layer-id", "fill-color", "#ff0000")}>
  Change Color
</button>

show(layer_id)

Shows a layer by setting visibility to "visible".

Examples

<button phx-click={MaplibreX.Components.GeoJSONLayer.show("layer-id")}>
  Show Layer
</button>