Adds basic TileLayer Implementation

demo/index.tsx

@@ -1,31 +1,39 @@
-import { Component, createSignal } from "solid-js";
-import { render } from "solid-js/web";
-import { LMap, LMarker } from "../lib";
-
-import { LatLng } from "leaflet";
-import "leaflet/dist/leaflet.css";
-
-const Demo: Component = () => {
-  const [op, setOp] = createSignal(1);
-
-  // const opacity = (delta: number) => {
-  //   setOp(Math.abs(Math.sin(delta / 1000)));
-  //   requestAnimationFrame(opacity);
-  // };
-  // requestAnimationFrame(opacity);
-
-  return (
-    <LMap
-      options={{
-        zoom: 5,
-        center: [0, 0],
-      }}
-      style={{ height: "500px" }}
-    >
-      <LMarker latlng={new LatLng(op() * 3, 2)} opacity={op()} />
-      <LMarker latlng={new LatLng(0, 0)} />
-    </LMap>
-  );
-};
-
-render(() => <Demo />, document.getElementById("app")!);
+import { Component, createSignal } from "solid-js";
+import { render } from "solid-js/web";
+import { LMap, LMarker, LTileLayer } from "../lib";
+
+import { LatLng } from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+const Demo: Component = () => {
+  const [op, setOp] = createSignal(1);
+
+  //const opacity = (delta: number) => {
+  //  setOp(Math.abs(Math.sin(delta / 1000)));
+  //  requestAnimationFrame(opacity);
+  //};
+  //requestAnimationFrame(opacity);
+
+  return (
+    <LMap
+      options={{
+        zoom: 5,
+        center: [0, 0],
+      }}
+      style={{ height: "500px" }}
+    >
+      <LTileLayer
+        urlTemplate="https://tile.openstreetmap.org/{z}/{x}/{y}.png"
+        options={{
+          opacity: op(),
+          attribution:
+            "&copy; <a href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
+        }}
+      />
+      <LMarker latlng={new LatLng(op() * 3, 2)} opacity={op()} />
+      <LMarker latlng={new LatLng(0, 0)} />
+    </LMap>
+  );
+};
+
+render(() => <Demo />, document.getElementById("app")!);

lib/LTileLayer/LTileLayer.tsx

@@ -0,0 +1,39 @@
+import { TileLayer, TileLayerOptions } from "leaflet";
+import { Component, createEffect, JSX, onCleanup, onMount } from "solid-js";
+import { useMapContext } from "../MapContext";
+import { setupEventListeners } from "../_utils/events";
+import { LTileLayerListeners, events } from "./events";
+
+type LTileLayerProps = {
+  options?: TileLayerOptions;
+  children?: JSX.Element;
+  urlTemplate: string;
+} & LTileLayerListeners;
+
+export const LTileLayer: Component<LTileLayerProps> = (p) => {
+  const [{ map }] = useMapContext();
+
+  let tileLayer: TileLayer;
+
+  onMount(() => {
+    tileLayer = new TileLayer(p.urlTemplate, p.options);
+    tileLayer.addTo(map);
+
+    const { cleanup } = setupEventListeners(tileLayer, events, p);
+
+    onCleanup(() => {
+      tileLayer.remove();
+      cleanup();
+    });
+  });
+
+  createEffect(
+    () =>
+      p.options?.opacity !== undefined &&
+      tileLayer.setOpacity(p.options.opacity)
+  );
+
+  createEffect(() => tileLayer.setUrl(p.urlTemplate));
+
+  return undefined;
+};

lib/LTileLayer/events.ts

@@ -0,0 +1,21 @@
+import { ListenerProps } from "../types";
+
+export const events = [
+  "tileabort",
+  "loading",
+  "tileunload",
+  "tileloadstart",
+  "tileerror",
+  "tileload",
+  "load",
+  "add",
+  "remove",
+  "popupopen",
+  "popupclose",
+  "tooltipopen",
+  "tooltipclose",
+] as const;
+
+type LTileLayerEvents = (typeof events)[number];
+
+export type LTileLayerListeners = ListenerProps<LTileLayerEvents>;

lib/index.tsx

@@ -1,2 +1,3 @@
-export * from "./LMap/LMap";
-export * from "./LMarker/LMarker";
+export * from "./LMap/LMap";
+export * from "./LMarker/LMarker";
+export * from "./LTileLayer/LTileLayer";

lib/types.ts

