How do I visualize my scan positions in a map?
Display the locations where your QR Codes have been scanned on a map.
- Submitting scan positions with GPS
- How to create a map showing QR Code scan locations
Submitting scan positions with GPS
When you activate the GPS tracking function of your QR Codes, people who scan your QR Codes are asked, if they want to submit their GPS position. If they allow their location being sent, we store a lng/lat value that you can use to render a scan location on a map. The following tutorial explains how you can use our QR Map widget to embed it in your website and show the scan locations of your users.
To embed a map on your website you require an active account, a valid API key and a Google Maps API key. Please set your Google Maps API key in user settings or in the branding section of your account that the map can be rendered.
How to create a map showing QR Code scan locations
1. Add the script to your page
Insert the following script with your subdomain and API Key in your webpage
2. Create a div layer where your map will be embedded
Place the <div> on your page, where the map should be displayed:
<div style="width:100%;height:500px;" id="map_canvas"></div>
3. Add optional visualization parameters
- lng / lat parameter will center the map on the given position
- zoom - Center the map at a given zoom level (min=1 | max=12)
- showlabels - If you set to 0, no label will be displayed on a pin when hovering.
- displayinfoonclick - If set to 0, no information is displayed when you click on the icon.
tagmap.js? ... &lng=16.3691234&lat=48.2055264&zoom=12
4. Display scan positions
If you want to display where a single trackable QR Code with the activated GPS function has been scanned, just add the optional parameter id in the script URL and set the value to an id of one of your created QR Codes. The id of a QR Code is the shorted URL (e.g. 7W). Instead of showing your geo tagged QR Codes that are assigned to a fixed location, the scan locations of a single QR Code are shown on the map.
tagmap.js? ... &id=7W
If you want to display more than one QR Code with GPS positions on the map just add multiple ids separated by a +
tagmap.js? ... &id=7W+SECONDID+THIRDID+...+N_TH-ID
5. Set a time range for the scan times
You can fine tune the statistics by adding a time range parameter:
- set a specific interval from - to date: e.g. &from=2022-02-24&to=2022-02-24
- or set a predefined range: today, yesterday, last7, last31 e.g. &range=today
6. Set a limit of scans per QR Code
You can limit the number of GPS scan positions displayed on the map by setting the limit parameter for each QR Code separated by a +.
If the limit is set to 1, the last scan of the QR Code will be displayed.
tagmap.js? ... &limit=3+2+10
7. Style your QR Map
Instead of using the default QR Code Icons you may use a customized symbol/icon. Always set the absolute URL as the optional parameter icon
tagmap.js? ... &icon=http://qr.domain.com/img/littleone.png
If you are displaying multiple QR Codes (=passing more than on id to the id Parameter) you can set a different icon for each QR Code by adding multiple icon URLs separated by a +
tagmap.js? ... &icon=http://white.qrd.by/img/littleone.png+ http://white.qrd.by/img/anotherone.png
8. Draw a path on the map between scan locations
With the optional Parameter drawpath set to true, a path between the scanned positions of the QR Code will be drawn.
tagmap.js? ... &drawpath=true
QR Map Widget Demo
See the TagMap Widget in action showing scan positions of QR Code submitted via GPS.