Note: To add a basemap base layer, you must be logged-in to a Pro account. To learn how to upgrade, visit this link: How to upgrade to a Pro account

 

For the current page's article, the estimated time required to complete the procedure is 1 hour.

Add a basemap base layer at marker locations

• (Step 1) - Read the introductory descriptions
  • Heatmap
  • Coldmap
  • Proportional
  • Contour
  • Hex
  • H3
  • Square
• (Step 2) - Create a basemap from the markers grouped in a folder
• (Step 3) - Create a basemap from the markers in the sample spreadsheet data
• (Optional) - Adjust and edit the heatmap base layer

(Step 1) - Read the introductory descriptions

Heatmap

A heatmap is a base layer surrounding the location of each specified marker.

• Aggregate heatmap

• Size is increased.
• Transparency is decreased.
• Spectral colour position is increased to display the colours to the right in the spectrum bar.
  For example; "Red" in the image above.

Note: The spectrum bar is in the Base Layers window located at the bottom of the Layers Panel.

• Regular ranking system

The regular ranking system is based on marker density (how many + how close).

• Largest.
• Least transparent.
• Coloured to display the maximum spectral position.
  For example; "Red" in the image above.

• Smallest.
• Most transparent.
• Coloured to display the minimum spectral position.
  For example; "Blue" in the image above.

However, contrary to the regular ranking system, individual markers (for example, Vancouver) will remain unchanged. The individual markers will retain the originally set:

• Size.
• Transparency.
• Spectral position.

 

Coldmap

A coldmap is a base layer surrounding the location of each specified marker, similar to a heatmap. However, while a heatmap showcases areas with higher densities or intensities in warmer colours (e.g., red), a coldmap represents areas of lower densities or less activity in cooler colours (e.g., blue). As the density of markers increases or a specified value rises, the coldmap's colour will intensify, shifting through the specified colour spectrum.

For coldmaps influenced by numeric column data, special cases apply. As you zoom out, the marker density may override specific data-driven rankings, similar to heatmaps.

Proportional

A proportional map is a base layer surrounding the location of each specified marker. They adjust in size to represent quantity differences among features. Proportional symbols can be larger or smaller depending on the values they represent.

• Proportional visualization can be added to any folder that contains markers.
• When importing a spreadsheet, proportional can be created with values for each marker, such as price, amount, etc.
• Proportional maps are dynamic and will change when markers are added or removed from the linked folder.

Contour

Contour maps use lines (or sometimes colours) to represent constant values across a spatial region. Commonly used in topography to illustrate elevation, contour mapping in this context could represent consistent values or densities of markers. Each contour line connects markers with the same value, helping to visualize areas of similar marker density or value.

When markers with varying values are plotted on the map, contour lines can provide a visual representation of where value changes occur, creating a topographical feel for data visualization.

Hex (Hexagonal Grid)

A Hex visualization is a base layer that divides the map into hexagonal grids surrounding the location of each marker. Hex grids are ideal for reducing distortion and ensuring uniform representation across the map.

• Each hexagon adjusts its colour intensity to reflect marker density or a selected numeric column.
• Larger, more opaque hexes with warmer colours represent areas of higher density.

Hex grids are dynamic and automatically adjust as markers are added, removed, or repositioned.

H3 (Hierarchical Hexagonal Indexing)

An H3 visualization uses a hierarchical hexagonal grid system to organize data. H3 divides the map into hexagonal cells of different sizes, offering scalable resolution for flexible analysis.

H3 grids dynamically adapt based on marker density or numeric column values, similar to Hex grids. Adjusting the resolution lets you toggle between broad overviews and detailed local patterns.

Square

A Square visualization creates a grid of equal-sized squares across the map. Each square aggregates marker data and adjusts its colour to represent density or numeric values.

• Darker squares indicate higher densities or values.
• Lighter squares reflect lower densities or values.

Squares offer a straightforward and consistent way to visualize spatial patterns and data distributions.

