Proposal: Maputnik-Push MapboxGL Plugin

Greetings maintainers!

Background

As you know, we put together maputnik-dev-server to streamline the integration of maputnik into our mapping development workflow. The current process requires the following workflow:

1. Set window.map = map once your map loads, so that the map object is global and can be picked up by the JS code in step 2.
2. run maputnik-dev-server, a local express server that includes a local build of maputnik.
3. Copy and paste a snippet of javascript code in the console of your website, which POSTs the style to maputnik-dev-server and then redirects to http://{maputnikeditor}?style={locallyhostedstyle}

This is cumbersome, requires a local build of maputnik that gets stale, requires a non-optimal change to the code to expose the map object, and still has too many steps.

Plugin + Production API

We have experimented with streamlining this process using a production API and a mapboxGL plugin.

1. maputnik-push-api is currently running at https://maputnik-push.planningabs.nyc . It’s doing essentially the same thing maputnik-dev-server was doing, but it’s on a real domain, has https, and can serve a style that can be consumed by https://maputnik.github.io/editor/#0.89/0/10.2

2. We built a mapboxgl plugin, maputnik-push that does what step 2 above did… because it’s a plugin, it has access to the mapobject without any additional code.

You can try it right now!

yarn add https://github.com/chriswhong/maputnik-push#v0.0.2

import MaputnikPush from 'maputnik-push';

// after the map loads:
map.addControl(new MaputnikPush(), 'bottom-right');

The style as it currently exists will magically appear in maputnik!

Proposal

In the interest of wider adoption and fewer barriers to entry getting started with maputnik, let’s make both of these documented/production parts of Maputnik instead of just ecosystem add-ons that NYC Planning Labs maintains for our internal use.

1. Make maputnik-push-api a documented feature of maputnik. People can manually push styles to it, or use it via the plugin, but let’s make it part of the core product offering and maintain the code under github.com/maputnik, etc.

2. Make the maputnik-push mapboxGL plugin a documented option for using maputnik. Let’s maintain it under github.com/maputnik

Thoughts?

[orangemug]

Thanks for explaining @chriswhong, so here’s how I think we should proceed.

Lets keep it as an external dependency for now, but link to it in the README. That way we can see if this workflow is more generally useful to users of Maputnik outside of NYC planning labs. That’s assuming that you’re ok running the server for anybody to use.

Lets collect feedback to see if others are using it, if they are lets maintain it as a part of the Maputnik project.

Sound reasonable, any thoughts?

[chriswhong]

These are the kinds of apps we are building: https://zola.planning.nyc.gov/about?C1=false&C2=false&C3=false&C4=false&C5=false&C6=false&C7=false&C8=false&community-districts=true#9.72/40.7125/-73.733