Create front-facing site

[dereklieu]

Create a front-facing site that allows you to download a set of pre-baked mbtiles in a bunch of different projections as a way of showing off this repo. It would also make this more accessible for people who aren't able to run the code themselves.

Assigning @DylanMoriarty to work on flat files representing the site's style.

[DylanMoriarty]

Hey @dereklieu, here are a few mockups I have. The layout stays pretty consistent between the different views, happy to shake things up a bit if we want to do something more... interesting. As it is, this starts out with a simple pipeline for selecting our pre-made mbtiles, continues into instructions on how to use the CLI, and then ends with a lil' About section.

For example maps, because the mbtiles we're offering are somewhat simple, I thought it'd be fun to have the map update to tiles based on what the user selects via the projection/geography.

1. Wireframe, B/W Approach

Started out just doing something in B/W as a basic wireframe. Going down this route would produce something similar to our site, which is a pro for branding, but not quite as fun.

---

2. Different Header

Trying out a different approach for the header area.

---

3. More detailed Mockup

Not 100 on the color here, but I thought because it's 'projectors' it'd be kinda goofy to throw a vignette on the whole page that scrolls with the page.

I have a few other ideas if you want to chat, but this is the current work.

[dereklieu]

@DylanMoriarty nice work. I like the idea of showing the map projection as you choose the dropdown. The UI for choosing the projection is also nice. I would tighten up the site so that it's close to being a one-pager. Some specific feedback:

1. I think the header takes too much space. I would move the Made with <3 from DevelopmentSeed either to the bottom of the page or to the top right, not the middle. I would also get rid of the "Dirty Reprojectors" header altogether, it doesn't convey meaning and could be confusing. I would keep the tagline but we should work on the text.
2. We don't need to include instructions on how to install the repo, that should be on Github and we can link to it. Instead we should include some basic instructions on what to do with the mbtiles once you have them.
3. There's no need to match styles with the Devseed site. I like the dark style, but I think we should see it with a similarly styled map on the page. Open to other directions here.

I don't think we should include a live map of every projection we offer, that could add up to a lot of work. Possible though that we could build a transition using d3 to show what it would look like, a la this.

[DylanMoriarty]

@dereklieu Awesome, thanks for the feedback.

1. I moved it up to the top because I found it kinda odd we bury our involvement in developing these tools to the bottom. I know we're pushing these out into the world and the point isn't self promotion, but why not put our name in a more visible place? Happy to minimize it so it's not as commanding at the top.
2. Works for me, but I'd like to keep 'Project your own data' visible on the page so folks know they can go to the github page and do that too. Are there instructions for what to do with mbtiles once you have them outside of uploading them to Studio?
3. Agreed. Still thinking along the lines of doing something line-worky because that's what we're peddling here.

4. (live map) My idea for implementing that was to just bake all the tiles we're making into one mbtile file and change the layer being displayed- similar to what we did on WaPo and have done with a few other projects. So when you select a new projection, the map jumps to that source, and when you select a new geometry it jumps to that one.

   Love the transitional D3 map. As we're baking mbtiles here though, I feel like we should stick to displaying the tiles in Studio. I actually thought of something similar- the two circles atop were at one point going to be a subtle world map that could animate. Might be a bit distracting though.

I'll incorporate that feedback into a more solid mockup and start setting up some front-end scaffolding later today.

[dereklieu]

Not opposed to the studio idea but it does add complexity and time. I'd prefer to stick a single uploaded projection for now and get this out there, then spend time later to make the projections change with the map. I imagine we'll be adding projections somewhat piecemeal as well, and I don't want that overhead of having to update map tiles each time just yet.

What if we made the map the full page and overlay the toggles on top? Would be a great way to keep things simple while showing what you're getting.

Thinking more about the instructions, what do you think about showing a modal that opens when you press Download, which includes both the link and also what you need to do with it. I imagine the instructions to be dead simple, but also willing to bet that not everyone knows to upload mbtiles into studio.

