mapcomponents/react-map-components-maplibre

A react component framework for declarative GIS application development.

Mapcomponents Monorepo

This is the future Monorepo for all Mapcomponents packages. For now this repository only contains the Deck-Gl package.

Publish

To release a new version and publish all packages (with the same version number) to npm run npx lerna version --force-publish.

react-map-components-maplibre's Issues

Bug: xmldom Security risk, depreciated,

# npm audit report
xmldom  *
Severity: critical
Misinterpretation of malicious XML input - https://github.com/advisories/GHSA-5fg8-2547-mr8q
xmldom allows multiple root nodes in a DOM - https://github.com/advisories/GHSA-crh6-fp67-6883
No fix available
node_modules/xmldom
  @mapcomponents/react-maplibre  *
  Depends on vulnerable versions of xmldom
  node_modules/@mapcomponents/react-maplibre

2 vulnerabilities (1 moderate, 1 critical)

xmldom is a deprecated, having been repalced by @xmldom/xmldom

See https://www.npmjs.com/package/@xmldom/xmldom

package.json has invalid "main" entry

The package as published on npm can not be used in all environments because the main entry is pointing to a non-existing file.
If (manually) changed to have the same content as the module entry, it works as expected.

react-map-components-maplibre/package.json

Line 4 in c5dbd45

"main": "index.js",

react-map-components-maplibre/package.json

Line 6 in c5dbd45

"module": "dist/index.esm.js",

Feature: Provide a new GeoJsonLayer component that allows the defininition of multiple layers for the geojson source created by the component

