Frequently Asked Questions

Drop us an email if you couldn’t find an answer to your question here.

Integrations


ArcGIS Online
    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

  1. Click Content at the top of the page.

  2. Click Create and select Using a Template.

  3. Select one of the new Maptiks Enabled templates that you just added.

  4. Click CREATE WEB APP.

  5. 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:

  6. 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

  7. Click Apply. Your map should now be tracking metrics.

  8. Click Continue on this page to check to see if Maptiks is receiving metrics.

ArcGIS Online documentation

View ArcGIS Online documentation

Esri3
  1. 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>
  2. 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>
  3. After you’ve installed that, go to your map in a browser either locally or on the web.

  4. Your map should be tracking interactions now. Click continue on this page to check.

Esri JS
  1. 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> 
  2. 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> 
  3. After you’ve installed that, go to your map in a browser either locally or on the web.

  4. Your map should be tracking interactions now. Click continue on this page to check.

Google Maps
  1. 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> 
  2. 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>
Leaflet
  1. 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> 
  2. 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>
  3. After you’ve installed that, go to your map in a browser either locally or on the web.

  4. Your map should be tracking interactions now. Click continue on this page to check.

Mango Maps
  1. After you login into Mango Maps, select ANALYTICS from the sidebar of your account.

  2. Add your Trackcode (your Trackcode) to the Maptiks Tracking ID Field.

  3. Click Save.

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

     
    <script src="https://cdn.maptiks.com/maptiks-ol.min.js"></script> 
    <script>maptiks.trackcode='d395bdd2-a45c-44cd-9d62-334ca3486c22';</script>
  2. 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: "alan",

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

    <!doctype html> 
    <html> 
    <head> 
      <link rel="stylesheet" href="http://openlayers.org/en/v4.6.5/css/ol.css"> 
      <style> 
        .map { 
          height: 100%; 
          width: 100%; 
        } 
      </style> 
    </head> 
    <body> 
      <div id="map"></div> 
    
      <script src="http://openlayers.org/en/v4.6.5/build/ol.js"></script> 
       
      <script src="https://cdn.maptiks.com/maptiks-ol.min.js"></script> 
      <script>maptiks.trackcode='d395bdd2-a45c-44cd-9d62-334ca3486c22';</script> 
    
       
      <script type="text/javascript"> 
        var map = new ol.Map({ 
          target: 'map', 
          view: new ol.View({ 
            center: ol.proj.fromLonLat([-116.22, 51.42]), 
            zoom: 4, 
          }), 
          // ENTER THE MAP'S NAME HERE (USER DEFINED) 
          maptiks_id: "alan", 
          layers: [ 
            new ol.layer.Tile({ 
              source: new ol.source.OSM(), 
              // ENTER THE LAYER'S NAME HERE (USER DEFINED) 
              maptiks_id: 'YOUR_LAYER_NAME' 
            }) 
          ] 
        }); 
      </script> 
    </body> 
    </html>
  3. After you’ve installed that, go to your map in a browser either locally or on the web.

  4. Your map should be tracking interactions now. Click continue on this page to check.

Esri Story Map
  1. After you login to ArcGIS Online, click the Content tab.

  2. Select the Story Map you wish to add Maptiks to or create a new Story Map.

  3. 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.

  4. 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
  5. 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.

  6. From the overview tab, click Configure App to go to your app in edit mode.

  7. Click on the Settings tab (may look different depending on your Story Map Type).

    Or it could look like this

  8. 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:

  9. Click Apply.

  10. Click Save to save changes to your map.

WebApp Builder
  1. 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/

  2. 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.

  3. 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.

  4. 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.

  5. Your Web AppBuilder map will be tracking now. Click next on this page to confirm that Maptiks is receiving metrics.

Setup


Step 1 – Add A Track Code

After creating an account with us at https://maptiks.com, you’ll be prompted tocreate a new track code.. 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.

  1. Once you have your site setup, You’ll need to click on “Add a map”
  2. 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.

LibraryShort CodeFile
Leafletleaflet//cdn.maptiks.com/maptiks-leaflet.min.js
Google Mapsgmaps//cdn.maptiks.com/maptiks-gmaps.min.js
OpenLayers 3ol3//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 market 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.

LibraryRaster LayersVector LayersMap FeaturesLayer FeaturesIE8 Support
LeafletXYZ, WMScoming soonsession, pan/zoom activitysession, load time, errorYes
Google MapsXYZ, WMS, Googlecoming soonsession, pan/zoom activitysession, load time, errorYes
OpenLayers 3,4XYZ, WMScoming soonsession, pan/zoom activitysession, load time, errorNo
What do you currently integrate with?

We Integrate with Google Maps API, LeafletJS and Open Layers 3.

Do you integrate with Google Analytics?

No. Unfortunately it isn’t possible at this moment to integrate with Google Analytics.