{"id":13675300,"url":"https://github.com/maptalks/maptalks.gridlayer","last_synced_at":"2025-07-06T21:33:20.910Z","repository":{"id":9300553,"uuid":"60391345","full_name":"maptalks/maptalks.gridlayer","owner":"maptalks","description":"A GridLayer plugin for maptalks.js. A layer draws grids.","archived":false,"fork":false,"pushed_at":"2025-03-18T08:09:22.000Z","size":471,"stargazers_count":13,"open_issues_count":6,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-15T04:16:59.327Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maptalks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2016-06-04T03:30:22.000Z","updated_at":"2025-03-18T08:08:50.000Z","dependencies_parsed_at":"2024-01-17T05:16:25.435Z","dependency_job_id":"2cf43889-05ca-4dda-a841-da68dc8323b7","html_url":"https://github.com/maptalks/maptalks.gridlayer","commit_stats":null,"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/maptalks/maptalks.gridlayer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.gridlayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.gridlayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.gridlayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.gridlayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maptalks","download_url":"https://codeload.github.com/maptalks/maptalks.gridlayer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maptalks%2Fmaptalks.gridlayer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263975586,"owners_count":23538352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T12:00:37.448Z","updated_at":"2025-07-06T21:33:20.860Z","avatar_url":"https://github.com/maptalks.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# maptalks.gridlayer\n\n[![CircleCI](https://circleci.com/gh/maptalks/maptalks.gridlayer.svg?style=shield)](https://circleci.com/gh/maptalks/maptalks.gridlayer)\n[![NPM Version](https://img.shields.io/npm/v/maptalks.gridlayer.svg)](https://github.com/maptalks/maptalks.gridlayer)\n\nGridLayer plugin for maptalks.js. A layer draws grids.\n\n![screenshot](https://user-images.githubusercontent.com/13678919/33376245-ec78e626-d547-11e7-8280-ef4693d416fd.png)\n\n## Examples\n\n* [Random square grids](https://maptalks.github.io/maptalks.gridlayer/demo/random.html).\n* [Customer analysis grid](https://maptalks.github.io/maptalks.gridlayer/demo/grid.html).\n* [1KM grid of rainfall forecast of 2017-06-07](https://maptalks.github.io/maptalks.gridlayer/demo/micapse.html).\n\n## Install\n  \n* Install with npm: ```npm install maptalks.gridlayer```. \n* Download from [dist directory](https://github.com/maptalks/maptalks.gridlayer/tree/gh-pages/dist).\n* Use unpkg CDN: ```https://cdn.jsdelivr.net/npm/maptalks.gridlayer/dist/maptalks.gridlayer.min.js```\n\n## Usage\n\nAs a plugin, `maptalks.gridlayer` must be loaded after `maptalks.js` in browsers.\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css\"\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/maptalks.gridlayer/dist/maptalks.gridlayer.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\nvar grids = [\n    {\n        center : [0, 0],     // center of the grid\n        width  : 100,        // width of the grid cell\n        height : 100,        // height of the grid cell\n        // unit of cell width/height, possible values: \n        //   * projection : projected coordinate\n        //   * meter : meters of geographic distance\n        //   * degree : longtitude/latitude degrees\n        altitude : 0,        // altitude of grid in meter\n        unit : 'projection',\n        cols      : [-1, Infinity],\n        rows      : [-2, 5],\n        data   : [\n            //Each item is an array, arr[0] is cell idx on X axis, arr[1] is cell idx on Y axis, arr[2] is the data object, properties is data, symbol is cell style\n            [1, 2, { properties : { foo : 1, foo2 : 'foo' }, symbol : { ... } }],\n            //if arr[0] is an array, it means a range of cell on X axis, from cell[0][0] to cell [0][1]\n            [[2, 4] , 5, { symbo : {...} }] //[]\n        ]\n    }\n];\nvar options = {\n    symbol : {\n        lineWidth : 2\n    }  \n};\nvar gridLayer = new maptalks.GridLayer('grid', grids, options);\ngridLayer.addTo(map);\n\u003c/script\u003e\n```\n## Supported Browsers\n\nChrome, Firefox, other modern and mobile browsers.\n\n## API Reference\n\n```GridLayer``` is a subclass of [maptalks.Layer](https://maptalks.github.io/docs/api/Layer.html) and inherits all the methods of its parent.\n\n### `Constructor`\n\n```javascript\nnew maptalks.GridLayer(id, data, options)\n```\n\n* id **String** layer id\n* data **Object[] | Object** see data format below\n* options **Object** options\n    * renderer **String** renderer, canvas or gl, gl by default\n    * symbol **Object** symbol of the grid, supported properties: `lineWidth` (fixed to 1 in gl renderer on windows [due to ANGLE](https://bugs.chromium.org/p/angleproject/issues/detail?id=334)), `lineColor`, `polygonFill`, `polygonOpacity`\n    * Other options defined in [maptalks.Layer](https://maptalks.github.io/docs/api/Layer.html)\n\n```javascript\n[\n    {\n        center : [0, 0],     // center of the grid\n        width  : 100,        // width of the grid cell\n        height : 100,        // height of the grid cell\n        // unit of cell width/height, possible values: \n        //   * projection : projected coordinate\n        //   * meter : meters of geographic distance\n        //   * degree : longtitude/latitude degrees\n        altitude : 0,        // altitude of grid in meter\n        unit   : 'projection',   \n        cols      : [1, Infinity],\n        rows      : [2, 5],\n        // data format\n        data : [\n            //[col, row, { properties : properties, symbol : symbol}]\n            //supported symbol properties : polygonFill, polygonOpacity\n            //col: col_index or [beginIndex, endIndex]\n            //row: col_index or [beginIndex, endIndex]\n            // col is 1, row is 2\n            [1, 2, { properties : { foo : 1, foo2 : 'foo' }, symbol : { polygonFill : '#f00' } }],\n            //col is from 2 to 4 (3 columns), row is 5\n            [[2, 4] , 5, { symbol : { polygonFill : '#f00' } }],\n            //col is from 2 to 4 (3 columns), row is from 7 to 8 (2 rows)\n            [[2, 4] , [7, 8], { symbol : { polygonFill : '#f00' } }]\n        ]\n    }\n]\n```\n\n### `getGrid(gridIndex = 0)`\n\nget layer's grid value\n* gridIndex **Number** grid's index, default is 0\n\n**Returns** `Object`\n\n### `setGrid(grid, gridIndex = 0)`\n\nset a new grid value to the layer\n\n* grid **Object** new grid value\n* gridIndex **Number** grid's index, default is 0\n\n### `setGridData(data, gridIndex = 0)`\n\nupdate layer's grid data\n\n* data **Array** set new data\n\n**Returns** `this`\n\n### `redraw()`\n\nredraw the layer\n\n**Returns** `this`\n\n### `isEmpty()`\n\nIf the layer is empty\n\n**Returns** `Boolean`\n\n### `clear()`\n\nclear the layer\n\n**Returns** `this`\n\n### `getGridExtent(gridIndex = 0)`\n\nGet grid's geographic extent\n\n* gridIndex **Number** grid's index, default is 0\n\n**Returns** `maptalks.Extent`\n\n### `GetCellAt(coordinate, gridIndex = 0)`\n\nGet cell index at coordinate\n\n* coordinate **maptalks.Coordinate** coordinate\n* gridIndex **Number** grid's index, default is 0\n\n**Returns** `Number[]` [col, row]\n\n### `GetCellGeometry(col, row, gridIndex = 0)`\n\nGet cell's geometry\n\n* col **Number** cell's col\n* row **Number** cell's row\n* gridIndex **Number** grid's index, default is 0\n\n**Returns** `maptalks.Geometry` cell geometry\n\n### `VisitAround(coordinate, cb, gridIndex = 0)`\n\nVisit data cells around given coordinate\n\n* coordinate **maptalks.Coordinate** coordinate\n* cb **Function** callback function, parameter is [col, row, { properties, symbol }]， return false to break the visiting\n* gridIndex **Number** grid's index, default is 0\n\n### `identify(coordinate, gridIndex = 0)`\n\nReturn cell index and cell geometry at coordinate\n\n* coordinate **maptalks.Coordinate** coordinate\n* gridIndex **Number** grid's index, default is 0\n\n**Returns** `Object` { col : col, row : row, geometry : cellGeometry }\n\n### `toJSON()`\n\nexport the GridLayer's JSON.\n\n```javascript\nvar json = gridlayer.toJSON();\n```\n\n**Returns** `Object`\n\n## Contributing\n\nWe welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.\n\n## Develop\n\nThe only source file is ```index.js```.\n\nIt is written in ES6.\n\n### Scripts\n\n* Install dependencies\n```shell\n$ pnpm i\n```\n\n* Watch source changes and generate runnable bundle repeatedly\n```shell\n$ npm run dev\n```\n\n* Tests\n```shell\n$ npm test\n```\n\n* Watch source changes and run tests repeatedly\n```shell\n$ npm run dev\n```\n\n* Package and generate minified bundles to dist directory\n```shell\n$ npm run build\n```\n\n* Lint\n```shell\n$ npm run lint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptalks%2Fmaptalks.gridlayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaptalks%2Fmaptalks.gridlayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaptalks%2Fmaptalks.gridlayer/lists"}