tilemap.src.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. /* *
  2. *
  3. * Tilemaps module
  4. *
  5. * (c) 2010-2017 Highsoft AS
  6. * Author: Øystein Moseng
  7. *
  8. * License: www.highcharts.com/license
  9. *
  10. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  11. *
  12. * */
  13. 'use strict';
  14. import H from '../parts/Globals.js';
  15. import U from '../parts/Utilities.js';
  16. var clamp = U.clamp, extend = U.extend, pick = U.pick;
  17. /**
  18. * @typedef {"circle"|"diamond"|"hexagon"|"square"} Highcharts.TilemapShapeValue
  19. */
  20. import '../parts-map/HeatmapSeries.js';
  21. var seriesType = H.seriesType,
  22. // Utility func to get padding definition from tile size division
  23. tilePaddingFromTileSize = function (series, xDiv, yDiv) {
  24. var options = series.options;
  25. return {
  26. xPad: (options.colsize || 1) / -xDiv,
  27. yPad: (options.rowsize || 1) / -yDiv
  28. };
  29. };
  30. // Map of shape types.
  31. H.tileShapeTypes = {
  32. // Hexagon shape type.
  33. hexagon: {
  34. alignDataLabel: H.seriesTypes.scatter.prototype.alignDataLabel,
  35. getSeriesPadding: function (series) {
  36. return tilePaddingFromTileSize(series, 3, 2);
  37. },
  38. haloPath: function (size) {
  39. if (!size) {
  40. return [];
  41. }
  42. var hexagon = this.tileEdges;
  43. return [
  44. 'M', hexagon.x2 - size, hexagon.y1 + size,
  45. 'L', hexagon.x3 + size, hexagon.y1 + size,
  46. hexagon.x4 + size * 1.5, hexagon.y2,
  47. hexagon.x3 + size, hexagon.y3 - size,
  48. hexagon.x2 - size, hexagon.y3 - size,
  49. hexagon.x1 - size * 1.5, hexagon.y2,
  50. 'Z'
  51. ];
  52. },
  53. translate: function () {
  54. var series = this, options = series.options, xAxis = series.xAxis, yAxis = series.yAxis, seriesPointPadding = options.pointPadding || 0, xPad = (options.colsize || 1) / 3, yPad = (options.rowsize || 1) / 2, yShift;
  55. series.generatePoints();
  56. series.points.forEach(function (point) {
  57. var x1 = clamp(Math.floor(xAxis.len -
  58. xAxis.translate(point.x - xPad * 2, 0, 1, 0, 1)), -xAxis.len, 2 * xAxis.len), x2 = clamp(Math.floor(xAxis.len -
  59. xAxis.translate(point.x - xPad, 0, 1, 0, 1)), -xAxis.len, 2 * xAxis.len), x3 = clamp(Math.floor(xAxis.len -
  60. xAxis.translate(point.x + xPad, 0, 1, 0, 1)), -xAxis.len, 2 * xAxis.len), x4 = clamp(Math.floor(xAxis.len -
  61. xAxis.translate(point.x + xPad * 2, 0, 1, 0, 1)), -xAxis.len, 2 * xAxis.len), y1 = clamp(Math.floor(yAxis.translate(point.y - yPad, 0, 1, 0, 1)), -yAxis.len, 2 * yAxis.len), y2 = clamp(Math.floor(yAxis.translate(point.y, 0, 1, 0, 1)), -yAxis.len, 2 * yAxis.len), y3 = clamp(Math.floor(yAxis.translate(point.y + yPad, 0, 1, 0, 1)), -yAxis.len, 2 * yAxis.len), pointPadding = pick(point.pointPadding, seriesPointPadding),
  62. // We calculate the point padding of the midpoints to
  63. // preserve the angles of the shape.
  64. midPointPadding = pointPadding *
  65. Math.abs(x2 - x1) / Math.abs(y3 - y2), xMidPadding = xAxis.reversed ?
  66. -midPointPadding : midPointPadding, xPointPadding = xAxis.reversed ?
  67. -pointPadding : pointPadding, yPointPadding = yAxis.reversed ?
  68. -pointPadding : pointPadding;
  69. // Shift y-values for every second grid column
  70. if (point.x % 2) {
  71. yShift = yShift || Math.round(Math.abs(y3 - y1) / 2) *
  72. // We have to reverse the shift for reversed y-axes
  73. (yAxis.reversed ? -1 : 1);
  74. y1 += yShift;
  75. y2 += yShift;
  76. y3 += yShift;
  77. }
  78. // Set plotX and plotY for use in K-D-Tree and more
  79. point.plotX = point.clientX = (x2 + x3) / 2;
  80. point.plotY = y2;
  81. // Apply point padding to translated coordinates
  82. x1 += xMidPadding + xPointPadding;
  83. x2 += xPointPadding;
  84. x3 -= xPointPadding;
  85. x4 -= xMidPadding + xPointPadding;
  86. y1 -= yPointPadding;
  87. y3 += yPointPadding;
  88. // Store points for halo creation
  89. point.tileEdges = {
  90. x1: x1, x2: x2, x3: x3, x4: x4, y1: y1, y2: y2, y3: y3
  91. };
  92. // Finally set the shape for this point
  93. point.shapeType = 'path';
  94. point.shapeArgs = {
  95. d: [
  96. 'M', x2, y1,
  97. 'L', x3, y1,
  98. x4, y2,
  99. x3, y3,
  100. x2, y3,
  101. x1, y2,
  102. 'Z'
  103. ]
  104. };
  105. });
  106. series.translateColors();
  107. }
  108. },
  109. // Diamond shape type.
  110. diamond: {
  111. alignDataLabel: H.seriesTypes.scatter.prototype.alignDataLabel,
  112. getSeriesPadding: function (series) {
  113. return tilePaddingFromTileSize(series, 2, 2);
  114. },
  115. haloPath: function (size) {
  116. if (!size) {
  117. return [];
  118. }
  119. var diamond = this.tileEdges;
  120. return [
  121. 'M', diamond.x2, diamond.y1 + size,
  122. 'L', diamond.x3 + size, diamond.y2,
  123. diamond.x2, diamond.y3 - size,
  124. diamond.x1 - size, diamond.y2,
  125. 'Z'
  126. ];
  127. },
  128. translate: function () {
  129. var series = this, options = series.options, xAxis = series.xAxis, yAxis = series.yAxis, seriesPointPadding = options.pointPadding || 0, xPad = (options.colsize || 1), yPad = (options.rowsize || 1) / 2, yShift;
  130. series.generatePoints();
  131. series.points.forEach(function (point) {
  132. var x1 = clamp(Math.round(xAxis.len -
  133. xAxis.translate(point.x - xPad, 0, 1, 0, 0)), -xAxis.len, 2 * xAxis.len), x2 = clamp(Math.round(xAxis.len -
  134. xAxis.translate(point.x, 0, 1, 0, 0)), -xAxis.len, 2 * xAxis.len), x3 = clamp(Math.round(xAxis.len -
  135. xAxis.translate(point.x + xPad, 0, 1, 0, 0)), -xAxis.len, 2 * xAxis.len), y1 = clamp(Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 0)), -yAxis.len, 2 * yAxis.len), y2 = clamp(Math.round(yAxis.translate(point.y, 0, 1, 0, 0)), -yAxis.len, 2 * yAxis.len), y3 = clamp(Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 0)), -yAxis.len, 2 * yAxis.len), pointPadding = pick(point.pointPadding, seriesPointPadding),
  136. // We calculate the point padding of the midpoints to
  137. // preserve the angles of the shape.
  138. midPointPadding = pointPadding *
  139. Math.abs(x2 - x1) / Math.abs(y3 - y2), xPointPadding = xAxis.reversed ?
  140. -midPointPadding : midPointPadding, yPointPadding = yAxis.reversed ?
  141. -pointPadding : pointPadding;
  142. // Shift y-values for every second grid column
  143. // We have to reverse the shift for reversed y-axes
  144. if (point.x % 2) {
  145. yShift = Math.abs(y3 - y1) / 2 * (yAxis.reversed ? -1 : 1);
  146. y1 += yShift;
  147. y2 += yShift;
  148. y3 += yShift;
  149. }
  150. // Set plotX and plotY for use in K-D-Tree and more
  151. point.plotX = point.clientX = x2;
  152. point.plotY = y2;
  153. // Apply point padding to translated coordinates
  154. x1 += xPointPadding;
  155. x3 -= xPointPadding;
  156. y1 -= yPointPadding;
  157. y3 += yPointPadding;
  158. // Store points for halo creation
  159. point.tileEdges = {
  160. x1: x1, x2: x2, x3: x3, y1: y1, y2: y2, y3: y3
  161. };
  162. // Set this point's shape parameters
  163. point.shapeType = 'path';
  164. point.shapeArgs = {
  165. d: [
  166. 'M', x2, y1,
  167. 'L', x3, y2,
  168. x2, y3,
  169. x1, y2,
  170. 'Z'
  171. ]
  172. };
  173. });
  174. series.translateColors();
  175. }
  176. },
  177. // Circle shape type.
  178. circle: {
  179. alignDataLabel: H.seriesTypes.scatter.prototype.alignDataLabel,
  180. getSeriesPadding: function (series) {
  181. return tilePaddingFromTileSize(series, 2, 2);
  182. },
  183. haloPath: function (size) {
  184. return H.seriesTypes.scatter.prototype.pointClass.prototype.haloPath
  185. .call(this, size + (size && this.radius));
  186. },
  187. translate: function () {
  188. var series = this, options = series.options, xAxis = series.xAxis, yAxis = series.yAxis, seriesPointPadding = options.pointPadding || 0, yRadius = (options.rowsize || 1) / 2, colsize = (options.colsize || 1), colsizePx, yRadiusPx, xRadiusPx, radius, forceNextRadiusCompute = false;
  189. series.generatePoints();
  190. series.points.forEach(function (point) {
  191. var x = clamp(Math.round(xAxis.len -
  192. xAxis.translate(point.x, 0, 1, 0, 0)), -xAxis.len, 2 * xAxis.len), y = clamp(Math.round(yAxis.translate(point.y, 0, 1, 0, 0)), -yAxis.len, 2 * yAxis.len), pointPadding = seriesPointPadding, hasPerPointPadding = false;
  193. // If there is point padding defined on a single point, add it
  194. if (typeof point.pointPadding !== 'undefined') {
  195. pointPadding = point.pointPadding;
  196. hasPerPointPadding = true;
  197. forceNextRadiusCompute = true;
  198. }
  199. // Find radius if not found already.
  200. // Use the smallest one (x vs y) to avoid overlap.
  201. // Note that the radius will be recomputed for each series.
  202. // Ideal (max) x radius is dependent on y radius:
  203. /*
  204. * (circle 2)
  205. * (circle 3)
  206. | yRadiusPx
  207. (circle 1) *-------|
  208. colsizePx
  209. The distance between circle 1 and 3 (and circle 2 and 3) is
  210. 2r, which is the hypotenuse of the triangle created by
  211. colsizePx and yRadiusPx. If the distance between circle 2
  212. and circle 1 is less than 2r, we use half of that distance
  213. instead (yRadiusPx).
  214. */
  215. if (!radius || forceNextRadiusCompute) {
  216. colsizePx = Math.abs(clamp(Math.floor(xAxis.len -
  217. xAxis.translate(point.x + colsize, 0, 1, 0, 0)), -xAxis.len, 2 * xAxis.len) - x);
  218. yRadiusPx = Math.abs(clamp(Math.floor(yAxis.translate(point.y + yRadius, 0, 1, 0, 0)), -yAxis.len, 2 * yAxis.len) - y);
  219. xRadiusPx = Math.floor(Math.sqrt((colsizePx * colsizePx + yRadiusPx * yRadiusPx)) / 2);
  220. radius = Math.min(colsizePx, xRadiusPx, yRadiusPx) - pointPadding;
  221. // If we have per point padding we need to always compute
  222. // the radius for this point and the next. If we used to
  223. // have per point padding but don't anymore, don't force
  224. // compute next radius.
  225. if (forceNextRadiusCompute && !hasPerPointPadding) {
  226. forceNextRadiusCompute = false;
  227. }
  228. }
  229. // Shift y-values for every second grid column.
  230. // Note that we always use the optimal y axis radius for this.
  231. // Also note: We have to reverse the shift for reversed y-axes.
  232. if (point.x % 2) {
  233. y += yRadiusPx * (yAxis.reversed ? -1 : 1);
  234. }
  235. // Set plotX and plotY for use in K-D-Tree and more
  236. point.plotX = point.clientX = x;
  237. point.plotY = y;
  238. // Save radius for halo
  239. point.radius = radius;
  240. // Set this point's shape parameters
  241. point.shapeType = 'circle';
  242. point.shapeArgs = {
  243. x: x,
  244. y: y,
  245. r: radius
  246. };
  247. });
  248. series.translateColors();
  249. }
  250. },
  251. // Square shape type.
  252. square: {
  253. alignDataLabel: H.seriesTypes.heatmap.prototype.alignDataLabel,
  254. translate: H.seriesTypes.heatmap.prototype.translate,
  255. getSeriesPadding: function () {
  256. },
  257. haloPath: H.seriesTypes.heatmap.prototype.pointClass.prototype.haloPath
  258. }
  259. };
  260. /* eslint-disable no-invalid-this */
  261. // Extension to add pixel padding for series. Uses getSeriesPixelPadding on each
  262. // series and adds the largest padding required. If no series has this function
  263. // defined, we add nothing.
  264. H.addEvent(H.Axis, 'afterSetAxisTranslation', function () {
  265. if (this.recomputingForTilemap || this.coll === 'colorAxis') {
  266. return;
  267. }
  268. var axis = this,
  269. // Find which series' padding to use
  270. seriesPadding = axis.series
  271. .map(function (series) {
  272. return series.getSeriesPixelPadding &&
  273. series.getSeriesPixelPadding(axis);
  274. })
  275. .reduce(function (a, b) {
  276. return (a && a.padding) > (b && b.padding) ?
  277. a :
  278. b;
  279. }, void 0) ||
  280. {
  281. padding: 0,
  282. axisLengthFactor: 1
  283. }, lengthPadding = Math.round(seriesPadding.padding * seriesPadding.axisLengthFactor);
  284. // Don't waste time on this if we're not adding extra padding
  285. if (seriesPadding.padding) {
  286. // Recompute translation with new axis length now (minus padding)
  287. axis.len -= lengthPadding;
  288. axis.recomputingForTilemap = true;
  289. axis.setAxisTranslation();
  290. delete axis.recomputingForTilemap;
  291. axis.minPixelPadding += seriesPadding.padding;
  292. axis.len += lengthPadding;
  293. }
  294. });
  295. /**
  296. * @private
  297. * @class
  298. * @name Highcharts.seriesTypes.tilemap
  299. *
  300. * @augments Highcharts.Series
  301. */
  302. seriesType('tilemap', 'heatmap'
  303. /**
  304. * A tilemap series is a type of heatmap where the tile shapes are
  305. * configurable.
  306. *
  307. * @sample highcharts/demo/honeycomb-usa/
  308. * Honeycomb tilemap, USA
  309. * @sample maps/plotoptions/honeycomb-brazil/
  310. * Honeycomb tilemap, Brazil
  311. * @sample maps/plotoptions/honeycomb-china/
  312. * Honeycomb tilemap, China
  313. * @sample maps/plotoptions/honeycomb-europe/
  314. * Honeycomb tilemap, Europe
  315. * @sample maps/demo/circlemap-africa/
  316. * Circlemap tilemap, Africa
  317. * @sample maps/demo/diamondmap
  318. * Diamondmap tilemap
  319. *
  320. * @extends plotOptions.heatmap
  321. * @since 6.0.0
  322. * @excluding jitter, joinBy, shadow, allAreas, mapData, data
  323. * @product highcharts highmaps
  324. * @requires modules/tilemap.js
  325. * @optionparent plotOptions.tilemap
  326. */
  327. , {
  328. states: {
  329. hover: {
  330. halo: {
  331. enabled: true,
  332. size: 2,
  333. opacity: 0.5,
  334. attributes: {
  335. zIndex: 3
  336. }
  337. }
  338. }
  339. },
  340. /**
  341. * The padding between points in the tilemap.
  342. *
  343. * @sample maps/plotoptions/tilemap-pointpadding
  344. * Point padding on tiles
  345. */
  346. pointPadding: 2,
  347. /**
  348. * The column size - how many X axis units each column in the tilemap
  349. * should span. Works as in [Heatmaps](#plotOptions.heatmap.colsize).
  350. *
  351. * @sample {highcharts} maps/demo/heatmap/
  352. * One day
  353. * @sample {highmaps} maps/demo/heatmap/
  354. * One day
  355. *
  356. * @type {number}
  357. * @default 1
  358. * @product highcharts highmaps
  359. * @apioption plotOptions.tilemap.colsize
  360. */
  361. /**
  362. * The row size - how many Y axis units each tilemap row should span.
  363. * Analogous to [colsize](#plotOptions.tilemap.colsize).
  364. *
  365. * @sample {highcharts} maps/demo/heatmap/
  366. * 1 by default
  367. * @sample {highmaps} maps/demo/heatmap/
  368. * 1 by default
  369. *
  370. * @type {number}
  371. * @default 1
  372. * @product highcharts highmaps
  373. * @apioption plotOptions.tilemap.rowsize
  374. */
  375. /**
  376. * The shape of the tiles in the tilemap. Possible values are `hexagon`,
  377. * `circle`, `diamond`, and `square`.
  378. *
  379. * @sample maps/demo/circlemap-africa
  380. * Circular tile shapes
  381. * @sample maps/demo/diamondmap
  382. * Diamond tile shapes
  383. *
  384. * @type {Highcharts.TilemapShapeValue}
  385. */
  386. tileShape: 'hexagon'
  387. }, {
  388. // Set tile shape object on series
  389. setOptions: function () {
  390. // Call original function
  391. var ret = H.seriesTypes.heatmap.prototype.setOptions.apply(this, Array.prototype.slice.call(arguments));
  392. this.tileShape = H.tileShapeTypes[ret.tileShape];
  393. return ret;
  394. },
  395. // Use the shape's defined data label alignment function
  396. alignDataLabel: function () {
  397. return this.tileShape.alignDataLabel.apply(this, Array.prototype.slice.call(arguments));
  398. },
  399. // Get metrics for padding of axis for this series
  400. getSeriesPixelPadding: function (axis) {
  401. var isX = axis.isXAxis, padding = this.tileShape.getSeriesPadding(this), coord1, coord2;
  402. // If the shape type does not require padding, return no-op padding
  403. if (!padding) {
  404. return {
  405. padding: 0,
  406. axisLengthFactor: 1
  407. };
  408. }
  409. // Use translate to compute how far outside the points we
  410. // draw, and use this difference as padding.
  411. coord1 = Math.round(axis.translate(isX ?
  412. padding.xPad * 2 :
  413. padding.yPad, 0, 1, 0, 1));
  414. coord2 = Math.round(axis.translate(isX ? padding.xPad : 0, 0, 1, 0, 1));
  415. return {
  416. padding: Math.abs(coord1 - coord2) || 0,
  417. // Offset the yAxis length to compensate for shift. Setting the
  418. // length factor to 2 would add the same margin to max as min.
  419. // Now we only add a slight bit of the min margin to max, as we
  420. // don't actually draw outside the max bounds. For the xAxis we
  421. // draw outside on both sides so we add the same margin to min
  422. // and max.
  423. axisLengthFactor: isX ? 2 : 1.1
  424. };
  425. },
  426. // Use translate from tileShape
  427. translate: function () {
  428. return this.tileShape.translate.apply(this, Array.prototype.slice.call(arguments));
  429. }
  430. }, extend({
  431. // eslint-disable-next-line valid-jsdoc
  432. /**
  433. * @private
  434. * @function Highcharts.Point#haloPath
  435. *
  436. * @return {Highcharts.SVGElement|Highcharts.SVGPathArray|Array<Highcharts.SVGElement>}
  437. */
  438. haloPath: function () {
  439. return this.series.tileShape.haloPath.apply(this, Array.prototype.slice.call(arguments));
  440. }
  441. }, H.colorPointMixin));
  442. /**
  443. * A `tilemap` series. If the [type](#series.tilemap.type) option is
  444. * not specified, it is inherited from [chart.type](#chart.type).
  445. *
  446. * @extends series,plotOptions.tilemap
  447. * @excluding allAreas, dataParser, dataURL, joinBy, mapData, marker,
  448. * pointRange, shadow, stack
  449. * @product highcharts highmaps
  450. * @requires modules/tilemap.js
  451. * @apioption series.tilemap
  452. */
  453. /**
  454. * An array of data points for the series. For the `tilemap` series
  455. * type, points can be given in the following ways:
  456. *
  457. * 1. An array of arrays with 3 or 2 values. In this case, the values correspond
  458. * to `x,y,value`. If the first value is a string, it is applied as the name
  459. * of the point, and the `x` value is inferred. The `x` value can also be
  460. * omitted, in which case the inner arrays should be of length 2\. Then the
  461. * `x` value is automatically calculated, either starting at 0 and
  462. * incremented by 1, or from `pointStart` and `pointInterval` given in the
  463. * series options.
  464. * ```js
  465. * data: [
  466. * [0, 9, 7],
  467. * [1, 10, 4],
  468. * [2, 6, 3]
  469. * ]
  470. * ```
  471. *
  472. * 2. An array of objects with named values. The objects are point configuration
  473. * objects as seen below. If the total number of data points exceeds the
  474. * series' [turboThreshold](#series.tilemap.turboThreshold), this option is
  475. * not available.
  476. * ```js
  477. * data: [{
  478. * x: 1,
  479. * y: 3,
  480. * value: 10,
  481. * name: "Point2",
  482. * color: "#00FF00"
  483. * }, {
  484. * x: 1,
  485. * y: 7,
  486. * value: 10,
  487. * name: "Point1",
  488. * color: "#FF00FF"
  489. * }]
  490. * ```
  491. *
  492. * Note that for some [tileShapes](#plotOptions.tilemap.tileShape) the grid
  493. * coordinates are offset.
  494. *
  495. * @sample maps/series/tilemap-gridoffset
  496. * Offset grid coordinates
  497. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  498. * Arrays of numeric x and y
  499. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  500. * Arrays of datetime x and y
  501. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  502. * Arrays of point.name and y
  503. * @sample {highcharts} highcharts/series/data-array-of-objects/
  504. * Config objects
  505. *
  506. * @type {Array<Array<(number|string),number>|Array<(number|string),number,number>|*>}
  507. * @extends series.heatmap.data
  508. * @excluding marker
  509. * @product highcharts highmaps
  510. * @apioption series.tilemap.data
  511. */
  512. /**
  513. * The color of the point. In tilemaps the point color is rarely set
  514. * explicitly, as we use the color to denote the `value`. Options for
  515. * this are set in the [colorAxis](#colorAxis) configuration.
  516. *
  517. * @type {Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject}
  518. * @product highcharts highmaps
  519. * @apioption series.tilemap.data.color
  520. */
  521. /**
  522. * The x coordinate of the point.
  523. *
  524. * Note that for some [tileShapes](#plotOptions.tilemap.tileShape) the grid
  525. * coordinates are offset.
  526. *
  527. * @sample maps/series/tilemap-gridoffset
  528. * Offset grid coordinates
  529. *
  530. * @type {number}
  531. * @product highcharts highmaps
  532. * @apioption series.tilemap.data.x
  533. */
  534. /**
  535. * The y coordinate of the point.
  536. *
  537. * Note that for some [tileShapes](#plotOptions.tilemap.tileShape) the grid
  538. * coordinates are offset.
  539. *
  540. * @sample maps/series/tilemap-gridoffset
  541. * Offset grid coordinates
  542. *
  543. * @type {number}
  544. * @product highcharts highmaps
  545. * @apioption series.tilemap.data.y
  546. */
  547. ''; // adds doclets above to the transpiled file