Skip to main content

Editor's Picks

We The North: Using the ArcGIS Vector Style Editor to cheer on the Toronto Raptors

Published Date
Author Erin Vedam

Whether you’ve been a supporter for years or a bandwagon fan like me, it’s hard to escape the excitement surrounding the Toronto Raptors right now – even in the world of GIS. In honour of the Raptors making it to their first NBA finals ever I’ve created a Toronto Raptors themed basemap using the ArcGIS Vector Tile Style Editor and the Community Map of Canada. 

If you’ve never worked with the ArcGIS Vector Tile Style Editor I highly suggest first checking out this blog post. It’ll walk you through the basics of what this app can do and how to use it. Once you’ve done that, you’ll be ready to create your own themed map.

Choosing a Theme

The best place to start when creating a themed map is to decide on the colour scheme. For the Raptors it’s pretty obvious: red, black, grey and gold. To get the colours exactly right, I suggest using a colour selector app, such as ‘GetColor!’

Colours can appear different on different monitors, and it’s important that your theme is identifiable right off the bat.

For anyone wondering, the colour scheme I used is:

Getting Started

I decided to work with the Community Map of Canada for a couple of reasons:

  1. It’s incredibly customizable. There are a lot of layers included so you can make your map as detailed as you want it to be (more on this later).
  2. It gets updated every 24-48 hours with community provided data. This means that it is always up-to-date.

To work with the Community Map of Canada, save a copy of the map to your content on ArcGIS Online. There’s a bit of a work around for this at the moment, but it should be available in your default basemap selection by the end of June.

  1. Navigate to the Community Map of Canada Vector Basemap and open in Map Viewer.
  2. Select the ‘Content’ header and click the drop-down arrow.   

Click the ‘more options’ (three dots) button under Canada Topographic and select the ‘Move from Basemap’ option

3. Click more options under the moved Canada Topographic layer and select ‘Copy’

Click more options under your copied layer and choose ‘Save Layer’ and Create Item

4. Navigate to the Vector Style Editor app and you should now find the copied layer under ‘My Styles’

What to Show

Most sports logos have simple themes. When making a sports themed map you’re probably going to end up working with only a few colours. This makes deciding what you need to show on the map critical, as you won’t be able to use colour to distinguish features from each other. Some of the layers I chose to remove were building footprints and surfaces. These are features I felt would clutter up the map and are usually represented with unique symbology.

How to Edit

The Vector Style Editor provides three main ways to edit your style: ‘Edit Layer Styles’, ‘Edit By Color’ and ‘Edit Icons and Patterns’. There’s no ‘right way’ to use these but after some playing around I think I’ve determined the easiest.

For me, ‘Edit Layer Styles’ was most useful to edit labels. The label class is a separate drop down within each feature and from there you can edit font, halo and transform the text. For the Raptors basemap I transformed all the labels on the map to Uppercase, to keep with the style of the Raptors logo. I chose Arial to be the only font on the map and used bold, italic or regular depending on what the feature was. Labels were done in varying greys and whites to differentiate between features but still stay within our theme.

I used ‘Edit By Color’ to change the symbology of features on the map. This was a natural choice for me because I know the layers of the Community Map of Canada Vector Basemap very well and knew which colour represented what feature. If you are less familiar, you may want to stick with ‘Edit Layer Styles’ at the beginning. Still, there are some obvious ones. For example, any blue shades will obviously represent water on a map and in this case could be changed to black.

 ‘The Edit By Color’ is still a useful tool when checking that you haven’t missed styling any layers. For example, once I was done my map I clicked on Edit By Color and noticed a green in my colour palette that should have been changed to red and could easily correct the issue.

Editing Icons and Patterns

Icons and patterns really make your map come together. In the Community Map of Canada vector basemap these include road shields, wetlands and trees – amongst other features. I chose to keep it simple and go Raptors gold for all patterned features, but you can have a lot of fun with this setting. It’s possible to upload your own images or patterns using the ‘Replace Icon/Pattern’ button:

For example, one of those giant cutouts of Drake’s head would make a pretty good tree.

Challenges I Ran Into

There are two main issues I ran into when creating the Raptors basemap. Both have simple solutions but are things I didn’t find as intuitive as others.

  1. Background

    Because the Community Map of Canada doesn’t have a background landbase feature at most zoom levels, the default colour is white. This didn’t work very well when trying to create my Raptors map, as I wanted the background to be grey.

    To fix this issue I created a separate basemap, where the only features were land and water. I made the land the same grey colour as the Raptors logo, and the water black. All other features I removed by turning off their visibility. In my final web map, I have this style layer underneath my Raptors style so that it fills in the areas that would normally be left white.

    All in all this solution only took about five minutes, but to save yourself the work you can just download mine!
     
  2. Road Thickness

    The only real issue I ran into when changing my symbology was road appearance. When I switched the roads to an all-white road network, it made it near impossible to differentiate between road classes. Another issue was that at certain scales, the roads appeared very thick when all in white.

To correct this, it’s important to note one small detail – what zoom level you are working at. This number can be found under the zoom in and out button, in the upper left-hand corner.

Once you know that, simply click on the feature you are trying to change. Under the ‘width’ heading, decrease (or increase) the value for each zoom level until you are happy with the road networks appearance.

Publishing Your Style as a Web Map

Once you’ve got everything as red, grey, black and gold as possible it’s time to publish! To do so first save your style. This will save it under ‘Content’. Next, go to the home page and choose ‘Map’. A map window will appear with your default basemap. Add your saved style to the map using the ‘Add’ button and ‘Search for layers’, making sure that ‘My Content’ is selected from the dropdown at the top.

If you want to use my grey and black basemap you can do so by either searching for it within ArcGIS Online or making a copy of it and saving it to ‘My Content’ to grab from there.

Arrange the layers so that the background map is the bottom layer. Hover over the title until the ‘More Options’ icon appears. Click and select ‘Move to Basemap’. From there, I cleaned up my basemap (the Community Map of Canada vector basemap) by removing ‘Canada Topographic’ and ‘Canada Hillshade’. Keep in mind that if you are working with a different default basemap these names will differ.

And voilà! You are now ready to cheer on the Toronto Raptors the only way GIS nerds know how – with a map.