MapGuide Application Demo Sample-Hello, mapguide!

Figure 3?4 shows the development process of the MapGuide-based Web application, which can be divided into five phases throughout the development process. In the diagram, the rectangle represents the task, the ellipse is used by the task or the entity created by the task, and the arrows represent the data stream.

1) Load the data of the file type, configure the connection to the external database, and extend the feature data by joining a feature source to a feature source.

2) Create a layer by referencing the data from the feature source and applying a style to the feature.

3) Combine layers to create a map.

4) Publish the map via the Internet or intrant, enabling users to browse the map through the client.

5) Add new features to server side and client using the MapGuide API.

Figure 3?4 MapGuide Application development process

On the open source MapGuide site, map data for Sheboygan (Sheboygan) County, Wisconsin, USA (http://download.osgeo.org/mapguide/releases/2.0.0/samples/ SHEBOYGAN.MGP) two times for developers to learn and use. The map data is a MapGuide resource bundle file, which uses the zip file format and changes its file suffix to zip to extract the files from the compressed software such as WinZip or WinRAR. Use the MapGuide site Manager to load the resource bundle, including data, layers, maps and other information in the resource bundle for one-time loading into the mapguideserver, please refer to 8.2.6.1 for detailed steps.

In this section we introduce the development process of mapguide by publishing the map data to the internet and adding a "Hello mapguide" command as an example. To specifically describe the MapGuide development process, we need to decompress this resource bundle and use only the SDF data files in it. After the resource bundle file is decompressed, the following SDF files are found in the folder "/library/samples/sheboygan/data". , "" represents the root folder of the extracted files.

L BUILDINGOUTLINES.FEATURESOURCE_DATA_BUILDINGOUTLINES.SDF

L CITYLIMITS.FEATURESOURCE_DATA_CITYLIMITS.SDF

L HYDROGRAPHICLINES.FEATURESOURCE_DATA_HYDROGRAPHICLINES.SDF

L HYDROGRAPHICPOLYGONS.FEATURESOURCE_DATA_HYDROGRAPHICPOLYGONS.SDF

L ISLANDS.FEATURESOURCE_DATA_ISLANDS.SDF

L LANDUSE.FEATURESOURCE_DATA_LANDUSE.SDF

L PARCELS.FEATURESOURCE_DATA_PARCELS.SDF

L RAIL.FEATURESOURCE_DATA_RAIL.SDF

L ROADCENTERLINES.FEATURESOURCE_DATA_ROADCENTERLINES.SDF

L SOILS.FEATURESOURCE_DATA_SOILS.SDF

L TREES.FEATURESOURCE_DATA_TREES.SDF

L VOTINGDISTRICTS.FEATURESOURCE_DATA_VOTINGDISTRICTS.SDF

1. Loading data

Before you create a map, you need to let mapguideserver access the data, and MapGuide Studio provides three ways to do so.

Loading data of a file type, such as DWG, SHP, SDF, or image files, in such a way that the data is uploaded to the Mapguideserver repository, allowing you to access the data more quickly.

L Configure connections to SDF, SHP, and image files in such a way that only a link to the data source is saved in the Mapguideserver repository, capable of storing datagrams on mapguideserver or other computers.

L Configure a connection to a database or Web service, such as Oracle, ArcSDE, SQL Server, or WMS.

Data Source Type	Method
Autodesk DWG, DXF	Gta5-In
Autodesk DWF	Gta5-In
Autodesk SDF	Load or configure a connection
SHP (ArcView shapefiles)	Load or configure a connection
Raster formats (. Bil,. bmp,. Cal,. ECW,. Jpg/.jpeg,. png,. Sid,. Tif/.tiff,. TGA)	Load or configure a connection
ArcSDE Database	Configure the connection
Mysql	Configure the connection
Microsoft SQL Server	Configure the connection
ODBC databases (Microsoft Access, Excel etc.)	Configure the connection
Oracle Database	Configure the connection
Web Map Service (WMS)	Configure the connection
Web feature Service (WFS)	Configure the connection

Table 3?1 How to access different data types

In this section, we use the Load method, MapGuide studio provides the onboarding process (load Procedure) to simplify the loading of data. The onboarding process is essentially a script for loading data, and you can use the onboarding process to load the data yourself into the server itself. The loading process defines the location of the original data, the rules of conversion, the location of the data on the server, and so on. You can periodically run the onboarding process to update the spatial database of file types on the server to ensure that the data on the server is up to date.

The process of loading Sheboygan map data is as follows:

1) Create the Resource Directory "Samples/sheboygan".

