Basic example clic on map

by fxi

HTML

<script src="https://app.staging.mapx.org/sdk/mxsdk.umd.js"></script>
<label for="countries">Choose a country:</label>
<select name="select_country" id="select_country">
  <option value="ITA">Italia</option>
  <option value="ALB">Albania</option>
  <option value="GRC">Greece</option>
  <option value="TUN">Tunisia</option>
</select>
<div id="mapx"></div>

CSS

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#mapx {
  height: calc(100% - 20px);
  width: 100%;
}

JavaScript

// Doc: https://github.com/unep-grid/mapx/tree/main/app/src/js/sdk#mapx-sdk

const elSelectCountry = document.getElementById("select_country");
elSelectCountry.addEventListener("change", trigger_country_hl);


/**
* NOTE: given those bounding box, france, spain, morocco will not be full visible 
*/ 

const mapx = new mxsdk.Manager({
  container: document.getElementById("mapx"),
  verbose: true,
  url: "https://app.staging.mapx.org",
  static: true,
  params: {
    project: "MX-R2F-467-2PL-J9H-CCR",
    language: "en",
    closePanels: true,
    zoomToViews: false,
    viewsOpen: ["MX-7O4JN-M4XCG-T6TO2"],
    theme: "water_light",
    lat: 37.362,
    lng: 16.549,
    zoom: 2,
    zoomMax: 8,
    useMaxBounds: true,
    n: 48, 
    s: 29,
    e: 38,
    w: -8
  }
});

mapx.on("click_attributes", async (data) => {
  const attributes = data.attributes;
  const iso3code = attributes.iso3[0];
  elSelectCountry.value = iso3code;
  await mapx.ask("common_loc_fit_bbox", {
    code: iso3code
  })
})

mapx.on("mapx_ready", async () => {

  await mapx.ask("set_features_click_sdk_only", {
    enable: true,
    toggle: true
  });
  /**
   * The best way would be to have a nice "country shade"
   * -> next best : change highlight colors
   */
  const themes = await mapx.ask("get_themes");
  const theme = themes.filter(t => t.id === 'water_light')[0];
  const item = theme.colors.mx_map_feature_highlight;
  item.color = "rgba(89,111,126,0.5)";
  await mapx.ask("set_theme", {
    colors: theme.colors
  });
  await trigger_country_hl()
})


/**
 * Helpers
 */
async function trigger_country_hl() {
  const country = elSelectCountry.value || "ITA";
  await mapx.ask("set_highlighter", {
    filters: [{
      id: "MX-7O4JN-M4XCG-T6TO2",
      filter: ["==", ["get", "iso3"], country]
    }],
  });
  await mapx.ask("common_loc_fit_bbox", {
    code: country
  })
}