Visualizing the Mountain Estate | Landscape, Architecture, and Experience in Chengde

<div class="main-body"> <div class="input-references" style="display: none;">     <script src='https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.js'></script> <link href='https://api.mapbox.com/mapbox-gl-js/v0.44.0/mapbox-gl.css' rel='stylesheet' />   <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/sumoselect.min.css">    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sumoselect/3.0.2/jquery.sumoselect.min.js"></script>   <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/model-manager.js"></script>  <script>var BuildingModel={id:"buildings",label:"Buildings",url:"https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/geojson/building.geojson",data:[],color:"#666666",opacity:1,type:"fill",loadData:function(){var a=this.data;return $.ajax({type:"GET",url:BuildingModel.url,async:!1,dataType:"json",success:function(e){e=ModelManager.formatNullData(e);for(var t={id:null,type:BuildingModel.type,source:{type:"geojson",data:e}},i={Kangxi:{data:{crs:e.crs,features:[],type:e.type},color:"#C73F81"},Qianlong:{data:{crs:e.crs,features:[],type:e.type},color:"#FABF50"},Uncertain:{data:{crs:e.crs,features:[],type:e.type},color:BuildingModel.color}},r=0;r<e.features.length;r++)"Kangxi"==e.features[r].properties.constr_reign?i.Kangxi.data.features.push(e.features[r]):"Qianlong"==e.features[r].properties.constr_reign?i.Qianlong.data.features.push(e.features[r]):i.Uncertain.data.features.push(e.features[r]);$.each(i,function(e,i){var r=JSON.parse(JSON.stringify(t));r.id=BuildingModel.id+"_"+e,r.source.data=i.data,r.paint={"fill-color":i.color,"fill-opacity":BuildingModel.opacity},a.push(r)})}}),this.data=a,a}};</script>  <script>var ContourModel={id:"contours",label:"Contours",url:"https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/geojson/alos-ctr10-smooth.geojson",data:[],color:"#a1dab4",opacity:.7,linewidth:.5,type:"line",loadData:function(){var o=this.data;return $.ajax({type:"GET",url:ContourModel.url,async:!1,dataType:"json",success:function(t){t=ModelManager.formatYear(t,ContourModel.id);var n={id:ContourModel.id,type:ContourModel.type,source:{type:"geojson",data:t},layout:{"line-join":"round","line-cap":"round"}};n.paint={"line-color":ContourModel.color,"line-width":ContourModel.linewidth},o.push(n)}}),this.data=o,o}};</script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/island-model.js"></script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/lake-model.js"></script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/perimeterwall-model.js"></script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/rockerie-model.js"></script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/scenicarea-model.js"></script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/stream-model.js"></script>  <script>var WallModel={id:"walls",label:"Walls",url:"https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/geojson/walls.geojson",data:[],color:"#666666",linewidth:1.5,type:"line",loadData:function(){var a=this.data;return $.ajax({type:"GET",url:WallModel.url,async:!1,dataType:"json",success:function(e){e=ModelManager.formatNullData(e);for(var t={id:WallModel.id,type:WallModel.type,source:{type:"geojson",data:e}},l={Kangxi:{data:{crs:e.crs,features:[],type:e.type},color:"#C73F81"},Qianlong:{data:{crs:e.crs,features:[],type:e.type},color:"#FABF50"},Uncertain:{data:{crs:e.crs,features:[],type:e.type},color:WallModel.color}},r=0;r<e.features.length;r++)"Kangxi"==e.features[r].properties.constr_reign?l.Kangxi.data.features.push(e.features[r]):"Qianlong"==e.features[r].properties.constr_reign?l.Qianlong.data.features.push(e.features[r]):l.Uncertain.data.features.push(e.features[r]);$.each(l,function(e,l){var r=JSON.parse(JSON.stringify(t));r.id=WallModel.id+"_"+e,r.source.data=l.data,r.layout={"line-join":"round","line-cap":"round"},r.paint={"line-color":l.color,"line-width":WallModel.linewidth},a.push(r)})}}),this.data=a,a}};</script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/waterfeature-model.js"></script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/layer-controller.js"></script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/filter-controller.js"></script>  <script>var LegendController={legendData:{legend1:{name:"Kangxi Period (1703 - 1713)",color:"#C73F81"},legend2:{name:"Qianlong Period (1735 - 1795)",color:"#FABF50"},legend3:{name:"Uncertain",color:"#666666"}}};</script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/modalbox-controller.js"></script>  <script>var MapboxController={filterBy:function(e,r,t){var i=r;return e.setFilter(t,i),e},loadMap:function(e){mapboxgl.accessToken="pk.eyJ1IjoibnR1ZHN0IiwiYSI6ImNqaHU1ZHo0ZzA2cXkzcnBpeWJvYzc0NGoifQ.JAuM_DaDAERDtX1tRRZs4w";var r=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/satellite-v9",center:[117.93716180795133,40.987545620561846],zoom:17});r.on("load",function(){var t,i=[],o=[],a=[],n={},l=[];$.each(e,function(e,t){var s={};if(s[e]=[],0!=t.data.length)for(var c=0;c<t.data.length;c++){var g=t.data[c];r.addLayer(g),s[e].push(g.id);for(var d=0;d<g.source.data.features.length;d++)if("buildings"==e||"walls"==e){var p=String(g.source.data.features[d].properties.constr_date);void 0==p&&(p=String(g.source.data.features[d].properties.constr_date_cbs)),void 0!=p&&-1==o.indexOf(p)&&o.push(p);var u=String(g.source.data.features[d].properties.typology_sub_type);void 0!=u&&(-1==a.indexOf(u)&&a.push(u),void 0==n[u]?n[u]=1:n[u]=n[u]+1);var h=String(g.source.data.features[d].properties.constr_reign);void 0!=h&&-1==l.indexOf(h)&&l.push(h)}}i.push(s)}),t=FilterController.buildStructureListForFilterDisplay(n);for(var s=ModelManager.layerData.contours.label,c=FilterController.getFilterSelectionList(),g=["buildings","walls"],d=i.length-1;d>=0;d--){var p=i[d],u=Object.keys(p)[0];LayerController.buildLayerSelector(p,s,r);-1!=g.indexOf(u)&&(FilterController.buildFilterOption(c.yearFilter,o,o),FilterController.buildFilterOption(c.structureFilter,a,t),FilterController.buildFilterOption(c.reignFilter,l,l)),"buildings"==u&&ModalBoxController.onBuildingSelected(p[u],r)}FilterController.onFilterSelected(c,g,r),FilterController.setClearAllEvent(c),MapboxController.resizeViewPort(r),LayerController.resizeLayerSideBar(),FilterController.resizeFilter(),MapboxController.toggleMapFunction()})},resizeViewPort:function(e){var r=parseFloat(window.innerHeight)-parseFloat($("#main-footer").css("height"))-parseFloat($("#main-header").css("height"))-parseFloat($("#wpadminbar").css("height"));isNaN(r)&&(r=window.innerHeight),$(".map-container").css("height",r),e.resize(),$(window).on("resize",function(){var r=window.innerHeight-parseFloat($("#main-footer").css("height"))-parseFloat($("#main-header").css("height"))-parseFloat($("#wpadminbar").css("height"));isNaN(r)&&(r=window.innerHeight),$(".map-container").css("height",r),e.resize(),$("#map-layer").trigger("change"),$("#map-filter").trigger("change")})},toggleMapFunction:function(){$("#layer-header").on("click",function(){$("#layer-content").toggle(),$("#map-layer").trigger("change")}),$("#filter-header").on("click",function(){$("#filter-content").toggle(),$("#map-filter").trigger("change")}),$("#legend-header").on("click",function(){$("#legend-content").toggle()})}};</script>script>  <script src="https://cdn.jsdelivr.net/gh/ntudst/GIS-Visualization@1.3/js/main.js"></script> </div>    <div class="map-container"> <div class="notice" style="display: none;">*Attention: Map requires WebGL Support from the browser! You may try changing to different browser if this message appears!</div> <div id='map'> <div id='map-layer' class="map-overlay right top"> <div id='map-layer-inner' class="map-overlay-inner"> <div id="layer-header" class="hidden-btn btn center-header"> <h3>Layers</h3> </div> <div id="layer-content" class="hide-on-mobile"> <nav id="menu"></nav> </div> </div> </div> <div id='map-filter' class="map-overlay left top"> <div id='map-filter-inner'class="map-overlay-inner"> <div id="filter-header" class="hidden-btn btn center-header"> <h3>Filter By</h3> </div> <div id="filter-content" class="hide-on-mobile" style="max-height: 270px;"> <div class="field"> <div class="field-inner"> <div class="bold-header">Structure Type</div> <select id="typology_sub_type" name="structureFilter" class="selection" multiple="multiple"> </select> </div> </div> <div class="field"> <div class="field-inner"> <div class="bold-header">Construction Date</div> <select id='constr_date' name="yearFilter" class="selection" multiple="multiple"> </select> </div> </div> <div class="field"> <div class="field-inner"> <div class="bold-header">Reign</div> <select id='constr_reign' name="reignFilter" class="selection" multiple="multiple"> </select> </div> </div> <div class="field"> <div id="clearButtonField" class="field-inner center-content"> <button id="clearButton" class="btn btn-primary" type="button">Clear All</button> </div> </div> </div> </div> </div> <div id='map-legend' class="map-overlay left bottom"> <div id='map-legend-inner' class="map-overlay-inner"> <div id="legend-header" class="hidden-btn btn center-header"> <h3>Legend</h3> </div> <div id="legend-content" class="hide-on-mobile row"> <div class="field"> <div class="field-inner"> <div class='col-6 col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'> <div class='legend-icon' style='background: #C73F81;'></div> </div> <div class='legend-text col-6 col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'> <p>Kangxi Period</p> </div> </div> </div> <div class="field"> <div class="field-inner"> <div class='col-6 col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'> <div class='legend-icon' style='background: #FABF50;'></div> </div> <div class='legend-text col-6 col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'> <p>Qianlong Period</p> </div> </div> </div> <div class="field"> <div class="field-inner">  <div class='col-6 col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'> <div class='legend-icon' style='background: #666666;'></div> </div> <div class='legend-text col-6 col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'> <p>Uncertain</p> </div> </div> </div> </div> </div> </div> </div> </div> <div id="building-detail" class="map-overlay" style="display: none;"> <div id="building-detail-inner" class="map-overlay-inner"> </div> </div>  </div>