Q:

Is it possible to define an image map area by radial coordinates?

I am familiar with the online Imagemap Generators for use in HTML pages. They are convenient when you are creating rectangular or circular areas.
However, if your area is pie-shaped, it makes things a little more complicated. For example, if I have this shape and I wanted to make each pie slice a separate area, this is what the image map code looks like when I use an online imagemap generator.
<img src="url/to/your/image.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
    <area alt="Slice1" title="Slice1" href="#" shape="poly" coords="149,2,146,294,40,250,4,172,14,85,73,23" />
    <area alt="Slice2" title="Slice2" href="#" shape="poly" coords="153,1,251,38,286,86,299,148,287,207,244,264,206,283,155,295" />
</map>

 
This is the downside when you're using rectangular coordinates on a circular shape: it takes more points to define a pie slice than you would need with radial coordinates. For example I could define a pie slice with (center x, center y, radius, angle start, angle end).
Is there a way to define an area with radial coordinates, or is that not possible in HTML?  From what I read shape="circle" is only used for genuine circle and not parts of a circle.
I'm prepared to accept an answer of, "No it's just not possible in HTML." If that is the case, is there an alternate means of achieving the same result on an HTML page?

A:

Do you really need to use an image map. You can use point.events in the highchart settings to detect the click and redirect the user with window.location. I wrote the code to output to the console onclick instead of redirecting. (Sorry for an elaborate demo, I just picked one of the highchart demos instead of starting from scratch.)

$(function() {
  $('#container').highcharts({
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: 'Browser market shares January, 2015 to May, 2015'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.percentage:.1f} %',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
          }
        }
      }
    },
    series: [{
      name: 'Brands',
      point: {
        events: {
          click: function() {
            //location.href = this.options.url;
            console.log(this.options.url);
          }
        }
      },
      colorByPoint: true,
      data: [{
        name: 'Microsoft Internet Explorer',
        y: 56.33,
        url: "http://www.example.com/ie"
      }, {
        name: 'Chrome',
        y: 24.03,
        sliced: true,
        selected: true,
        url: "http://www.example.com/chrome"
      }, {
        name: 'Firefox',
        y: 10.38,
        url: "http://www.example.com/firefox"
      }, {
        name: 'Safari',
        y: 4.77,
        url: "http://www.example.com/safari"
      }, {
        name: 'Opera',
        y: 0.91,
        url: "http://www.example.com/opera"
      }, {
        name: 'Proprietary or Undetectable',
        y: 0.2,
        url: "http://www.example.com/other"
      }]
    }]
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

