Render, Save, Call It a Day

[ReneRubalcava]

Recently I talked a bit about some of the visualization tools in the ArcGIS API for JavaScript. Recent releases have introduced Smart Mapping, which takes some of the guesswork around generating renderers based on your data. They've also introduced some really cool features that deal with blending of colors based on the data in your map. It's getting to a point where devs aren't going to have many excuses for ugly maps.

One thing I saw mentioned at the EsriUC last week was the idea about using Smart Mapping to generate your renderer, experiment with it a bit and use it to generate the JSON of the renderer that you can use later on without having to invoke the Smart Mapping tools. This is totally doable, but a little unclear on how you might do it. So let's take a look at a couple of techniques you might want to use.

Save it locally

So maybe your app allows the user to make some queries on the data and perform an update of the renderer based on that query. A sample straight from the docs on that could look this one. Well, you can add a couple of more functions to this sample and save the renderer to localStorage. similar to how you could with Features. Those helper functions could look something like this.

function saveLocal(data, field) {
  var key = location.pathname + '-' + field;
  localStorage.setItem(key, JSON.stringify(data));
}

function getLocal(field) {
  var key = location.pathname + '-' + field;
  var data = localStorage.getItem(key);
  if (data) {
    return JSON.parse(data);
  } else {
    return null;
  }
}

Then when you set up Smart Mapping, you could check localStorage for an existing renderer and just use that saved renderer, bypassing Smart Mapping entirely.

function createRenderer(field) {
  //smart mapping functionality begins
  var data = getLocal(field);
  if (data) {
    console.log('load renderer from localStorage');
    layer.setRenderer(jsonUtils.fromJson(data));
    layer.redraw();
    createLegend(map, layer, field);
  } else {
    smartMapping.createClassedColorRenderer({
      layer: layer,
      field: field,
      basemap: map.getBasemap(),
      classificationMethod: "quantile"
    }).then(function (response) {
      console.log('save renderer to localStorage');
      saveLocal(response.renderer.toJson(), field);
      layer.setRenderer(response.renderer);
      layer.redraw();
      createLegend(map, layer, field);
    });
  }
}

Now, that's pretty cool. The data in this sample isn't too complicated, but you can imagine if you had a large dataset, it could take a second or so for Smart Mapping to generate the renderer and this method could a dose of optimization to your app. Here is a full demo of this application in action.

Make a Test App

Another cool thing you could do is create a test app similar to this sample.  Then you can add a <pre> tag to your page and update it with the renderers JSON when it gets updated. The code may look something like this.

var data = colorRenderer.renderer.toJson();
var js = JSON.stringify(data, null, 2);
document.getElementById('results').innerHTML = js;

So now, you can copy paste this JSON directly from your web page and you could use it in a local configuration that might use the webmap spec. Now you don't have to worry about using Smart Mapping in a production app that may not need it, it just needs the cool looking renderers that it can generate. Here is a demo app showing how you might do this.

Go home

So there you go, you now have a couple of ways to generate your renderers, save them and use them in your apps to optimize performance when needed. The visualization tools in the ArcGIS API for JavaScript have come a long way over the years and I think it gives developers some pretty good resources to make cool looking maps for their apps.

You're done, you can go home now.

For more geodev tips and tricks, check out my blog.