FAQs | Maptiks

Integrations

ArcGIS Online

This process requires you to have administation rights on your Enterprise account.
Maptiks Enabled templates are not available for personal accounts.

1. Login to {your_organization_here}.arcgis.com (e.g maptiks.arcgis.com), and click on the Groups tab.
2. Click Create New Group and fill in the group details.
  Click Create Group to create your group.
3. Go to Organizations at the top of the page then click Edit Settings.
4. Click the Map tab and go to the Configurable Apps section.
  In the dropdown menu, select the new group you created in step 2.
  Make sure you select “Share the Esri default configurable apps..” checkbox.
5. Click Save.

Add Maptiks Enabled templates to your group

1. Type “Maptiks” in the search bar and click Search For Groups so that the Maptiks group is returned in the search results.
  Be sure to unselect the “Only Search in {your_organization_here}”” slider.
  This will make sure you don’t restrict the search and are able to find our template group.
2. Select Maptiks Enabled Templates.
3. Find the template that you want to use and click the three dots (…) in the bottom right corner, then click
  View Item Details.
4. Click Share then select the group you made in step 2 in the Share dialog.
  Click OK in the share dialog to save your changes.

Create some Maptiks Enabled Apps

Click Content at the top of the page.
Click Create and select Using a Template.
Select one of the new Maptiks Enabled templates that you just added.
Click CREATE WEB APP.
After you’ve set up your map, click the Settings tab.
It could look like either of these images below depending on what type of map you have.
Or it could look like this:
In the Settings tab fill in the following information:
Maptiks Trackcode: Your Maptiks Trackcode
Maptiks ID: Your Maptiks ID
Or it could look like this
Click Apply. Your map should now be tracking metrics.
Click Continue on this page to check to see if Maptiks is receiving metrics.

ArcGIS Online documentation

View ArcGIS Online documentation

Esri 3 & 4

Add the following snippet before the Esri library is loaded to make the Maptiks module available.

 
<script> 
  var dojoConfig = { paths: { maptiks: 'https://cdn.maptiks.com/esri3' } }; 
</script>

Add the following snippet after the Esri library has been loaded. This snippet contains our trackcode and map name.

