https://valdevie-salesmap.netlify.app/

1<html>
2  <head>
3    <meta charset="utf-8" />
4<!-- This site is hosted on Netlify. Anyone can build and deploy a site
5     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=e544249f-dfcc-4fdc-ae75-6200e1d4f344
6     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
7    <meta
8      name="viewport"
9      content="initial-scale=1, maximum-scale=1, user-scalable=no"
10    />
11    <title>
12      ArcGIS API for JavaScript Tutorials: Add a styled basemap layer
13    </title>
14    <link
15      rel="stylesheet"
16      href="https://js.arcgis.com/4.24/esri/themes/light/main.css"
17    />
18
19    <link
20      rel="stylesheet"
21      href="dist/css/style.css"
22    />
23    <link rel="shortcut icon" href="https://www.valdevie.co.za/wp-content/uploads/2018/04/favicon-16.png" type="image/x-icon">
24    

24<script
25      charset="utf-8"
26      type="text/javascript"
27      src="https://js.hsforms.net/forms/v2.js"
28    ></script>

28
29
30    

30<script
31  src="https://code.jquery.com/jquery-3.6.0.min.js"
32  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
33  crossorigin="anonymous"></script>

33
34    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
35    

35<script
36      charset="utf-8"
37      type="text/javascript"
38      src="https://js.hsforms.net/forms/v2.js"
39    ></script>

39
40    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
41    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> -->
42    

42<script src="https://d3js.org/d3.v4.min.js"></script>

42
43    

43<script src="https://js.arcgis.com/4.24/"></script>

43
44    

44<script defer src="./dist/js/main.js"></script>

44
45    <style>
46      #overlay {
47        position: fixed;
48        display: none;
49        width: 100%;
50        height: 100%;
51        top: 0;
52        left: 0;
53        right: 0;
54        bottom: 0;
55        background-color: rgba(0,0,0,0.5);
56        z-index: 2;
57        cursor: pointer;
58      }
59      .enlarged-image {
60        max-width: 60%;
61        position: absolute;
62        top: 50%;
63        left: 50%;
64        transform: translate(-50%, -50%);
65      }
66      .position-absolute-left {
67        position: absolute;
68        top: 50%;
69        left: 10%;
70      }
71      .position-absolute-right {
72        position: absolute;
73        top: 50%;
74        left: 90%;
75      }
76      .position-absolute-top-right{
77        position: absolute;
78        top: 3%;
79        left: 90%;
80      }
81      .has-favorites {
82        color: gold;
83      }
84      .favorite-active {
85        color: gold;
86      }
87   
88    </style>
89    

89<script>
90      let images;
91      let currentImage;
92      $(document).ready(function () {
93        $('#pages').on('load',function(){
94          setTimeout(SelectImages,2000);
95          function SelectImages(){
96          $('#pages').contents().find('img').click(function () {
97            let currentImage = $(this).attr("src");            
98            $('#large-image').attr('src',`${currentImage}`);
99            on();
100          });
101            images = $('#pages').contents().find('#gallery').children('img').map(function(){
102            return $(this).attr('src')
103            }).get();
104     
105          }
106        });
107      });
108      function NextImage(){
109        let indexCurrent = images.indexOf(currentImage);
110        currentImage = images[(indexCurrent + 1)%images.length];
111        if(indexCurrent == images.length-1)
112        {
113          currentImage = images[0];     
114        } else {
115          
116        }
117        console.log(currentImage)
118        SetImage(currentImage);
119      }
120      function PreviousImage(){
121        let indexCurrent = images.indexOf(currentImage);
122        if(indexCurrent == 0){
123          currentImage = images[images.length - 1]
124        } else {
125          currentImage = images[(indexCurrent - 1)%images.length];
126        }      
127        console.log(currentImage);
128        SetImage(currentImage);
129      }
130      function SetImage(image){
131        let changedImage = image
132        $('#large-image').attr('src',`${changedImage}`) 
133      }
134      
135    </script>