To organize map data effectively, we typically create resource catalogs that place different kinds of resources in different directories. You can create a directory by selecting the root node in the Web browser (site Xplorer) and choosing the context menu "New Folder".

2) Create onboarding process

Select all the SDF files under "/library/samples/sheboygan/data" in the folder and drag them to the resource folder "Samples/sheboygan" in the Web browser (site Explorer). A new loading process panel is now on the right of the Web browser, which includes a list of files to load, and we can also add many other files to the file list. Finally, click on the "Load Resources" button to start loading the data.

In the new onboarding process panel, the "How does you want to Transform the data" section is used to select the coordinate system of the dataset. In general, only when the data itself does not include the coordinate system information, you need to set the data coordinate system, this demo sample does not need to set up this part of the content. The want to load the Resources section is used to select the target location to load, and in this demo example we set its value to "Library://samples/sheboygan".

Figure 3?5 User interface for loading process

3) Save loading process

If you intend to run the onboarding process periodically, update the spatial database of file types on the server to ensure that the data on the server is up to date, then you need to save the new onboarding process. Click on the "Save" button on the MapGuide Studio toolbar to save the onboarding process.

2. Create a layer

Figure 3?6 the user interface of the layer editor

When loading Sheboygan map data using the onboarding process, assume that the check box "layer (s)" is selected in the "Where do you want to Load the Resources" section, then the load process creates the layer at the same time that the data is loaded. Assuming that the check box "layer (s)" is not selected, you can create a layer using the layer editor of MapGuide Studio. In the layer editor, we are able to create a style for the layer, as well as preview the layer data, which the user interface 3?6 see.

Loading Sheboygan map Data The process of creating a layer is as follows:

1) Create the Resource Directory "Samples/sheboygan/layers".

Right-click the directory "Samples/sheboygan" of the Web browser and select "New->folder" to create the resource directory "Layers".

2) Create a layer

First, right click on the new Resource Directory "Layers" and select Menu "New->layer" to open the Layer editor. Then, in the "Data resource used in this Layer" section, select the data under the resource Directory "Samples/sheboygan/data".

3) Save Layer

Click on the "Save" button on the MapGuide Studio toolbar to save the layer to the resource directory "Samples/sheboygan/layers".

So repeat, create a layer for each data under the resource Directory "Samples/sheboygan/data".

3. Create a Map

A map can consist of one or more layers, and multiple maps can include the same layer at the same time, using the map editor to create and edit a map. To effectively organize the layers in your map, we also often organize multiple layers into a group of layers.

The process of loading Sheboygan map data to create a map is as follows:

1) Create the Resource Directory "Samples/sheboygan/maps".

Right-click on the directory "Samples/sheboygan" of the Web browser and select the "New->folder" menu to create the resource directory "Maps".

2) Create a map

First, right click on the new Resource Directory "Maps" and select Menu "New->map" to open the Layer editor. Then, in the "Layers" section, click button to create a layer group "Base Map". Next, select the newly created layer group and click on the button to join the layer to select the resource Directory "Samples/sheboygan/layers" to the layer group. Repeat this action to add the layer groups and layers that 3?7 see.

For the "Setting" section of the content, generally do not need to change. MapGuide Studio sets the coordinate system of the map (coordinate system) to the coordinate system of the first added, coordinate system layer, and proactively sets and changes the initial view extent of the map, based on the extent of the layer (Extent) (Initial View).

3) Save Map

Click on the "Save" button on the MapGuide Studio toolbar to name the map "Sheboygan" and save it to the resource directory "Samples/sheboygan/maps".

Figure 3?7 the user interface of the map editor

4. Create a Web layout

Once you have created a map, you need to create a basic Web layout or flexible Web layout to define the user interface and the actions available for the MapGuide Viewer so that users can browse and manipulate the map over the Internet or intranet. The basic Web layout supports the DWF Viewer and the Ajax Viewer, which is an older Web layout that provides a more limited functionality for customizing the viewer's user interface. Flexible Web layout is a fusion-based Web layout that uses templates to define the viewer's user interface, which users can use MapGuide studio to modify, which provides a great flexibility for customizing the user interface of the MapGuide Viewer. For now, flexible web layouts only support the Fusion Viewer. In this section, we will create a basic Web layout and a flexible Web layout for the Sheboygan map, respectively.

