diff --git a/src/main/webapp/css_new/geosearch.css b/src/main/webapp/css_new/geosearch.css
index a36aa4ffeaf85802614ca6d998c7eb6789fe703c..3d4f7560ad324c7d453702bc3e56e15fa9b55cbd 100644
--- a/src/main/webapp/css_new/geosearch.css
+++ b/src/main/webapp/css_new/geosearch.css
@@ -1,3 +1,41 @@
+.geosearch-result-icons {
+ color: #00CC44;
+ cursor: pointer;
+ float: right;
+ height: 40px;
+ opacity: 0.8;
+ text-align: center;
+ width: 60px;
+}
+
+.geosearch-result-icons:hover {
+ text-decoration: underline;
+ opacity: 1;
+}
+
+.geosearch-result-text {
+ background-color: #EEEEEE;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.geosearch-result .result-name {
+ display: block;
+ font-size: 16px;
+ font-weight: 800;
+}
+
+.icon-isochrone:before {
+ background: url('/isochrones/img_new/icon-isochrone.png') no-repeat scroll center center transparent;
+ background-size: 100% 100%;
+ content: " ";
+ display: block;
+ height: 24px;
+ margin: 0px auto;
+ width: 24px;
+}
+
.leaflet-control-geosearch-msg ul {
background-color: transparent;
list-style: none;
@@ -10,9 +48,6 @@
.leaflet-control-geosearch-msg ul li {
background-color: #FFFFFF;
- font: 12px arial;
- text-indent: 4px;
- padding: 4px;
}
.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result {
@@ -20,15 +55,22 @@
}
.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result li {
- border: 1px solid #000000;
+ border: 1px solid #CCCCCC;
+ border-radius: 5px;
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.65);
+}
+
+.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-result li div {
+ padding: 4px;
}
.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-suggests li {
- border: 1px solid #bbbbbb;
+ border: 1px solid #CCCCCC;
+ padding: 4px;
}
-.leaflet-control-geosearch-msg ul li:hover {
- background-color: #eeeeee;
+.leaflet-control-geosearch-msg ul.leaflet-control-geosearch-suggests li:hover {
+ background-color: #EEEEEE;
}
.leaflet-control-geosearch-searchdiv {
@@ -41,15 +83,16 @@
}
.leaflet-control-geosearch-searchdiv input {
- width: 100%;
+ background-color: #FFFFFF;
+ border: none;
height: 28px;
padding: 0px;
- text-indent: 8px;
- border: none;
+ text-indent: 4px;
+ width: 100%;
}
.leaflet-control-geosearch-btn {
- background: url('/isochrones/img_new/geosearch.png') no-repeat scroll center center #72FE4D;
+ background: url('/isochrones/img_new/geosearch.png') no-repeat scroll center center #00CC44;
background-size: auto 100%;
border: 0px none;
border-radius: 0px 5px 5px 0px;
@@ -61,4 +104,3 @@
vertical-align: top;
width: 72px;
}
-
diff --git a/src/main/webapp/css_new/isoga.css b/src/main/webapp/css_new/isoga.css
index 5f6a1918bd0d15104d504c6dee7bfc89988bd16e..c3622f93e430ba4675928488ec664c5cdad31957 100644
--- a/src/main/webapp/css_new/isoga.css
+++ b/src/main/webapp/css_new/isoga.css
@@ -32,19 +32,26 @@ fieldset { padding:0; border:0; margin-top:25px; }
.help-control-div {
background: url('/isochrones/img_new/help_filled.png') no-repeat scroll 0px 0px transparent;
- background-position: center;
- background-size: 90%;
- height: 24px;
- width: 24px;
}
.settings-control-div {
background: url('/isochrones/img_new/settings.png') no-repeat scroll 0px 0px transparent;
- background-position: center;
- background-size: 90%;
clear: none;
+}
+
+.help-control-div,
+.settings-control-div {
+ background-position: center;
+ background-size: 90%;
+ cursor: pointer;
height: 24px;
- width: 24px;
+ opacity: 0.8;
+ width: 24px;
+}
+
+.help-control-div:hover,
+.settings-control-div:hover {
+ opacity: 1;
}
.olControlLayerSwitcher .layersDiv {
diff --git a/src/main/webapp/img_new/geosearch.png b/src/main/webapp/img_new/geosearch.png
index e457e923466dfb6e061e694d067d3d7b96ab3a1e..e5d4684cd60987f418b75a521464580439701fdf 100644
Binary files a/src/main/webapp/img_new/geosearch.png and b/src/main/webapp/img_new/geosearch.png differ
diff --git a/src/main/webapp/index_new.html b/src/main/webapp/index_new.html
index 2c5b6d143ea1dd028d2407aa3c7655aea0767d55..b25b8185b4fd2cea3b662e7f90ff2c709c5ee586 100644
--- a/src/main/webapp/index_new.html
+++ b/src/main/webapp/index_new.html
@@ -20,9 +20,9 @@
<script type="text/javascript" src="http://cdn.leafletjs.com/leaflet-0.7.1/leaflet.js"></script>
<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js"></script>
<script type="text/javascript" src="http://domoritz.de/leaflet-locatecontrol/src/L.Control.Locate.js"></script>
- <script type="text/javascript" src="js_new/locatebyip.js"></script>
- <script type="text/javascript" src="js_new/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js_new/console.js"></script>
+ <script type="text/javascript" src="js_new/jquery-ui-timepicker-addon.js"></script>
+ <script type="text/javascript" src="js_new/locatebyip.js"></script>
<script type="text/javascript" src="js_new/geosearch.js"></script>
<script type="text/javascript" src="js_new/geosearch_provider_osm.js"></script>
<script type="text/javascript" src="js_new/controls.js"></script>
diff --git a/src/main/webapp/js_new/geosearch.js b/src/main/webapp/js_new/geosearch.js
index 4570097f048d7eb65b94a4d22fc86e344e55ad69..3b2b5c5ccac5bb7b36ad6425fafaf1b556b639f1 100644
--- a/src/main/webapp/js_new/geosearch.js
+++ b/src/main/webapp/js_new/geosearch.js
@@ -325,22 +325,48 @@ L.Control.GeoSearch = L.Control.extend({
},
_setResult: function(result) {
- var elem = this._result,
- li = null,
- liText = null;
+ var displayName = null,
+ displayDescription = null,
+ divIcons = document.createElement('div'),
+ divText = document.createElement('div'),
+ elem = this._result,
+ iconIsochrone = null,
+ index = -1;
+ li = document.createElement('li'),
+ txtDescription = null,
+ txtName = null;
if (result.lat == undefined || result.lon == undefined) {
return;
}
this._clearResult();
- li = document.createElement('li');
+
+ index = result.displayName.indexOf(',');
+ displayName = result.displayName.substring(0, index);
+ displayDescription = result.displayName.substring(index + 1);
+
li.id = 'geosearch-result';
li.className = 'geosearch-result';
- liText = document.createTextNode(result.displayName);
- li.appendChild(liText);
- elem.appendChild(li);
+ txtDescription = document.createElement('span');
+ txtDescription.className = 'result-description';
+ txtDescription.innerHTML = displayDescription.replace(/^\s+|\s+$/g,'');
+ txtName = document.createElement('span');
+ txtName.className = 'result-name';
+ txtName.innerHTML = displayName.replace(/^\s+|\s+$/g,'');
+ iconIsochrone = document.createElement('div');
+ iconIsochrone.id = 'icon-isochrone';
+ iconIsochrone.className = 'icon-isochrone';
+ iconIsochrone.appendChild(document.createTextNode('Isochrone'));
+ divIcons.className = 'geosearch-result-icons';
+ divIcons.appendChild(iconIsochrone);
+ divText.className = 'geosearch-result-text';
+ divText.appendChild(txtName);
+ divText.appendChild(txtDescription);
+ li.appendChild(divIcons);
+ li.appendChild(divText);
+ elem.appendChild(li);
elem.style.display = 'block';
},