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

mkdir js/plugins

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

touch js/plugins/HelloWorld.jsx

Add the following content to the HelloWorld.jsx file

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

touch js/plugins.js

Add following content to the js/plugins.js

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

- 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

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

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