(Step 2) - Create a basemap from the markers grouped in a folder

Choose the base map: Google > Terrain.

Note: For your map, you can choose any base map. For this example, we're choosing this light coloured base map to contrast with the dark colours of the heatmap base layer we'll add in later steps.

1. If you aren't logged in to Scribble Maps already, log in to your account at:
   https://www.scribblemaps.com/create 
   (Optional) To learn how to log in, visit this link:
   How to login/register
    
2. In the bottom-right corner of the Map View, click on the Map & Data thumbnail image.
   You will see the Map & Data window pop up.
    
3. Click to select your preferred map.
    
4. In the top-right corner of MAPS & DATA, click the X to close the window. 

Create 4 markers, and stack 3 markers

1. In the Map View, create 4 markers.

   To learn how to create a marker, visit this link: Create a marker - (Marker Tool)

    
2. In the top toolbar, select the Edit Measure Tool.

   Quick Key: Or you can press the "Q" button on your keyboard.

    
3. In Map View, click and drag two of the markers to totally cover a third marker.

   Note: In later steps, the stack of 3 markers will produce the cluster for an aggregate heatmap.

Add the markers to a folder

1. (Optional) If the "LAYERS" Panel isn't open on the right side of the browser window, click the vertical bar. 
    
2. At the top of the Layers Panel, click the Folder Icon displaying the tooltip: "Add Group".
   You will see the folder added to the Layers Panel.
    
3. Click and drag each marker’s row into the folder.

   Note: The folder now holds a set of overlays, so the folder is considered a Group. To learn about grouping overlays, visit this link: Add an overlay to a group/folder

Select the basemap you want to create

1. On the folder’s row of the LAYERS panel, click the Three Dot Icon on the right side of the Layers Panel.
   OR
   At the bottom of the LAYERS panel, click the + icon to the right of "LAYERS & DATA".
    
2. In the flyout, click to select the type of basemap you want to create:
   • Heatmap
   • Coldmap
   • Proportional
   • Contour 
   • Hex/Square
    
3. Under the heading, "Select Folder", click the Select button.
    
4. Click to select the folder you created.
    
5. Fill out the Options for the basemap:
• Configure the Heatmap
• Configure the Proportional
• Configure the Coldmap or Countour

(Step 3) - Create a basemap from the markers in the sample spreadsheet data

Note:
You can only make a column's numeric data affect the ranking system if you use the "Import Spreadsheet" feature. To make this instruction simple, we recommend you use our sample data.

 

To learn how to import your own data, visit: Import/Export Files & Data - GeoJSON, images, PDF, CSV, KML, GXP, SHP, DXF, SMJSON, SMT, WKT, etc.

Create a new map

1. In the top toolbar, click the "MENU" button.
    
2. Under the heading, "Scribble Maps", click the button: "New Map".
    
3. Click: "Yes".
    
4. Click: "Ok".
    
5. In the top-right corner of the menu window, click the "X" button.
    
6. In the Map View, you will see the new map.

Load the sample data into the table

1. At the top of the Layers Panel, click the Spreadsheet Icon displaying the tooltip: "Import Spreadsheet".
   This window will appear: "IMPORT LIST (SPREADSHEET)".
    
2. Click the tab: "1. Import Data".
   You will see a field displaying our sample data.
    
3. Click the tab: "2. Map".
   You will see our sample data for 9 cities displayed in a table.
   Each row displays a city's data.
   In later steps, each city's data will be represented by a marker in the Map View.

Definitions for the types of data

• Top-headings.
• Lower-headings.

Each top heading displays a definable heading. 

Note: When you use your own spreadsheet data, the definable headings are the data in the column heading cells from your spreadsheet.

Each lower heading is the preset heading that’s currently selected in the drop-down list.

Note: You'll learn about each preset heading in the article: "Import spreadsheet data..." 

