How to apply a custom rendering profile in AJAX?

Bernd Welter · Post by **Bernd Welter** » Sat Feb 05, 2022 2:21 pm

Cheerio,

this week a partner asked me weether it is possible to apply a custom profile in AJAX maps (xMap 1). He wanted to display EMISSION ZONES on a map. Well, here's the result and below you can find the instructions:

: sample - ready to be executeed in the AJAX tutorial

What we need:

a proper native rendering profile

greenzones.ini

A sample profile - it emphasizes the greenzones

(447 Bytes) Downloaded 513 times
a set of ajax profiles ("bg", "fg", "ov"):

xmap-greenzones-ov.properties

overlay

(6.43 KiB) Downloaded 512 times

xmap-greenzones-fg.properties

foreground

(6.48 KiB) Downloaded 507 times

xmap-greenzones-bg.properties

background

(6.48 KiB) Downloaded 505 times
propagate the profiles in the ajaxmaps.properties as a new "group" - they define a so-called ProfileGroup:
xmap.profile.foreground.greenzones = greenzones-fg
xmap.profile.background.greenzones = greenzones-bg
xmap.profile.overview.greenzones = greenzones-ov

Request the profile group in the ajax maps call:

Code: Select all

<html>
  <head>
    <!--[if IE]><script type="text/javascript" src="webcomponent/script/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="webcomponent/script/qooxdoo/script/qx-transport.js"></script>
    <script type="text/javascript" src=".qxrpc"></script>
    <script type="text/javascript" src="webcomponent/script/map.js"></script>

    <script type="text/javascript">
      function init() {
        var container =
          document.getElementById("mapContainer");
        var map =
          new com.ptvag.webcomponent.map.Map(container);
          map.setProfileGroup("greenzones");
        window.onresize = function() {
          map.updateSize();
        };
      }

      qxp.dev.log.Logger.ROOT_LOGGER.setMinLevel(qxp.dev.log.Logger.LEVEL_INFO);
      qxp.dev.log.Logger.getClassLogger(qxp.core.Init).setMinLevel(qxp.dev.log.Logger.LEVEL_ERROR);
    </script>
  </head>

  <body onload="init()">
    <div id="mapContainer"
      style="width:100%;height:100%">
    </div>
  </body>
</html>

Best regards,
Bernd