Skip to content

Instantly share code, notes, and snippets.

@wboykinm
Created December 27, 2012 22:36
Show Gist options
  • Save wboykinm/4392734 to your computer and use it in GitHub Desktop.
Save wboykinm/4392734 to your computer and use it in GitHub Desktop.
figuring out cartodb.js
Status #cartodbX
[CartoDB: look to the future, leave the past behind]
[10:58] == wboykinm [47e96f6f@gateway/web/freenode/ip.71.233.111.111] has joined #cartodb
[11:19] == jatorre_ [~jatorre@9.Red-95-120-122.dynamicIP.rima-tde.net] has joined #cartodb
[11:20] == jatorre [~jatorre@12.241.216.87.static.jazztel.es] has quit [Ping timeout: 255 seconds]
[11:20] == jatorre_ has changed nick to jatorre
[12:09] <wboykinm> andrewxhill: I still have to demo a few items, but do you have 5minutes later today for a cartodb.js strategy question?
[12:10] <wboykinm> andrewxhill: though I'm sure you're already loving the influx of support Qs in the past week
[12:10] <andrewxhill> :)
[12:10] <andrewxhill> yeah, ping me and i can try and help out
[12:11] <andrewxhill> or maybe we'll learn together
[12:11] <wboykinm> andrewxhill: cool; just need to hit a dead-end on tooltips first :)
[12:48] <wboykinm> andrewxhill: Are you around a screen at 2PM NYC time?
[12:51] <wboykinm> andrewxhill: I'll give a shout then.
[12:52] <jatorre> hey, anybody knows if it is possible to do an INSERT only if a condition is met?
[14:08] <wboykinm> andrewxhill: Is it a good moment for the aforementioned context question?
[14:08] <andrewxhill> hey wbokinm
[14:08] <andrewxhill> here now yeah
[14:08] <wboykinm> andrewxhill: awesome. thanks
[14:09] <wboykinm> so I've been fiddling around the edges of what I see as the 3 cartodb delivery vehicles:
[14:09] <wboykinm> SQL API
[14:09] <wboykinm> tiled maps api
[14:09] <wboykinm> viz.json
[14:09] <andrewxhill> ok
[14:09] <wboykinm> And I'm trying to figure out which one best suits my current project
[14:10] <wboykinm> this sucker: http://bl.ocks.org/d/4390299/
[14:10] <wboykinm> which is getting a bit big to be living in a gist
[14:10] <andrewxhill> ha, k
[14:10] <wboykinm> but that aside, I have basically one cartodb table per nav
[14:11] <wboykinm> and each dropdown option styles the layer on a different column
[14:11] <wboykinm> the only one working right now it the "types" nav
[14:11] <wboykinm> and I also need to be able to style the popup template w/ html
[14:12] <wboykinm> andrewxhill: the current site is using the viz.json method w/ SQL selectors, and I don't think that's sufficiently flexible for the above bullet points.
[14:13] <wboykinm> andrewxhill: Is there a recommended API to use for this sort of application?
[14:13] <wboykinm> Once I have that figured out I'll keep building out the site
[14:13] <andrewxhill> right
[14:13] <andrewxhill> so let me look real quick
[14:13] <wboykinm> andrewxhill: codeness: http://bl.ocks.org/4390299
[14:15] <andrewxhill> yes, i think the viz.json seems suited for this
[14:15] <andrewxhill> where are you having difficulty?
[14:15] <wboykinm> andrewxhill: 1.) passing style params w/ each switch
[14:16] <wboykinm> 2.) switching between tables/viz.json feeds
[14:16] <andrewxhill> http://developers.cartodb.com/documentation/cartodb-js.html#sec-6-8
[14:16] <andrewxhill> so
[14:16] <andrewxhill> for switching styles
[14:16] <andrewxhill> you should use that link
[14:16] <andrewxhill> http://developers.cartodb.com/documentation/cartodb-js.html#sec-6-8
[14:16] <wboykinm> 3.) getting the popup script to override the viz popups
[14:17] <andrewxhill> for each table though, you should create manage a different layer
[14:17] <andrewxhill> so cartodb.createLayer(...
[14:17] <andrewxhill> for each one
[14:17] <andrewxhill> then manage the layers
[14:17] <andrewxhill> so using
[14:17] <andrewxhill> http://developers.cartodb.com/documentation/cartodb-js.html#sec-6-2
[14:17] <andrewxhill> show and hide
[14:17] <andrewxhill> you will toggle them on and off of the map
[14:17] <andrewxhill> instead of swapping the viz.json after the fact
[14:18] <wboykinm> andrewxhill: any idea if that encourages caching?
[14:18] <wboykinm> i've got a low-bandwidth target audience
[14:18] <andrewxhill> local caching, i'm not sure it will make it any better or worse
[14:19] <wboykinm> andrewxhill: no big worry on that, since it's light-years ahead of the ArcGIS flash monstrosity they were using before anyway
[14:19] <andrewxhill> i'm sure
[14:21] <wboykinm> andrewxhill: okay, so the viz.json is okay for these purposes . . .
[14:22] <wboykinm> andrewxhill: can you tell why the popup script isn't overriding the viz popups?
[14:23] <andrewxhill> hmm
[14:23] <andrewxhill> let me look
[14:26] <andrewxhill> layer.infowindow.set('template', $('#infowindow_template').html());
[14:26] <andrewxhill> well
[14:26] <andrewxhill> no
[14:26] <andrewxhill> that is right
[14:26] <andrewxhill> you need that line
[14:26] <andrewxhill> https://github.com/CartoDB/cartodb.js/blob/develop/examples/custom_infowinfow.html#L60
[14:27] <wboykinm> oy. the basics.
[14:27] <wboykinm> i'll figure out where to call that then.
[14:27] <wboykinm> hey, thanks! Good to know I'm on approximately the right track!
[14:27] <andrewxhill> createSelector(layers[1])
[14:27] <andrewxhill> right after you call that
[14:28] <wboykinm> ah, not baselayer.
[14:28] <andrewxhill> layer[1].infowindow.set('template', $('#infowindow_template').html());
[14:28] <wboykinm> oh, that beggars the question:
[14:28] <wboykinm> following one of these variable-laden calls, how would I tack another tileLayer on top of what's loaded?
[14:29] <wboykinm> andrewxhill: i.e. like this: http://bl.ocks.org/4235778
[14:29] <wboykinm> it seems different when using the viz.json
[14:32] <jatorre> hey wboykinm
[14:33] <jatorre> do you mind if we include some of your examples on cartodb.js?
[14:33] <jatorre> they are quite cool
[14:33] <andrewxhill> sooo
[14:33] <andrewxhill> i think you can get map out of the returned vis
[14:33] <andrewxhill> vis.map?
[14:33] <andrewxhill> and then vis.map.addLayer(...)
[14:33] <andrewxhill> to add another layer
[14:33] <andrewxhill> let me try one thing first though
[14:42] <andrewxhill> yeah
[14:42] <andrewxhill> so looking at it now
[14:42] <andrewxhill> santana might be able to tell you better
[14:42] <andrewxhill> but I would use the createLayer method
[14:42] <andrewxhill> not the create viz
[14:43] <andrewxhill> in this example
[14:45] <andrewxhill> there is another option
[14:46] <andrewxhill> inside the createLayer().done() function
[14:46] <andrewxhill> you are using
[14:46] <andrewxhill> it returns vis, layers
[14:46] <andrewxhill> you can get the map object from vis, like this,
[14:46] <andrewxhill> mm = vis.getNativeMap();
[14:46] <andrewxhill> mm is now your native map
[14:46] <andrewxhill> from which you can add more layers
[14:46] <andrewxhill> cartodb.createLayer(mm, second_layer
[14:47] <andrewxhill> but let me test that out real quick
[14:52] == jatorre [~jatorre@9.Red-95-120-122.dynamicIP.rima-tde.net] has quit [Quit: jatorre]
[14:59] <wboykinm> andrewxhill: just checking, does "mm" refer to modest maps?
[14:59] <andrewxhill> no no
[14:59] <andrewxhill> sorry
[14:59] <andrewxhill> that method isn't working for me anyway
[14:59] <andrewxhill> i'm testing here
[15:00] <andrewxhill> map
[15:00] <andrewxhill> if you create it on your own
[15:00] <andrewxhill> with gmaps or leaflet
[15:00] <andrewxhill> if you use createVis
[15:00] <andrewxhill> inside the done function
[15:00] <andrewxhill> you can use, map = vis.getNativeMap();
[15:00] <andrewxhill> to get the same map object AFTER the map is created
[15:00] <andrewxhill> but i think the way you want to do this vis
[15:01] <andrewxhill> is with createLayer
[15:01] <andrewxhill> anyway
[15:01] <wboykinm> andrewxhill: FWIW I'm avodoiding google's API at all costs
[15:02] <andrewxhill> totally
[15:02] <wboykinm> andrewxhill: Not to throw a wrench in the gears, but would lvector.Cartodb() work?
[15:02] <wboykinm> andrewxhill: http://geojason.info/leaflet-vector-layers/demos/cartodb/
[15:03] <andrewxhill> not sure
[15:03] <andrewxhill> i haven't messed with it
[15:03] <andrewxhill> give me 5 min
[15:03] <andrewxhill> i can get you an example of what i'm talking about
[15:06] <wboykinm> andrewxhill: coolness. thanks again.
[15:12] <andrewxhill> http://bl.ocks.org/4391555
[15:12] <andrewxhill> i added a stupid body.click listener
[15:13] <andrewxhill> so you can see the second layer get toggled on/off
[15:13] <andrewxhill> just click anywhere
[15:13] <andrewxhill> there are better ways to manage them
[15:13] <andrewxhill> i just wanted to demonstrate quickly
[15:15] <wboykinm> andrewxhill: oh cool
[15:16] <wboykinm> it'll take me a bit to sort out the body.click thing, but i get the cartodb.createLayer
[15:16] <wboykinm> andrewxhill: props to you for mining out my 3-layer mapbox composite URL :)
[15:17] <andrewxhill> :)
[15:18] <wboykinm> andrewxhill: where would I shoehorn in layer.setCartoCSS?
[15:18] <wboykinm> andrewxhill: after createSelector?
[15:18] <andrewxhill> yup
[15:18] <andrewxhill> or like the second layer
[15:18] <andrewxhill> you can pass it at creation
[15:19] <wboykinm> andrewxhill: ha!
[15:20] <wboykinm> just saw it; the code didn't wrap
[15:20] <wboykinm> that's perfect
[15:20] <andrewxhill> great
[15:20] <wboykinm> andrewxhill: thanks, man
[15:20] <andrewxhill> hey
[15:20] <andrewxhill> so
[15:20] <wboykinm> i greatly appreciate the help
[15:20] <andrewxhill> can we link to one of your maps with cartodb.js
[15:20] <andrewxhill> in our blog post?
[15:21] <wboykinm> sure; can you hold for a week? i'll be delivering to the client for final approval
[15:21] <andrewxhill> hmm
[15:21] <andrewxhill> our post is going up today
[15:21] <wboykinm> any of the intermediate tweaks are fair game though
[15:21] <andrewxhill> so next time
[15:21] <wboykinm> just don't call it "MECMaps, funded by USAID"
[15:21] <wboykinm> yet
[15:22] <andrewxhill> ha
[15:22] <andrewxhill> which is a good url?
[15:48] <andrewxhill> wboykinm: was there a good url to link to?
[16:10] <wboykinm> andrewxhill: sorry about that; had to duck out
[16:10] <andrewxhill> noooo prob
[16:10] <wboykinm> andrewxhill: what sort of functionality do you want to focus on?
[16:10] <andrewxhill> we are just making a release announcement for cartodb.js
[16:11] <andrewxhill> we want to say something like, 'some users have already begun testing it out...'
[16:11] <andrewxhill> and in text i'd link to one of your maps
[16:13] <wboykinm> andrewxhill: coolio
[16:13] <wboykinm> andrewxhill: this is approved content, but not far from Santana's rambo example: http://btvvotes.geosprocket.org/demography/8wards.html
[16:14] <andrewxhill> perfect
[16:14] <andrewxhill> !
[16:14] <andrewxhill> thanks
[16:21] <wboykinm> andrewxhill: also, markers + bootstrap SQL selector:
[16:21] <wboykinm> andrewxhill: http://dev.geosprocket.com/templates/cartodb-marker-file/
[16:22] <wboykinm> andrewxhill: This will all be open in short order, and that's just a snippet.
[16:35] == jherencia [~jherencia@136.172.216.87.static.jazztel.es] has quit [Remote host closed the connection]
[16:51] <wboykinm> andrewxhill: I see why @jatorre had his head down. That's a long post :)
[17:01] <andrewxhill> ha
[17:01] <andrewxhill> i wrote it
[17:02] <andrewxhill> take full credit for any spanishisms
[17:03] <wboykinm> andrewxhill: hey, right on.
[17:03] <andrewxhill> :)
[17:04] <wboykinm> andrewxhill: how did you run into a bunch of Madridniks in the first place?
[17:04] <andrewxhill> was throwing a workshop with my advisor on mapping and data viz
[17:04] <andrewxhill> and invited vizzuality and gbif
[17:05] <andrewxhill> met javi and tim robertson
[17:05] <andrewxhill> and then started hacking on some side projects with them
[17:05] <andrewxhill> the rest is history
[17:05] <wboykinm> awesome. You guys do good work.
[17:05] <andrewxhill> thanks dude
[17:20] <wboykinm> andrewxhill: last hit of the day: is there a built-in way to pass a column name into the "tile_style" params?
[17:20] <wboykinm> andrewxhill: I notice there seems to be a default for the {{table_name}}
[17:20] <andrewxhill> right
[17:20] <andrewxhill> nothing for column_name
[17:20] <andrewxhill> no
[17:22] <wboykinm> andrewxhill: Any chance variables would work the same way as with the popups?
[17:22] <wboykinm> andrewxhill: i.e. {{content.data.libelle}}
[17:22] <andrewxhill> nothing that i know of like this
[17:23] <andrewxhill> this one is def better in the santana domain
[17:23] <wboykinm> andrewxhill: Okay, I'll check w/ him.
[17:23] <wboykinm> andrewxhill: I've already got the var defined, so I figure it can't be impossible
[17:23] <wboykinm> "var crop = $li.attr('data');"
@ChanServ
agoddard_
andrewxhill
Brandonian
jeremyb
lossyrob
strk
wboykinm
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment