Infinite Mapping Architecture

This project is an example of how to apply the infinite architecture in a web mapping project.

Architecture Overview

This project uses the Observer Pattern, Presenters, Repositories, Gateways and a basic IOC Container to display a webmap. Third party libraries like OpenLayers or React are only used in Components and Gateways. This separation of concerns allows great testability and scales very well.

Features:

• URL updates when interacting on the map.
• If URL Parameters are available, the map uses them on load.
• Layers can be turned on/off and opacity can be changed.
• Layer legend can be shown.
• A click on map features, performs a getFeatureInfo Request to the WMS Layers.
  
  

Getting started

First, clone the project

git clone https://github.com/karten-werk-GmbH/maps-infinite-architecture.git

Then...

# enter the directory
cd maps-infinite-architecture

# install the dependencies
npm install

# run the dev server
npm run dev

Codesandbox

There is a Codesandbox available here

Testing

This project uses vitest as a testing library. You can run the tests with the following command

npm run test

Dependencies

• OpenLayers
• QueryString
• React

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

GNU General Public License v3.0