How It's Made: Team Basemaps

GavinRehkemper

I recently released a fun web app I've been working on that uses vector tile layers and professional sports teams colors to allow you to create your own colored basemap for your ArcGIS maps: Team Basemaps. Thought I'd give a rough step-by-step guide to how I made it.

1. Started a new project with Esri-rollup - this repo starts you off with everything you need to have a self-building JavaScript web app. Thanks Tom Wayson‌ for the great work on this.
2. Added the JSAPI 4.0 TileLayer.
3. Wrote the widget that allows you to choose the different teams. Utilized this open source project for color codes. As part of this, had to write the function that converts an array of color codes to a vector basemaps style JSON. I'm thinking about pulling this out into a separate JS library in the future so it can be utilized by other projects. 
4. Wrote the code for the button that rotates the colors on the map. This basically gets all the possible permutations of the colors (example if you have red, green, and blue: [rgb, rbg, grb, gbr, brg, bgr]) and just cycles through that array.
5. Wrote the code for saving to ArcGIS Online. Used this example, as well as inspecting the REST API calls for the ArcGIS Online map viewer.
   1. Also as part of this step, incorporated SweetAlert for the modal alert functionality.

Overall it was a fun little project! If you want to help, feel free to check out the issues and submit a PR!

ArthurCrawford01

Nice use of the styling vector tiles!