OpenWebGIS is online Geographic Information System

Previous Entry Share Next Entry
New and old interface of OpenWebGIS
openwebgis
Recently OpenWebGIS interface has changed a bit. To understand what changes have occurred in the interface, please take a look at the two images Figure 1, Figure 2, which depict the old and new interfaces, respectively.
OpenWebGIS_old_InterfaceOpenWebGIS_new_Interface

The main changes are:
1.The Logotype of OpenWebGIS was made more compact.
2. Buttons, menus and menu items has become convex (volumetric) with rounded edges.
3. Donate button was shifted to the right and down and is no longer an eyesore.
4. Layer Switcher has become transparent (if you move it to the map, you can see the map through it).




OpenWebGIS_old_Interface
Figure 1.
OpenWebGIS_new_Interface
Figure 2.

Some users expressed negative opinions about OpenWebGIS interface - it is old-fashioned, ill-favored and uncomfortable. Perhaps they are right to some extent, and if it was possible the interface was changing and became a little more convenient. But what gives the old-fashioned look to the interface - may be a menu? But I believe that as  OpenWebGIS is a WebGIS, although it tends to have desktop GIS functionality, so there should be the menu as in desktop programs. In addition, some users may not like the little map which does not automatically scale to full screen size. Many users prefer the map to cover the entire screen area, and there are controls elements on it. However, it is clear that no matter how OpenWebGIS interface changes – it seems impossible to please everyone. That is why OpenWebGIS allows users to customize the interface according to their preferences and save it for future sessions. And many critics of the interface either do not know about this feature, or forget about it. So please have a look at the video, which shows the principle of self-configuration interface in OpenWebGIS. Now you can change the color of some controls, move them, change the size of the map (it can be absolutely of any size you like). The number of possibilities to set the interface will be constantly increasing.


Video about flexible interface of OpenWebGIS.

In order to make an attractive, correctly and efficiently working site CSS frameworks and Web content management system (WCMS) are often used.

CSS frameworks are "collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions ".

WCMS - "is a software system that provides website authoring, collaboration, and administration tools designed to allow users with little knowledge of web programming languages or markup languages to create and manage website content with relative ease".
The list of modern CSS frameworks is available here: http://en.wikipedia.org/wiki/CSS_frameworks
In my opinion the most interesting frameworks are the following: http://getbootstrap.com/, http://jqueryui.com/, http://www.jqwidgets.com/jquery-widgets-demo/, http://gumbyframework.com/

"CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid. More functional frameworks also come with more features and additional JavaScript based functions, but are mostly design oriented and unobtrusive. This differentiates these from functional and full JavaScript frameworks. "

The list of modern WCMS you can read here -http://en.wikipedia.org/wiki/List_of_content_management_systems

In order to choose the colors for the interface of the site in accordance with the rules of color composition you can take the help of websites http://www.colourlovers.com/web/palettes and http://paletton.com/

I believe that the use of CSS frameworks and WCMS is fully justified in many cases, while creating sites, but at the moment for OpenWebGIS no CSS frameworks and WCMS are used. To create the interface and content management only HTML and JavaScript are used. This is done deliberately as a part of a strategy for the OpenWebGIS development. This strategy means is minimizing the use of third-party libraries, codes, frameworks, etc. Therefore OpenWebGIS development can be seen as an experiment - whether it is possible to create a worthy system without additional software, demanded by a large number of users. However, this does not mean that in the future if it is necessary, some additional similar software will be used.

Below there are some blocks of code that are implemented to create the OpenWebGIS interface.
Creating one of the menu parts:

[Code (click to open)]<div id="dragMenu" style="background:#ffffff; width:10px; height:10px; padding: 5px;

padding-right: 15 px; border: solid 0px black; position:absolute; left:4px; top:123px;

float: left; z-index:4000; cursor:move;" class="dragMenu" onmouseup="enddrag()" onmousedown="drags(event)"><div title="click to drag" style="width:9px; height:9px;"></div>

<div id="id_menu" class="menu"><div id="colorMenu" style="position:relative; left:0px;top:0px; float:left; z-index:2000;"> <img id="colorColorMenu" title="edit color" src="/geoserver/www/img/color.png" onclick="colorEdit(this)" > </div>

<div class="block_menu">

<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>Layers</div><div class="list_punkts"><div class="kont">

<a href="#" onclick="addLayer(map);" ><div class="podpunkt" onMouseOver="overPunkt2(this);" onMouseOut="outPunkt2(this);"><div>Add Layer</div></div></a>

<a href="#" onclick="RemoveLayer(map);"><div class="podpunkt" onMouseOver="overPunkt2(this);" onMouseOut="outPunkt2(this);"><div>Remove Layer</div></div></a>