The process for creating a basic Web layout for a Sheboygan map such as the following:

1) Create the Resource Directory "Samples/sheboygan/layouts".

Right-click the directory "Samples/sheboygan" of the Web browser and select "New->folder" to create the resource directory "Layouts".

2) Create a basic Web layout

First, right-click on the new Resource Directory "Layouts" and choose the Menu "New->web layout->basic Web Layout" To open the basic Web layout editor. Then, in the "map resource used in the This Layout" section, select the map that is displayed in the Web layout, and a basic Web layout can only display a single map. In this example, we select the map "Sheboygan" under the Resource Directory "Samples/sheboygan/maps".

We are able to change the contents of the "Setting" and "Toolbar and Menus" sections, such as "Text for browser title bar" To set the title displayed in the title bar when the viewer is opened in the browser, "display The these component in the viewer is used to set those components to be displayed in the viewer.

3) Save basic Web layout

Click on the "Save" button on the MapGuide Studio toolbar to name the Web layout "Basic Web Layout" and save it to the resource directory "Samples/sheboygan/layouts".

4) Preview the Web layout

Click the "Go" button to the right of the "preview in browser using DWF Viewer" text box to preview the Web layout in the browser using the DWF Viewer; Click "Preview in Browser using AJAX Viewer The Go button to the right of the text box enables you to preview the Web layout in the browser using the Ajax viewer. Users can also preview this Web layout by copying the URL in the text box to the address bar of the browser.

It is important to note that if you want to preview the Web layout in a browser, you must save the Web layout, and the Web layout of the last version number is previewed in the browser. Suppose you want to preview the Web layout before you save the Web layout, just use Web Preview in the Web layout Editor and click the button to preview it.

Figure 3?8 the user interface of the basic Web layout editor

The steps to create a flexible Web layout for a Sheboygan map are basically the same as the steps for creating a basic Web layout, such as the following:

1) Create the Resource Directory "Samples/sheboygan/flexiblelayouts".

Right-click the directory "Samples/sheboygan" of the Web browser and select "New->folder" to create the resource directory "Flexiblelayouts".

2) Create a flexible Web layout

First, right-click on the new Resource Directory "Flexiblelayouts" and choose the Menu "New->web layout->flexible Web Layout" To open the flexible Web layout editor. Then, in the "Select a template for the Web Layout" section, select one of the templates for the web layouts, and the different templates define the user interface style of the different fusion viewer. Next, select the "Map" tab of the "Config parts of the Selected Components" section and select the resource directory in the "Map resource used" section of this layout samples/ Sheboygan/maps "Map" Sheboygan ".

We can customize task panes, toolbars, Legends, right-click menus, selection panes, status bar user interface components by changing the contents of the "Config components of the selected parts" section.

3) Save flexible web layouts

Click on the "Save" button on the MapGuide Studio toolbar to name the Web layout "Aqua" and save it to the resource directory "Samples/sheboygan/flexiblelayouts".

4) Preview the Web layout

Click button "View in Browser ..." to preview the Web layout in the browser using the Fusion viewer. Users can also preview this Web layout by copying the URL in the text box to the address bar of the browser.

As with the basic Web layout, suppose you want to preview the Web layout in a browser, you must save the Web layout. Suppose you want to preview the Web layout before you save the Web layout, just use Web Preview in the Web layout Editor and click the button to preview it.

Figure 3?9 the user interface of the flexible Web layout editor

5. Create a MapGuide application

Remember when learning a lot of programming languages, the professor's first program is mostly "Hello, world!", now let us also experience how to use MapGuide to implement your first MapGuide application-"Hello, mapguide!". Figure 3?10 shows the implementation of this program in the Ajax Viewer, click on the "Hello MapGuide" button, will pop up a dialog box to display the string "Hello, mapguide!".

For basic web layouts and flexible web layouts, the steps to achieve these features are not the same, and we describe how to implement them in basic web layouts and flexible web layouts, respectively.

