Skip to content

Commit

Permalink
feat: maps component (#520)
Browse files Browse the repository at this point in the history
  • Loading branch information
joaodiaslobo authored Aug 20, 2024
1 parent b18ce9b commit 55c436a
Show file tree
Hide file tree
Showing 2 changed files with 114 additions and 0 deletions.
62 changes: 62 additions & 0 deletions lib/atomic_web/components/map.ex
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
defmodule AtomicWeb.Components.Map do
@moduledoc """
A configurable component to display a map using Google Maps.
"""
use Phoenix.Component

attr :location, :string, required: true, doc: "The location to be displayed on the map"
attr :zoom, :integer, default: 16, doc: "The zoom level of the map"

attr :type, :atom,
values: [:normal, :satellite],
default: :normal,
doc: "The view type of the map"

attr :height, :integer, default: 200, doc: "The height of the map"
attr :width, :integer, doc: "The width of the map"

attr :full_width, :boolean,
default: true,
doc: "If true, the map will take up the full width of its container"

attr :controls, :boolean,
default: false,
doc: "If true, the map will be interactive and show controls"

def map(assigns) do
if assigns[:controls] do
map_interactive(assigns)
else
map_static(assigns)
end
end

defp map_static(assigns) do
~H"""
<.link href={"https://www.google.com/maps/search/?api=1&query=#{@location}"} target="_blank" class="select-none overflow-hidden" style={"height: #{@height}px; width: #{generate_width(assigns)}"}>
<iframe width={generate_width(assigns)} height={@height + 300} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="border:0; margin-top: -150px;" class="pointer-events-none"></iframe>
</.link>
"""
end

defp map_interactive(assigns) do
~H"""
<iframe width={generate_width(assigns)} height={@height} src={generate_request(assigns)} frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
"""
end

defp generate_request(assigns) do
location = assigns[:location]
zoom = assigns[:zoom]
type = assigns[:type]

"https://maps.google.com/maps?q=#{location}&t=#{type_request_value(type)}&z=#{zoom}&output=embed"
end

defp generate_width(assigns) do
if assigns[:full_width] && !assigns[:width], do: "100%", else: "#{assigns[:width]}px"
end

defp type_request_value(:normal), do: "m"
defp type_request_value(:satellite), do: "k"
end
52 changes: 52 additions & 0 deletions storybook/components/map.story.exs
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
defmodule AtomicWeb.Storybook.Components.Map do
use PhoenixStorybook.Story, :component

alias AtomicWeb.Components.Map

def function, do: &Map.map/1

def variations do
[
%Variation{
id: :default,
attributes: %{
location: "Centro de Estudantes de Engenharia Informática"
}
},
%VariationGroup{
id: :type,
description: "Type",
variations: [
%Variation{
id: :normal,
attributes: %{
location: "Universidade do Minho - Campus de Gualtar",
type: :normal
}
},
%Variation{
id: :satellite,
attributes: %{
location: "Universidade do Minho - Campus de Gualtar",
type: :satellite
}
}
]
},
%Variation{
id: :zoom,
attributes: %{
location: "Núcleo de Informática da AEFEUP",
zoom: 7
}
},
%Variation{
id: :controls,
attributes: %{
location: "Braga, Portugal",
controls: true
}
}
]
end
end

0 comments on commit 55c436a

Please sign in to comment.