Introduction

This tutorial demonstrate four techniques that may be used to set, modify or prohibit map zooming, either programatically or with a mouse:

  • • using GeoBase's 'zoom to rectangle' feature (using the DRAG_ZOOM property) to zoom the map to a selection box
  • • disabling the scroll-wheel's default zooming (and panning) behavior
  • • using the setZoomIndex(number) function to specify a zoom level.
  • • using the Slider and SliderSkin classes to create a zoom slider on the map.

Prerequisites

This tutorial assumes familiarity with JavaScript. You will need a moderately-specified desktop computer. Experience with digital mapping technology is assumed only at a low level.

Setup

Before we can start using GeoBase we must obtain a copy of the software development kit (SDK). A 30-day trial of the SDK is available for download on the Telogis Dev website. Download and install the SDK. If you don’t already have a license you will be guided through the simple process to obtain a trial license. Choose your sample data set (HERE or TomTom) and region (California and Nevada, or the UK and Ireland; this tutorial assumes and requires USA map data).

The SDK installer will configure IIS on your local machine to host a GeoStream server. GeoStream is a GeoBase technology that allows remote access (through a web-browser, or .NET application) to your application and associated map data.

You can test your GeoStream installation by visiting this address.

http://localhost/GeoStream/scripts/tutorial.simple-map.aspx

Creating the Project

This project will consist of a single ASPX file. Open a text editor and create a file named ‘zoom-map.aspx’. Save this file in ‘C:\Program Files\Telogis\GeoBase\GeoStream\server\scripts’.

Throughout this tutorial we'll add code to this file to create our application.

Note: The GeoBase SDK installer configured Microsoft IIS to host a website on your local computer. This website is accessible through the URL ‘http://localhost/GeoStream’. The files contained in this website are the files in your ‘C:\Program Files\Telogis\GeoBase\ GeoStream\server\’ directory. For this tutorial we ask that you create your ASPX file in the scripts subdirectory to make your code easier to write.

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 and should be placed at the top of your page, above the opening html tag.

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

HTML

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). Note that you may separate the HTML code and JavaScript code into separate files if you wish, 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.

  <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title>Map Zooming 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 ();">
	<div id="div_main_map" style="border: 1px solid black;</div>
    </body>
  </html>

JavaScript

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
  • • creates a new Map object that is placed in the div_main_map HTML div. Because no size has been specified, the map will be created to fill the HTML division (that is, 640x480).
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),
  dragBehavior: Map.DRAG_ZOOM
});

Load the newly created page in a web browser. After clicking and dragging on the map you should see something similar to the following:

Zoom Tutorial 1

Set the Default Zoom

Add the following line of code below the map object constructor:

map.setZoomIndex(12); // set a map zoom level (0-19) higher is closer

Reload the page in a web browser. The map is now zoomed closer to the map, with minor surface streets now visible. Note that it is still possible to zoom in and out using the scroll-wheel of your mouse.

Zoom Tutorial 2

Disabling Mouse Zoom

Next, add the following line of code below the map object constructor:

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

Reload the page in a web browser. Note that mouse panning and zooming using the scroll-wheel are now disabled, as is the zoom to rectangle feature.

Using a Zoom Slider

Now we will use the Slider and SliderSkin classes to create a map slider that controls the zoom level of the map. First, paste the following line of code to the script collection near the top of the page (paste directly below or above <script type="text/javascript" src="<% GetAPISource (); %>"></script>). This will add a JavaScript include file:

<script type="text/javascript" src="skin.slider.translucentblack.horizontal.js"></script>

NOTE: This .js file is included in the scripts folder in a default GeoBase SDK installation.

Next, add the following variables to the main function. These define the Slider and SliderSkin classes:

var Slider = Telogis.GeoBase.Widgets.Slider;
var SliderSkin = Telogis.GeoBase.Widgets.SliderSkin;

Lastly, construct a horizontal slider using the translucent black skin defined in the included JavaScript file (skin.slider.translucentblack.horizontal.js). Do this by adding the following code below the map object constructor:

var horizontal = new Slider ({
    map: map, 
    skin: SliderSkin.translucentBlackH
});

Reload the page. You should see a slider bar in the upper left-hand corner of the map.

Zoom Slider

Complete Code

<%@ Page Language="C#" Src="AuthenticatedPage.aspx.cs" Inherits="AuthenticatedPage" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Map Zooming Demo</title>

<script type="text/javascript" src="<% GetAPISource (); %>"></script>
 <!-- The following file is added as an include -->
<script type="text/javascript" src="skin.slider.translucentblack.horizontal.js"></script>
<script type="text/javascript">

var main = function () {

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

    // 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 ({
        dragBehavior: Map.DRAG_ZOOM,
        size:  new Size (640, 480),
        id: "div_main_map"
    });

    var horizontal = new Slider ({
        map: map, 
        skin: SliderSkin.translucentBlackH
    });

    //map.setZoomIndex(12); // set a map zoom level (0-19) higher is closer
    //map.setUIEnabled(false); // disables mouse panning and zooming

};

</script>
</head>
<body onload="main ();">
<div id="div_main_map" style="border: 1px solid black"></div>
</body>
</html>

Published, Jul 7th 2016, 22:00

Tagged under: geobase javascript maps