var layer var flayer = Array(20).fill(0); require([ "esri/Map", "esri/views/SceneView", "esri/layers/SceneLayer", "esri/renderers/SimpleRenderer", "esri/symbols/MeshSymbol3D", "esri/symbols/FillSymbol3DLayer", "esri/layers/MapImageLayer", "esri/layers/ImageryLayer", "esri/layers/FeatureLayer", "esri/widgets/DirectLineMeasurement3D", "esri/widgets/AreaMeasurement3D", "esri/widgets/Popup", "esri/widgets/Home", "esri/widgets/ScaleBar", "esri/views/MapView", "esri/core/watchUtils", "esri/widgets/Search", ], function(Map, SceneView, SceneLayer, SimpleRenderer, MeshSymbol3D, FillSymbol3DLayer, MapImageLayer, ImageryLayer, FeatureLayer, DirectLineMeasurement3D, AreaMeasurement3D, Popup, Home, ScaleBar, MapView, watchUtils, Search) { // ========================================================================= Disclaimer // $("#Disclaimer").dialog({modal: true, width: "500px", closeOnEscape: true, // buttons: { // "Accept": function () { // $(this).dialog('close'); // callback(true); // } // } // }); // ========================================================================= Creat mainMap var OregonExtent = { // == autocasts as new Extent() xmax: -12976000, xmin: -13850000, ymax: 5860000, ymin: 5060000, spatialReference: { // == autocasts as new SpatialReference() wkid: 3857 } }; var map = new Map({ // == Create Map basemap: "national-geographic", // == satellite, hybrid, topo, gray, dark-gray, oceans, osm, national-geographic ground: "world-elevation" }); var view = new SceneView({ // == Create the SceneView container: "viewDiv", map: map, camera: { position: [-122.8, 45.3, 7000], tilt: 70, heading: 30 }, popup: { dockEnabled: true, dockOptions: { buttonEnabled: false, // == Disables the dock button from the popup breakpoint: false, // == Ignore the default sizes that trigger responsive docking } } }); // ========================================================================= Default Map var oregonBoundary = new FeatureLayer({ url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/OTH/MapServer/0" }); map.add(oregonBoundary); var sceneLayer = new SceneLayer({ // Create SceneLayer and add to the map url: "https://tiles.arcgis.com/tiles/P3ePLMYs2RVChkJx/arcgis/rest/services/Buildings_Portland/SceneServer", }); map.add(sceneLayer); var symbol = new MeshSymbol3D( // == Create MeshSymbol3D for symbolizing SceneLayer new FillSymbol3DLayer({ material: { color: [150, 150, 200] } }) ); // Add the renderer to sceneLayer sceneLayer.renderer = new SimpleRenderer({ symbol: symbol }); sceneLayer.opacity = 0.7; // ========================================================================= General map function toggleDialog(button_id, content_id) { $(content_id).dialog({autoOpen: false}); $(button_id).click(function() { if(!$(content_id).dialog("isOpen")) { $(content_id).dialog("open"); $(content_id).dialog({position:{my:"left bottom",at:"left+100 bottom-50", of:"body"}}); } else { $(content_id).dialog("close"); } }); }; function addFeatureLayer(fLayerID){ // var FL = new MapImageLayer({ // url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/GEN/MapServer", // sublayers: [{ id: fLayerID }], opacity: 1 }); fLayerfile = "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/GEN/MapServer/" + fLayerID; var FL = new FeatureLayer(fLayerfile,{}); map.add(FL); return FL; } // add zoom to layer $("#content-GeneralMaps").accordion( // create menu {collapsible: true, active: false}, {heightStyle: "content"}, {icons:{header: "ui-icon-plus",activeHeader: "ui-icon-minus"}} ); $('#header-GeneralMaps').bind('click', function () { $('#content-GeneralMaps').slideToggle("fast"); $('#content-CSZMaps').slideUp("fast"); $('#content-ProbMaps').slideUp("fast"); //$('.slider-Scenario').slideUp("fast"); }); toggleDialog("#info_30mresolution","#infocontent_30mresolution"); toggleDialog("#legend_30mresolution","#legendcontent_30mresolution"); toggleDialog("#info_surficialgeology","#infocontent_surficialgeology"); toggleDialog("#legend_surficialgeology","#legendcontent_surficialgeology"); toggleDialog("#info_faults","#infocontent_faults"); toggleDialog("#legend_faults","#legendcontent_faults"); toggleDialog("#info_nehrp","#infoContent_nehrp"); toggleDialog("#legend_nehrp","#legendContent_nehrp"); toggleDialog("#info_polygon","#infocontent_polygon"); toggleDialog("#legend_polygon","#legendcontent_polygon"); toggleDialog("#info_points","#infocontent_points"); toggleDialog("#legend_points","#legendcontent_points"); toggleDialog("#info_TRA0","#infocontent_TRA0"); toggleDialog("#legend_TRA0","#legendcontent_TRA0"); toggleDialog("#info_TRA1","#infocontent_TRA1"); toggleDialog("#legend_TRA1","#legendcontent_TRA1"); toggleDialog("#info_bh","#infocontent_bh"); toggleDialog("#legend_bh","#legendcontent_bh"); toggleDialog("#info_bridges","#infocontent_bridges"); toggleDialog("#info_highway","#infocontent_highway"); $(".GENradio").bind('click', function () { map.remove(layer); var layerID = $('input[name="GENradio"]:checked').val(); if (layerID < 21) { layer = new MapImageLayer({ url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/GEN/MapServer", sublayers: [{ id: layerID }], opacity: 0.6 }); } else if (layerID == 22) { layer = new MapImageLayer({ url: "https://gis.dogami.oregon.gov/arcgis/rest/services/Public/SLIDO3_4/MapServer", opacity: 1 }); } else if (layerID == 23) { layer = new FeatureLayer({ url: "https://gis.dogami.oregon.gov/arcgis/rest/services/Public/HistoricLandslidePoints_3_4/MapServer", opacity: 1 }); } else if (layerID == 27) { layer = new FeatureLayer({ url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/BODO/BODO_20181018/MapServer", opacity: 1 }); } map.add(layer); }); $('.GENcheck').on('change', function(){ $("input[name='GENcheck']").each( function () { if (this.checked) { if (flayer[this.value] == 0) { flayer[this.value] = addFeatureLayer(this.value); } } else { if (flayer[this.value] !== 0) { map.remove(flayer[this.value]); flayer[this.value] = 0; } } }); }); // ========================================================================= CSZ map $("#content-CSZMaps").accordion( // create menu {collapsible: true, active: false}, {heightStyle: "content"}, {icons:{header: "ui-icon-plus",activeHeader: "ui-icon-minus"}} ); $('#header-CSZMaps').bind('click', function () { $('#content-CSZMaps').slideToggle("fast"); $('#content-GeneralMaps').slideUp("fast"); $('#content-ProbMaps').slideUp("fast"); }); toggleDialog("#info_modifiedmercalli","#infocontent_modifiedmercalli"); toggleDialog("#legend_modifiedmercalli","#legendcontent_modifiedmercalli"); toggleDialog("#info_peakgroundacceleration","#infocontent_peakgroundacceleration"); toggleDialog("#legend_peakgroundacceleration","#legendcontent_peakgroundacceleration"); toggleDialog("#info_peakgroundvelocity","#infocontent_peakgroundvelocity"); toggleDialog("#legend_peakgroundvelocity","#legendcontent_peakgroundvelocity"); toggleDialog("#info_spspectralresponse","#infocontent_spspectralresponse"); toggleDialog("#legend_spspectralresponse","#legendcontent_spspectralresponse"); toggleDialog("#info_losspectralresponse","#infocontent_osspectralresponse"); toggleDialog("#legend_osspectralresponse","#legendcontent_osspectralresponse"); toggleDialog("#info_lsprobab","#infocontent_lsprobab"); toggleDialog("#legend_lsprobab","#legendcontent_lsprobab"); toggleDialog("#info_landslidedisp","#infocontent_landslidedisp"); toggleDialog("#legend_landslidedisp","#legendcontent_landslidedisp"); toggleDialog("#info_lqprobab","#infocontent_lqprobab"); toggleDialog("#legend_lqprobab","#legendcontent_lqprobab"); toggleDialog("#info_hzdp","#infocontent_hzdp"); toggleDialog("#legend_hzdp","#legendcontent_hzdp"); toggleDialog("#info_Ext","#infocontent_Ext"); toggleDialog("#info_sbmg","#infocontent_sbmg"); toggleDialog("#legend_sbmg","#legendcontent_sbmg"); toggleDialog("#info_inundationarea","#infocontent_inundationarea"); $(".CSZradio").bind('click', function () { map.remove(layer); var layerID = $('input[name="CSZradio"]:checked').val(); if (layerID < 9) { layer = new MapImageLayer({ url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer", sublayers: [{ id: layerID }], opacity: 0.6 }); } else if (layerID == 11) { layer = new MapImageLayer({ url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer", sublayers: [{ id: layerID }], opacity: 0.6 }); } else if (layerID == 12) { layer = new FeatureLayer({ url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer/12"}); } map.add(layer); }); // ========================================================================= ProbMaps $("#content-ProbMaps").accordion( // create menu {collapsible: true, active: false}, {heightStyle: "content"}, {icons:{header: "ui-icon-plus",activeHeader: "ui-icon-minus"}} ); $('#header-ProbMaps').bind('click', function () { $('#content-ProbMaps').slideToggle("fast"); $('#content-GeneralMaps').slideUp("fast"); $('#content-CSZMaps').slideUp("fast"); }); toggleDialog("#info_peakgroundacceleration2p50","#infocontent_peakgroundacceleration2p50"); toggleDialog("#legend_peakgroundacceleration2p50","#legendcontent_peakgroundacceleration2p50"); toggleDialog("#info_peakgroundacceleration10p50","#infocontent_peakgroundacceleration10p50"); toggleDialog("#legend_peakgroundacceleration10p50","#legendcontent_peakgroundacceleration10p50"); toggleDialog("#info_ls2p50","#infocontent_ls2p50"); toggleDialog("#legend_ls2p50","#legendcontent_ls2p50"); toggleDialog("#info_ls10p50","#infocontent_ls10p50"); toggleDialog("#legend_ls10p50","#legendcontent_ls10p50"); toggleDialog("#info_ls_susep1","#infocontent_ls_susep1"); toggleDialog("#legend_ls_susep1","#legendcontent_ls_susep1"); toggleDialog("#info_ls_susep2","#infocontent_ls_susep2"); toggleDialog("#legend_ls_susep2","#legendcontent_ls_susep2"); toggleDialog("#info_ls_susep3","#infocontent_ls_susep3"); toggleDialog("#legend_ls_susep3","#legendcontent_ls_susep3"); toggleDialog("#info_ls_susep4","#infocontent_ls_susep4"); toggleDialog("#legend_ls_susep4","#legendcontent_ls_susep4"); $(".Probradio").bind('click', function () { map.remove(layer); var layerID = $('input[name="Probradio"]:checked').val(); if (layerID < 4) { layer = new MapImageLayer({ url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/PROB/MapServer", sublayers: [{ id: layerID }], opacity: 0.6 }); } // else if (layerID == 11) { // layer = new MapImageLayer({ // url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer", // sublayers: [{ id: layerID }], opacity: 0.6 }); // } // else if (layerID == 12) { // layer = new FeatureLayer({ // url: "http://arcweld.engr.oregonstate.edu:6080/arcgis/rest/services/OHELP/M90/MapServer/12"}); // } map.add(layer); }); // ========================================================================= Widget var homeBtn = new Home({ // == Add the home button to the top left corner of the view view: view }); view.ui.add(homeBtn, "top-left"); var searchWidget = new Search({ // == Add the search widget to the top right corner of the view view: view }); view.ui.add(searchWidget, "bottom-left"); // == (1) basemap $('#header-basemaps').bind('click', function () { $('#content-basemaps').slideToggle("fast"); $('#content-measure').slideUp("fast"); $('#slider-Transparency').slideUp("fast"); // $('#content-report').slideUp("fast"); }); $('#basemapStreets').bind('click', function () {map.basemap = 'streets';}); $('#basemapImagery').bind('click', function () {map.basemap = 'satellite';}); $('#basemapTopo').bind('click', function () {map.basemap = 'topo-vector';}); // == (2) Transparency $('#header-trans').bind('click', function () { $('#content-basemaps').slideUp("fast"); $('#slider-Transparency').slideToggle("fast"); // $('#content-report').slideUp("fast"); $('#content-measure').slideUp("fast"); }); $("#slider-Bar").slider({ animate: true, min: 0, max: 100, value: 60, slide: function(event,ui){ $("#showSliderValue").val(ui.value); layer.opacity = ui.value/100; } }); // == (4) measure $('#header-measure').bind('click', function () { $('#content-measure').slideToggle("fast"); $('#content-basemaps').slideUp("fast"); $('#slider-Transparency').slideUp("fast"); // $('#content-report').slideUp("fast"); }); $('#measure-line').bind('click', function () {setActiveWidget("distance");}); $('#measure-polygon').bind('click', function () {setActiveWidget("area");}); $('#measure-clear').bind('click', function () {setActiveWidget(null);}); var activeWidget; function setActiveWidget(type) { if (activeWidget) { view.ui.remove(activeWidget); activeWidget.destroy(); activeWidget = null; } switch (type) { case "distance": activeWidget = new DirectLineMeasurement3D({ view: view }); view.ui.add(activeWidget, "bottom-left"); setActiveButton(document.getElementById('distanceButton')); break; case "area": activeWidget = new AreaMeasurement3D({ view: view }); view.ui.add(activeWidget, "bottom-left"); setActiveButton(document.getElementById('areaButton')); break; case null: if (activeWidget) { view.ui.remove(activeWidget); activeWidget.destroy(); activeWidget = null; } break; } } function setActiveButton(selectedButton) { // == focus the view to activate keyboard shortcuts for sketching view.focus(); var elements = document.getElementsByClassName("active"); for (var i = 0; i < elements.length; i++) { elements[i].classList.remove("active"); } if (selectedButton) { selectedButton.classList.add("active"); } } // == (5) Clear button $('#clearButton').bind('click', function () { map.remove(layer); }); // ========================================================================= Overview map // == Create another Map, to be used in the overview "view" var overviewMap = new Map({ basemap: "topo" }); // == Create the MapView for overview map var mapView = new MapView({ container: "overviewDiv", map: overviewMap, constraints: { rotationEnabled: false } }); // == Remove the default widgets mapView.ui.components = []; var extentDiv = document.getElementById("extentDiv"); mapView.when(function() { // == Update the overview extent whenever the MapView or SceneView extent changes view.watch("extent", updateOverviewExtent); mapView.watch("extent", updateOverviewExtent); // == Update the minimap overview when the main view becomes stationary watchUtils.when(view, "stationary", updateOverview); function updateOverview() { // == Animate the MapView to a zoomed-out scale so we get a nice overview. // == We use the "progress" callback of the goTo promise to update // == the overview extent while animating mapView.goTo({ center: view.center, scale: view.scale * 2 * Math.max(view.width / mapView.width, view.height / mapView.height) }); } function updateOverviewExtent() { // == Update the overview extent by converting the SceneView extent to the // == MapView screen coordinates and updating the extentDiv position. var extent = view.extent; var bottomLeft = mapView.toScreen(extent.xmin, extent.ymin); var topRight = mapView.toScreen(extent.xmax, extent.ymax); extentDiv.style.top = topRight.y + "px"; extentDiv.style.left = bottomLeft.x + "px"; extentDiv.style.height = (bottomLeft.y - topRight.y) + "px"; extentDiv.style.width = (topRight.x - bottomLeft.x) + "px"; } }); // ==Add the widget to the bottom left corner of the view var scaleBar = new ScaleBar({ view: mapView, unit: "dual" // == The scale bar displays both metric and non-metric units. }); mapView.ui.add(scaleBar, "bottom-left"); });