Redesigned code

Resolved issue #8

config/defaults.js

@@ -23,7 +23,7 @@ define([], function () {
         //want to use custom settings for units or any of the helper services set queryForOrg to false then enter
         //default values for any items you need using the helper services and units properties.
         "queryForOrg": true,
-        //If you need localization set the supportsLocalization value to true to get the localized strings
+        //If you need localization set the supportsLocali   zation value to true to get the localized strings
         //from the javascript/nls/resource files.
         //Note that we've included a placeholder nls folder and a resource file with one error string
         //to show how to setup the strings file.

css/basemapButton.css

@@ -0,0 +1,34 @@
+.basemapButton {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    z-index: 999;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+     outline: 0;
+}
+.basemapButton .dijitTitlePaneTextNode .dijitTitlePaneTitleClosed .dijitClosed .dijitTitlePaneTitleFocus .dijitTitlePane {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    outline: 0;
+}
+
+.basemapButton .dijitTitlePaneTitle {
+
+    background-color: rgba(255, 255, 255, 0.70);
+    color: #000;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    -o-border-radius: 5px;
+    border-radius: 5px;
+    outline: 0;
+}

css/navigationButtons.css

@@ -0,0 +1,135 @@
+.map-buttons {
+    position: absolute;
+    top: 95px;
+    left: 20px;
+    z-index: 35;
+}
+
+.LocateButtonLight {
+    margin-top: 6px;
+}
+
+    .LocateButtonLight span {
+        display: none;
+    }
+
+    .LocateButtonLight .zoomLocateButton {
+        background-position: center center;
+        background-image: url(../images/locate_dark2.png);
+        background-repeat: no-repeat;
+        width: 22px;
+        height: 22px;
+        padding: 4px;
+        display: inline-block;
+        background-color: #fff;
+        background-color: rgba(255,255,255,1);
+    }
+
+        .LocateButtonLight .zoomLocateButton:hover {
+            background-color: #eee;
+            color: #333;
+        }
+
+    .LocateButtonLight .locateContainer {
+        text-align: center;
+        background-color: #fff;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        -o-border-radius: 5px;
+        border-radius: 5px;
+        border: 1px solid #57585A;
+        color: #4c4c4c;
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+    }
+
+        .LocateButtonLight .locateContainer:hover {
+            background-color: #eee;
+            color: #333;
+        }
+
+        .LocateButtonLight .locateContainer:active {
+            color: #007ac2;
+            background-color: #ddd;
+        }
+
+    .LocateButtonLight .loading:before {
+        content: '';
+        display: block;
+        position: relative;
+        width: 22px;
+        height: 22px;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        background-position: center center;
+        background-image: url(../images/ajax-loader.gif);
+        background-repeat: no-repeat;
+    }
+
+.HomeButtonLight {
+   margin-top: 0px;
+}
+
+    .HomeButtonLight span {
+        display: none;
+    }
+
+    .HomeButtonLight .homeContainer {
+        text-align: center;
+        background-color: #fff;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        cursor: pointer;
+        -webkit-border-radius: 5px;
+        -moz-border-radius: 5px;
+        -o-border-radius: 5px;
+        border-radius: 5px;
+        border: 1px solid #57585A;
+        color: #4c4c4c;
+        width: 30px;
+        height: 30px;
+        overflow: hidden;
+    }
+    .HomeButtonLight .home {
+        width: 22px;
+        height: 22px;
+        padding: 4px;
+        display: inline-block;
+        background-position: center center;
+        background-image: url(../images/home.png);
+        background-repeat: no-repeat;
+        background-color: #fff;
+        background-color: rgba(255,255,255,1);
+    }
+
+    .HomeButtonLight .home:hover {
+        background-color: #eee;
+        color: #333;
+    }
+
+    .HomeButtonLight .home:active {
+        color: #007ac2;
+        background-color: #ddd;
+    }
+    .HomeButtonLight .loading:before {
+        content: '';
+        display: block;
+        position: relative;
+        width: 22px;
+        height: 22px;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+        background-position: center center;
+        background-image: url(../images/ajax-loader.gif);
+        background-repeat: no-repeat;
+    }

css/common.css → css/search.css

@@ -1,47 +1,4 @@
-.basemapButton {
-    position: absolute;
-    bottom: 20px;
-    left: 20px;
-    z-index: 999;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-     outline: 0;
-}
-.basemapButton .dijitTitlePaneTextNode .dijitTitlePaneTitleClosed .dijitClosed .dijitTitlePaneTitleFocus .dijitTitlePane {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    outline: 0;
-}
-
-.basemapButton .dijitTitlePaneTitle {
-
-    background-color: rgba(255, 255, 255, 0.70);
-    color: #000;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    cursor: pointer;
-    -webkit-border-radius: 5px;
-    -moz-border-radius: 5px;
-    -o-border-radius: 5px;
-    border-radius: 5px;
-    outline: 0;
-}
-.locateButton {
-    position: absolute;
-    top: 92px;
-    left: 20px;
-    z-index: 50;
-}
-.locateButton .zoomLocateButton {
-    width:28px;
-    }
-
+
 .searchControl {
     display: block;
     position: absolute;

index.html

@@ -15,7 +15,9 @@
     <link rel="stylesheet" href="//js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
     <link rel="stylesheet" href="//js.arcgis.com/3.10/js/esri/css/esri.css">
     <!--Load any application specific styles-->
-    <link rel="stylesheet" href="css/common.css">
+    <link rel="stylesheet" href="css/basemapButton.css">
+    <link rel="stylesheet" href="css/search.css">
+    <link rel="stylesheet" href="css/navigationButtons.css">
     <link rel="stylesheet" href="css/combinedPopup.css">
     <link rel="stylesheet" href="css/main.css">
     <!--[if gte IE 9]>
@@ -36,8 +38,10 @@
     </div>
     <div id="splash"></div>
 
-    <div id="searchDiv"></div>
-    <div id="locateDiv"></div>
+
+    <div id="mapButtons" class="map-buttons">
+
+    </div>
     <div id="basemapDiv"></div>
     <div id="mapDiv" dir="ltr"></div>