From 9a8d5ea8f4c8637c5792d8670c8a8d55f6979fc5 Mon Sep 17 00:00:00 2001
From: hisham waleed karam <hisham.karam@cartologic.com>
Date: Tue, 30 May 2017 10:47:56 +0200
Subject: [PATCH] add satellite baseLayer and fix layer-switcher position

---
 src/components/geonode.jsx | 16 ++++++++--
 src/css/app.css            | 60 +++++++++++++++++++++++++++++---------
 2 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/src/components/geonode.jsx b/src/components/geonode.jsx
index 28042c8..8110f61 100644
--- a/src/components/geonode.jsx
+++ b/src/components/geonode.jsx
@@ -27,7 +27,7 @@ global.enMessages = enMessages;
 
 import Save from './save';
 import MapUrlLink from '../containers/MapUrlLink';
-import {getLocalGeoServer,createThumbnail} from '../services/geonode';
+import {getLocalGeoServer, createThumbnail} from '../services/geonode';
 import {getCRSFToken} from '../helper';
 
 import '../css/app.css'
@@ -55,7 +55,7 @@ var map = new ol.Map({
   })
 });
 window.setThumbnail = function(obj_id) {
-    createThumbnail(obj_id,map)
+  createThumbnail(obj_id, map)
 }
 
 class GeoNodeViewer extends React.Component {
@@ -87,7 +87,16 @@ class GeoNodeViewer extends React.Component {
   }
   updateMap(props) {
     if (props.config) {
-      var tileServices = [];
+      var tileServices = [
+        {
+          name: 'Satellite',
+          description: 'ESRI world imagery',
+          endpoint: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
+          standard: 'XYZ',
+          attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
+          thumbnail: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/0/0/0'
+        }
+      ];
       var errors = [];
       var filteredErrors = [];
       if (props.zoomToLayer && props.config.map.layers[props.config.map.layers.length - 1].bbox) {
@@ -158,6 +167,7 @@ class GeoNodeViewer extends React.Component {
         mapUrl = (<MapUrlLink/>);
       }
     }
+    console.log(this.state);
     return (
       <div id='content'>
         {error}
diff --git a/src/css/app.css b/src/css/app.css
index 5921110..087bd8c 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -1,31 +1,46 @@
 html {
   font-family: 'Roboto', sans-serif;
 }
+
 html, body {
   height: 100%;
   padding: 0;
   margin: 0;
 }
+
+
 /* Dead Simple Grid (c) 2015 Vladimir Agafonkin */
-.row .row { margin:  0 -1.5em; }
-.col      { padding: 0  0em; }
+
+.row .row {
+  margin: 0 -1.5em;
+}
+
+.col {
+  padding: 0 0em;
+}
 
 .row:after {
-    content: "";
-    clear: both;
-    display: table;
+  content: "";
+  clear: both;
+  display: table;
 }
 
-@media only screen { .col {
+@media only screen {
+  .col {
     float: left;
     width: 100%;
     box-sizing: border-box;
-}}
+  }
+}
+
+
 /* end Dead Simple Grid */
+
 #map {
   width: 100%;
   height: 100%;
 }
+
 #content, #main {
   width: 100%;
   height: 100%;
@@ -33,75 +48,92 @@ html, body {
   top: 0;
   left: 0;
 }
+
 #zoom-buttons {
   margin-left: 20px;
   position: absolute;
   top: 20px;
 }
+
 .layer-list {
   top: 74px !important;
 }
+
 #rotate-button {
   top: 366px;
   left: 20px;
   position: absolute;
 }
+
 #home-button {
   margin-left: 20px;
   position: absolute;
   top: 134px;
 }
+
 #print-button {
   position: absolute;
   margin-left: 20px;
   top: 244px;
 }
+
 #save-button {
   position: absolute;
   margin-left: 20px;
   top: 310px;
 }
+
 #globe-button {
   position: absolute;
   margin-left: 20px;
   top: 189px;
 }
+
 .layer-switcher {
   top: 20px !important;
+  right: 20px;
+  position: absolute;
 }
+
 .layer-tree-panel {
   max-height: 94vh !important;
 }
+
 .map-url-wrapper {
-	position: absolute;
+  position: absolute;
   top: 0;
   width: 50%;
   left: 25%;
-	height: 25px;
+  height: 25px;
   text-align: center;
 }
+
 .map-url-wrapper.hide {
-	display: none;
+  display: none;
 }
+
 .map-url-wrapper a {
-	padding: 10px;
-	color: #fff;
-	font-size: 0.8em;
+  padding: 10px;
+  color: #fff;
+  font-size: 0.8em;
 }
+
 #debug {
   position: absolute;
   top: 0;
   left: 25%;
   z-index: 10;
-  background: rgba(204,204,204, 0.8);
+  background: rgba(204, 204, 204, 0.8);
   width: 50%;
   height: 30px;
   padding: 10px;
   text-align: center;
 }
+
 #debug label {
   margin-right: 10px;
 }
+
 #debug input {
   width: 50%;
 }