smcgeeesriuk-esridist

mapstyler - Dynamically styling vector basemaps

Blog Post created by smcgeeesriuk-esridist Employee on Jul 18, 2017

What is mapstyler?

 

You can try the application here.

 

mapstyler is an application Esri UK map labs team developed to dynamically style vector basemaps. 

Super simple to use!

 

You've given 2 options. Image or colour.

Image - If you select image you can then drag any image and it'll create a basemap based on it's dominant colours.

Colour - You're given a colour palette as a start to your custom basemap. Then you can change the RGB values to really get exactly what you need!

 

Alan mapstyled

 

 

You're then given the option to save this into your ArcGIS Online account selecting the heart at the top right. 

 

How does it work?

Vector basemaps can be customised a by editing the JSON style associated. The JSON style file has full control of a maps styling. A showcase of the full range of customisation is the Vector Basemap Style Editor. In mapstyler, the underlying JSON code is changed in a very slick and easy way. Here's how it works.

 

Image

To pick the dominant colours we use something called Color Thief which takes the dominant colour or representative colour palette from an image.

var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 5);

This code would build a 5 colour palette from the source image that's dragged into the scene.

 

Colour 

The "colour" section of the app is using ColourLovers to generate 5 colours that work well together (palettes). The user can then select these colours change the RGB values.

 

We did this by querying this URL -

http://www.colourlovers.com/api/palettes/random?keywords=evil&jsonCallback=?

 

This will callback a random palette every time. The slight issue we had was sometimes pallets would not be equal to the 5 colours we are looking for. We wanted to make sure that we only brought back the 5 we needed, so we looped this query until colors.length === 5. 

 

Creating gradient

Then finally, because there's so many features that are on a map. A gradient is created to help differentiate features. For this we used RainbowVis-JS. This is a library for colour data visualisation. This enabled us to create that smooth transitioning colour gradient.

 

Applying the colours to the JSON file

We create a new JSON object that we then apply the style to. We used the method loadStyle(); in the ArcGIS API for JavaScript to do this.

 

Then we wrote a stringReplace(); function that would basically query the original style and then find and replace with the new colours we want to use.

 

Overall the application was rather simple to create and really makes customising basemaps easy.

 

Fun fact! - We showcased this application at our Esri UK Annual Conference in May 2017. It was our winning internal application for 100 lines or less back in December 2016 and was original named "basemap my cat" (pictures of a cat).

 

Code can be found on our Map Labs Github page.

Outcomes