Customization

vanilla.html

common.css

common.js

react.html

vue.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
    <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
    <script src="./common.js"></script>

    <script>
      window.map = null;

      main();
      async function main() {
        await mappable.ready;
        const {MMap, MMapDefaultSchemeLayer} = mappable;

        map = new MMap(document.getElementById('app'), {
          location: LOCATION,
          mode: 'vector'
        });

        const layer = new MMapDefaultSchemeLayer({
          customization: CUSTOMIZATION
        });
        map.addChild(layer);

        setTimeout(() => {
          layer.update({customization: CUSTOMIZATION_2});
        }, 3000);
      }
    </script>

    <!-- prettier-ignore -->
    <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>

#app {
  height: calc(100% - 40px);
}

#map-container {
  height: 50%;
}

#editor {
  width: 100%;
  height: 50%;
}

const LOCATION = {center: [55.38821, 25.20731], zoom: 15.05};

const CUSTOMIZATION = [
  // Making all building geometries transparent
  {
    tags: {
      all: ['structure']
    },
    elements: 'geometry',
    stylers: [
      {
        opacity: 0
      }
    ]
  },
  // Change the color of labels for all POIs and nodes of the public transport network
  {
    tags: {
      any: ['poi', 'transit_location']
    },
    elements: 'label.text.fill',
    stylers: [
      {
        color: '#0000DD'
      }
    ]
  }
];

const CUSTOMIZATION_2 = [
  ...CUSTOMIZATION,
  {
    types: 'polygon',
    tags: {
      any: ['water']
    },
    stylers: [
      {
        color: '#2A8ED5',
        opacity: 0.85
      }
    ]
  }
];

<!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://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
    <script src="./common.js"></script>

    <script type="text/babel">
      window.map = null;

      main();
      async function main() {
        const [mappableReact] = await Promise.all([
          mappable.import('@mappable-world/mappable-reactify'),
          mappable.ready
        ]);
        const reactify = mappableReact.reactify.bindTo(React, ReactDOM);
        const {MMap, MMapDefaultSchemeLayer} = reactify.module(mappable);

        function App() {
          const [customization, setCustomization] = React.useState(CUSTOMIZATION);
          const [customizationString, setCustomizationString] = React.useState(
            JSON.stringify(CUSTOMIZATION, null, 4)
          );
          const [jsonError, setJSONError] = React.useState(false);

          const onTextareaChange = (e) => {
            const text = e.target.value;
            setCustomizationString(text);
            try {
              setCustomization(JSON.parse(text));
              setJSONError(null);
            } catch (error) {
              setJSONError(error.message);
            }
          };

          return (
            <React.Fragment>
              <div id="map-container">
                <MMap location={LOCATION} mode="vector" ref={(x) => (map = x)}>
                  <MMapDefaultSchemeLayer customization={customization} />
                </MMap>
              </div>
              {jsonError}
              <textarea id="editor" value={customizationString} onChange={onTextareaChange} />
            </React.Fragment>
          );
        }

        ReactDOM.render(
          <React.StrictMode>
            <App />
          </React.StrictMode>,
          document.getElementById('app')
        );
      }
    </script>

    <!-- prettier-ignore -->
    <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://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://js.api.mappable.world/v3/?apikey=<YOUR_APIKEY>&lang=en_US" type="text/javascript"></script>
    <script src="./common.js"></script>

    <script>
      window.map = null;

      main();
      async function main() {
        const [mappableVue] = await Promise.all([mappable.import('@mappable-world/mappable-vuefy'), mappable.ready]);
        const vuefy = mappableVue.vuefy.bindTo(Vue);
        const {MMap, MMapDefaultSchemeLayer} = vuefy.module(mappable);

        const app = Vue.createApp({
          components: {MMap, MMapDefaultSchemeLayer},
          setup() {
            const customization = Vue.shallowRef(CUSTOMIZATION);
            const customizationString = Vue.ref(JSON.stringify(customization.value, null, 4));
            const jsonError = Vue.ref(null);
            const refMap = (ref) => {
              window.map = ref?.entity;
            };
            Vue.watch(customizationString, (newCustomizationString) => {
              try {
                customization.value = JSON.parse(newCustomizationString);
                jsonError.value = null;
              } catch (error) {
                jsonError.value = error.message;
              }
            });
            return {LOCATION, customization, customizationString, jsonError, refMap};
          },
          template: `
                        <div id="map-container">
                            <MMap :location="LOCATION" mode="vector" :ref="refMap">
                                <MMapDefaultSchemeLayer :customization="customization" />
                            </MMap>
                        </div>
                        {{jsonError}}
                        <textarea v-model="customizationString" id="editor" />`
        });
        app.mount('#app');
      }
    </script>

    <!-- prettier-ignore -->
    <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>