Lastly, on the logo. I don't want to bury it but it feels wrong to put it dead center on the top of the page. As a user, the first thing I want to know is what does this do for me. The logo doesn't add to that, rather it detracts by placing unnecessary information in prime real estate. It would look less out of place if we had a top nav bar but as is, I think it needs to go to the bottom. If we make this a one-pager than we can still keep it in the fold while putting it in the bottom.

[anandthakker]

@dereklieu @DylanMoriarty Whipped up some client-side code as an aid to working on #6

Tomorrow(ish) I can push it up in a new repo for the front-facing app, in case we want to use it.

[dereklieu]

Nice. @DylanMoriarty has been working on scaffolding the site, and he was planning on doing it in this repo. You should hit him up on chat tomorrow to see where it's at, and where this code can fit in. I won't have time to do any work on this until after this week.

[anandthakker]

@DylanMoriarty the downside of doing it in this repo is that whatever dependencies we need for the site (e.g. React, mapbox-gl) then have to get downloaded by anyone who npm installs this tool.

[anandthakker]

I think that, for now, we should probably drop the choose/download aspect of this site. As @dereklieu mentioned above, it's a lot of overhead; not to mention: what sets of geography would be be including? National boundaries? Sub-national? One per country? Lakes? There are way too many choices, and if we just pick a couple, it seems like this would be of such limited use that it wouldn't really be worth the effort.

Instead, I'd propose that the site:

1. Shows re-projection happening live on some example geography (maybe national boundaries), in a better-designed version of the demo GIF above.
2. Briefly describes what's actually going on w/ the 'lying to leaflet' trick, so that it's not just some weird magic.
3. (time permitting / eventually) Allows you to drop your own geojson onto the page to replace the example geography; and, once you do, lets you download the reprojected geojson. (NOT the mbtiles -- geojson is okay because we can reproject it within the browser)

[DylanMoriarty]

Good call on the dependencies. I'd be ok with spinning the front facing part of this into another repo.

I don't think having options for downloads is that much overhead. For offered geographies, I was just going to pull from some of Natural Earth Data and do some of the more common ones; countries, admin 1, land, water, lakes, rivers, roads, & populated places. That's only eight in total, and with MB's filtering, leaves plenty of room for potential use.

When we started I pushed for doing it as you outlined in the third point, but it sounded like that was a significantly larger time pull to get it to work in browser. We tabled it for the initial kick out of the site. I'd for sure love that though.

For point 2, do we want to commit space for that? After conversations with Derek, we decided a simple single page with minimal text and options was preferable. A sorta one-stop-shop for just quickly grabbing some projected tiles along these lines:

Tucking away the 'lying to leaflet' descriptions in an about modal, and having the 'project your own tiles' lead out to a readme on this repo.

[anandthakker]

I don't think having options for downloads is that much overhead. For offered geographies, I was just going to pull from some of Natural Earth Data and do some of the more common ones; countries, admin 1, land, water, lakes, rivers, roads, & populated places. That's only eight in total, and with MB's filtering, leaves plenty of room for potential use.

It is a lot of overhead. That is eight sources, multiplied by the number of projections. It will take a long time to generate and verify all of those tilesets to begin with, and it creates a lot of surface area for support: any time someone using them finds a problem with one of them, we will either have to (a) find time to debug (and possibly regenerate the tileset), or (b) leave it unanswered (frustrating people and creating yet another ill-supported GH repo).

When we started I pushed for doing it as you outlined in the third point, but it sounded like that was a significantly larger time pull to get it to work in browser. We tabled it for the initial kick out of the site. I'd for sure love that though.

Did you see the GIF above? It's basically already working in the browser. It turned out to be a pretty quick lift.

For point 2, do we want to commit space for that? After conversations with Derek, we decided a simple single page with minimal text and options was preferable

Yeah I'm fine having it behind a modal or an expandable section of the page or something.