Figure 3?10 "Hello, mapguide!" Program Demo sample execution effect in Ajax Viewer

5.1 Creating "Hello, mapguide!" in the basic Web layout Program

Create "Hello, mapguide!" in the basic Web layout The procedure requires the following three steps:

1) Create your own definition command "Hello mapguide".

MapGuide supports two types of self-defined commands "Invoke JavaScript" and "Invoke URL". "Invoke JavaScript" is used to invoke JavaScript scripts, which are written by the browser directly, mainly for interacting with the viewer, you can call the viewer API, belong to the client command; "Invoke URL" Used to invoke PHP, ASP. NET or JSP-written webserver extension pages (Web Server Extensions page), these webserver extension pages can invoke MapGuide Web API, which belongs to the webserver-side command.

In this section, we'll use "invoke JavaScript" to invoke the JavaScript function alert (...) Pop up a "Hello, mapguide!" dialog box.

First, in the Web browser, select a basic Web layout that you created earlier, and double-click the node to open the basic Web layout editor. Then, click the HYPERLINK "New Commands" on the head of the basic Web layout editor to open the user interface that 3?11 sees. Next, click the drop-down button "ADD-to-Invoke script" to create a command of type "Invoke script". Finally, in the "Additional Parameters" tab, enter the JavaScript script "alert (" "Hello, mapguide!"); ".

In general, we also give each command a meaningful name, icon, tooltip, and so on, which can be changed in the "Setting" tab. In this section, we name this command "Hello MapGuide", set the ToolTip to "Hello MapGuide", and the icon as the default icon.

Figure 3?11 Basic Web layout user interface for creating commands

2) Add the "Hello mapguide" command to the MapGuide Viewer toolbar.

To invoke this new command, you need to place this command in a toolbar, context menu, or taskbar menu. In this section, we will place this new command on the toolbar.

First, click the HYPERLINK "Toolbar and Menus" on the head of the basic Web layout editor to open the user interface that 3?12 sees. Next, drag the "Hello mapguide" command in the right-side command list to the toolbar's tree list on the left.

Figure 3?12 Adding a command to the Viewer toolbar user interface

3) Save the modified Web layout.

After you save the changed Web layout, copy the URL from the preview in browser using DWF Viewer text box or the preview in browser using AJAX Viewer text box to the browser's address bar, You can use the DWF Viewer or the Ajax Viewer to execute the application in the browser.

5.2 Creating "Hello, mapguide!" in flexible web layouts Program

Flexible Web layouts provide a series of widgets for common functionality that can be tailored to meet certain needs of the user, such as the "Invoke Script" and the "Invoke URL" widget, These two widgets enable the same functionality as the "Invoke Script" and "Invoke URL" commands in a basic Web layout. In this section, we use the "Invoke Script" widget to implement "Hello, mapguide!" Program.

Create "Hello, mapguide!" in flexible web layouts The procedure requires the following three steps:

1) Create the "Hello mapguide" component.

First, select a flexible Web layout that you previously created in the Web browser, double-click the node to open the flexible Web layout editor, and expand the Config components of the selected template to display the user interface that 3?13 sees. Then, select the "Toolbar (Primary)" tab and click the button "New" in the "component available in this Layout" section, which will pop up the dialog box that 3?14 sees. Next, select the "Invoke Script" component and click "OK" button to add it to the current web layout. Finally, in the "id" text box in the "Parameters for the selected item" section, enter the ID "Hello mapguide" of the new component and the JavaScript script in the script to invoke text box "alert ("Hello, mapguide!"); ". If required, you can also set the component's ToolTip, icon, and other property information.

Figure 3?13 Flexible Web layout for the user interface of components in the viewer

Figure 3?14 Flexible Web layout user interface for creating new components

2) Add the "Hello mapguide" command to the Fusion Viewer toolbar.

Select the new "Hello mapguide" component in the "Available" section and drag the component to the "Items disaplayed in the container" list on the left.

3) Save the modified Web layout.

After you save the changed Web layout, copy the URL in the Web address of this layout text box to the browser's address bar, and you can use the Fusion Viewer to execute the application in the browser, and the results 3?15 see.

Figure 3?15 "Hello, mapguide!" Program Demo sample in Fusion Viewer execution effect

MapGuide Application Demo Sample-Hello, mapguide!