Using GeoStream with JavaScript

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

This topic provides an overview of using GeoStream with JavaScript.

Benefits of Using JavaScript

In addition to the benefits of using GeoStream, the additional benefits of using the JavaScript client include:

No installation required - easy deployment
Simple to upgrade
Cross Platform support (for example, applications work in both Internet Explorer and Mozilla Firefox; on PC, Mac and Linux)
Suitable for web applications

API reference

A complete reference for the JavaScript API can be found at JavaScript API Reference.

Example Code

This example demonstrates how to add a Map to a page.

By default, a newly created map object has its DOM tree appended to the document body. To create a map, make a call such as the following:

JavaScript

Copy

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

The following example 'geobase.js' code is taken from one of the JavaScript Tutorials. It uses a function such as the one shown above to create a simple interactive map:

Note
In addition to the JavaScript tutorials, sample files are included in the GeoBase installation folder under 'geostream\server\scripts'.

Copy

<%@ Page="" Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Simple Map Demo</title>
      <style type="text/css">body {font-family: sans-serif; font-size: 11px;}</style>

      <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 customise 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'});
  };

      </script>
    </head>
    <body onload="main ();">
      <div id="main_map" style="width: 640px; height: 480px;"></div>
    </body>
  </html>

Note
If the error "The page cannot be found" appears, then a GeoStream server has not been set up correctly on your system, or http://localhost/GeoStream/scripts/tutorial.simple-map.aspx is not accessible or does not exist. See Troubleshooting a GeoStream Server for more information.