Make a Plugin
==============

The advantages of a MapStore project is to be extensible with custom plugins.
The plugins are react components wrapped in specific utils functions that make the component available to the MapStore plugins architecture.

This section shows an overview of the basic files and configuration needed to extend the project with a simple plugin.

Make a new folder called ``plugins`` inside the ``js``

.. code-block:: bash

    mkdir js/plugins

Create a a new file called ``HelloWorld.jsx`` inside the ``js/plugins`` folder

.. code-block:: bash

    touch js/plugins/HelloWorld.jsx

Add the following content to the ``HelloWorld.jsx`` file

.. code-block:: javascript

    import React from 'react';
    import { createPlugin } from '@mapstore/utils/PluginsUtils';

    function HelloWorld() {
        return (
            <div
                style={{
                    position: 'absolute',
                    zIndex: 100,
                    bottom: 35,
                    margin: 8,
                    left: '50%',
                    backgroundColor: '#ffffff',
                    padding: 8,
                    textAlign: 'center',
                    transform: 'translateX(-50%)'
                }}
            >
                Hello World!
            </div>
        );
    }

    export default createPlugin('HelloWorld', {
        component: HelloWorld
    });

We can configure the plugin to be correctly displayed in the map viewer page
now that we defined the content of our plugin: a simple ``Hello World!`` message


Create a new ``plugins.js`` file in the ``js`` folder where we will include core plugins with custom ones

.. code-block:: bash

    touch js/plugins.js

Add following content to the ``js/plugins.js``

.. code-block:: javascript

    import HelloWorldPlugin from '@js/plugins/HelloWorld';
    import productPlugins from '@mapstore/product/plugins.js';

    export default {
        requires: {
            ...productPlugins.requires
        },
        plugins: {
            ...productPlugins.plugins,
            HelloWorldPlugin
        }
    };

Edit the ``js/app.jsx`` file and replace the plugins import with the new created files

.. code-block:: diff

    - const plugins = require('@mapstore/product/plugins').default;
    + import plugins from '@js/plugins';

Now we can add the new plugin to the desktop configuration of the ``configs/localConfig.json`` file

.. code-block:: diff

    {
        // ...
        "plugins": {
            // ...
            "desktop": [
    +           { "name": "HelloWorld" },
                "Details"

Finally we can open the map viewer to see our floating Hello World! message on the map