Below the two column headings, you will see the rest of the cells, each called a: value cell. This is your spreadsheet's data from the regular cells (not column headings).

Prepare the basemap

1. At the top of the column containing the numeric data, you will see the upper and lower headings.
   The lower heading is the drop-down list displaying the preset heading that's currently selected. For this example: "Description".
2. Click the drop-down list, then select the preset heading: "Attribute".

   To produce a heatmap where a column's numeric data affects the ranking system, the column's preset heading must be changed to: "Attribute".

3. At the bottom-left of the data table, click the checkbox labelled: "Create Heatmap".
   The heatmap options section will appear. 
    
4. Under the "Attribute" heading, click the drop-down list.
   You will see the list displays each column's definable heading. 

   Note:
   If you want the heatmap to display the regular ranking system, you can select: "None (density)".

    

   This example will show you how to make a column's numeric data affect the ranking system. So the column's value cells must be numbers.

5. Under the "Value" heading, click the drop-down list. Then select "Description" - (referencing the definable heading of the column containing the numbers for the city populations).
   In later steps, each marker's heatmap will be ranked by the number of each city's population.
    
   1. Fill out the Options for the basemap:
   • Configure the Heatmap
   • Configure the Proportional
   • Configure the Coldmap or Countour

Configuring the basemaps

Configure the Heatmap

1. Under the "Title" heading, enter the title for the heatmap.
    
2. Enter the "Range" for the heatmap.

   If you've chosen 'Total' as the 'Value' option and you have two markers, both assigned a value of 10 each, the setting of 30 pixels means that when these markers are within a 30-pixel distance of each other, their values will be combined to form a total value of 20 on the heatmap.

    
3. Click to select your "Colour".
    
4. Under the "Opacity" heading, you can type in a new value for the overall non-transparency of the heatmaps.
   You can also change the opacity value by clicking the up/down buttons.

   This does not apply to Bubble/Cirlce One Colour.

    

   • 0% is invisible.
   • 50% is see-through.
   • 100% is the solid colour.

    

5. Click to Lock To Zoom.

   The radius will be capped at the zoom and then enlarge as you zoom in.

    
6. Check Balanced Values to ensure a more equitable and accurate data representation.

   For more information on Balanced Values, visit: Using Balanced Values with Log Scale

• Complete the Heatmap.

Configure the Coldmap or Contour

1. Under the "Title" heading, enter the title for the Coldmap.
2. Enter the "Range" for the Coldmap.
3. Enter the number of "Bands".
   This will determine how many colour panels will be used for the Coldmap.
4. Click to select your colours for each colour in the palette.
   OR
   You can use "Generate From AI" to create the colour palette.
5. Under the "Opacity" heading, you can type in a new value for the overall non-transparency of the heatmaps.
   You can also change the opacity value by clicking the up/down buttons.

   This does not apply to Bubble/Cirlce One Colour.

    

   • 0% is invisible.
   • 50% is see-through.
   • 100% is the solid colour.

    

6. Choose "Fade For":
   • None
   • High
   • Low
7. Click to Lock To Zoom.

   The radius will be capped at the zoom and then enlarge as you zoom in.

    
8. Check Balanced Values to ensure a more equitable and accurate data representation.

   For more information on Balanced Values, visit: Using Balanced Values with Log Scale

• Complete the Coldmap or Countour.

Configure the Proportional

1. On the folder’s row of the LAYERS panel, click the Three Dot Icon on the right side of the Layers Panel.
   OR
   At the bottom of the LAYERS panel, click the + icon to the right of "LAYERS & DATA".
    
2. In the flyout, click to select: "Add Proportional".
   You will see the editor window titled: "ADD/EDIT PROPORTIONAL".
    
3. Under the heading, "Select Folder", click the Select button.
    
4. Click to select the folder you created.
    
5. Select the "Type" from the drop-down menu.
   • Bubble/Circle Gradient
   • Bubble/Circle One Colour
   • Proportional Icon
    
