dbf-mirador 4.3.0-testing3 → 4.3.0-testing4

package/README.md

@@ -2,6 +2,19 @@
 
 We forked the original Mirador project to create a version that is compatible with the DBF Map project. This version of Mirador is designed to work seamlessly with the DBF Map platform, providing users with an enhanced experience for viewing and interacting with digital content. More detail about the original Mirador project can be found [here](https://github.com/ProjectMirador/mirador). This readme will cover only minimal information about the original Mirador project and will focus on the changes made to support the DBF Map project.
 
+We provided a ready to use component called `MapViewer` See below for more details.
+
+<!-- TOC -->
+* [DBF Map Mirador](#dbf-map-mirador)
+  * [Running Mirador locally for development](#running-mirador-locally-for-development)
+  * [Install Mirador inside your project](#install-mirador-inside-your-project-)
+    * [`MapViewer` component](#mapviewer-component)
+    * [Mirador](#mirador)
+  * [Running the tests](#running-the-tests)
+  * [Linting the project](#linting-the-project)
+<!-- TOC -->
+
+
 ## Running Mirador locally for development
 
 Mirador local development requires [nodejs](https://nodejs.org/en/download/) to be installed.
@@ -11,12 +24,9 @@ git clone git@github.com:AlMadar-Digital/map-mirador.git
 cd map-mirador
 npm install
 
+npm start
 ```
-Then run the following command to start a local development server:
 
-```sh
-$ npm start
-```
 
 Then navigate to [http://127.0.0.1:4444/](http://127.0.0.1:4444/)
 
@@ -28,21 +38,33 @@ Then navigate to [http://127.0.0.1:4444/](http://127.0.0.1:4444/)
 $ npm install dbf-mirador 
 ```
 
-### Mirador 
+### `MapViewer` component
 
-Check the demo folder TODO
+For consumers that just want to render a manifest as a map - without learning Mirador's own
+config/plugin API - `MapViewer` is a React component that wraps `Mirador.viewer()` with a
+preset config (annotation sidebar open by default, window chrome hidden, single-window
+layout). The only required prop is the manifest URL:
 
-### Instantiating Mirador
+Here the manifestId correspond to the manifest endpoint from the map object provided by Strapi. This endpoint provides the map data as a IIIF manifest.
+You can use the following code snippet to render a map in your React application.
 
-```javascript
-var miradorInstance = Mirador.viewer({
-  id: 'mirador' // id selector where Mirador should be instantiated
-});
+```jsx
+import { MapViewer } from 'dbf-mirador';
 
-> miradorInstance
-{ actions, store }
+function App() {
+  return <MapViewer manifestId="https://files.tetras-libre.fr/dev/dbf/mapnile.json" />;
+}
 ```
 
+Run `npm start` and open `localhost:4444/demo/map-viewer.html` to see it live.
+
+### Mirador
+
+Check the `demo` folder for runnable examples, including `demo/index.html` (raw
+`Mirador.viewer()` usage), `demo/map-viewer.html` (the `MapViewer` component below) and
+`demo/map-editor.html` (the map preset plus `dbf-mirador-annotation-editor`, so POIs and
+journeys can be created/edited against browser-local storage with no backend).
+
 
 ## Running the tests
 We use Vitest to run our test suite.