This is the future Monorepo for all Mapcomponents packages. For now this repository only contains the Deck-Gl package.
To release a new version and publish all packages (with the same version number) to npm run npx lerna version --force-publish
.
A react component framework for declarative GIS application development.
License: MIT License
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
@mapcomponents/react-maplibre version: 0.1.80
Link to code example:
https://codesandbox.io/s/base-template-forked-p5y5sw?file=/src/App.js
I can't import MlSketchTool, because It's not included in the react map libre dist
I can import MlSketchTool
@mapcomponents/react-maplibre version: The deployed version on 2023-04-26
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 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
and default paint props for each layer type.
@mapcomponents/react-maplibre version: v0.1.9
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"
...
...
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
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
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".
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}
/>
@mapcomponents/react-maplibre version: >=1.0.0
Styles are missing for maplibregl-ctrl-bottom-right causing an unstyled container rendered below the map
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
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!
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.
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
Link to code example:
I just tried the output of create-react-app
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
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.
# 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
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
//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
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
Adding terrain to the referenced map at mapId
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.