shishkin / solid-maplibre

SolidJS wrapper around MapLibre GL JS

Solid-MapLibre

SolidJS wrapper around MapLibre GL JS.

This library intentionally doesn't support MapBoxGL. You might want to check out solid-map-gl which does.

Features

• 100% TypeScript
• Native MapLibre typings

Usage

Don't forget to import MapLibre GL JS CSS styles:

import "maplibre-gl/dist/maplibre-gl.css";

Add map component and ensure to specify container size in style, class or classList attributes:

<Map
  style={{
    width: "100%",
    "aspect-ratio": "calc(16/9)",
  }}
  options={{
    center: [11.40416, 47.26475],
    style: "https://demotiles.maplibre.org/styles/osm-bright-gl-style/style.json",
    zoom: 10,
  }}
/>

See more usage examples.

solid-maplibre's Issues

How to center on a Clicked Point using useMap()

Hi,

I've found your library and so far it works really great, appreciate how well done and lightweight it is.

I'm trying to center map on a clicked point, which I track with signal, however it is not working for me. Could you please kindly suggest where to look for an issue?

import {
  Layer,
  Map,
  Source,
  useMap,
} from "solid-maplibre";
import layers from "protomaps-themes-base";
import { useNavigate } from "@solidjs/router";
import { createSignal, createEffect, onMount } from "solid-js";

export default function MaplibreMap() {
  const navigate = useNavigate();
  const [id, setId] = createSignal(null);

  createEffect(() => {
    console.log("Id is ", id());
    useMap()?.()?.flyTo({
      center: e.features[0].geometry.coordinates,
    });
  });


  const navigateOnClick = (e) => {
    setId(e.features[0].properties.uprn);

    navigate(
      "/property/" +
        e.features[0].properties.address
          .toLowerCase()
          .replaceAll(",", "")
          .split(" ")
          .join("-"),
      { replace: true },
    );
  };

  return (
    <Map
      class="map"
      style={{
        height: "100vh",
      }}
      options={{
        center: [-1.2554869572956684, 51.75910108769326],
        style: {
          version: 8,
          glyphs: ENV.GLYPH_URL
          sources: {
            uk: {
              type: "vector",
              url: ENV.TILES,
              attribution:
                '<a href="https://protomaps.com">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
            },
          },
          layers: layers("uk", "light"),
        },
        zoom: 7,
        minZoom: 5,
        maxZoom: 18,
      }}
    >
      <Source
        source={{
          id: "ppd",
          type: "vector",
          url: ENV.PPD,
        }}
      >
        <Layer
          onclick={(e) => {
            navigateOnClick(e);
          }}
          layer={{
            id: "ppd_uk",
            "source-layer": "ppd_data",
            type: "circle",
            paint: {
              "circle-color": "#223b53",
              "circle-radius": 6,
            },
          }}
        />
      </Source>
    </Map>
  );
}

Decouple Context Provider and Map Renderer

Stumbled across your lib and so far it's working great.

One issue I'm running into is being able to access the map object from outside of the Map Component.
react-map-gl have achieved this (https://visgl.github.io/react-map-gl/docs/api-reference/map-provider)
I was wondering how feasible it is for this lib or another workaround.

Thanks.

How to get the Map instance?

Hi,

I want to get the map instance so I can use Maplibre functions on the map instance such as getLayer. However, the ref object always returns undefined.

function App() {
  let map: any;
  let test: any;

  onMount(() => {
    console.log("test: ", test)
    console.log("map: ", map)
  })
  return (
    <>
      <p ref={test}>test</p>
      <Map
        ref={map}
        style={{
          width: "100%",
          "aspect-ratio": "calc(16/9)",
        }}
        options={{
          center: [11.40416, 47.26475],
          style: mapStyle as StyleSpecification
        }}
      />
    </>
  );
}

Output:

test:  <p>
map:  undefined

Or maybe there's a better way to achieve this?

Sync Maps example doesn't work

On the examples page, there's an example called Sync Maps. It doesn't work.

Swipe Maps looks very similar, and also doesn't work.

The maps simply don't update each other.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update solid (babel-preset-solid, eslint-plugin-solid, solid-js)
• chore(deps): update dependency maplibre-gl to v4.2.0
• chore(deps): update devdependencies (@commitlint/cli, @testing-library/jest-dom, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, @vitest/coverage-v8, vite, vitest)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update devdependencies (major) (@types/testing-library__jest-dom, eslint)

Detected dependencies

github-actions

.github/workflows/ci.yaml

• actions/checkout v4
• actions/setup-node v4

.github/workflows/release.yaml

• actions/checkout v4
• actions/setup-node v4

npm

package.json

• @commitlint/cli 19.2.2
• @commitlint/config-conventional 19.2.2
• @semantic-release/changelog 6.0.3
• @semantic-release/git 10.0.1
• @solidjs/testing-library 0.8.7
• @testing-library/jest-dom 6.4.2
• @types/eslint 8.56.10
• @types/testing-library__jest-dom 5.14.9
• @typescript-eslint/eslint-plugin 7.7.0
• @typescript-eslint/parser 7.7.0
• @vitest/coverage-v8 1.5.0
• babel-preset-solid 1.8.16
• eslint 8.57.0
• eslint-config-prettier 9.1.0
• eslint-plugin-solid 0.13.2
• husky 9.0.11
• jsdom 24.0.0
• jsdom-worker 0.3.0
• maplibre-gl 4.1.3
• npm-run-all2 6.1.2
• prettier 3.2.5
• rimraf 5.0.5
• semantic-release 23.0.8
• solid-js 1.8.16
• tsup 8.0.2
• tsup-preset-solid 2.2.0
• typescript 5.4.5
• vite 5.2.10
• vite-plugin-solid 2.10.2
• vitest 1.5.0
• maplibre-gl *
• solid-js *

nvm

.nvmrc

• node 20

---

• Check this box to trigger a request for Renovate to run again on this repository