search

jlord / sheetsee.js

:eyes: :chart_with_upwards_trend: Visualize Data from a Google Spreadsheet
jlord.github.io/sheetsee.js
Other
2.96k stars 884 forks source link

custom marker icons in map #42

Closed michalhornak closed 10 years ago

michalhornak commented 10 years ago

is it possible to use custom marker icons (not color or size, but whole image) while reading data from sheetsee.js? smth like this guy made here with markers loaded from url geoJSON: http://bl.ocks.org/geografa/8743008

jlord commented 10 years ago

Hi!

Yes, it is!

It isn't an option in Sheetsee.js (keepin' it simple), but Sheetsee.js just uses Mapbox.js and it is possible through that. You could just write your own JavaScript to add the custom marker information to the geoJSON that Sheetsee builds. Mapbox has an example here.

So after you run Sheetsee.createGeoJSON() you'd then send the resulting geoJSON to a function that you've created that will add the following to each object in your geoJSON:

"icon": {
  "iconUrl": "/mapbox.js/assets/images/astronaut1.png",
  "iconSize": [50, 50], // size of the icon
  "iconAnchor": [25, 25], // point of the icon which will correspond to marker's location
  "popupAnchor": [0, -25], // point from which the popup should open relative to the iconAnchor
  "className": "dot"
 }

So, yeah, anything you can do in Mapbox.js/Leaflet, you can do with Sheetsee.js after it creates your geoJSON from the spreadsheet :)