<a href="#" onclick="ZoomLayer();"><div title="Zoom to Layer (only for vector Layer)" class="podpunkt" onMouseOver="overPunkt2(this);" onMouseOut="outPunkt2(this);"><div>Zoom to Layer</div></div></a>

<a href="#" onclick="New_Layer();"><div title="Create and add new Layer" class="podpunkt" onMouseOver="overPunkt2(this);" onMouseOut="outPunkt2(this);"><div>New Layer</div></div></a>

<a href="#" onclick="New_LayerTXT();"><div title="Create and add new POINT Layer from text or csv file.

Item separation symbol must be the semicolon or comma" class="podpunkt" onMouseOver="overPunkt2(this);" onMouseOut="outPunkt2(this);"><div>New point Layer from csv file</div></div></a>

<a href="#" onclick="New_LayerGML();"><div title="Create and add new Layer from GML file" class="podpunkt" onMouseOver="overPunkt2(this);" onMouseOut="outPunkt2(this);"><div>New Layer from GML file</div></div></a>

<a href="#" onclick="New_LayerJSON();"><div title="Create and add new Layer from JSON file" class="podpunkt" onMouseOver="overPunkt2(this);" onMouseOut="outPunkt2(this);"><div>New Layer from JSON file</div></div></a>

</div></div>

</div></div></div></div>


-->

Here tag <div> ( division) with id="dragMenu" includes the entire menu and determines the possibility of its dragging. For dragging the functions enddrag() and drags(event) are used. The code for these functions is shown below:[Code (click to open)]global variable:

var stopDragInterface=false;

var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));

var dragapproved = false;

function enddrag()

{dragapproved=false;if(z){if(z.className=="sizeMap"&&checkdrag_or_size!=1){document.getElementById("mapResize").style.padding="5px";

document.getElementById("mapResize").style.top=tempTopMapSize;

document.getElementById("mapResize").style.left=tempLeftMapSize;

}}}

function drags(e)

{ if (stopDragInterface==false){return;}

if (!(is_ie)&&!(!is_ie)) return

var firedobj=(!is_ie)? e.target : event.srcElement

var topelement=(!is_ie)? "HTML" : "BODY"

while (firedobj.tagName!=topelement && firedobj.className!="dragMenu" && firedobj.className!="dragSwitcher" && firedobj.className!="dragMap" && firedobj.className!="sizeMap" && firedobj.className!="moveCoord" && firedobj.className!="dragEditLayer" && firedobj.className!="dragScale" && firedobj.className!="moveToolbar_opt"&&firedobj.className!="olPopup"&&firedobj.className!="id_divRoutLegMain"&&firedobj.className!="id_divWeatherMain"&&firedobj.className!="id_divForWeatherMain"&&firedobj.className!="id_divSelecMain"&&firedobj.className!="OpenStreetMapIdClass"&&firedobj.className!="id_divImageMain"&&firedobj.className!="InterpolationPopupLeg"&&firedobj.className!="id_divWikiMain"&&firedobj.className!="OpenWikipediaClass"&&firedobj.className!="id_divControlmeasureGis"&&firedobj.className!="id_divControlmeasureGisSq"&&firedobj.className!="id_divRemoveLayer"&&firedobj.className!="id_divAddLayer")

{

firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement

}

checkdrag_or_size=0;

if(firedobj.className=="sizeMap"){document.getElementById("mapResize").style.padding="60px";

tempTopMapSize=document.getElementById("mapResize").style.top;

tempLeftMapSize=document.getElementById("mapResize").style.left;

document.getElementById("mapResize").style.top=(parseInt(document.getElementById("mapResize").style.top.split("px")[0])-parseInt(60))+"px";

document.getElementById("mapResize").style.left=(parseInt(document.getElementById("mapResize").style.left.split("px")[0])-parseInt(60))+"px"; }

if (firedobj.className=="dragMenu"||firedobj.className=="dragSwitcher"||firedobj.className=="dragMap"||firedobj.className=="moveCoord"||firedobj.className=="dragEditLayer"||firedobj.className=="dragScale"||firedobj.className=="moveToolbar_opt"||firedobj.className=="olPopup"||firedobj.className=="id_divRoutLegMain"||firedobj.className=="id_divWeatherMain"||firedobj.className=="id_divForWeatherMain"||firedobj.className=="id_divSelecMain"||firedobj.className=="OpenStreetMapIdClass"||firedobj.className=="id_divImageMain"||firedobj.className=="InterpolationPopupLeg"||firedobj.className=="id_divWikiMain"||firedobj.className=="OpenWikipediaClass"||firedobj.className=="id_divControlmeasureGis"||firedobj.className=="id_divControlmeasureGisSq"||firedobj.className=="id_divRemoveLayer"||firedobj.className=="id_divAddLayer")

{

dragapproved = true

z = firedobj

if(z.className=="dragMap"){z=(!is_ie)? z.parentNode : z.parentElement;checkdrag_or_size=1}

var tmpheight = z.style.height.split("px")

maxbottom = (tmpheight[0])?document.body.clientHeight - tmpheight[0]:document.body.clientHeight - 20;

temp1 = parseInt(z.style.left+0)

temp2 = parseInt(z.style.top+0)

x = (!is_ie)? e.clientX: event.clientX

y = (!is_ie)? e.clientY: event.clientY

document.onmousemove = move

return false

}

if (firedobj.className=="sizeMap")

{

dragapproved = true

zz = firedobj.childNodes[2].childNodes[2]

z = firedobj

var tmpheight = zz.style.height.split("px")

maxbottom = (tmpheight[0])?document.body.clientHeight - tmpheight[0]:document.body.clientHeight - 20;

temp1 = parseInt(zz.style.width+0)

temp2 = parseInt(zz.style.height+0)

x = (!is_ie)? e.clientX: event.clientX

y = (!is_ie)? e.clientY: event.clientY

document.onmousemove = move

return false

}

}



