Creating a Simple Map

Print this page
Learn more about Verizon Connect GeoBase.
Get information about the latest release

This tutorial demonstrates how to embed a GeoStream map on an active server page.

Tip
See the Full Code section for a full code listing which you can copy and paste into your project.

Walkthrough

Defining GeoStream Settings

First, several settings such as the paths to the GeoStream API include file and GeoStream servers are defined by the AuthenticatedPage ASP.NET class. This allows the same definition to be used across all your webpages.

The AuthenticatedPage class is also responsible for generating the webpage's authentication token. This token is required by all GeoStream servers.

XML

Copy

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>

HTML Code

The HTML and skeleton JavaScript code for this tutorial is shown below. Add this to your file after the definition above.

Note that the JavaScript code is typically placed between the head tags and that the main() function will be called after the page has loaded (using the body's onload property).

Tip
You can separate the HTML code and JavaScript code into separate files if you want, using a regular JavaScript include construct: <script type="text/javascript" src="path_to_js_file" />

The call to GetAPISource writes the path of the GeoBase includes to the webpage source. This line of code is required.

XML

Copy

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Simple Map Demo</title>

    <script type="text/javascript" src="<% GetAPISource (); %>"></script>
    <script type="text/javascript">

      var main = function () {

            // JavaScript code goes here

      }

    </script>

  </head>
  <body onload="main ();">
  </body>
</html>

JavaScript Code

Place the following code inside the main JavaScript function.

This code performs the following actions:

defines the GeoBase namespace, Map object and Size class

sets the GeoStream server and authentication tokens

Caution
This should be done at the start of the entry function (in this case, at the start of main) as these settings are a prerequisite for any GeoStream server requests.

creates a new Map object - 640 pixels wide and 480 pixels high

Note
By default a new Map object will be appended to the document body. To customize this behavior, create a div in the HTML section with the same id or specify a parent configuration option to the Map Constructor. For an example using an HTML div see the Zooming Tutorial.

Note

By default a new Map object will be appended to the document body. To customize this behavior, create a div in the HTML section with the same id or specify a parent configuration option to the Map Constructor.

For an example using an HTML div see the Zooming Tutorial.

JavaScript

Copy

var GeoBase = Telogis.GeoBase;
var Map     = Telogis.GeoBase.Widgets.Map;
var Size    = Telogis.GeoBase.Size;

GeoBase.setService (<% GetService (); %>);
GeoBase.setAuthToken (<% GetToken (); %>);

var map = new Map ({
  id:   "main_map",
  size:  new Size (640, 480)
});

Testing

Load the newly created page in a web browser and you should see something similar to the following:

Tip
Don't see a map? Refer to Troubleshooting a GeoStream Server

Note that the map has panning (click and drag the map) and zooming (use the mouse scroll wheel) behavior enabled by default.

Centering the Map

As a quick introduction to working with the map object we will center the map on a specified location when the map loads.

You could, for example, use this on your company web site to help visitors find your offices (you might want to also increase the zoom level (0-19), using map.setZoomIndex(level)).

Modify the map constructor as follows to center the map on a given latitude/longitude coordinate when loaded:

JavaScript

Copy

var map = new Map ({
  id:   "main_map",
  size:  new Size (640, 480),
  center: new Telogis.GeoBase.LatLon(34,-117.5)
});

Disabling User Interaction

In some instances it may be desirable to prevent the user from panning and zooming by interacting directly with the Map object. In these instances, use the setUiEnabled property of the Map to disable interaction. This may be done like so:

JavaScript

Copy

var map = new Map ({
  // ... constructor arguments, as usual
});

map.setUIEnabled(false); // disables mouse panning and zooming

Next Tutorial

In the next tutorial we will demonstrate how to add a traffic layer.

Full Code

XML

Copy

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Simple Map Demo</title>

      <script type="text/javascript" src="<% GetAPISource (); %>"></script>
      <script type="text/javascript">

      var main = function () {

        var GeoBase = Telogis.GeoBase;
        var Map     = Telogis.GeoBase.Widgets.Map;
        var Size    = Telogis.GeoBase.Size;

        // the call to set the internal GeoBase authentication token should be made at 
        // the start of the entry function, as it is a prerequisite for any requests 
        // made to the server.

        GeoBase.setService (<% GetService (); %>);
        GeoBase.setAuthToken (<% GetToken (); %>);

        // by default, a newly created map object has its DOM tree appended to the 
        // document body. To customize where the map is located, either create in the 
        // HTML section a div with the same ID, or specify a "parent" configuration option.

        var map = new Map ({
            id:   "main_map",
            size:  new Size (640, 480)
        });

      };

      </script>
    </head>
    <body onload="main ();">
    </body>
  </html>