Puzzled. Installed 3rd party js app as instructed for liveview 1.0. The map tiles of leaflet are painting all over the screen. I’m not trying to load any data, just trying to paint the map. Any thoughts??? Appreciate any feedback.
defmodule CrmWeb.MapLiveTest do
use CrmWeb, :live_view
#alias Crm.Cards
def mount(_params, _session, socket) do
socket =
assign(socket,
cards: nil,
selected_card: nil
)
{:ok, socket}
end
def render(assigns) do
~H"""
<div id="wrapper" phx-update="ignore">
<div id="map" phx-hook="CardMap"></div>
</div>
"""
end
end
hooks.js
let Hooks = {};
Hooks.CardMap = {
mounted() {
this.map = new CardMap(this.el,
[42.09, -75.92],
(event) => { }
) //end callback
}
}
card-mapping.js
import L, { marker } from "leaflet";
//import "leaflet/dist/images/marker-shadow.png";
/**
* Add 1..n cards to the map
* Remove 1..n cards from the map
* Find a card based on lat, lng
* Pan to a selected card
* Scroll to selected card
*/
class CardMap {
//markerClickedCallback references the callback in the constructor
constructor(element, center, markerClickedCallback) {
this.map = L.map(element).setView(center, 13);
const accessToken = "..."
let tileLayerUrl = `https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=${accessToken}`
const config_options = {
maxZoom: 18,
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
accessToken: accessToken
}
L.tileLayer(tileLayerUrl,config_options).addTo(this.map);
this.markerClickedCallback = markerClickedCallback;
}
