Skip to content

Technical Requirements

To use Live Data your tour and your server must be able to communicate to pass information back and forth using the MapsAlive API. The requirements for using Live Data are:

  • Your server must have a web service that can provide data in response to Live Data requests
  • You must write JavaScript that can make and respond to Live Data requests
  • Your JavaScript and server must satisfy security requirements for server communication

To help you get started with Live Data, this user guide contains URLs for web services that you can use to evaluate and test Live Data without having to first create your own web service. It also provides JavaScript that you can copy/paste, as well as code samples for simple web services written in popular programming languages.

Web Service

A web service is software on a server that can return data in response to an HTTP request made to it over the internet. The software is commonly written in a scripting language appropriate for the server. The script receives a Live Data request from your tour and responds with the requested data. Learn about web services.

JavaScript

To use Live Data you must be familiar with using the JavaScript programming language. You'll use JavaScript to make requests for Live Data. If you use the liveData.requestData method, you'll also use JavaScript to handle the data that the server returns in response to a request. This user guide provides many examples of using JavaScript for these purposes.

Server Communication

This section only applies if the JavaScript you use to make Live Data requests resides on a different server than the web service that responds to the request. It won't apply if, for example, your JavaScript is in the Custom HTML JavaScript field for your tour and you host the tour yourself on the same server that hosts the web service. It also won't apply even if the tour is hosted on the MapsAlive server provided that the JavaScript making Live Data requests is contained in an external file that is hosted on the same server that hosts the web service.

Browsers and servers support something called the same-origin policy. The policy prevents malicious coders from creating web pages that steal web users' information or compromise their privacy. It provides this protection by preventing JavaScript that is running on one website from interacting with resources on another website, that is, resources that are not on the same website, unless the other website explicitly allows it.

As an example, the policy will prevent you from making a Live Data request using JavaScript that is hosted on one server and requests data from another server because that would be a cross-origin request. The browser will ignore the Live Data request and report a CORS error in the browser's developer console.

You can allow cross-origin requests to your server from your Live Data JavaScript by having the server emit an Access-Control-Allow-Origin response header.

If the server emits the header, but in your Live Data request you mistype the URL for the web service, you will get a CORS error, not a 404 error, because there will be no header for the mistyped URL. If you are getting a CORS error, check carefully that the header is being emitted properly and that the URL in your Live Data request is correct.

The examples below show how to emit the Access-Control-Allow-Origin header.

PHP
Code the line below in the service.php file for your web service. Or omit the line and set the header in the .htaccess file as explained below. Do not do both because that will emit two headers which will cause a CORS error. 

header('Access-Control-Allow-Origin: *');

Python or PHP on Apache
Code the line below in the .htaccess file for the directory (or parent directory) containing the web service.py file. For PHP, do this instead of emitting the header from the .php file as explained above. 

Header Set Access-Control-Allow-Origin "*"

ASP.NET on IIS 7 - IIS 10
Add the code below to the web.config file for the folder containing the web service.asmx file. 

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>