This is the function code move which is used inside drags():

[Code (click to open)]function move(e)

{

if(z.className!="sizeMap"||checkdrag_or_size==1)

{var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;

var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;

if (dragapproved)

{

z.style.left = tmpXpos;

z.style.top = tmpYpos;

if (tmpXpos < maxleft)

z.style.left = maxleft;

if (tmpXpos > maxright)

z.style.left = maxright;

if (tmpYpos < maxtop)

z.style.top = maxtop;

if (tmpYpos > maxbottom)

z.style.top = maxbottom;

return false

}

}

else

{

var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;

var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;

if (dragapproved)

{

zz.style.width = tmpXpos;

zz.style.height = tmpYpos;

return false

}

map.updateSize();

}

}



The function drags(e) works only after clicking on the menu item "Interface->Switch to interface drag". As soon as you press this menu item the function SwitchDrag() starts working:[Code (click to open)]function SwitchDrag()

{ VarDivSwitch=document.getElementById("idSwitchInterface");

if (stopDragInterface==false){stopDragInterface=true;VarDivSwitch.firstChild.data="Interface can be dragged";}else{stopDragInterface=false;VarDivSwitch.firstChild.data="Interface can not be dragged";}

}


Creating the control element "Layer Switcher":

[Code (click to open)]

height:10px;

background:rgba(255,255,255,0.5);

padding:5px;

padding-right:15px;

border:solid 1px black;

float:left;

cursor:move;

position:absolute; top:174px; left:-5px;

z-index:1200;" class="dragSwitcher" onmousedown="drags(event)" onmouseup="enddrag()"><div title="click to drag" style="width:12px; height:12px;"></div> <div id="external_control2" class="block1" > // “external_control2” this is div for Layer Switcher. Class block1 is a class describing style of Layer Switcher.

<div id="colorSwitcher" style="position:relative; left:0px;top:0px; float:right; z-index:2000;"> <img id="colorColorSwitcher" title="edit color" src="/geoserver/www/img/color.png" onclick="colorEdit(this)" > </div></div> </div> // "colorSwitcher" is div with color panel for changing the color of Layer Switcher.

Below the code is shown for creating control "OpenStreetMap Search":

[Code (click to open)]

<div style="float: left; width:480px"><a href="http://nominatim.openstreetmap.org/" target="_blank">OpenStreetMap_Search:</a><br><input type="text" size="35" id="Id_OpenStreetMapId" title="insert name of the object to find it on the map" value=""/><button type=button class="Searchclass" onclick=SearchOnMap()>Search</button><button type=button title="hide/show result" onclick=SearchOnMapHide() class="SearchHclass"><a style="font-size: 10px;">show</a></button></div><br>


Menu and buttons style is determined by the code which is shown below:

[Code (click to open)]

.block1 {

width: 230px;

height:600px;

overflow: auto;

background: rgba(239,228,176,0.5);

color:#000080;

padding: 15px;

padding-right: 15 px;

border: solid 1px black;

float: left;

position:relative;top:0px;left:0px;

z-index:1000;

cursor:default;

border-radius: 5px; box-shadow: inset rgba(0,0,0,.6) 0 -1px 1px, inset rgba(252,255,255,.7) 0 1px 1px, rgba(0,0,0,.8) 0 1px 1px -1px;

}

.Weathclass {

height:30px;

border-color:#50F078 #9bb838 #9bb838 #50F078;

border-style:solid;border-width:1px;background:#50F078;

position:relative;top:-80px;left:885px;cursor:pointer;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}

