{"id":13508079,"url":"https://github.com/jlord/sheetsee-maps","last_synced_at":"2025-06-21T12:05:49.814Z","repository":{"id":11298306,"uuid":"13712718","full_name":"jlord/sheetsee-maps","owner":"jlord","description":"Module for adding maps to sheetsee.js","archived":false,"fork":false,"pushed_at":"2017-05-27T17:26:44.000Z","size":36,"stargazers_count":29,"open_issues_count":6,"forks_count":12,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-06-03T16:43:15.072Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jlord.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-10-20T02:59:43.000Z","updated_at":"2025-02-07T21:06:25.000Z","dependencies_parsed_at":"2022-09-13T06:50:24.227Z","dependency_job_id":null,"html_url":"https://github.com/jlord/sheetsee-maps","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jlord/sheetsee-maps","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-maps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-maps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-maps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-maps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jlord","download_url":"https://codeload.github.com/jlord/sheetsee-maps/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlord%2Fsheetsee-maps/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260499307,"owners_count":23018288,"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-01T02:00:47.626Z","updated_at":"2025-06-21T12:05:44.802Z","avatar_url":"https://github.com/jlord.png","language":"JavaScript","readme":"[![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)\n\n# sheetsee-maps\n\nSheetsee uses this module to handle maps in your projects. This module uses (and includes) [Leaflet.js](http://leafletjs.com) to make maps of your **points**, **polygons**, **lines** or **multipolygons** (all coordinate based). Details on what that actually looks like [here](http://leafletjs.com/examples/geojson.html). It uses (and includes) [Mustache.js](https://mustache.github.io) templates for marker popups.\n\nYou'll need to include Leaflet's map CSS in your HTML's head:\n\n```html\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/leaflet@1.0.3/dist/leaflet.css\" /\u003e\n\u003c/head\u003e\n```\n\n## Maps: Polygons and Lines\n\nSheetsee-maps supports polygons and lines; so long as you have the correct coordinate structure in your cells. More details for coordinates of lines and polygons in geoJSON are [here](http://leafletjs.com/examples/geojson.html), but briefly:\n\n**Must use lowercase spreadsheet column headers: 'linestring', 'polygon', 'multipolygon' and then have cell content like so:**\n\n**A linestring:**\n\n```text\n[-122.41722106933594, 37.7663045891584], [-122.40477561950684, 37.77695634643178]\n```\n\n**A polygon:**\n\n```text\n[-122.41790771484375, 37.740381166384914], [-122.41790771484375, 37.74520008134973], [-122.40966796874999, 37.74520008134973],[-122.40966796874999, 37.740381166384914], [-122.41790771484375, 37.740381166384914]\n```\n\n**A Multipolygon:**\n\n```text\n[[-122.431640625, 37.79106586542567], [-122.431640625, 37.797441398913286], [-122.42666244506835, 37.797441398913286],[-122.42666244506835, 37.79106586542567], [-122.431640625, 37.79106586542567]],\n[[-122.43352890014648, 37.78197638783258], [-122.43352890014648, 37.789031004883654], [-122.42443084716797, 37.789031004883654], [-122.42443084716797, 37.78197638783258], [-122.43352890014648, 37.78197638783258]]\n```\n\n## To Use\n\nThis module is used as a part of [Sheetsee.js](http://jlord.us/sheetsee.js). You can download the [full version](https://github.com/jlord/sheetsee.js/blob/master/js/sheetsee.js) or build your own with a [command line tool](https://github.com/jlord/sheetsee).\n\nYou'll create a little bit of HTML and then some JavaScript in your HTML to use this. You can customize marker color, popup content and enable/disable clustering in your map.\n\n## Methods\n\nHere are the functions you can use!\n\n### `Sheetsee.createGeoJSON(data, optionsJSON)`\n\n- **data** _JSON array_ of data\n- **optionsJSON** _array_ of strings, spreadsheet column title\n\nIf you'd like to just generate geoJSON from a spreadsheet you can use this method.\n\nThis takes in your spreadsheet **data** in JSON format (which you can get with [Tabletop.js]())and the parts of your data, **optionsJSON**,  that you plan on including in your map's popups. These will be column headers in your spreadsheet in an array of strings.\n\nIf you're not going to have popups on your markers, don't worry about it then and just pass in your data (by default it will use all the row's information).\n\n```javascript\nvar optionsJSON = ['name', 'breed', 'cuddlability']\nvar geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)\n```\n\nIt will return an _array_ in the special [geoJSON format](http://geojson.org) that map making things love.\n\n### `Sheetsee.loadMap(options)`\n\nThis method will generate a map for you on the page (it also generates the geoJSON for the map).\n\n- **options**  _object_ **required**\n  - `data` your spreadsheet data array **required**\n  - `mapDiv` the `id` of the `div` in your HTML to contain the map **required**\n  - `geoJSONincludes` array of strings of column headers to include in popups\n  - `template` HTML/[Mustache](https://mustache.github.io) template for popups\n  - `cluster` a true/false boolean, do you want your markers clustered\n  - `hexcolor` pick one color for your markers\n\n```js\nvar mapOptions = {\n  data: data, // required\n  mapDiv: 'map', //required\n  geoJSONincludes: ['Name', 'Animal', 'Rating'], // optional\n  template: '\u003cp\u003e{{Name}}—{{Animal}}—{{Rating}}\u003c/p\u003e', // optional\n  cluster: true, // optional\n  hexcolor: '#e91e63' // optional\n}\nSheetsee.loadMap(mapOptions)\n```\n\n**Breaking Changes** The latest version of Sheetsee replaces three methods ('loadMap', 'addTileLayer', 'addMarkerLayer') with one `loadMap` which takes in an object of map options.\n\n#### Marker colors\n\nIf you create a column title `hexcolor` in your spreadsheet and fill each cell with hex color codes, those will be used to color your markers. If you define a color for `hexcolor` in the options you pass to your map it will override colors in the spreadsheet data.\n\n_[View Demo](http://jlord.us/sheetsee.js/demos/demo-maps.html)_\n_[Visit Site](http://jlord.us/sheetsee.js)_\n","funding_links":[],"categories":["JavaScript","modules for working with excel/google spreadsheets:"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlord%2Fsheetsee-maps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjlord%2Fsheetsee-maps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlord%2Fsheetsee-maps/lists"}