The current MlGeoJsonLayer will create exactly on geojson source and one layer using that source.
Sometimes you need to define multiple layers of different type using the same source (as shown in this example https://codesandbox.io/s/mapcomponents-example-setdata-g3tgi)

@mapcomponents/react-maplibre version: 0.1.24

Feature description

Create a new component that offers all functionality (omitting the transition function) the current MlGeoJsonLayer offers including the ability to define more than one layer.
The new component should accept/expect a "layers" attribute containing layer options instead of the "paint" and "layout" attribute. The top level "layerId" attribute should be renamed to "sourceId".

Example

See an example use of the proposed component below (related to the codepen referenced above).

      <MlGeoJsonLayerNew
        mapId="map_1"
        geojson={geojson}
        sourceId="parcels"
        layers={[
          {
            id: "parcels_fill",
            type:'fill',
            paint: {
              "fill-color": "#627BC1",
              "fill-opacity": [
                "case",
                ["boolean", ["feature-state", "hover"], false],
                0,
                0.5,
              ],
            },
          },
          {
            id: "parcels_line",
            type:'line',
            paint: {
              "line-color": "#627BC1",
              "line-width": 2,
              "line-opacity": [
                "case",
                ["boolean", ["feature-state", "hover"], false],
                0,
                1,
              ],
            },
          },
        ]}
        insertBeforeLayer={mapHook.map?.firstSymbolLayer}
      />

Bug: WMS FeatureInfo does not work on tilted map

@mapcomponents/react-maplibre version: The deployed version on 2023-04-26

Steps To Reproduce

1. Open https://catalogue.mapcomponents.org/en/demo/AppWebGis/dashboard
2. Activate the layer "Metadaten"
3. Perform a WMS GetFeatureInfo Request when it is tilted.

The current behavior

The Request either fails or returns information of a wrong feature. In the screenshot below, I clicked on the tile "32296_5592" (lowest rectangle) but the response is "32312_5600" and apparently wrong

The expected behavior

The request also takes into account the tilted map.

Maybe this thread helps: https://gis.stackexchange.com/questions/307407/how-to-query-features-of-raster-layers-hosted-on-geoserver-that-are-added-to-map

Bug: cypress should be a devDependency

Cypress is not supported on all platforms, but is only required for development purposes. Cypress & its associated modules should not be required in production code.

@mapcomponents/react-maplibre version: 1.0.1

Bug: MlSketchTool is not listed as dependency

@mapcomponents/react-maplibre version: 0.1.80

Steps To Reproduce

1. Import MlSketchTool
2. Use it as component
3. It will shown that Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Link to code example:
https://codesandbox.io/s/base-template-forked-p5y5sw?file=/src/App.js

The current behavior

I can't import MlSketchTool, because It's not included in the react map libre dist

The expected behavior

I can import MlSketchTool

Bug: maplibregl-ctrl-bottom-right styles are broken since v1.0.0

@mapcomponents/react-maplibre version: >=1.0.0

Steps To Reproduce

1. Follow the getting started with your template guide
2. Start the example after installing dependencies and visit the page

The current behavior

Styles are missing for maplibregl-ctrl-bottom-right causing an unstyled container rendered below the map

The expected behavior

maplibregl-ctrl-bottom-right is styled properly and sits as an overlay on the map

I manually checked the last released versions and this error started appearing since version 1.0.0

Best regards

Feature: Add implicit layer types to MlGeoJsonLayer

and default paint props for each layer type.

@mapcomponents/react-maplibre version: v0.1.9

Feature description

Derive the layer type of MlGeoJsonLayer from the given geojson props data if props.type is not explicitly set.
POINT > "circle"
LINESTRING > "line"
POLYGON > "fill"

Example

...

Summary

...

Geojson layer now causing infinite loop

I see you guys have been busy adding components, so I wanted to get the latest version and try them out.

This is the only thing I changed in my project:

And now it gets caught in an infinite loop, caused by geojson layer somewhere

Bug: Navigation Compass does not work in Dark Mode

When attempting to use dark mode via theme switcher, the following error is thrown:

    at MlNavigationCompass.tsx:24:31
    at transformedStyleArg (createStyled.js:206:40)
    at handleInterpolation (emotion-serialize.browser.esm.js:139:24)
    at serializeStyles2 (emotion-serialize.browser.esm.js:253:15)
    at emotion-styled-base.browser.esm.js:123:24
    at emotion-element-c39617d8.browser.esm.js:38:12
    at renderWithHooks (react-dom.development.js:16305:18)
    at updateForwardRef (react-dom.development.js:19226:20)
    at beginWork (react-dom.development.js:21636:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)

PR #131 attempts to resolve this

What is this?

Could we get some more context on this lib? Is this built on top of react-map-gl or is the API completely different?

This is really cool but looking through the "show code" code I can't see anything about how to add source, layer etc.

I've been searching for the best web map stack for a couple years now. React-map-gl looks promising but mapbox killed compatibility with CRA with 2.0, and I haven't been able to hack it to roll back mapbox gl or to use maplibre.

Searching for a working example to fork with react-map-gl and maplibre brought me here, but I'm a bit skeptical. The get started sandbox hits a transpilation error, same as react-map-gl with mapbox 2.0.

If this is the FOSS webmap framework we've all been waiting for, please let us know

Question: setData() implementation with useEffect()

Hi all,

I am trying to solve the setData() updates of the map in useEffect(), something that you seem to have solved before in MlGeoJsonLayer.js and in other places. I am trying to fetch the data on an event, transform it, and set it with setData(). This is a very brief pattern that I am using.

import React, { useRef, useEffect, useState } from 'react';
import mapboxgl from 'mapbox-gl';
import { geoTemplateTransform } from '../helpers/geo';

const MapLibre = (props) => {
  const mapContainerRef = useRef(null);
  const [mapObject, setMapObject] = useState(null);
  const [parcelData, setParcelData] = useState({});

  useEffect(() => {
    maplibregl.accessToken = 'token';
    const map = new mapboxgl.Map({
      container: mapContainerRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [14.41854, 50.07365],
      zoom: 12,
    });

    map.on('load', () => {
      map.addSource('parcels', {
        type: 'geojson',
        data: {},
      });

      map.addLayer({
        id: 'parcel-fills-hover',
        type: 'fill',
        source: 'parcels',
        layout: {},
        paint: {
          'fill-color': '#0070FF',
          'fill-opacity': [
            'case',
            ['boolean', ['feature-state', 'hover'], false],
            0.5,
            0,
          ],
        },
      });
    });

    map.on('zoomend', () => {
      setParcelData('FETCHED DATA');
    });

    setMapObject(map);

    return () => map.remove();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    const test = geoTemplateTransform(parcelData);
    if (mapObject) {
      // data is setted with setData(), but map is not updated. It works on mapbox-gl v2.6.0 though
      const geojsonSource =
        mapObject.getSource && mapObject.getSource('parcels');
      geojsonSource && geojsonSource.setData && geojsonSource.setData(test);
    }
  }, [parcelData]);

  return (
    <>
      <MapContainer ref={mapContainerRef} />
    </>
  );
};

export default MapLibre;

There are also other functions in code, which are using map or mapObject like map.flyTo(), or mapObject.setFeatureState(). All of them are working. I was not able to setData directly on map.getSource('parcels') and on mapObject.getSource('parcels') either. It was tested with fetched data and also with mocks. Adding the mapObject to dependency array does not work either. Do you have some ideas why this is not working or how to make it work? I am aware this is more likely a discussion and If I can reach you somewhere else we could definitely delete this thread and continue somewhere else.

Thanks!

More complete documentation

Ok, this codesandbox got me up and running, since the Get Started sandbox is currently broken. Great work, this seems like a good start so far.

It looks like the heading of each of those examples is an available component, and then it gives the names of the props that can be passed in. However, there's no documentation on what is legal to pass through those props and what they do. For example, this one just says options, with no further explanation. The Show Code code doesn't seem to correspond with the examples, and doesn't contain the component shown. I would recommend just showing the component in action in context of the map, we don't necessarily need to see the MUI breakpoints etc.

Invalid hook call occurred in MapComponentsProvider

The map component doesn't load and I get error messages in the console:

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
render @ react-dom.development.js:29670
./src/index.js @ index.js:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at Object.useState (react.development.js:1507:1)
    at MapComponentsProvider (MapContext.tsx:27:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at beginWork$1 (react-dom.development.js:27451:1)
resolveDispatcher @ react.development.js:1476
useState @ react.development.js:1507
MapComponentsProvider @ MapContext.tsx:27
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

react-dom.development.js:18687 The above error occurred in the <MapComponentsProvider> component:

    at MapComponentsProvider (http://localhost:3000/static/js/bundle.js:9646:21)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7
react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1476:1)
    at Object.useState (react.development.js:1507:1)
    at MapComponentsProvider (MapContext.tsx:27:1)
    at renderWithHooks (react-dom.development.js:16305:1)
    at mountIndeterminateComponent (react-dom.development.js:20074:1)
    at beginWork (react-dom.development.js:21587:1)
    at beginWork$1 (react-dom.development.js:27426:1)
    at performUnitOfWork (react-dom.development.js:26557:1)
    at workLoopSync (react-dom.development.js:26466:1)
    at renderRootSync (react-dom.development.js:26434:1)
resolveDispatcher @ react.development.js:1476
useState @ react.development.js:1507
MapComponentsProvider @ MapContext.tsx:27
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26201
legacyCreateRootFromDOMContainer @ react-dom.development.js:29575
legacyRenderSubtreeIntoContainer @ react-dom.development.js:29601
render @ react-dom.development.js:29685
./src/index.js @ index.js:8
options.factory @ react refresh:6
__webpack_require__ @ bootstrap:24
(anonymous) @ startup:7
(anonymous) @ startup:7

@mapcomponents/react-maplibre version: 0.1.69

Steps To Reproduce

1. Setting up a new project with the create-react-app template @mapcomponents/cra-template
2. Starting the development server

Link to code example:

I just tried the output of create-react-app

setTerrain is missing

It seems MapLibreGlWrapper does not pass the full map object API from maplibre. How else can I access the map? useMap doesn't seem to work for me at all. I'm not sure which method is preferred.

@mapcomponents/react-maplibre version:
0.1.27

Steps To Reproduce

//terrain3d.js
import {useContext,useEffect} from 'react'
import { MapContext } from "@mapcomponents/react-core"
import {
    useMap
  } from "@mapcomponents/react-maplibre";
  
const Terrain3D = (props) => {
    const mapContext = useContext(MapContext);
    // const mapHook = useMap({ mapId: "map_1" });
    const {lyrDir=process.env.PUBLIC_URL,vis=true,id='Terrain3D',lyrSuffix='png',
        mapId="map_1",
        insertBeforeLayer=mapContext.map?.firstSymbolLayer,
        minzoom=4,maxzoom=18,
    } = props

    useEffect(() => {
        if (mapContext.map?.isStyleLoaded) {
            console.log(mapContext.map)
            mapContext.map?.addSource("terrain-dem", {
                type: "raster-dem",
                tiles: [
                    `${lyrDir}/${id}/{z}/{x}/{y}.${lyrSuffix}`
                ],
                tileSize: 256,
                maxzoom: 18,
                encoding: "terrarium",
            });
            mapContext.map?.setTerrain(
                { source: "terrain-dem", exaggeration: 20 });

        }
    }, [mapContext.map?.isStyleLoaded])
    
    

  return (
    <>

    </>
  )
}

export default Terrain3D

The current behavior

Just add this component to a map. Printing to the console shows there is indeed no setTerrain method available, although it is available from vanilla maplibre gl. No need to create your own terrain tiles, trying to call setTerrain results in

terrain3D.js:40 Uncaught TypeError: _mapContext$map4.setTerrain is not a function
    at Terrain3D._mapContext$map5 (terrain3D.js:40:1)
    at invokePassiveEffectCreate (react-dom.development.js:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
    at invokeGuardedCallback (react-dom.development.js:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js:23574:1)
    at unstable_runWithPriority (scheduler.development.js:468:1)
    at runWithPriority$1 (react-dom.development.js:11276:1)
    at flushPassiveEffects (react-dom.development.js:23447:1)
    at react-dom.development.js:23324:1
    at workLoop (scheduler.development.js:417:1)
    at flushWork (scheduler.development.js:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:157:1)
Terrain3D._mapContext$map5 @ terrain3D.js:40
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:417
flushWork @ scheduler.development.js:390
performWorkUntilDeadline @ scheduler.development.js:157
index.js:1 The above error occurred in the <Terrain3D> component:

    at Terrain3D (http://localhost:3000/static/js/main.chunk.js:2070:76)
    at MapComponentsProvider (http://localhost:3000/static/js/vendors~main.chunk.js:7001:23)
    at Mapp (http://localhost:3000/static/js/main.chunk.js:894:76)
    at InnerThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:117497:72)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:115773:24)
    at ThemeProvider (http://localhost:3000/static/js/vendors~main.chunk.js:117516:24)
    at StyledEngineProvider (http://localhost:3000/static/js/vendors~main.chunk.js:116066:27)
    at App
    at MapComponentsProvider (http://localhost:3000/static/js/vendors~main.chunk.js:7001:23)
    at AppContextProvider (http://localhost:3000/static/js/main.chunk.js:280:23)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries

The expected behavior

Adding terrain to the referenced map at mapId.