Create Geo selector

[ajmas]

Create a "geo selector" for choosing the region to display.

Behaviour:

• Counties should be coloured according to the ITU region they are in
• Hovering over the country would show the region and country name
• Clicking on the country would emit an event that can then be used by the embedding page

We should look at using vue-leaflet for this and a geojson data file for the outlines, along with openstreetmaps for the base layer.

[ajmas]

Have started working on an initial version, but running into a performance issue whereby the UI freezes when rendering the map, with a 25 MB geojson file. Currently investigating how to deal with this issue. My current template code:

    <l-map
      v-else
      :zoom="zoom"
      :center="center"
      style="height: 100%; width: 100%"
    >
      <l-tile-layer
        :url="baseLayer.url"
        :attribution="baseLayer.attribution"
      />
      <l-geo-json
        :geojson="geojsonLayer.geojson"
        :options="geojsonLayer.options"
        :attribution="geojsonLayer.attribution"
        :options-style="geojsonLayer.styleFunction"
      />
    </l-map>

With the components being imported as:

import { LMap, LTileLayer, LGeoJson, Layer } from '@vue-leaflet/vue-leaflet';