@@ -1,75 +1,83 @@
-import {
-  DragEndEventHandlerFn,
-  ErrorEventHandlerFn,
-  LayerEventHandlerFn,
-  LayersControlEventHandlerFn,
-  LeafletEventHandlerFn,
-  LeafletKeyboardEventHandlerFn,
-  LeafletMouseEventHandlerFn,
-  LocationEventHandlerFn,
-  PopupEventHandlerFn,
-  ResizeEventHandlerFn,
-  TooltipEventHandlerFn,
-  ZoomAnimEventHandlerFn,
-} from "leaflet";
-
-export type LeafletEvents = {
-  // layer events
-  baselayerchange: LayersControlEventHandlerFn;
-  overlayadd: LayersControlEventHandlerFn;
-  overlayremove: LayersControlEventHandlerFn;
-  layeradd: LayerEventHandlerFn;
-  layerremove: LayerEventHandlerFn;
-  // map state change events
-  zoomlevelschange: LeafletEventHandlerFn;
-  resize: ResizeEventHandlerFn;
-  unload: LeafletEventHandlerFn;
-  viewreset: LeafletEventHandlerFn;
-  load: LeafletEventHandlerFn;
-  zoomstart: LeafletEventHandlerFn;
-  movestart: LeafletEventHandlerFn;
-  zoom: LeafletEventHandlerFn;
-  move: LeafletEventHandlerFn;
-  zoomend: LeafletEventHandlerFn;
-  moveend: LeafletEventHandlerFn;
-  // popup events
-  popupopen: PopupEventHandlerFn;
-  popupclose: PopupEventHandlerFn;
-  autopanstart: LeafletEventHandlerFn;
-  // tooltip events
-  tooltipopen: TooltipEventHandlerFn;
-  tooltipclose: TooltipEventHandlerFn;
-  // location events
-  locationerror: ErrorEventHandlerFn;
-  locationfound: LocationEventHandlerFn;
-  // interaction events
-  click: LeafletMouseEventHandlerFn;
-  dblclick: LeafletMouseEventHandlerFn;
-  mousedown: LeafletMouseEventHandlerFn;
-  mouseup: LeafletMouseEventHandlerFn;
-  mouseover: LeafletMouseEventHandlerFn;
-  mouseout: LeafletMouseEventHandlerFn;
-  mousemove: LeafletMouseEventHandlerFn;
-  contextmenu: LeafletMouseEventHandlerFn;
-  keypress: LeafletKeyboardEventHandlerFn;
-  keydown: LeafletKeyboardEventHandlerFn;
-  keyup: LeafletKeyboardEventHandlerFn;
-  preclick: LeafletMouseEventHandlerFn;
-  // other events
-  zoomanim: ZoomAnimEventHandlerFn;
-  // dragging events
-  dragstart: LeafletEventHandlerFn;
-  drag: LeafletEventHandlerFn;
-  dragend: DragEndEventHandlerFn;
-  // layer events
-  add: LeafletEventHandlerFn;
-  remove: LeafletEventHandlerFn;
-};
-
-export type LeafletEventName = keyof LeafletEvents;
-
-export type ListenerPropName<T extends LeafletEventName> = `l${Capitalize<T>}`;
-
-export type ListenerProps<T extends LeafletEventName> = {
-  [Property in T as ListenerPropName<Property>]?: LeafletEvents[Property];
-};
+import {
+  DragEndEventHandlerFn,
+  ErrorEventHandlerFn,
+  LayerEventHandlerFn,
+  LayersControlEventHandlerFn,
+  LeafletEventHandlerFn,
+  LeafletKeyboardEventHandlerFn,
+  LeafletMouseEventHandlerFn,
+  LocationEventHandlerFn,
+  PopupEventHandlerFn,
+  ResizeEventHandlerFn,
+  TooltipEventHandlerFn,
+  ZoomAnimEventHandlerFn,
+} from "leaflet";
+
+export type LeafletEvents = {
+  // layer events
+  baselayerchange: LayersControlEventHandlerFn;
+  overlayadd: LayersControlEventHandlerFn;
+  overlayremove: LayersControlEventHandlerFn;
+  layeradd: LayerEventHandlerFn;
+  layerremove: LayerEventHandlerFn;
+  // map state change events
+  zoomlevelschange: LeafletEventHandlerFn;
+  resize: ResizeEventHandlerFn;
+  unload: LeafletEventHandlerFn;
+  viewreset: LeafletEventHandlerFn;
+  load: LeafletEventHandlerFn;
+  zoomstart: LeafletEventHandlerFn;
+  movestart: LeafletEventHandlerFn;
+  zoom: LeafletEventHandlerFn;
+  move: LeafletEventHandlerFn;
+  zoomend: LeafletEventHandlerFn;
+  moveend: LeafletEventHandlerFn;
+  // popup events
+  popupopen: PopupEventHandlerFn;
+  popupclose: PopupEventHandlerFn;
+  autopanstart: LeafletEventHandlerFn;
+  // tooltip events
+  tooltipopen: TooltipEventHandlerFn;
+  tooltipclose: TooltipEventHandlerFn;
+  // location events
+  locationerror: ErrorEventHandlerFn;
+  locationfound: LocationEventHandlerFn;
+  // interaction events
+  click: LeafletMouseEventHandlerFn;
+  dblclick: LeafletMouseEventHandlerFn;
+  mousedown: LeafletMouseEventHandlerFn;
+  mouseup: LeafletMouseEventHandlerFn;
+  mouseover: LeafletMouseEventHandlerFn;
+  mouseout: LeafletMouseEventHandlerFn;
+  mousemove: LeafletMouseEventHandlerFn;
+  contextmenu: LeafletMouseEventHandlerFn;
+  keypress: LeafletKeyboardEventHandlerFn;
+  keydown: LeafletKeyboardEventHandlerFn;
+  keyup: LeafletKeyboardEventHandlerFn;
+  preclick: LeafletMouseEventHandlerFn;
+  // other events
+  zoomanim: ZoomAnimEventHandlerFn;
+  // dragging events
+  dragstart: LeafletEventHandlerFn;
+  drag: LeafletEventHandlerFn;
+  dragend: DragEndEventHandlerFn;
+  // layer events
+  add: LeafletEventHandlerFn;
+  remove: LeafletEventHandlerFn;
+  // grid layer events
+  loading: LeafletEventHandlerFn;
+  tileunload: LeafletEventHandlerFn;
+  tileloadstart: LeafletEventHandlerFn;
+  tileerror: ErrorEventHandlerFn;
+  tileload: LeafletEventHandlerFn;
+  // tile layer events
+  tileabort: LeafletEventHandlerFn;
+};
+
+export type LeafletEventName = keyof LeafletEvents;
+
+export type ListenerPropName<T extends LeafletEventName> = `l${Capitalize<T>}`;
+
+export type ListenerProps<T extends LeafletEventName> = {
+  [Property in T as ListenerPropName<Property>]?: LeafletEvents[Property];
+};