Google API hates me; Use Leaflet

[blackham]

Version bumped some files and eventually got it to work with Leaflet again. I think the only changes that mattered:

1. esbuild update
2. leaflet update

Oh yeah, and 120 m/s is too slow. Come on grandma, lets turn this into a rocket. (8000 m/s).

(Thank you github for not allowing me to upload a .patch file)
Copy this to a changes.patch. Then run something like git apply changes.patch.

diff --git a/assets/css/app.css b/assets/css/app.css
index 1e65541..671a7d9 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -2,6 +2,7 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";

+@import "../node_modules/leaflet/dist/leaflet.css";
/* This file is for your main application CSS */

/* LiveView specific classes for your customization */
diff --git a/assets/js/map.js b/assets/js/map.js
index e7f3fcf..0207b9b 100644
--- a/assets/js/map.js
+++ b/assets/js/map.js
@@ -1,48 +1,26 @@
-import { Loader } from "@googlemaps/js-api-loader"
+import L from "leaflet"

export function mountMap(state, location) {
-  const loader = new Loader({
-    apiKey: "<YOUR API KEY>",
-    version: "weekly",
-  })
+  state.map = L.map("map", {
+    zoomControl: false
+  }).setView(location, 13)
+  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png").addTo(state.map)

-  let pos = { lat: parseFloat(location.lat), lng: parseFloat(location.lng) }
-
-  loader.load().then(() => {
-    state.map = new google.maps.Map(document.getElementById("map"), {
-      center: pos,
-      zoom: 12,
-      disableDefaultUI: true,
-    })
-
-    state.marker = new google.maps.Marker({
-      position: pos,
-      icon: plane(location.bearing),
-      map: state.map,
-    })
-  })
+  state.mapMarker = L.marker(location, {
+    icon: plane(location.bearing)
+  }).addTo(state.map)
}

export function updateMap(state, location) {
-  if (state.map) {
-    let pos = {
-      lat: parseFloat(location.lat),
-      lng: parseFloat(location.lng),
-    }
-    state.map.setCenter(pos)
-    state.marker.setPosition(pos)
-    state.marker.setIcon(plane(location.bearing))
-  }
+  state.map.setView(location, 12)
+  state.mapMarker.setLatLng(location).setIcon(plane(location.bearing))
}

