If I can write JavaScript, so can you

Step 1 – Create the starter app

With zero idea of how to start, this first tutorial provided me with an app template in Codepen that has the basic HTML set out, adds the CSS and API references, and creates a simple 2D map view. I simply took a ‘fork’ of the existing app that I could then edit to be my own. This was a great way to get me up and running without any prior knowledge.

The simple tutorial app.

However, I want my app to focus on the UK, not California. Not a problem, just a few tweaks to the tutorial code allowed me to change the ‘centre’ point of my map and adjust the zoom so that I could see London in my map view.

//Create the mapview centred on London
  var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-0.1,51.5],
        zoom: 13

Here’s the result:

The app with a re-centered map.

Step 2 – Add a layer to the map

Now, I need to add my Living Atlas layer. I followed the steps in the tutorial, altering the name of the variable to supermarkets and adding the service URL for my Geolytix point layer.

      // Create the supermarkets layer
      var supermarkets = new FeatureLayer({
        url: "https://services8.arcgis.com/3ArZhpXFARDixnL2/arcgis/rest/services/Geolytix_Retail_Points_Q4_2018/FeatureServer",
      });
      // Add the supermarkets layer
      map.add(supermarkets,0);

With me so far?

The app now shows supermarket locations.

This is great but I’m not a huge fan of the default symbology.

Step 3 – Add symbology

I wanted to make the points a bit bigger and colour them according to what retailer they are to make the map a little more user-friendly. To do this, I needed to add some extra code in before my feature layer variable. I created new variables for each of the different supermarkets, setting their type as “simple-marker” and setting their colour with a hex code to match their branding. I also created an ‘other’ variable with grey colouring to encompass some of the lesser known supermarket brands so that the resulting map wouldn’t be too busy.

  // Symbol for tesco
    var tesco ={
      type: "simple-marker",
      color: "#00529f",
    };

// ***repeat for other supermarkets***

 

I then defined a uniqueValueRenderer based on the field ‘retailer’. I set the defaultSymbol to my ‘other’ value, then outlined the rest of the supermarket variables I’d already created in the uniqueValueInfos.

      // Define a unique value renderer for the supermarkets
      var supermarketsRenderer = {
       type: "unique-value",
          field: "retailer",
        defaultSymbol: other,
        uniqueValueInfos:[
          {
            value: "Tesco",
            symbol: tesco
          },

// ***repeat for other supermarkets***

};

 

Make sure to add the renderer to your feature layer variable. I added in an opacity of 0.75 to make the layer a bit less harsh on the eyes and allow you to see some detail of the map through the points.

   // Create the supermarkets layer
      var supermarkets = new FeatureLayer({
        url: "https://services8.arcgis.com/3ArZhpXFARDixnL2/arcgis/rest/services/Geolytix_Retail_Points_Q4_2018/FeatureServer",
        renderer: supermarketsRenderer,
        opacity: .75,
    });

 

Here’s the final symbology:

Extending the app with a unique value renderer.