$(() => {
    let markersData = [];
    for(var r_idx in data['regions'])
    {
        var region = data['regions'][r_idx]
        for(var p_idx in region.points)
        {
            var point = region.points[p_idx];
            var loc = point.gps.split(',');
            var lat = parseFloat(loc[0].trim())
            var lon = parseFloat(loc[1].trim())
            markersData.push({ location: [lat, lon], tooltip: { text: point.name, },}, );
        }
    }

    const markerUrl = './img/map-marker.png';
 
    const mapWidget = $('#map').dxMap({
        provider: 'bing',
        apiKey: {
          bing: 'AnpoY0kAA4Kk5A045nQxyVbrlkNTgOuMVBitLxN_iLnZdtONf21HxUTzXwNIebES',
        },
      zoom: 11,
      height: 440,
      width: '100%',
      controls: true,
      markerIconSrc: markerUrl,
      markers: markersData,
      type: 'roadmap'
    }).dxMap('instance');
  
    $('#use-custom-markers').dxCheckBox({
      value: true,
      text: 'Use custom marker icons',
      onValueChanged(data) {
        mapWidget.option('markers', markersData);
        mapWidget.option('markerIconSrc', data.value ? markerUrl : null);
      },
    });
  
    $('#show-tooltips').dxButton({
      text: 'Show all tooltips',
      onClick() {
        const newMarkers = $.map(markersData, (item) => $.extend(
          true,
          {},
          item,
          { tooltip: { isShown: true } },
        ));
  
        mapWidget.option('markers', newMarkers);
      },
    });
  });