Sheetsee uses this module to handle maps in your projects. This module uses (and includes) Leaflet.js to make maps of your points, polygons, lines or multipolygons (all coordinate based). Details on what that actually looks like here. It uses (and includes) Mustache.js templates for marker popups.
You'll need to include Leaflet's map CSS in your HTML's head:
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
</head>Sheetsee-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, but briefly:
Must use lowercase spreadsheet column headers: 'linestring', 'polygon', 'multipolygon' and then have cell content like so:
A linestring:
[-122.41722106933594, 37.7663045891584], [-122.40477561950684, 37.77695634643178]
A polygon:
[-122.41790771484375, 37.740381166384914], [-122.41790771484375, 37.74520008134973], [-122.40966796874999, 37.74520008134973],[-122.40966796874999, 37.740381166384914], [-122.41790771484375, 37.740381166384914]
A Multipolygon:
[[-122.431640625, 37.79106586542567], [-122.431640625, 37.797441398913286], [-122.42666244506835, 37.797441398913286],[-122.42666244506835, 37.79106586542567], [-122.431640625, 37.79106586542567]],
[[-122.43352890014648, 37.78197638783258], [-122.43352890014648, 37.789031004883654], [-122.42443084716797, 37.789031004883654], [-122.42443084716797, 37.78197638783258], [-122.43352890014648, 37.78197638783258]]
This module is used as a part of Sheetsee.js. You can download the full version or build your own with a command line tool.
You'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.
Here are the functions you can use!
- data JSON array of data
- optionsJSON array of strings, spreadsheet column title
If you'd like to just generate geoJSON from a spreadsheet you can use this method.
This 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.
If 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).
var optionsJSON = ['name', 'breed', 'cuddlability']
var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)It will return an array in the special geoJSON format that map making things love.
This method will generate a map for you on the page (it also generates the geoJSON for the map).
- options object required
datayour spreadsheet data array requiredmapDivtheidof thedivin your HTML to contain the map requiredgeoJSONincludesarray of strings of column headers to include in popupstemplateHTML/Mustache template for popupsclustera true/false boolean, do you want your markers clusteredhexcolorpick one color for your markers
var mapOptions = {
data: data, // required
mapDiv: 'map', //required
geoJSONincludes: ['Name', 'Animal', 'Rating'], // optional
template: '<p>{{Name}}—{{Animal}}—{{Rating}}</p>', // optional
cluster: true, // optional
hexcolor: '#e91e63' // optional
}
Sheetsee.loadMap(mapOptions)Breaking Changes The latest version of Sheetsee replaces three methods ('loadMap', 'addTileLayer', 'addMarkerLayer') with one loadMap which takes in an object of map options.
If 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent