gistfile1.txt

12:54 You have joined the channel
12:54 irace has joined ([email protected])
12:54 Topic: TileMill and the Mapbox family -- https://www.mapbox.com/ and https://www.mapbox.com/help/ -- Logs: https://botbot.me/freenode/mapbox/
12:54 kkaefer set the topic at: Dec 2, 2014, 10:47 AM
12:54 Mode: +cnt
12:54 Created at: Apr 6, 2010, 5:15 PM
12:54 [irace] hey incanus77
13:01 [incanus77] hey irace
13:01 [irace] thanks for offering to help out
13:02 [irace] so how exactly do SHP and geoJSON differ?
13:02 [irace] here's what i've got right now: https://github.com/irace/travel/blob/gh-pages/scripts/mapping.js
13:02 [incanus77] sure thing
13:02 [incanus77] shp is binary, typicallly larger
13:02 [incanus77] geojson is human-readable
13:02 [irace] resulting in: http://irace.me/travel/
13:02 [incanus77] but both are vector
13:02 [irace] my input data is pretty basic at the moment: https://github.com/irace/travel/blob/gh-pages/data/travel.json
13:02 [incanus77] cool. let me gist up what i've been cooking and you can hack on it
13:03 [incanus77] it's not long
13:03 [incanus77] just a bit messy to date
13:03 [irace] sweet!
13:03 [incanus77] and give that a shot
13:04 [irace] is there something analogous to L.geoJson(...) for importing SHP?
13:04 [irace] i wonder if what i'm doing is particularly weird, but i kind of expected this sort of thing to be more integrated into the mapbox SDK
13:05 [irace] at least the vector data, i didn't expect to have to google around for various datasets
13:05 [irace] (i know some of it - state data for example - is in the mapbox.js repo)
13:07 [incanus77] we are mainly moving to vector data on the server for this
13:07 [incanus77] the thing with shp is it's unwieldy
13:07 [incanus77] what we are trying to do with gl is pre-tile and simplify shapes on the server-side with vector tiles
13:07 [incanus77] so i took 2 natural earth data sets and made tiles with them
13:07 [incanus77] then, they are much easier to pull in in both js and ios
13:07 [incanus77] anyway check this out: https://gist.github.com/incanus/bc35d9316d01da2aa321
13:08 [incanus77] three files - page html, and 2 jsons, one of a basic style and another tracking visit info
13:08 [incanus77] irace^^
13:08 [incanus77] the idea is that visited.json is parsed, and then for each, a layer is added to the style with a varying alpha fill value based on data in the json (year)
13:09 [incanus77] the layer is added at index 3 (the splice call) because in my style, that's just above the basemap admin borders
13:09 [incanus77] but under all the labels
13:09 [incanus77] so you can see i add countries, then states
13:09 [incanus77] there is also some interactivity stuff, on hover, so the country name + notes get displayed in the #info div
13:09 [incanus77] re: shp, you generally can't use it in the browser
13:10 [irace] taking a look
13:10 [incanus77] you will need to put an access token in the html, too
13:10 [incanus77] one other custom thing i do is this layer: https://gist.github.com/incanus/bc35d9316d01da2aa321#file-style-json-L76-L90
13:10 [incanus77] which uses my states data to draw state borders, which the mapbox source doesn't normally have
13:11 [incanus77] hence source: states instead of source: mapbox
13:12 [irace] interesting...
13:13 [incanus77] here it is in operation: https://dl.dropboxusercontent.com/u/575564/travel/page.html
13:13 [incanus77] that's just the 3 gist files dumped in a folder
13:13 [irace] so mapboxgl.js and mapbox.js are completely separate things?
13:13 [incanus77] yes
13:13 [incanus77] mapbox.js is a plugin for leaflet
13:13 [incanus77] gl.js is from-scratch for webgl
13:13 [incanus77] as gl-native is for ios, android etc
13:14 [incanus77] i know this is a bit confusing, but in the near future, gl should shake out and make all of this a lot easier w/ less moving parts
13:14 [irace] so visually, the mapbox.js map looks a lot more detailed than yours. is that a consequence of using GL? or is that just a stylistic choice you made her
13:15 [incanus77] styllstic
13:15 aaronlidman has left ("Leaving...")
13:15 [incanus77] check out https://www.mapbox.com/mapbox-gl-js/examples/
13:15 [incanus77] note that outdoor style, it's a ~2500 line json style though
13:15 [incanus77] i started with a very basic one from https://github.com/mapbox/mapbox-gl-styles
13:16 [incanus77] https://github.com/mapbox/mapbox-gl-styles/blob/mb-pages/styles/basic-v6.json irrc
13:16 [incanus77] iirc
13:16 [incanus77] and actually subtracted
13:16 [incanus77] you could do whatever, just adapt the js to insert the state/country fill layers in the right place in the layers array
13:16 [incanus77] based on the layers in your basemap
13:17 [irace] so say i wanted to keep my map looking exactly the way it currently does (http://irace.me/travel) and only modify the overlays to use your shapes instead of geoJSON
13:17 [incanus77] i would probably actually pull in raster tiles in gl
13:17 [irace] is there a way to just specify state layers without copying all of the other styles?
13:17 [incanus77] of mapbox streets, the style you are using now
13:17 [incanus77] so like https://www.mapbox.com/mapbox-gl-js/example/satellite-map/, the same way it's pulling in raster satellite imagery
13:18 [incanus77] so you wouldn't be drawing the base map in gl, per se, it'd be tile images already
13:18 [incanus77] but look identical to what you have now
13:18 [incanus77] with the benefit of this ease of client-side on the fly data styling in gl
13:18 [irace] i see. is drawing in GL a better way to get the vector overlays to line up?
13:18 [irace] i guess i do want the labels (state/country names etc) to be on top of the overlays
13:18 [irace] assuming that isn't possible with raster street basemap?
13:19 [incanus77] it's likely not perfect, but using my state + country tile layers that were made from higher-fidelity shp data is a good bet
13:19 [incanus77] correct re: labels
13:19 [incanus77] well, not easily
13:19 [incanus77] you'd have rasters w/o labels, then your travel layer, then labels in gl
13:19 [incanus77] as if it wasn't complex enough :-)
13:19 [incanus77] as you can see there are a crap-ton of ways to do this, but in future all will be in gl and simpler, i think
13:19 [irace] haha, right
13:19 [irace] so many ways
13:19 [incanus77] not even counting mobiel
13:20 [irace] your style.json defines a lot - is it possible to only define the custom stuff and inherit the rest?
13:20 [incanus77] the nice thing here is the all-gl mode will transfer over to mobile well
13:20 [incanus77] no, not really
13:20 [incanus77] you plug in a style alongside gl-js to render at all
13:21 [incanus77] you can see in my sources how i am combining mapbox (osm) data with my two custom layers
13:21 [incanus77] but browse around https://github.com/mapbox/mapbox-gl-styles if you want for style ideas
13:21 [irace] cool, ok
13:22 [incanus77] i'm gonna try to blog this all up and set some context, but need to finish tweaking
13:22 [irace] i *think* i mostly get this :)
13:22 [irace] that'd be really helpful
13:22 [incanus77] play with that gist and go from there
13:22 [incanus77] i will also talk about this on mobile eventually
13:22 [incanus77] https://github.com/mapbox/mapbox-gl-cocoa basically lets you pull in native gl on ios
13:22 [incanus77] and pop in the same style.json, for example
13:23 [irace] http://cl.ly/image/1W3J153r1z1s/Image%202015-01-06%20at%201.23.24%20PM.png shame that there's not a way to perfectly fill things in
13:31 [irace] but i get why it doesn't work that way (i think)
13:35 [incanus77] the deal comes down to the fact that mapbox's base vector layer doesn't do admin boundaries
13:36 [incanus77] just admin labels. so you can't easily say "give me france's polygon"
13:36 [incanus77] so i am layering with another source
13:36 [incanus77] that is simplified, as it happens
13:36 [incanus77] i will likely work on that, too
13:36 [incanus77] and make it better - it bugs me as well
13:37 [incanus77] one option would be to use the countries layer instead of mapbox at all for the outline drawing
13:37 [incanus77] but with the same simplified effect