<script> 
  // REPLACE 'esri/map' WITH 'maptiks/map' 
  require(['maptiks/map', 'dojo/domReady!'], function(Map) { 
    var map = new Map('map', { 
      center: [-116.22, 51.42], 
      zoom: 13, 
      basemap: 'streets', 

      // ENTER TRACKING CODE HERE 
      maptiks_trackcode: 'your Trackcode', // ENTER THE MAP'S NAME HERE (USER DEFINED)  maptiks_id: "your ID", }); }); </script>

Below is an example of how it will look with the Maptiks code included.

<!doctype html> 
<html> 
<head> 
   
  <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css"> 

   
  <style>html, body, #map { height: 100%; margin: 0; }</style> 
</head> 
<body> 
  <div id="map"></div> 

   
  <script> 
    var dojoConfig = { paths: { maptiks: 'https://cdn.maptiks.com/esri3' } }; 
  </script> 

   
  <script src="https://js.arcgis.com/3.17/"></script> 

   
  <script> 
    // REPLACE 'esri/map' WITH 'maptiks/map' 
    require(['maptiks/map', 'dojo/domReady!'], function(Map) { 
      var map = new Map('map', { 
        center: [-116.22, 51.42], 
        zoom: 13, 
        basemap: 'streets', 

        // ENTER TRACKING CODE HERE 
        maptiks_trackcode: 'your Trackcode', // ENTER THE MAP'S NAME HERE (USER DEFINED)  maptiks_id: "your ID", }); }); </script> </body> </html>

After you’ve installed that, go to your map in a browser either locally or on the web.
Your map should be tracking interactions now. Click continue on this page to check.

Esri JS

Paste the following snippet after the Esri Leaflet Library has been loaded, and before it’s initialized.

 
<script src="https://cdn.maptiks.com/maptiks-leaflet.min.js"></script> 
<script>maptiks.trackcode='your Trackcode';</script>

Add the following as part of the map object in the map initialization. This will be the name of your map on the Maptiks dashboard.

maptiks_id: "your ID",

Below is an example of how it will look with the Maptiks code included.

<!doctype html> 
<html> 
<head> 
  <meta charset=utf-8 /> 
  <title>Esri Leaflet Quickstart</title> 
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /> 

  <style> 
    body { margin:0; padding:0; } 
    #map { position: absolute; top:0; bottom:0; right:0; left:0; } 
  </style> 
</head> 
<body> 

<div id="map"></div> 

 
<link 
  rel="stylesheet" 
  href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" 
  integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" 
  crossorigin=""/> 
<script 
  src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" 
  integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" 
  crossorigin=""> 
</script> 

 
<script 
  src="https://unpkg.com/esri-leaflet@2.1.4/dist/esri-leaflet.js" 
  integrity="sha512-m+BZ3OSlzGdYLqUBZt3u6eA0sH+Txdmq7cqA1u8/B2aTXviGMMLOfrKyiIW7181jbzZAY0u+3jWoiL61iLcTKQ==" 
  crossorigin=""> 
</script> 

<script src="https://cdn.maptiks.com/maptiks-leaflet.min.js"></script> 
<script>maptiks.trackcode='your Trackcode';</script> <script> var map = L.map("map", {maptiks_id: "your ID"}).setView([37.75, -122.23], 10); L.esri.basemapLayer("Topographic").addTo(map); </script> </body> </html>

After you’ve installed that, go to your map in a browser either locally or on the web.
Your map should be tracking interactions now. Click continue on this page to check.

Esri Story Map

This guide assumes that you already have an ArcGIS Organizational account and a Story Map. To learn more, visit
ArcGIS Online

After you login to ArcGIS Online, click the Content tab.
Select the Story Map you wish to add Maptiks to or create a new Story Map.
From the Overview tab, click Share.
Select Everyone (Public). You’ll see your own organization’s name instead of Sparkgeo.
Click OK to save changes.

You’ll need to update the Data Source URL. To do that you need to get the appid.
You can find it in this part of the URL from the Story Map page.

Or here if you’re on the Overview page.

Use the appid in your new Data Source URL depending on which Story Map Type you want.

Map Type	Data Source URL
Cascade	https://templates.maptiks.com/Cascade/index.html?appid=`your app id`
Journal	https://templates.maptiks.com/MapJournal/index.html?appid=`your app id`
Series	https://templates.maptiks.com/MapSeries/index.html?appid=`your app id`
Shortlist	https://templates.maptiks.com/Shortlist/index.html?appid=`your app id`
Swipe	https://templates.maptiks.com/Swipe/index.html?appid=`your app id`
Tour	https://templates.maptiks.com/MapTour/index.html?appid=`your app id`

When you have the new Data Source URL, go to the Settings tab and click
Web Mapping Application Settings. Paste the new Data Source URL into the field and click Save.
From the overview tab, click Configure App to go to your app in edit mode.
Click on the Settings tab (may look different depending on your Story Map Type).
Or it could look like this
In the Settings tab, fill in the following information (may look different depending on your Story Map Type).
Maptiks Trackcode: your Trackcode
Maptiks ID: your ID
Or it could look like this:
Click Apply.
Click Save to save changes to your map.

Google Maps

Paste the following snippet after the Google Maps Library has been loaded, and before it’s initialized.

 
<script src="https://cdn.maptiks.com/maptiks-gmaps.min.js"></script> 
<script>maptiks.trackcode=your Trackcode;</script>

Add the following as part of the map object in the map initialization. This will be the name of your map on the Maptiks dashboard.

maptiks_id: "your ID",

Below is an example of how it will look with the Maptiks code included.

<!doctype html> 
<html> 
<head> 

   
  <style>html, body, #map { height: 100%; margin: 0; }</style> 
</head> 
<body> 
  <div id="map"></div> 

   
  <script src="https://maps.googleapis.com/maps/api/js?v=3&key={YOUR_GOOGLE_API_KEY_HERE}"></script> 

   
  <script src="https://cdn.maptiks.com/maptiks-gmaps.min.js"></script> 
  <script>maptiks.trackcode='your Trackcode';</script>  <script> (function(google) {  'use strict'; // MAP  var map = new google.maps.Map(document.getElementById('map'), { center: { lat: 51.42, lng: -116.22, }, zoom: 13, maptiks_id: "your ID", }); })(window.google); </script> </body> </html>

This guide assumes that you already have a Web Application built with Web AppBuilder for ArcGIS installed locally on your computer.
If you don’t already have an application, you can follow the ArcGIS Developer tutorial available here:
Web AppBuilder for ArcGIS

Click the link below to download the Maptiks tracking widget for Web AppBuilder[16M – github].
https://github.com/sparkgeo/wab-maptiks-widgets/archive/master.zip
Or you can visit our github repo for more information.
https://github.com/sparkgeo/wab-maptiks-widgets/
Unzip the zip file and move the folder MaptiksWidget into your widgets folder:
{path/to/WAB}/server/apps/{appid}/widgets

Widgets are associated with the theme in the config file – the default theme if added to the WAB file,
or the current theme if added to the app file. If you change the theme of the app after updating the config file,
it will be overwritten, and this modification will be lost.

Modify the config.json file in {path/to/WAB}/server/apps/{appid}.

Add the following to the widgets object:

{ 
  "uri": "widgets/MaptiksWidget/Widget" 
}

The end result will look like this:

"widgetOnScreen": { 
  "widgets": [ 
    { 
      "uri": "widgets/MaptiksWidget/Widget" 
    }, 
    { 
      "uri":"themes/FoldableTheme/widgets/HeaderControl" 
      ...

If the file is minified, search for “widgetOnScreen“, then you can paste this line

{"uri":"widgets/MaptiksWidget/Widget"},

After the first open square bracket in “widgets“.

"geometryService": "", "links": [], "widgetOnScreen":{"widgets":[{"uri":"themes/FoldableTheme/widgets/..."}

The end result will look like this:

"geometryService": "", "links": [], "widgetOnScreen":{"widgets":[{"uri":"widgets/MaptiksWidget/Widget"}, {"uri":"themes..."}

Save the file and refresh the Web AppBuilder. The Maptiks widget should show up in the Widget tab.

Click on the configure icon in the bottom right corner of the icon.
Fill in the following information in the Configure Maptiks dialog.
Set Maptiks Trackcode: your Trackcode
Set Maptiks ID: your ID
Click OK to save changes.
Your Web AppBuilder map will be tracking now. Click next on this page to confirm that Maptiks is receiving metrics.

Leaflet

Paste the following snippet after the Leaflet Library has been loaded, and before it’s initialized.

 
<script src="https://cdn.maptiks.com/maptiks-leaflet.min.js"></script> 
<script>maptiks.trackcode='your Trackcode';</script>

Add the following as part of the map object in the map initialization. This will be the name of your map on the Maptiks dashboard.

maptiks_id: "your ID",

Below is an example of how it will look with the Maptiks code included.

<!doctype html> 
<html> 
<head> 
   
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css"> 
</head> 
<body> 
  <div id="map" style="width: 600px; height: 400px;"></div> 

   
  <script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script> 

   
  <script src="https://cdn.maptiks.com/maptiks-leaflet.min.js"></script> 
  <script>maptiks.trackcode='your Trackcode';</script>  <script> (function(L) {  'use strict'; // MAP  var map = L.map('map', { center: [51.42, -116.22], zoom: 13, // ENTER THE MAP'S NAME HERE (USER DEFINED)  maptiks_id: "your ID", }); // LAYER  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', // ENTER THE LAYER'S NAME HERE (USER DEFINED)  maptiks_id: 'YOUR_LAYER_NAME_HERE', }).addTo(map); })(window.L); </script> </body> </html>

After you’ve installed that, go to your map in a browser either locally or on the web.
Your map should be tracking interactions now. Click continue on this page to check.

Mango Maps

This guide assumes that you already have a Mango Maps account. To learn more, visit
Mango Maps

After you login into Mango Maps, select ANALYTICS from the sidebar of your account.
Add your Trackcode (your Trackcode) to the Maptiks Tracking ID Field.
Click Save.

OpenLayers

JS apps (React, Angular, Vue)

This document described how to use Maptiks on a web map that has been written as part of a modern JavaScript (ECMAScript/ES module based) web application which uses a module bundler like webpack and a package manager like npm or yarn. This is likely to apply to any application that uses a modern JavaScript framework like React, Vue or Angular etc.

The issue occurs because the web map library (Mapbox GL JS, OpenLayers, Esri JS API, Leaflet etc) is only being imported as an ES module in the relevant file or component that it is used in.

The following describes the steps to work around this issue when using Mapbox GL JS, but they could be applied to any other web map library.

Add the Mapbox GL JS library from CDN in a <script> element before Maptiks is imported in your application’s index.js (as described in the Maptiks install wizard):

 
<!-- MAPBOX GL LIBRARY --> 
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js"></script> 

<!-- MAPTIKS LIBRARY --> 
<script src="https://cdn.maptiks.com/maptiks-mapbox-gl.min.js"></script> 
<script>maptiks.trackcode='...track code...';</script>

This will add the mapboxgl library to the window object.

If the mapboxgl ES module is being imported in a JS file, remove it:
```
import { mapboxgl } from 'mapbox-gl'
```
In the same file, create a variable for mapboxgl from what was previously added to the window object:
```
const { mapboxgl } = window 
// OR const mapboxgl = window.mapboxgl
```

Setup

Step 1 – Add a Site

After creating an account with us at https://maptiks.com, you’ll be prompted tocreate a new site. Click the big button.

Step 2 – Track A Map

To setup your map, make sure you have a track code setup first. Please view Step 1.

Once you have your site setup, You’ll need to click on “Add a map”
Select the type of mapping platform you are using.

Step 3 – Track Multiple Maps

Tracking multiple maps on a domain is easy. You’ll simply need to follow the same steps in Step 2.

The final step is to make your map aware. You just need to add the following two lines after your library, but before your code, this order is important. This example is for leaflet, but if you’re using something else, the setting page will give you examples for them too.The following table shows our rules for file naming between different libraries. Plugins follow the template: maptiks-xxxxxx.min.js.

Library	Short Code	File
Leaflet	leaflet	//cdn.maptiks.com/maptiks-leaflet.min.js
Google Maps	gmaps	//cdn.maptiks.com/maptiks-gmaps.min.js
OpenLayers 3	ol3	//cdn.maptiks.com/maptiks-ol3.min.js

Step 4 – Adding More Control (Intermediate)

Using Maptiks is as simple as adding the scripts to your library block, but that just puts it into automatic. Like a top end sports car, you’ll get the best performance by learning how to use it in manual.

Maptiks identifies everything by its URL by default, so to prevent data fragmentation from name changes and folder moves, lock in its identity by attaching the property maptiks_id to tracked maps and layers. This also has the benefit of displaying a more readable name on your reports.

Identifying a map

// a leaflet map without any layers
var map = new L.Map('map-canvas', {
  center: [55, -100],
  zoom: 4,
  maptiks_id: 'My Leaflet Map'
});

Don't forget to add layers too!

// a leaflet XYZ layer
var layer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  attribution: '©  +
    'copyright">OpenStreetMap contributors',
  maptiks_id: 'My Tile Layer'
}).addTo(map);

Step 5 – Getting Creative (Advanced)

Although the Maptiks ID is good for preventing map/layer data fragmentation, sometimes you want to do that, and measure it. I’m talking A/B testing here.

For example, layer A has started to slow down sometime after you added two new feature layers, X and Y. Not sure which one is causing the negative interaction, you remove a layer at a time and record the map’s performance at each variation. To make sure the data isn’t all lumped together, you assign each variant a separate Maptiks ID, and serve them up at random to your test group.

Apart from performance, your variations can include different styles, controls, placements, or anything you can think of.

Slow Map

// all layers
var map = new L.Map('map-canvas', {
  center: [50, -100],
  zoom: 4,
  maptiks_id: 'My Leaflet Map'
});

var layerA = L.tileLayer('http://{s}.sparkgeo.com/layer-a/{z}/{x}/{y}.png',
  {maptiks_id: 'Layer A'}
).addTo(map);

var layerX = L.tileLayer('http://{s}.sparkgeo.com/layer-x/{z}/{x}/{y}.png',
  {maptiks_id: 'Layer X'}
).addTo(map);

var layerY = L.tileLayer('http://{s}.sparkgeo.com/layer-y/{z}/{x}/{y}.png',
  {maptiks_id: 'Layer Y'}
).addTo(map);

Test A

// layer Y removed
var map = new L.Map('map-canvas', {
  center: [50, -100],
  zoom: 4,
  maptiks_id: 'My Leaflet Map - Y removed'
});

var layerA = L.tileLayer('http://{s}.sparkgeo.com/layer-a/{z}/{x}/{y}.png',
  {maptiks_id: 'Layer A'}
).addTo(map);

var layerX = L.tileLayer('http://{s}.sparkgeo.com/layer-x/{z}/{x}/{y}.png',
  {maptiks_id: 'Layer X'}
).addTo(map);

Test B

// layer X removed
var map = new L.Map('map-canvas', {
  center: [50, -100],
  zoom: 4,
  maptiks_id: 'My Leaflet Map - X removed'
});

var layerA = L.tileLayer('http://{s}.sparkgeo.com/layer-a/{z}/{x}/{y}.png',
  {maptiks_id: 'Layer A'}
).addTo(map);

var layerY = L.tileLayer('http://{s}.sparkgeo.com/layer-y/{z}/{x}/{y}.png',
  {maptiks_id: 'Layer Y'}
).addTo(map);

Analytics App

Overview

We’re excited to announce that we’ll be deploying a brand new UI that will provide even more mapping analytics

Dashboard

The dashboard summarizes data in one beautiful place, including web map activities and map performance. It provides a summary of key metrics:

Bounce rates
Avg. visitor duration
Device usage

Date Range

Select a date range for your data. Please note that FREE plans have a limit of 4 day history. For unlimited history, you must upgrade to the Developer Plan or Enterprise Plan.

Web Map Activities

Activities

With activities, you can track exactly how many activities web map viewers are making on your web map. This includes zooms, pans and marker clicks. Total activities are the sum of the 3 activities.

The bar chart displays the number of activities on the x axis and the number of users on the y axis.

Heatmap

The heatmap provides an overlay of web map activities in one place. Any activity performed will display in the heatmap with higher intensity colours representing more activities in relation to others.

Map Performance

Performance

Map performance provides detailed performance data on layers. See layer load times and view error tiles in one place.

Others

How do you delete a tracked map?

If you have multiple maps associated to a trackcode, and you’d like to remove a map, you can do so by hiding it. Maptiks does not delete tracked maps, but you can click on the hide button to archive the map and after a period of time, the map will be archived.

How to group map urls

If you’re running into an issue where you’re seeing multiple URLs for the same map under a Trackcode, don’t worry. You can group them together by adding grouping ID in your Javascript.

By default, Maptiks identifies a map by the path it is located on. However, when multiple paths point to the same map, your map data becomes fragmented.

Group URL’s together with a Maptiks ID.

To fix this, you’ll have to group the URLs together by adding a Maptiks ID. By adding the Maptiks ID, you’re now tracking the map by Trackcode ID as well as by Maptiks ID, and all URLs of the map with the same Trackcode ID and Maptiks ID will group together as one.

To do this, you’ll have add the Maptiks ID to your web maps Javascript file in the map constructor section.

Add the ID below

maptiks_id: ‘TITLE OR NAME’,

Paste it in your Javascript file within the Map Constructor code.

Example of Where to Paste in Google Maps

Example of Where to Paste in LeafletJS

Example of Where to Paste in Open layers

Can we host Maptiks on our own servers?

No. Not exactly. We can only provide Maptiks for client hosting if you use Amazon Web Services. Please contact sales for further discussion regarding implementation and pricing.

What does Maptiks track?

Maptiks (map analytics) is an extension available for all major web-mapping libraries. Analytics collected by this extension are sent to our servers here at https://maptiks.com, accessed through our site or API. By just adding the minimum required two lines, the following analytics are captured automatically, custom tracking available with a bit of configuration.

Library	Raster Layers	Vector Layers	Map Features	Layer Features	IE8 Support
Leaflet	XYZ, WMS	coming soon	session, pan/zoom activity	session, load time, error	Yes
Google Maps	XYZ, WMS, Google	coming soon	session, pan/zoom activity	session, load time, error	Yes
OpenLayers 3,4	XYZ, WMS	coming soon	session, pan/zoom activity	session, load time, error	No

Basic Viewer
Edit
Filter
Find, Edit, and Filter
Finder
GeoForm
Information Lookup
Local Perspective
Minimalist
Public Information
Simple Map Viewer
Story Map Basic
Summary Viewer

Which Esri Story Maps do you integrate with?

Story Map Journal
Story Map Series
Story Map Shortlist beta
Story Map Swipe and Spyglass

Frequently Asked Questions

Integrations

ArcGIS Online

Add Maptiks Enabled templates to your group

Create some Maptiks Enabled Apps

Esri 3 & 4

Esri JS

Esri Story Map

Google Maps

WebApp Builder

Leaflet

Mango Maps

OpenLayers

JS apps (React, Angular, Vue)

Setup

Step 1 – Add a Site

Step 2 – Track A Map

Step 3 – Track Multiple Maps

Step 4 – Adding More Control (Intermediate)

Step 5 – Getting Creative (Advanced)

Analytics App

Overview

Web Map Activities

Map Performance

Others

How do you delete a tracked map?

How to group map urls

Can we host Maptiks on our own servers?

What does Maptiks track?

What do you currently integrate with?

Do you integrate with Google Analytics?

Which ArcGIS Online templates do you integrate with?

Which Esri Story Maps do you integrate with?