export function plane(bearing) {
-  return {
-    path: "M 4.7932777,4.7812376 C 4.7259064,4.8486085 4.7323964,4.9347702 4.9650313,5.4373336 C 4.9924894,5.4966515 5.1453716,5.7138571 5.1453716,5.7138571 C 5.1453723,5.7138561 5.0426847,5.8268489 5.0148394,5.8546943 C 4.9610053,5.9085284 4.9361984,6.0293335 4.958161,6.1243469 C 5.026297,6.4191302 5.8480608,7.5947712 6.3081405,8.0548517 C 6.593652,8.3403629 6.7408456,8.5354068 6.730653,8.6147666 C 6.7220521,8.6817367 6.6138788,8.9698607 6.4901987,9.2536889 C 6.2719706,9.7544933 6.1902268,9.8530093 3.7284084,12.592571 C 1.7788774,14.76205 1.1823532,15.462131 1.1469587,15.620578 C 1.0488216,16.059908 1.4289737,16.468046 2.4110617,16.977428 L 2.9177343,17.24021 C 2.9177343,17.24021 10.306553,11.950215 10.306553,11.950215 L 14.736066,15.314858 L 14.634732,15.495198 C 14.578751,15.594046 14.11587,16.171307 13.60593,16.778194 C 13.095992,17.385083 12.673006,17.939029 12.666441,18.009665 C 12.640049,18.293626 13.777085,19.186772 13.947719,19.016137 C 14.217037,18.74682 15.346696,17.884968 15.441971,17.875697 C 15.509995,17.869079 16.481025,17.128624 16.810843,16.798805 C 17.140662,16.468987 17.881117,15.497956 17.887735,15.429933 C 17.897006,15.334658 18.758859,14.204999 19.028176,13.93568 C 19.198811,13.765045 18.305664,12.62801 18.021702,12.654403 C 17.951067,12.660967 17.397123,13.083953 16.790233,13.593891 C 16.183346,14.103831 15.606085,14.566712 15.507236,14.622693 L 15.326897,14.724027 L 11.962253,10.294514 C 11.962253,10.294514 17.252249,2.9056938 17.25225,2.9056938 L 16.989466,2.3990218 C 16.480084,1.416933 16.071947,1.0367811 15.632617,1.1349189 C 15.474169,1.1703136 14.774089,1.7668355 12.60461,3.7163677 C 9.8650471,6.1781859 9.7665321,6.2599294 9.2657298,6.4781579 C 8.9819013,6.601838 8.6937782,6.7100098 8.6268071,6.7186131 C 8.5474478,6.7288044 8.352405,6.5816098 8.0668925,6.2960996 C 7.6068129,5.8360191 6.4311712,5.0142561 6.1363875,4.9461203 C 6.0413739,4.9241577 5.92057,4.9489642 5.8667352,5.0027982 C 5.8388891,5.0306446 5.7276147,5.1316136 5.7276147,5.1316136 C 5.7276147,5.1316136 5.5104099,4.9787304 5.4510923,4.9512732 C 4.9485278,4.7186391 4.8606505,4.7138647 4.7932777,4.7812376 z",
-    fillColor: "black",
-    fillOpacity: 0.8,
-    strokeWeight: 0,
-    rotation: 45 + parseInt(bearing),
-    scale: 3,
-    anchor: new google.maps.Point(10, 10),
-  }
+  return L.icon({
+    iconUrl: `data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" transform="rotate(${45 + parseInt(bearing)} 0 0)">
+   <path fill="black"
+      d="M 4.7932777,4.7812376 C 4.7259064,4.8486085 4.7323964,4.9347702 4.9650313,5.4373336 C 4.9924894,5.4966515 5.1453716,5.7138571 5.1453716,5.7138571 C 5.1453723,5.7138561 5.0426847,5.8268489 5.0148394,5.8546943 C 4.9610053,5.9085284 4.9361984,6.0293335 4.958161,6.1243469 C 5.026297,6.4191302 5.8480608,7.5947712 6.3081405,8.0548517 C 6.593652,8.3403629 6.7408456,8.5354068 6.730653,8.6147666C 6.7220521,8.6817367 6.6138788,8.9698607 6.4901987,9.2536889 C 6.2719706,9.7544933 6.1902268,9.8530093 3.7284084,12.592571 C 1.7788774,14.76205 1.1823532,15.462131 1.1469587,15.620578 C 1.0488216,16.059908 1.4289737,16.468046 2.4110617,16.977428 L 2.9177343,17.24021 C 2.9177343,17.24021 10.306553,11.950215 10.306553,11.950215 L 14.736066,15.314858 L 14.634732,15.495198 C 14.578751,15.594046 14.11587,16.171307 13.60593,16.778194 C 13.095992,17.385083 12.673006,17.939029 12.666441,18.009665 C 12.640049,18.293626 13.777085,19.186772 13.947719,19.016137 C 14.217037,18.74682 15.346696,17.884968 15.441971,17.875697 C 15.509995,17.869079 16.481025,17.128624 16.810843,16.798805 C 17.140662,16.468987 17.881117,15.497956 17.887735,15.429933 C 17.897006,15.334658 18.758859,14.204999 19.028176,13.93568 C 19.198811,13.765045 18.305664,12.62801 18.021702,12.654403 C 17.951067,12.660967 17.397123,13.083953 16.790233,13.593891 C 16.183346,14.103831 15.606085,14.566712 15.507236,14.622693 L 15.326897,14.724027 L 11.962253,10.294514 C 11.962253,10.294514 17.252249,2.9056938 17.25225,2.9056938 L 16.989466,2.3990218 C 16.480084,1.416933 16.071947,1.0367811 15.632617,1.1349189 C 15.474169,1.1703136 14.774089,1.7668355 12.60461,3.7163677 C 9.8650471,6.1781859 9.7665321,6.2599294 9.2657298,6.4781579 C 8.9819013,6.601838 8.6937782,6.7100098 8.6268071,6.7186131 C 8.5474478,6.7288044 8.352405,6.5816098 8.0668925,6.2960996 C 7.6068129,5.8360191 6.4311712,5.01425616.1363875,4.9461203 C 6.0413739,4.9241577 5.92057,4.9489642 5.8667352,5.0027982 C 5.8388891,5.0306446 5.7276147,5.1316136 5.7276147,5.1316136 C 5.7276147,5.1316136 5.5104099,4.9787304 5.4510923,4.9512732 C 4.9485278,4.7186391 4.8606505,4.7138647 4.7932777,4.7812376z" /></svg>`,
+    iconSize: [32, 32]
+  });
}
diff --git a/assets/package.json b/assets/package.json
index 3928b7d..a6c175f 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -1,7 +1,7 @@
{
"dependencies": {
-    "@googlemaps/js-api-loader": "^1.13.10",
-    "arcgis-js-api": "^4.15.2",
-    "esri-loader": "^3.4.0"
+    "leaflet": "^1.8.0",
+    "arcgis-js-api": "^4.24",
+    "esri-loader": "^3.6.0"
}
}
diff --git a/config/config.exs b/config/config.exs
index eb05b2e..5873613 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -16,7 +16,7 @@ config :flight_simulator, FlightSimulatorWeb.Endpoint,

