{"id":41845,"library":"react-spatial","title":"react-spatial","description":"React components for building map applications using OpenLayers and MapLibre GL JS. Current version 3.0.1 with peer dependencies on maplibre-gl ^5, mobility-toolbox-js ^3.6, ol ^10, react ^19, and react-dom ^19. Actively maintained by geops. Provides real-time geographic visualization widgets (layers, controls, popups) with tight integration to both OpenLayers and MapLibre. Supports ES6 modules and SASS theming. Differentiates by offering a unified React component set over two major map libraries, built on top of mobility-toolbox-js.","status":"active","version":"3.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install react-spatial","lang":"bash","label":"npm"},{"cmd":"yarn add react-spatial","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-spatial","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required by MapLibre-based components (e.g., MapLibreMap)","package":"maplibre-gl","optional":false},{"reason":"Core library dependency for layer management and events","package":"mobility-toolbox-js","optional":false},{"reason":"Required by OpenLayers-based components (e.g., OLMap)","package":"ol","optional":false},{"reason":"Peer dependency for React integration","package":"react","optional":false},{"reason":"Peer dependency for React DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"Named export, not default. ESM only.","wrong":"import OLMap from 'react-spatial'","symbol":"OLMap","correct":"import { OLMap } from 'react-spatial'"},{"note":"Package name is 'react-spatial', not scoped.","wrong":"import { MapLibreMap } from '@geops/react-spatial'","symbol":"MapLibreMap","correct":"import { MapLibreMap } from 'react-spatial'"},{"note":"CJS require may not work; library is ESM-only.","wrong":"const { LayerService } = require('react-spatial')","symbol":"LayerService","correct":"import { LayerService } from 'react-spatial'"},{"note":"Base Layer class.","wrong":null,"symbol":"Layer","correct":"import { Layer } from 'react-spatial'"},{"note":"Popup component.","wrong":null,"symbol":"Popup","correct":"import { Popup } from 'react-spatial'"},{"note":"Hook is a named export.","wrong":"import useLayerService from 'react-spatial'","symbol":"useLayerService","correct":"import { useLayerService } from 'react-spatial'"}],"quickstart":{"code":"import React from 'react';\nimport { OLMap } from 'react-spatial';\nimport 'react-spatial/themes/default/index.scss';\n\nfunction App() {\n  const layerService = new LayerService();\n  const center = [8.5417, 47.3769];\n  const zoom = 10;\n\n  return (\n    <OLMap\n      layerService={layerService}\n      center={center}\n      zoom={zoom}\n    />\n  );\n}\n\nexport default App;","lang":"javascript","description":"Minimal React app displaying an OpenLayers map using OLMap component and LayerService."},"warnings":[{"fix":"Upgrade to ol@^10 and react@^18 or ^19.","message":"Version 3.0 drops support for OpenLayers <10 and React <18.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Import from the package root: import { Component } from 'react-spatial'","message":"Importing from 'react-spatial/lib/...' is deprecated in v3.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Create a new LayerService instance and pass via layerService prop.","message":"LayerService must be instantiated and passed to map component; components won't work without it.","severity":"gotcha","affected_versions":"*"},{"fix":"Add import 'react-spatial/themes/default/index.scss' in your entry file.","message":"SASS file import required for default styling; missing import results in unstyled components.","severity":"gotcha","affected_versions":"*"},{"fix":"Install mobilitiy-toolbox-js@^3.6.","message":"mobility-toolbox-js peer dependency upgraded to ^3.6 in v3.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Install maplibre-gl@^5.","message":"MapLibre components require maplibre-gl peer dep; using older maplibre-gl may cause issues.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"search_vec":"'10':33 '19':35,40 '3.0.1':18 '3.6':31 '5':26 'activ':41 'applic':9 'build':7 'built':82 'compon':5,75 'control':53 'current':16 'depend':21 'differenti':69 'dom':39 'es6':64 'geograph':49 'geop':44 'gl':14,25 'integr':57 'javascript':90 'js':15,30,89 'layer':52 'librari':81 'maintain':42 'major':79 'map':8,80 'maplibr':13,24,62 'maplibre-gl':23 'mobil':28,87 'mobility-toolbox-j':27,86 'modul':65 'offer':71 'ol':32 'openlay':11,60 'peer':20 'popup':54 'provid':45 'react':2,4,34,38,74 'react-dom':37 'react-spati':1 'real':47 'real-tim':46 'sass':67 'set':76 'spatial':3 'support':63 'theme':68 'tight':56 'time':48 'toolbox':29,88 'top':84 'two':78 'unifi':73 'use':10 'version':17 'visual':50 'widget':51","created_at":"2026-06-04T18:54:23.118570+00:00","updated_at":"2026-06-04T18:54:23.118570+00:00","problems":[{"fix":"Ensure your bundler supports SCSS (e.g., sass-loader) and correct import path.","cause":"Missing SASS loader in webpack/Vite configuration or missing theme import.","error":"Module not found: Can't resolve 'react-spatial/themes/default/index.scss'"},{"fix":"Instantiate LayerService and pass as prop: <OLMap layerService={new LayerService()} />","cause":"LayerService not passed or not properly initialized.","error":"Uncaught TypeError: Cannot read properties of undefined (reading 'getLayerService')"},{"fix":"Run npm install mobility-toolbox-js@^3.6","cause":"Missing peer dependency mobility-toolbox-js.","error":"Cannot find module 'mobility-toolbox-js' or its corresponding type declarations."},{"fix":"Upgrade to v3 or check correct component name.","cause":"Trying to import a component that doesn't exist in that version (v2).","error":"Attempted import error: 'MapLibreMap' is not exported from 'react-spatial'."},{"fix":"Ensure LayerService is initialized before map mount, e.g., in component state.","cause":"LayerService not yet ready or map not initialized.","error":"TypeError: Cannot read properties of undefined (reading 'getLayers')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"react-spatial","openapi_spec":null,"status_page":null,"smithery":null,"categories":["maps"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}