repository·master·Indexed 20 days ago
https://github.com/geosolutions-it/mapstore2An open-source web mapping framework for creating, sharing, and embedding maps and dashboards. It supports 2D and 3D visualization via OpenLayers, Leaflet, and Cesium, and integrates with OGC standards including WMS, WMTS, WFS, 3DTiles, and CSW. Version 0.14.0.
MapStore provides two primary toolbars for user interaction with the map viewer:
MapStore is a highly modular Open Source WebGIS framework used to create, manage, and securely share maps, dashboards, and stories. It acts as both a standalone geoportal product and a framework for building custom WebGIS applications using its plugins and modules.
MapStore follows a modular structure separating the Java backend, the ReactJS frontend, and build/utility tooling.
java/)Contains Java modules including services, web, and printing. Managed via pom.xml.
web/client/)Built using ReactJS and Redux. The structure follows a standard Redux pattern:
plugins/: ReactJS 'smart' components that include required reducers.components/: ReactJS 'dumb' components, organized by category. Unit tests are located in __tests__ subdirectories.actions/: Redux actions.reducers/: Redux reducers.epics/: redux-observable epics.stores/: Redux stores.configs/: JSON configuration files (e.g., localConfig.json, pluginsConfig.json).index.html: The entry point for the demo application.translations/)Contains i18n localization files, such as data.en-US.json.
build/: Contains Webpack configurations (webpack.config.js, prod-webpack.config.js), Karma test configurations, and other build-related files.utility/: General utility scripts for eslint, build, projects, and translations.+-- package.json
+-- pom.xml
+-- build.sh
+-- build (build related files)
+-- java (java backend modules)
+-- translations (i18n localization files)
+-- utility (general utility scripts and functions)
+-- web (frontend module)
+-- client
| +-- index.html
| +-- plugins (ReactJS smart components)
| +-- components (ReactJS dumb components)
| +-- actions (Redux actions)
| +-- configs (JSON config files)
| +-- epics (redux-observable epics)
| +-- reducers (Redux reducers)
| +-- stores (Redux stores)@mapstore/generate-icons utility is a tool designed to automate the generation of new icons from SVG source files. This utility is distributed as an npm package.The MapStore interface is organized into several functional blocks that allow for map manipulation, layer management, and navigation:
A Dashboard is a workspace used to aggregate multiple Widgets—such as charts, maps, tables, texts, and counters—into a single view. Dashboards allow users to:
An epic is a function that takes two arguments and returns a stream of Redux actions. In MapStore2, epics are used to implement asynchronous operations and complex data flows.
Epic Signature:
const myEpic = (action$, store) => { ... }
action$: An RxJS Observable representing the stream of all Redux actions. Every time an action is dispatched in Redux, it is emitted here.store: A simplified version of the Redux store. It provides the getState() method to access the current application state.Key Pattern: Actions In, Actions Out
Typically, an epic listens for specific actions on the action$ stream, performs logic (like filtering or state checks), and then returns a new stream that emits actions to be dispatched back to Redux.
Note on ofType: MapStore2 uses redux-observable, which adds the ofType operator to RxJS. This operator allows you to filter the action$ stream for specific action types.
const fetchUserEpic = (action$, store) => action$
.ofType(MAP_CONFIG_LOADED)
.filter(() => isMapLoadConfigurationEnabled(store.getState()))
.map({
type: NOTIFICATION,
message: "Map Loaded"
});The GeoCarousel section provides an immersive storytelling experience by linking a list of carousel cards to specific geographic locations on a map.
Unlike the Immersive Section or Title Section, the GeoCarousel section only supports a map as its background.
In edit mode, the section is composed of three main parts:
In MapStore, a Context is a tool used to build and configure specific MapStore viewers. A Context allows you to define a unique viewing experience by specifying:
To prevent multiple tools from conflicting during drawing interactions, follow these patterns:
DrawSupport: The extension automatically dispatches the CHANGE_DRAWING_STATUS action, which other plugins can listen to.CLICK_ON_MAP: You must manually dispatch REGISTER_EVENT_LISTENER when drawing starts and UNREGISTER_EVENT_LISTENER when drawing stops.Use the shutdownToolOnAnotherToolDrawing helper in your extension's epics. This wrapper automatically toggles off your tool when a feature editor opens or another plugin starts drawing.
Usage Example:
export const toggleToolOffOnDrawToolActive = (action$, store) =>
shutdownToolOnAnotherToolDrawing(action$, store, 'yourToolName');export const toggleToolOffOnDrawToolActive = (action$, store) => shutdownToolOnAnotherToolDrawing(action$, store, 'yourToolName');MapStore2 supports dynamic configuration using JavaScript expressions wrapped in curly braces: "{expression}". These expressions are evaluated at runtime and can access several variables:
request: The parsed request URL.context: Anything defined in the plugins.js requires section.state: A function to extract values from the monitored state (e.g., state('map.present.zoom')).Note: Only the monitored state is available via the state function. You must explicitly define which state fragments to monitor in localConfig.json using the monitorState key.
{
"monitorState": [
{"name": "router", "path": "router.location.pathname"},
{"name": "browser", "path": "browser"}
],
"plugins": {
"desktop": [{
"name": "Sample",
"cfg": {
"text": "{state('mapType') === 'leaflet' ? 'Leaflet Map' : 'OpenLayers Map'}"
}
}]
}
}