[anandthakker]

It's basically already working in the browser.

To clarify: what I have working in the browser is reprojecting a fixed geography (currently us states, but we can use whatever) to whatever projection the user chooses. That's part "1" of my proposal above. All we'd need for "3" is to implement the functionality for accepting custom GeoJSON, sending that in to the map, and downloading the result. That's all pretty straightforward stuff.

[anandthakker]

About the 'choose a geography' thing: if we (a) stick with geojson (not mbtiles) and (b) stick to smallish files (<= 250KB or so?), then we could allow a 'choose your geography' instead of just using a fixed example.

[DylanMoriarty]

Nice!

Here's a few thoughts and questions:

1. What would the maximum file size be for this? 250KB for a GeoJSON might be somewhat limiting- the US cities file I used for WaPo kicked in at 574KB. Probably alright for simple custom datasets. Would be harder to offer up any of the NE tilesets I had previously intended.

2. To get this to work in browser we essentially just drop offering these as mbtiles, and instead have the download be GeoJSON's?

3. For spherical projections, would we be able to also add in moving where the center point is?

4. The process we'd have here would then be: Start with a default tileset to show off the functionality, and a clear entry point for the user to drop in their own geojson. Am I missing anything from the steps being something like:

Going to try to mock this up again to accommodate that. @dereklieu any thoughts?

[anandthakker]

What would the maximum file size be for this? 250KB for a GeoJSON might be somewhat limiting- the US cities file I used for WaPo kicked in at 574KB. Probably alright for simple custom datasets. Would be harder to offer up any of the NE tilesets I had previously intended.

Hm. Yeah, i don't know what's reasonable, really... since the file isn't actually going to be uploaded anywhere, it's possible we can get away with a larger limit -- I guess we'll need to experiment a bit. How big are the most-simplified NE geojson files that we'd want to use?

To get this to work in browser we essentially just drop offering these as mbtiles, and instead have the download be GeoJSON's?

Correct. I think we should just completely exclude any mention of tiles, tilesets, mbtiles, etc. -- except for maybe in the modal/revealed explainer info, where we could mention something like, "If your downloaded GeoJSON is too large to use directly, you can also upload it to Mapbox Studio to make it into a vector tileset".)

For spherical projections, would we be able to also add in moving where the center point is?

Hmm. Possibly. Having a specific (but fixed) center point for each projection in the list would not be hard. I think having it be dynamic/user-editable is probably out of scope, at least for now. Users who need that can use the CLI by writing a bit of custom code -- we'll include instructions for that in the README.

The process we'd have here would then be: Start with a default tileset to show off the functionality, and a clear entry point for the user to drop in their own geojson.

I think we could do:

• Start with a default geography to show off the functionality.
• Switch to another geography provided in a dropdown (i.e., a handful of options from NE, as long as they're not too huge)
• Clear entry point for user to drop in their own geojson.

[DylanMoriarty]

On the file size, I tested this out on NE's 110m & 10m data for admin 0. For 110m the file came in at ~25MB, and 10m (which is simplified to such a degree that it's not really useful for anything but world maps) which still came in at ~450KB. If we don't do pre-made projected GeoJSON's, I imagine it'll be too large to do on the fly.

Any notion of what a max file size would/could be?

On spherical projections, if we have those available as options we should have some means of moving the center point. If the center point is static over the US, those projections in our tool would only be useful for making maps of the US. Fixed points would be a fine way to give more options there, something like a slider that moves the centerpoint a set about degrees over across the world.

If we don't want to build that in, I can add in a message that displays when you select those projections that says "hey, this is limited here, but check out the CLI to open it up".

Or we could just punt on spherical projections altogether for now.

[anandthakker]

Repo for the site is over at https://github.com/developmentseed/dirty-reprojectors-app . Very rudimentary right now, but should be very easy to develop locally: npm install, npm start, then go http://localhost:9966 . Everything's basically happening in app/index.js and app/map.js