Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

sheetsee-maps

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

sheetsee-maps - npm Package Compare versions

Comparing version
0.2.4
 to
1.0.0
+6
test/browserify.js
var fs = require('fs')
var browserify = require('browserify')
browserify(__dirname + '/set.js')
.bundle()
.pipe(fs.createWriteStream(__dirname + '/sheetsee.js'))
+42
test/data.js
var data = [
{
"Animal": "Cat",
"Name": "Liza",
"Rating": "10",
"lat": "45.5231",
"long": "-122.6765",
"hexcolor": "#f0f0f0"
},
{
"Animal": "Dog",
"Name": "Boo",
"Rating": "10",
"lat": "37.7749",
"long": "-122.431297",
"hexcolor": "#2196f3"
},
{
"Animal": "Dog",
"Name": "Sam",
"Rating": "9",
"lat": "37.7749",
"long": "-122.431297",
"hexcolor": "#f0f0f0"
},
{
"Animal": "Cat",
"Name": "Snowy",
"Rating": "8",
"lat": "45.5231",
"long": "-122.6765",
"hexcolor": "#2196f3"
},
{
"Animal": "Cat",
"Name": "Trisana",
"Rating": "7",
"lat": "47.6062",
"long": "-122.3321",
"hexcolor": "#f0f0f0"
}
]
+37
test/data.json
[
{
"Animal": "Cat",
"Name": "Liza",
"Rating": "10",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
},
{
"Animal": "Dog",
"Name": "Boo",
"Rating": "10",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
},
{
"Animal": "Dog",
"Name": "Sam",
"Rating": "9",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
},
{
"Animal": "Cat",
"Name": "Snowy",
"Rating": "8",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
},
{
"Animal": "Cat",
"Name": "Trisana",
"Rating": "7",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
}
]
+102
test/expected-geoJSON.json
[
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
37.77695634643178,
-122.41722106933594
]
},
"properties": {
"marker-size": "small"
},
"opts": {
"Animal": "Cat",
"Name": "Liza",
"Rating": "10",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
37.77695634643178,
-122.41722106933594
]
},
"properties": {
"marker-size": "small"
},
"opts": {
"Animal": "Dog",
"Name": "Boo",
"Rating": "10",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
37.77695634643178,
-122.41722106933594
]
},
"properties": {
"marker-size": "small"
},
"opts": {
"Animal": "Dog",
"Name": "Sam",
"Rating": "9",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
37.77695634643178,
-122.41722106933594
]
},
"properties": {
"marker-size": "small"
},
"opts": {
"Animal": "Cat",
"Name": "Snowy",
"Rating": "8",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
37.77695634643178,
-122.41722106933594
]
},
"properties": {
"marker-size": "small"
},
"opts": {
"Animal": "Cat",
"Name": "Trisana",
"Rating": "7",
"lat": "-122.41722106933594",
"long": "37.77695634643178"
}
}
]
+39
test/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Sheetsee Maps Demo</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
<script type='text/javascript' src='./data.js'></script>
<script type='text/javascript' src='./sheetsee.js'></script>
</head>
<style>
#map {max-width: 800px; height: 500px;}
.leaflet-popup-content {width: 102px;}
</style>
<body>
<div class='container'>
<h1>Test Map</h1>
<div id='map'></div>
</div>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
showInfo(data)
})
function showInfo(data) {
var mapOptions = {
data: data,
geoJSONincludes: ['Name', 'Animal', 'Rating'],
template: '<p>{{Name}}—{{Animal}}—{{Rating}}</p>',
mapDiv: 'map',
cluster: true,
hexcolor: '#e91e63'
}
Sheetsee.loadMap(mapOptions)
}
</script>
</body>
</html>
+26
test/index.js
var test = require('tape')
var sheetsee = require('../index.js')
var data = require('./data.json')
test('createGeoJSON', function (t) {
t.plan(1)
var expected = require('./expected-geoJSON.json')
var result = sheetsee.createGeoJSON(data)
t.equal(result.toString(), expected.toString(), 'return geoJSON')
})
test('determineType', function (t) {
t.plan(2)
var point = {
"lat": "-122.41722106933594",
"long": "37.77695634643178"
}
var result = sheetsee.determineType(point)
t.equal(result, 'Point', 'return Point')
var linestring = {
linestring: '[-122.41722106933594, 37.7663045891584], [-122.40477561950684, 37.77695634643178]'
}
var result1 = sheetsee.determineType(linestring)
t.equal(result1, 'LineString', 'return LineString')
})
+3
test/set.js
var Sheetsee = window.Sheetsee || {}
Sheetsee = require('../index.js')
window.Sheetsee = Sheetsee
+126
-124
index.js