.Weathclass:hover {

border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;

border-style:solid;border-width:1px;background:#FFFF99;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}

.Weathclass:focus {

background:#ddd;border-color:#ddd #333 #333 #ddd;border-style:solid;border-width:1px;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}

.Weathclass:active {background:#ff0000;

border-color:#ddd #333 #333 #ddd;border-style:solid;border-width:1px;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}

.SearchHclass { // class for describing the style of the button“show” of the contol OpenStreetMap_Search

height:15px;

border-color:#50F078 #9bb838 #9bb838 #50F078;

border-style:solid;border-width:1px;background:#50F078;

position:relative;cursor:pointer;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}

.SearchHclass:hover {

border-color:#FFCC66 #FFFF99 #FFFF99 #FFCC66;

border-style:solid;border-width:1px;background:#FFFF99;

box-shadow: inset rgba(0,0,0,.6) 0 -3px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -3px;

border-radius: 15px;

}

.SearchHclass:focus {

background:#ddd;border-color:#ddd #333 #333 #ddd;border-style:solid;border-width:1px;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}

.SearchHclass:active {background:#ff0000;

border-color:#ddd #333 #333 #ddd;border-style:solid;border-width:1px;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 3px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}

.Searchclass {

height:20px;

border-color:#50F078 #9bb838 #9bb838 #50F078;

border-style:solid;border-width:1px;background:#50F078;

position:relative;cursor:pointer;

box-shadow: inset rgba(0,0,0,.6) 0 -1px 3px, inset rgba(252,255,255,.7) 0 3px 8px, rgba(0,0,0,.8) 0 3px 3px -1px;

border-radius: 15px;

}


Menu style:

[Code (click to open)]

.menu { background:#50f078; width:1457px;height:25px;/*margin-left:230px;*/cursor:default; position:relative;top:0px;left:-4px; font: 1em Arial, sans-serif;

text-shadow: #0000ff 0 0 2px;border-radius: 15px; box-shadow: inset rgba(0,0,0,.6) 0 -3px 8px, inset rgba(252,255,255,.7) 0 3px 8px, rgba(0,0,0,.8) 0 3px 8px -3px;}

.dragMenu { background:#082567; width:10px; height:10px; /*margin-left:250px;*/ padding: 5px;

padding-right: 15 px; border: solid 2px black; position:absolute; left:300px; top:150px;

float: left; z-index:4000; cursor:move;}

.block_menu { width:1290px;height:25px;left:5px;cursor:default; position:relative;}

.punkt {float:left; padding: 1px 1px 0px 1px; position:relative; cursor:pointer; }

.punkt div {padding:2px 7px 2px 7px;}

div.list_punkts {background:#ECE5B1;color:#0000ff; position:absolute; top:26px; left:0px;border-radius: 3px; box-shadow: inset rgba(0,0,0,.6) 0 -2px 3px, inset rgba(252,255,255,.7) 0 2px 3px, rgba(0,0,0,.8) 0 2px 3px -2px; // gives shadow and convexity to the menu

display:none; padding:0px; width:200px; border:solid 1px #000; font: 0.9em Arial, sans-serif;

text-shadow: none; }

div.list_punkts div.kont {padding:0px;margin:3px; /*background:#80FF00;*/ }

div.list_punkts a {text-decoration:none; padding:0px; cursor:pointer; color:#0000ff;}

div.list_punkts div a div.podpunkt { /*background:#FF8000;*/ width:100%; padding:0px; margin-top:2px; }

div.list_punkts div a div.podpunkt div { width:100%;padding:0px 0px 0px 2px; white-space:pre;}

div.list_punkts div a:hover { background:#badbba;}

div.list_punkts div a:hover div.podpunkt { background:#badbba; color:#fff;border-radius: 5px; box-shadow: inset rgba(0,0,0,.6) 0 -1px 1px, inset rgba(252,255,255,.7) 0 1px 1px, rgba(0,0,0,.8) 0 1px 1px -1px; }

</style>


When hovering the cursor over each menu item its style changes and the function function overPunkt2(obj_listPunkt) starts working:

[Code (click to open)]

function overPunkt2(obj_listPunkt)

{

obj_listPunkt.style.background="#0000ff";

obj_listPunkt.style.padding=0;

obj_listPunkt.childNodes[0].style.border="solid 0px #000";

obj_listPunkt.childNodes[0].style.borderBottom="none";

color_text=obj_listPunkt.style.color;

obj_listPunkt.style.color="#dfd";

}

function outPunkt2(obj_listPunkt)

{

obj_listPunkt.style.background="transparent";

obj_listPunkt.style.padding=1;

obj_listPunkt.style.paddingBottom=0;

obj_listPunkt.childNodes[0].style.border="none";

obj_listPunkt.style.color=color_text;

}


In the code stream given above from the first sight it is difficult of course to understand everything and to put it into practice, so if you're interested and have any questions do not hesitate to ask. The code is not optimal, I know it, so the constructive criticism will be gladly accepted.



?

Log in