# Configure esbuild (the version is required)
config :esbuild,
-  version: "0.14.23",
+  version: "0.14.29",
default: [
args:
~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
@@ -33,7 +33,7 @@ config :logger, :console,
config :phoenix, :json_library, Jason

config :tailwind,
-  version: "3.0.23",
+  version: "3.1.8",
default: [
args: ~w(
--config=tailwind.config.js
diff --git a/config/dev.exs b/config/dev.exs
index 931da3b..596776e 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -17,6 +17,7 @@ config :flight_simulator, FlightSimulatorWeb.Endpoint,
watchers: [
# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
+#    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch --loader:.png=file --loader:.svg=file)]},
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]

diff --git a/lib/flight_simulator.ex b/lib/flight_simulator.ex
index 67aaa7f..4e5ada5 100644
--- a/lib/flight_simulator.ex
+++ b/lib/flight_simulator.ex
@@ -22,9 +22,9 @@ defmodule FlightSimulator do

@yaw_delta 1.0

-  @speed_delta 5.0
-  @min_speed 5.0
-  @max_speed 120.0
+  @speed_delta 10.0
+  @min_speed 10.0
+  @max_speed 8000.0

@min_altitude 10.0

diff --git a/mix.exs b/mix.exs
index 55aa9f0..c77ede5 100644
--- a/mix.exs
+++ b/mix.exs
@@ -7,7 +7,7 @@ defmodule FlightSimulator.MixProject do
version: "0.1.0",
elixir: "~> 1.12",
elixirc_paths: elixirc_paths(Mix.env()),
-      compilers: [:gettext] ++ Mix.compilers(),
+      compilers: [] ++ Mix.compilers(),
start_permanent: Mix.env() == :prod,
aliases: aliases(),
deps: deps()
@@ -33,13 +33,13 @@ defmodule FlightSimulator.MixProject do
# Type `mix help deps` for examples and options.
defp deps do
[
-      {:phoenix, "~> 1.6.6"},
+      {:phoenix, "~> 1.6.11"},
{:phoenix_html, "~> 3.0"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
{:phoenix_live_view, "~> 0.17.5"},
{:floki, ">= 0.30.0", only: :test},
{:phoenix_live_dashboard, "~> 0.6"},
-      {:esbuild, "~> 0.3", runtime: Mix.env() == :dev},
+      {:esbuild, "~> 0.4", runtime: Mix.env() == :dev},
{:telemetry_metrics, "~> 0.6"},
{:telemetry_poller, "~> 1.0"},
{:gettext, "~> 0.18"},