Map with geoJSON overlay

[nunocordeiro]

Hi!

I am exploring HighMaps wich seems to be an awesom tool.
But I have a challenge in hands: we need to put a series of polygons on top of a HighMap. Can we use one of those in highmaps collection http://code.highcharts.com/mapdata/ and add polygons on top of it? If so, could you please provide a working example? Or, is it a requirement that we create a custom-made geoJSON?


Also, is there a zoom limitation? Let's say we aim to create geoJSON areas that correspond to a couple of blocks in one city. If we render it on top of a US map will we be able to zoom until we see our polygon?


Thanks!
NC

[wojtek]

Hi nunocordeiro,

1. Of course, you can put a series of polygons on top of a HighMap. The easiest way to make it is to add your series type for e.g mappolygon that will be extension for polygon series type:

Code: Select all

(function(H) {
  var merge = H.merge,
    Point = H.Point,
    seriesType = H.seriesType;

  seriesType('mappolygon', 'polygon', {}, {}, {
    applyOptions: function(options, x) {
      var mergedOptions = (
        options.lat !== undefined &&
        options.lon !== undefined ?
        merge(options, this.series.chart.fromLatLonToPoint(options)) :
        options
      );
      return Point.prototype.applyOptions.call(this, mergedOptions, x);
    }
  });
}(Highcharts));

To use polygon series with global coordinates, you have to add highcharts-more.js and proj4.js also. Then you can use mappolygon series to draw polygon on your map:

Code: Select all

    series: [{
        // Specify points using lat/lon
        type: 'mappolygon',
        name: 'Cities',
        color: 'tomato',
        data: [{
            name: 'London',
            lat: 51.507222,
            lon: -0.1275
        }, {
            name: 'Bristol',
            lat: 51.45,
            lon: -2.583333
        }, {
            name: 'Belfast',
            lat: 54.597,
            lon: -5.93
        }, {
            name: 'Lerwick',
            lat: 60.155,
            lon: -1.145
        }]
    }]

2. There isn't zoom limitation. You can set min zoom range using xAxis.minRange property. Check here https://api.highcharts.com/highmaps/xAxis.minRange.

Online example: https://jsfiddle.net/wchmiel/0ckejhtw/

Is it clear for you now?
Best regards.