@@ -1,24 +0,9 @@

var mapbox = require('mapbox.js')
var ich = require('icanhaz')
var Mustache = require('mustache')
module.exports.buildOptionObject = buildOptionObject
function buildOptionObject(optionsJSON, lineItem) {
var newObj = {}
optionsJSON.forEach(function(option) {
newObj[option] = lineItem[option]
})
return newObj
}
var L = require('leaflet')
require('leaflet.markercluster')
module.exports.makeupOptionObject = function(lineItem) {
var options = []
for (var i in lineItem) {
options.push(i);
}
return options
}
module.exports.createGeoJSON = function(data, optionsJSON) {
function createGeoJSON (data, optionsJSON) {
var geoJSON = []
data.forEach(function(lineItem){
data.forEach(function (lineItem) {
var hasGeo = confirmGeo(lineItem)

@@ -45,3 +30,3 @@

geoJSON.push(pointFeature)
}
}
})

@@ -51,4 +36,19 @@ return geoJSON

module.exports.confirmGeo = confirmGeo
function confirmGeo(lineItem) {
function buildOptionObject (optionsJSON, lineItem) {
var newObj = {}
optionsJSON.forEach(function (option) {
newObj[option] = lineItem[option]
})
return newObj
}
function makeupOptionObject (lineItem) {
var options = []
for (var i in lineItem) {
options.push(i)
}
return options
}
function confirmGeo (lineItem) {
var hasGeo = false

@@ -61,4 +61,3 @@ if (lineItem.lat && lineItem.long || lineItem.polygon) hasGeo = true

module.exports.handleLatLong = handleLatLong
function handleLatLong(lineItem) {
function handleLatLong (lineItem) {
if (lineItem.latitude && lineItem.longitude || lineItem.polygon) {

@@ -80,86 +79,89 @@ lineItem.lat = lineItem.latitude

module.exports.pointJSON = pointJSON
function pointJSON(lineItem, type, optionObj) {
var lowercaseType = type.toLowerCase()
function pointJSON (lineItem, type, optionObj) {
var pointFeature = {
type: "Feature",
"geometry": {
"type": type,
"coordinates": [+lineItem.long, +lineItem.lat]
},
"properties": {
"marker-size": "small",
"marker-color": lineItem.hexcolor
},
"opts": optionObj
}
type: 'Feature',
'geometry': {
'type': type,
'coordinates': [+lineItem.long, +lineItem.lat]
},
'properties': {
'color': lineItem.hexcolor || '#2196f3'
},
'opts': optionObj
}
return pointFeature
}
module.exports.shapeJSON = shapeJSON
function shapeJSON(lineItem, type, optionObj) {
function divIcon (color) {
var markerHtmlStyles = 'background-color: #' + color.replace('#', '') + ';' +
'width: 2rem; height: 2rem; display: block; left: -1rem; top: -1rem; border: 1px solid #fff;' +
'position: relative; border-radius: 3rem 3rem 0; transform: rotate(45deg);'
var icon = L.divIcon({
className: 'div-icon',
iconAnchor: [0, 24],
labelAnchor: [-6, 0],
popupAnchor: [0, -36],
html: '<span style="' + markerHtmlStyles + '">'
})
return icon
}
function shapeJSON (lineItem, type, optionObj) {
var lowercaseType = type.toLowerCase()
var coords
if (type !== "LineString") {
coords = JSON.parse( "[[" + lineItem[lowercaseType] + "]]" )
} else { coords = JSON.parse("[" + lineItem[lowercaseType] + "]") }
if (type !== 'LineString') {
coords = JSON.parse('[[' + lineItem[lowercaseType] + ']]')
} else { coords = JSON.parse('[' + lineItem[lowercaseType] + ']') }
var shapeFeature = {
type: "Feature",
"geometry": {
"type": type,
"coordinates": coords
},
"properties": {
"fillColor": lineItem.hexcolor,
"color": lineItem.hexcolor
},
"opts": optionObj
}
type: 'Feature',
'geometry': {
'type': type,
'coordinates': coords
},
'properties': {
'fillColor': lineItem.hexcolor,
'color': lineItem.hexcolor
},
'opts': optionObj
}
return shapeFeature
}
module.exports.determineType = determineType
function determineType(lineItem) {
var type = ""
if (lineItem.lat && lineItem.long) type = "Point"
if (lineItem.polygon) type = "Polygon"
if (lineItem.multipolygon) type = "MultiPolygon"
if (lineItem.linestring) type = "LineString"
function determineType (lineItem) {
var type = ''
// TODO this is not actually verifying the content just the property
if (lineItem.lat && lineItem.long) type = 'Point'
if (lineItem.polygon) type = 'Polygon'
if (lineItem.multipolygon) type = 'MultiPolygon'
if (lineItem.linestring) type = 'LineString'
return type
}
module.exports.loadMap = function(mapDiv) {
var map = L.mapbox.map(mapDiv)
// MAPS
function loadMap (mapOptions) {
if (!mapOptions.data) return // no data, no map
var map = L.map(mapOptions.mapDiv)
var tiles = mapOptions.tiles || 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
var attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
L.tileLayer(tiles, {attribution: attribution}).addTo(map)
// Set behavior
map.touchZoom.disable()
map.doubleClickZoom.disable()
map.scrollWheelZoom.disable()
return map
addMarkerLayer(map, mapOptions)
}
module.exports.addTileLayer = function(map, tileLayer) {
var layer = L.mapbox.tileLayer(tileLayer)
layer.addTo(map)
}
module.exports.makePopupTemplate = makePopupTemplate
function makePopupTemplate(geoJSON) {
function makePopupTemplate (geoJSON) {
var allOptions = geoJSON[0].opts
var keys = []
for (var i in allOptions) keys.push(i)
var mustacheKeys = mustachify(keys)
var template = {}
template.name = "popup" + Math.random()
template.template = templateString(mustacheKeys)
return template
}
module.exports.templateString = templateString
function templateString(mustacheKeys) {
var template = "<ul>"
var template = '<ul>'
var counter = mustacheKeys.length
mustacheKeys.forEach(function(key) {
mustacheKeys.forEach(function (key) {
counter--
if (counter === 0) template = template.concat(key, "</ul>")
if (counter === 0) template = template.concat(key, '</ul>')
else template = template.concat(key)

@@ -170,7 +172,6 @@ })

module.exports.mustachify = mustachify
function mustachify(array) {
function mustachify (array) {
var newArray = []
array.forEach(function(item) {
item = "<li><b>" + item + ":</b> {{" + item + "}}</li>"
array.forEach(function (item) {
item = '<li><b>' + item + ':</b> {{' + item + '}}</li>'
newArray.push(item)

@@ -181,45 +182,46 @@ })

module.exports.addMarkerLayer = function(geoJSON, map, template, clusterMarkers) {
if (!template) {
template = makePopupTemplate(geoJSON)
ich.addTemplate(template.name, template.template)
}
else {
var template = {"template": template}
template.name = "popup" + Math.random()
ich.addTemplate(template.name, template.template)
}
var features = {
"type": "FeatureCollection",
"features": geoJSON
}
var layer = L.geoJson(features, {
pointToLayer: L.mapbox.marker.style,
style: function(feature) { return feature.properties }
})
var bounds = layer.getBounds()
function addMarkerLayer (map, mapOpts) {
// setting a color in options overides colors in spreadsheet
if (mapOpts.hexcolor) var iconColor = mapOpts.hexcolor
// check option and Leaflet extension
var cluster = clusterMarkers && 'MarkerClusterGroup' in L
if (cluster) {
var clusterGroup = new L.MarkerClusterGroup()
}
mapOpts.geoJSONincludes = mapOpts.geoJSONincludes || null // um?
var geoJSON = createGeoJSON(mapOpts.data, mapOpts.geoJSONincludes)
map.fitBounds(bounds)
// if no popup template, create one
if (!mapOpts.template) mapOpts.template = makePopupTemplate(geoJSON)
layer.eachLayer(function(marker) {
var popupContent = ich[template.name](marker.feature.opts)
marker.bindPopup(popupContent.html(), {closeButton: false})
if (cluster) {
clusterGroup.addLayer(marker)
}
var features = {'type': 'FeatureCollection', 'features': geoJSON}
if (mapOpts.cluster) var clusterGroup = new L.MarkerClusterGroup()
var layer = L.geoJson(features)
layer.eachLayer(function (marker) {
var popupContent = Mustache.render(mapOpts.template, marker.feature.opts)
marker.bindPopup(popupContent, {closeButton: false})
marker.setIcon(divIcon(iconColor || marker.feature.properties.color))
if (mapOpts.cluster) clusterGroup.addLayer(marker)
})
if (cluster) {
map.fitBounds(layer.getBounds())
if (mapOpts.cluster) {
map.addLayer(clusterGroup)
} else {
layer.addTo(map)
}
addClusterCSS(iconColor || '#2196f3')
} else layer.addTo(map)
}
return layer
function addClusterCSS (color) {
if (!color.match('#')) color += '#'
var css = '.marker-cluster-small, .marker-cluster-small div, .marker-cluster-medium,' +
'.marker-cluster-medium div, .marker-cluster-large, .marker-cluster-large div' +
'{background-color:' + color + ';} .marker-cluster {background-clip: padding-box; border-radius: 20px;}' +
'.marker-cluster div {width: 30px; height: 30px; margin-left: 5px; margin-top: 5px;' +
'text-align: center; border-radius: 15px; font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;}' +
'.marker-cluster span {line-height: 30px;}'
var style = document.createElement('style')
style.innerHTML = css
document.head.appendChild(style)
}
module.exports.createGeoJSON = createGeoJSON
module.exports.loadMap = loadMap
+13
-3
package.json
{
"name": "sheetsee-maps",
"version": "0.2.4",
"version": "1.0.0",
"description": "enables map creation functionality with sheetsee.js",
"main": "index.js",
"scripts": {
"test": "node test/browserify.js && open test/index.html",
"lint": "standard index.js"
},
"repository": {

@@ -20,5 +24,11 @@ "type": "git",

"dependencies": {
"mapbox.js": "~1.3.1",
"icanhaz": "~0.10.3"
"leaflet": "^1.0.3",
"leaflet.markercluster": "^1.0.4",
"mustache": "^2.3.0"
},
"devDependencies": {
"browserify": "^14.1.0",
"standard": "^8.6.0",
"tape": "^4.6.3"
}
}
+59
-87
README.md

@@ -1,127 +0,99 @@

# Sheetsee-maps
[![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)
see: [jlord.github.io/sheetsee.js](http://jlord.github.io/sheetsee.js)
demo: [maps](http://jlord.github.io/sheetsee.js/demos/demo-map.html)
# sheetsee-maps
Sheetsee.js uses [Mapbox.js](http://mapbox.com/mapbox.js) and [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).
Sheetsee 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.
### Maps: Polygons and Lines
You'll need to include Leaflet's map CSS in your HTML's head:
Sheetsee-maps now supports polygons and lines. So long as you have the correct coordinate structure in your cells, Sheetsee will add them to the geoJSON it creates for your maps. More details for coordinates of lines and polygons in geoJSON are [here](http://leafletjs.com/examples/geojson.html), but briefly:
```html
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
</head>
```
A linestring:
## Maps: Polygons and Lines
```
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](http://leafletjs.com/examples/geojson.html), but briefly:
**Must use lowercase spreadsheet column headers: 'lat' and 'long'.**
**A linestring:**
```text
[-122.41722106933594, 37.7663045891584], [-122.40477561950684, 37.77695634643178]
```
A polygon:
**A polygon:**
```
```text
[-122.41790771484375, 37.740381166384914], [-122.41790771484375, 37.74520008134973], [-122.40966796874999, 37.74520008134973],[-122.40966796874999, 37.740381166384914], [-122.41790771484375, 37.740381166384914]
```
A Multipolygon:
**A Multipolygon:**
```
```text
[[-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]]
### The Parts
You'll create a placeholder `<div>` in your HTML, CSS giving it a size and fire up a map from within `<script>` tags. You can also customize your popup content.
## Your HTML Placeholder `<div>`
Create an empty `<div>` in your HTML, with an id (name). Add CSS to give it dimensions
```HTML
<div id="map"></div>
```
_CSS_
```CSS
#map {width: 500px; height: 500px;}
```
## To Use
## Your `<script>` Functions
This 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).
Next you'll need to create geoJSON out of your data so that it can be mapped.
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.
### Sheetsee.createGeoJSON(data, optionsJSON)
## Methods
This takes in your **data** 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. 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).
Here are the functions you can use!
```javascript
var optionsJSON = ["name", "breed", "cuddlability"]
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
```
### `Sheetsee.createGeoJSON(data, optionsJSON)`
It will return an _array_ in the special geoJSON format that map making things love.
- **data** _JSON array_ of data
- **optionsJSON** _array_ of strings, spreadsheet column title
```JAVASCRIPT
[{
"geometry": {"type": "Point", "coordinates": [long, lat]},
"properties": {
"marker-size": "small",
"marker-color": lineItem.hexcolor
},
"opts": {},
}}
```
If you'd like to just generate geoJSON from a spreadsheet you can use this method.
### Sheetsee.loadMap(mapDiv)
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.
To create a simple map, with no data, you simply call `.loadMap()` and pass in a _string_ of the **mapDiv** (with no '#') from your HTML.
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).
```javascript
var map = Sheetsee.loadMap("map")
var optionsJSON = ['name', 'breed', 'cuddlability']
var geoJSON = Sheetsee.createGeoJSON(data, optionsJSON)
```
### Sheetsee.addTileLayer(map, tileLayer)
It will return an _array_ in the special [geoJSON format](http://geojson.org) that map making things love.
To add a tile layer (aka a custom map scheme/design/background) you'll use this function which takes in your **map** and the source of the **tileLayer**. This source can be a Mapbox id, a URL to a TileJSON or your own generated TileJSON. See [Mapbox's Documentation](http://mapbox.com/mapbox.js/api/v1.0.2/#L.mapbox.tileLayer) for more information.
### `Sheetsee.loadMap(options)`
```javascript
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
```
This method will generate a map for you on the page (it also generates the geoJSON for the map).
You can add tiles from awesome mapmakers like [Stamen](examples.map-20v6611k) or create your own in Mapbox's [Tilemill](http://www.mapbox.com/tilemill) or [online](https://tiles.mapbox.com/newmap#3.00/0.00/0.00).
- **options** _object_ **required**
- `data` your spreadsheet data array **required**
- `mapDiv` the `id` of the `div` in your HTML to contain the map **required**
- `geoJSONincludes` array of strings of column headers to include in popups
- `template` HTML/[Mustache](https://mustache.github.io) template for popups
- `cluster` a true/false boolean, do you want your markers clustered
- `hexcolor` pick one color for your markers
### Sheetsee.addMarkerLayer(geoJSON, map, popupTemplate, clusterMarkers)
To add markers, lines or shapes to your map, use this function and pass in your **geoJSON** so that it can get the coordinates and your **map** so that it places the markers there. You can customize what the content in your marker's popup looks like with a **popupTemplate**, which is an ICanHaz.js template in HTML and can reference the column headers you included in your optionsJSON. You can set `true` or `false` (default `false`) to **culsterMarkers** to enable marker clusters on your map.
```javascript
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, popupTemplate)
```js
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)
```
Example template:
**Breaking Changes** The latest version of Sheetsee replaces three methods ('loadMap', 'addTileLayer', 'addMarkerLayer') with one `loadMap` which takes in an object of map options.
```javascript
var popupTemplate = "<h4>Hello {{name}}</h4>"
```
#### Marker colors
#### Source from the [map demo](https://github.com/jlord/sheetsee.js/blob/master/demos/demo-map.html):
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.
```JavaScript
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var gData
var URL = "0Ao5u1U6KYND7dGN5QngweVJUWE16bTRob0d2a3dCbnc"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
function showInfo(data) {
gData = data
var optionsJSON = ["placename", "photo-url"]
var template = "<ul><li><a href='{{photo-url}}' target='_blank'>"
+ "<img src='{{photo-url}}'></a></li>"
+ "<li><h4>{{placename}}</h4></li></ul>"
var geoJSON = Sheetsee.createGeoJSON(gData, optionsJSON)
var map = Sheetsee.loadMap("map")
Sheetsee.addTileLayer(map, 'examples.map-20v6611k')
var markerLayer = Sheetsee.addMarkerLayer(geoJSON, map, template)
}
</script>
```
_[View Demo](http://jlord.us/sheetsee.js/demos/demo-maps.html)_
_[Visit Site](http://jlord.us/sheetsee.js)_
.npmignore

Sorry, the diff of this file is not supported yet