A Telecom Network Graph On Google Maps - Using ZK Google Maps Component

Charles Pao, Engineer, Potix Corporation
June 10, 2008

Live Demo

Introduction

There are varieties of applications using Google Map, such as mining research, traffic analysis, and demographic segmentation. Google Maps API is based on javascript. Developing Google Maps Application usually requires considerable effort due to its tedious javascript coding. It is unsafe on protecting their bussiness logic nor for the follow-up code maintenance, neither to say the limitation of computing power on client side.

ZK has provide a sets of "JAVA-packaged" Google Maps API components for developers to develop ZK web applications. With these components, developer can easily combine the elegance and richness of ZK with other abundant web development technologies, such as Google Map.

Telecom network graph

This is a demo application using ZK Google Maps Component. It shows that it is possible to develop a quasi-telcom network graphic by using only ZUML and ZScript inside the zul file.

Every nodes (those five computer-related icons) has linking cords connected them. Once you pick up a node and drop it down on other place. The cords linked on that node will still be connected.

mapNet.zul	

...	

<gmarker id="mark5" lat="53.38332836757156" lng="9.31640625" 
			draggable="true" tooltiptext="5th staff">
<attribute name="onMarkerDrop"><![CDATA[
String color = lin1to5.getColor();
int weight = lin1to5.getWeight();
int opacity = lin1to5.getOpacity();
lin1to5.setParent(null);	//remove the old cord.

Gpolyline lin1to5 = new Gpolyline();
lin1to5.setColor(color);
lin1to5.setWeight(weight);
lin1to5.setOpacity(opacity);
String arg = "" + mark1.lat +"," + mark1.lng + 
		",3," + event.lat +","+ event.lng + ",3";
lin1to5.setPoints(arg);
lin1to5.setParent(canvas);	//add the new one put on proper position.

lin15Icon.lat=(mark1.lat + 3*event.lat)/4;
lin15Icon.lng=(mark1.lng + 3*event.lng)/4;
]]></attribute>
</gmarker>

<gmarker id="lin15Icon" lat="${(mark1.lat+3*mark5.lat)/4}" 
	lng="${(mark1.lng+3*mark5.lng)/4}"/>
<gpolyline id="lin1to5" color="#3333cc" opacity="100" weight="10" 
	points="${mark1.lat},${mark1.lng},3,${mark5.lat},${mark5.lng},3"/>
...

By listening to onMarkerDrop event of the nodes (I use <gmarker> to represent nodes), we can do proper actions when the new location of a node has been chosen. Take the fifth node (mark5) for example, when mark5 has been dropped onto a new location, all the cord (represented as <gpolyline>) connected to mark5 will be remove, and new ones are made with one of the end-points of the cord is in the new position where the mark5 has been placed.

As to the marking symbol on the cord, we use another <gmarker> to represent the marking on the cord. The tricky part is the location of marking, I use Point of Division Formula to let the marking always stay on the 1/4 portion away from node mark5, and 3/4 portion from central node mark1. It is also neccesary to update the location of markings when the cord has changed to a new location.

Summary

It is a proof of concept demostration. Most of the implementations is hardcoded. At present all the linkage and the updating of those linking cords are maintained manually in the mapNet.zul file, roughly total 150 lines of code. It can be wrapped to a higher level APIs and be able to do more customization tailor for special domain applications later on. For example, develper can adopt ZK "Server Push" technology so as to update the statuses and representations of nodes and cords automatically and/or support more events such as "double click" so that end users can "drill down" the items when there are something interesting occured.

Download

• mapNet.war

 

Version

Applicable to ZK 3.0.0 and later

Applicable to zk-GMaps-2.0_4 and later

 

Reference

• Put Google Maps In Your ZK Application