Creating your own map

Open in CodeSandbox

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <!-- To make the map appear, you must add your apikey -->
        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="react, typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {getEntitiesProps} from './common';
            
            window.map = null;
            
            main();
            async function main() {
                const params = await fetch('../params.json').then((data) => data.json());
                await mappable.ready;
            
                const {MMap, MMapTileDataSource, MMapLayer} = mappable;
            
                const {Cartesian} = await mappable.import('@mappable-world/mappable-cartesian-projection');
            
                const entitiesProps = getEntitiesProps(Cartesian, params);
                map = new MMap(document.getElementById('app'), entitiesProps.map, [
                    new MMapTileDataSource(entitiesProps.tileDataSource),
                    new MMapLayer(entitiesProps.layer)
                ]);
            }
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <!-- To make the map appear, you must add your apikey -->
        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="react, typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="react, typescript" type="text/babel">
            import {getEntitiesProps} from './common';
            
            window.map = null;
            
            main();
            async function main() {
                const params = await fetch('../params.json').then((data) => data.json());
            
                // For each object in the JS API, there is a React counterpart
                // To use the React version of the API, include the module @mappable-world/mappable-reactify
                const [mappableReact] = await Promise.all([mappable.import('@mappable-world/mappable-reactify'), mappable.ready]);
                const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
                const {MMap, MMapTileDataSource, MMapLayer} = reactify.module(mappable);
            
                const {Cartesian} = await mappable.import('@mappable-world/mappable-cartesian-projection');
            
                const entitiesProps = getEntitiesProps(Cartesian, params);
            
                function App() {
                    return (
                        <MMap {...entitiesProps.map} ref={(x) => (map = x)}>
                            <MMapTileDataSource {...entitiesProps.tileDataSource} />
                            <MMapLayer {...entitiesProps.layer} />
                        </MMap>
                    );
                }
            
                ReactDOM.render(
                    <React.StrictMode>
                        <App />
                    </React.StrictMode>,
                    document.getElementById('app')
                );
            }
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
        <script crossorigin src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
        <script crossorigin src="https://cdn.jsdelivr.net/npm/@babel/standalone@7/babel.min.js"></script>

        <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>

        <script
            data-plugins="transform-modules-umd"
            data-presets="react, typescript"
            type="text/babel"
            src="./common.ts"
        ></script>
        <script data-plugins="transform-modules-umd" data-presets="typescript" type="text/babel">
            import {getEntitiesProps} from './common';
            
            window.map = null;
            
            async function main() {
                const params = await fetch('../params.json').then((data) => data.json());
                const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
                const {Cartesian} = await mappable.import('@mappable-world/mappable-cartesian-projection');
                const vuefy = mappableVue.vuefy.bindTo(Vue);
                const {MMap, MMapTileDataSource, MMapLayer} = vuefy.module(mappable);
            
                const entitiesProps = getEntitiesProps(Cartesian, params);
                const App = Vue.createApp({
                    components: {
                        MMap,
                        MMapTileDataSource,
                        MMapLayer
                    },
                    setup() {
                        const refMap = (ref) => {
                            window.map = ref?.entity;
                        };
            
                        return {
                            refMap,
                            entitiesProps
                        };
                    },
                    template: `
                  <MMap :ref="refMap" v-bind="entitiesProps.map">
                    <MMapTileDataSource v-bind="entitiesProps.tileDataSource" />
                    <MMapLayer v-bind="entitiesProps.layer" />
                  </MMap>
                `
                });
            
                App.mount('#app');
            }
            
            main();
        </script>

        <style> html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .toolbar { position: absolute; z-index: 1000; top: 0; left: 0; display: flex; align-items: center; padding: 16px; } .toolbar a { padding: 16px; }  </style>
        <link rel="stylesheet" href="./common.css" />
    </head>
    <body>
        <div id="app"></div>
    </body>
</html>

{
    "image": {
        "width": 14575,
        "height": 8441
    },
    "projection": {
        "bounds": [
            [-7287.5, -12163.5],
            [9096.5, 4220.5]
        ],
        "cycled": [false, false]
    },
    "map": {
        "zoomRange": {
            "min": 3,
            "max": 6
        },
        "mode": "raster",
        "restrictMapArea": [
            [-7287.5, -4220.5],
            [7287.5, 4220.5]
        ],
        "worldOptions": {
            "cycledX": false
        }
    },
    "tiles": {
        "pathTemplate": "z/y-x.png"
    }
}

import type {MMapLayerProps, MMapProps, MMapTileDataSourceProps} from '@mappable-world/mappable-types';

interface EntitiesProps {
    map: MMapProps;
    tileDataSource: MMapTileDataSourceProps;
    layer: MMapLayerProps;
}

export function getEntitiesProps(CartesianProjection, params): EntitiesProps {
    const projection = new CartesianProjection(params.projection.bounds);

    return {
        map: {
            ...params.map,
            location: {center: [0, 0], zoom: params.map.zoomRange.min + 1},
            projection: projection
        },
        tileDataSource: {
            id: 'image',
            copyrights: ['© NASA', '© ESA', '© CSA', '© STScI'],
            raster: {
                type: 'tile',
                fetchTile: `https://static.mappable.world/s3/front-maps-static/maps-front-jsapi-3/examples/images/cartesian-projection/tiles/${params.tiles.pathTemplate}`
            }
        },
        layer: {source: 'image', type: 'tile'}
    };
}

mappable.import.registerCdn('https://cdn.jsdelivr.net/npm/{package}', '@mappable-world/mappable-cartesian-projection@0.0');

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#app {
    width: 100%;
    height: 100%;

    max-width: 1200px;
    max-height: 600px;
}