6. (Optional) Under the "Title" heading, enter the title for the proportional map.
    
7. (Optional) Enter the "Radius" for the proportional symbols.
    
8. (Optional) Under the "Min" heading, you can type in a new value for the minimum size of the individual proportional symbols at each marker.
   You can also change the minimum value by clicking the up/down buttons.

    

   • The default size is 30.
   • The maximum size is 100.

    

    
9. (Optional) Under the "Max" heading, you can type in a new value for the size of the individual proportional symbol located at each marker.
    
10. (Optional) Click to select your "Gradient", "Colour" or "Icon".
     
11. (Optional) Under the "Opacity" heading, you can type in a new value for the grid's overall non-transparency.

     

    • 0% is invisible.
    • 50% is see-through.
    • 100% is the solid colour.

     

• Complete the Proportional.

Configure the Hex/H3/Square

1. At the bottom of the LAYERS panel, click the + icon to the right of "LAYERS & DATA".
    
2. In the flyout, click to select: "Add Hex/Square Grid".
   You will see the editor window titled: "ADD GRID".
    
3. Under the heading, "Select Folder", click the Select button.
    
4. Click to select the folder you created.
    
5. Select the "Type" from the drop-down menu.
   • Hex
   • H3 Hex
   • Square
    
6. Under the "Title" heading, enter the title for the grid.
    
7. Enter the "Size" for the grid fields.
   Note: If you select H3, you will not have this option.
    
8. Click to select your "Color".
    
9. Under the "Opacity" heading, you can type in a new value for the proportional maps' overall non-transparency.

    

   • 0% is invisible.
   • 50% is see-through.
   • 100% is the solid colour.

    

10. Check Lock to Zoom and set the Zoom level by typing in the number for the Zoom level or using the up and down arrows.
     
11. Check Show Labels to show the labels in the grid.
    Note: If you select H3, you will not have this option.
     
12. From the dropdown menu, select the Value (amount, price, etc.).
     
13. Check 'Balanced Values' to reduce the impact of outliers, ensuring a more accurate representation of the data. For instance, it prevents one extremely high value from dominating the visualization and allows for a more evenly distributed map.

• Complete the Hex/H3/Square.

Complete the basemap

1. Click the button at the bottom of the editor window to apply your changes to the map.
   
    
2. In the top-right corner of the editor window, click the "X" button.
   In Map View, the heatmap base layer will display at the location of each specified marker. The stack of markers will produce a cluster.

    

   At the bottom of the Layers Panel, you will see the Base Layers window display the spectrum bar. There you will see the:

   • The number "0" at the left side of the spectrum bar. 

     0 represents the minimum possible quantity of markers.

   • A number located at the right side of the spectrum bar. 

     The number represents the current maximum quantity of markers in a cluster. For example: 3.

    
3. (Optional) In the Base Layers window, you can toggle the display of the Map View’s basemap base layer.
   Click the Eye Icon on the left side of the spectrum bar’s row to hide the layer.
   Click it again to redisplay the heatmap base layer in the Map View.

(Optional) Adjust and edit the heatmap base layer

In the top-right corner of the Map View, keep clicking on the (-) button until the map zooms-out to the magnification-level you want to see.

Delete markers inside the highest-density cluster to improve visibility of individual markers or the lowest-density cluster.

 

To delete a marker, select the Delete Tool in the top toolbar. Then click the marker in the Map View.

See also

To learn how to import your own spreadsheet data, visit this link: Import/Export Files & Data - GeoJSON, images, PDF, CSV, KML, GXP, SHP, DXF, SMJSON, SMT, WKT, etc.

You can filter which marker overlays are displayed by considering attributes. To learn how; visit this link:
Data Filtering - Create a filter to segment which overlays are displayed

Reorder the stack of base layers

Add a crop as a base layer

Blend Basemaps - Display sections of a second map

Add a TMS URL to produce a base layer

Add a WMS URL to produce a base layer