135
136  </head>
137  <body>
138    <div style="display: flex;align-items: center;justify-content:center;" id="overlay">
139      <button class="position-absolute-left btn btn-secondary btn-sm" onclick="PreviousImage()" id="left-arrow"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></button>
140      <img id="large-image" class="enlarged-image" src="" alt="">
141      <button class="position-absolute-right btn btn-secondary btn-sm" onclick="NextImage()" id="right-arrow"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></button>
142      <button class="position-absolute-top-right btn btn-secondary btn-sm" onclick="off()" id="close-button"><i class="fa fa-window-close fa-2x" aria-hidden="true"></i></button>
143    </div>
144    
145    <div style="display: flex;flex-direction:row">
146      <div id="selectingPages" style="width:4vw;height:100vh;display:flex;flex-direction: column;min-width: 56px">    
147        
148        
149        <button type="button" class="btn btn-dark btn-sm" id="defaultOpen"  onclick='changeSrc("./dist/pages/main/home.html")'><i class="text-white fa fa-home fa-2x"></i></button>
150        <button type="button" class="btn btn-dark btn-sm" onclick='changeSrc("./dist/pages/main/search.html")'><i class=" text-white fa fa-search fa-2x" ></i></button>
151        <button type="button" class="btn btn-dark btn-sm" onclick='changeSrc("./dist/pages/main/listings.html")'><i class="text-white fa fa-list fa-2x" ></i></button>
152        <button type="button" class="btn btn-dark btn-sm" onclick='changeSrc("./dist/pages/main/enquire.html")'><i class="text-white fa fa-envelope fa-2x" ></i></button>
153        <button type="button" class="btn btn-dark btn-sm" onclick="SideMenu()"><i id="sideMenu" class="text-white fa fa-angle-double-left fa-2x" ></i></button>
154      </div>
155      <iframe id="pages" style="width:21vw;height:100vh;min-width: 333px;"></iframe>
156      <div id="viewDiv" style="height: 100vh; width: 75vw; position: relative">
157        <div id="ground-first-floor" class="">
158          <h6>Ground Floor or First Floor</h6>
159          <select onchange="FirstOrSecond()" id="first-or-second" name="first-or-second">
160            <option value="ground" selected>Ground Floor</option>
161            <option value="first">First Floor</option>
162          </select>
163        </div>
164        <div id="legend-container-box" class="legend-container open">
165          <h2 id="legend-title" style="font-size: 16px;">Legend <div class="desktop-hide" style="margin-top: 10px;"> <i id="legend-arrow-dropdown" class="fa fa-angle-double-up fa-lg"></i></div></h2>
166          <div class="legend-container-icons">
167          <div  style="white-space:nowrap;">
168            
169            <div style=" display:inline-block;padding: 3px 0;font-size: 11px; width: 80px;">Unreleased </div>
170          
171            <div style="
172            display:inline-block;
173            content:'\A';
174              width:10px;
175              height:10px;
176              border-radius:50%;
177              background: rgb(99, 97, 97);
178              "
179              ></div>
180            
181          </div>
182          <div style="white-space:nowrap;">
183            <div style="display: inline-block; padding: 3px 0;font-size: 11px; width: 80px;">Available </div>
184            <div style="
185            display: inline-block;
186            content:'\A';
187              width:10px;
188              height:10px;
189              border-radius:50%;
190              background: rgb(0, 255, 0);
191              ";
192              ></div>
193          </div>
194          <div style="white-space: nowrap;">
195            <div style="display: inline-block;padding: 3px 0;font-size: 11px; width: 80px;">Sold </div>
196            <div style="display: inline-block;content:'\A';
197              width:10px;
198              height:10px;
199              border-radius:50%;
200              background: rgb(255, 0, 0);     
201              ";
202              ></div>
203          </div>
204          <div style="white-space:nowrap">
205            <div style="display: inline-block;padding: 3px 0;font-size: 11px; width: 80px;">Unavailable</div>
206            <div style="display: inline-block;content:'\A';
207              width:10px;
208              height:10px;
209              border-radius:50%;
210              background: rgb(0,0,255);
211              ";
212              ></div>
213          </div>
214          <div style="white-space:nowrap">
215
216            <div style="display: inline-block;padding: 3px 0;font-size: 11px; width: 80px;">Transferred</div>
217            <div style="display: inline-block;content:'\A';
218              width:10px;
219              height:10px;
220              border-radius:50%;
221              background: rgb(249, 105, 14);
222              ";
223              ></div>
224          </div>
225          <div style="white-space:nowrap">
226            <div style="display: inline-block;padding: 3px 0;font-size: 11px; width: 80px;">Reserved</div>
227            <div style="display: inline-block;content:'\A';
228              width:10px;
229              height:10px;
230              border-radius:50%;
231              background: rgb(191, 85, 236);
232              ";
233              ></div>
234          </div>
235          </div>
236        </div>
237      <div id="infoDiv" class="esri-widget">
238        <input
239          type="checkbox"
240          id="descriptive-labels"
241          class="esri-widget"
242          checked
243        />
244      Show descriptive labels
245      <!-- <div id="legendDiv"></div> -->
246    </div>
247    </div>
248    
249    

249<script  defer>
250      function FirstOrSecond(){
251        console.log(event.target.value);
252        if(event.target.value=="first"){
253          window.parent.firstFloorLayer.visible = true;
254          window.parent.groundLayer.visible = false;
255        }
256       else{
257          window.parent.firstFloorLayer.visible = false;
258          window.parent.groundLayer.visible = true;
259       }
260      }
261      function on() {
262        document.getElementById("overlay").style.display = "block";
263      }
264
265      function off() {
266        document.getElementById("overlay").style.display = "none";
267        const rightArrow = document.getElementById("right-arrow")
268        if(rightArrow.hidden === true){
269          rightArrow.hidden = false;
270        }
271        const leftArrow = document.getElementById("left-arrow")
272        if(leftArrow.hidden === true){
273          leftArrow.hidden = false;
274        }
275      }
276      off()
277
278      /* FUNCTION TO PAN TO AREA ON URL PARAMETERS */
279      function getCurrentURL () {
280          return window.location.href;
281      }
282      let currentURL = getCurrentURL().toLowerCase();
283      let newURL = currentURL.split("?area=").pop();
284      if (newURL == "evergreen") {
285        document.getElementById("defaultOpen").removeAttribute("id");
286        document.getElementById("pages").src = "dist/pages/areas/evergreen.html";
287        window.history.pushState('', '', '/');
288      }
289    </script>

289
290  </body>
291</html>