<!DOCTYPE html> | | | <html> | | | <head> | | | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | | | <meta charset="utf-8"> | | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | | <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | | <title>Map Discovery</title> | | | <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css"> | | <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css"> | | | <link href="https://community.esri.com//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> |
| <!-- Custom styles for this template --> | | <link href="fullmap-template.css" rel="stylesheet"> | | <link rel="stylesheet" type="text/css" href="src/src/css/bootstrapmap.css"> |
| <style> | | | html, body, #mapDiv { | | | padding:0; | | | margin:0; | | | height:100%; | | | } | | | | | #rightPane { | | padding: 0; | | width:250px; | | } | | | | #gridDiv { | | height: 20em; | | } |
| button { | | | display: block; | | | } | | | | #messages{ | | padding-top: 0px; | | } |
| .btn{ | | margin-right:10px; | | margin-bottom: 10px; | | } | | .tabbable-panel { | | border:1px solid #eee; | | padding: 10px; | | position: absolute; | | left:70px; | | top:70px; | | background-color: #fff; | | } |
| | | /* Default mode */ | | .tabbable-line > .nav-tabs { | | border: none; | | margin: 0px; | | } | | .tabbable-line > .nav-tabs > li { | | margin-right: 2px; | | } | | .tabbable-line > .nav-tabs > li > a { | | border: 0; | | margin-right: 0; | | color: #737373; | | } | | .tabbable-line > .nav-tabs > li > a > i { | | color: #a6a6a6; | | } | | .tabbable-line > .nav-tabs > li.open, .tabbable-line > .nav-tabs > li:hover { | | border-bottom: 4px solid #fbcdcf; | | } | | .tabbable-line > .nav-tabs > li.open > a, .tabbable-line > .nav-tabs > li:hover > a { | | border: 0; | | background: none !important; | | color: #333333; | | } | | .tabbable-line > .nav-tabs > li.open > a > i, .tabbable-line > .nav-tabs > li:hover > a > i { | | color: #a6a6a6; | | } | | .tabbable-line > .nav-tabs > li.open .dropdown-menu, .tabbable-line > .nav-tabs > li:hover .dropdown-menu { | | margin-top: 0px; | | } | | .tabbable-line > .nav-tabs > li.active { | | border-bottom: 4px solid #f3565d; | | position: relative; | | } | | .tabbable-line > .nav-tabs > li.active > a { | | border: 0; | | color: #333333; | | } | | .tabbable-line > .nav-tabs > li.active > a > i { | | color: #404040; | | } | | .tabbable-line > .tab-content { | | margin-top: -3px; | | background-color: #fff; | | border: 0; | | border-top: 1px solid #eee; | | padding: 15px 0; | | left:50px; | | } | | .portlet .tabbable-line > .tab-content { | | padding-bottom: 0; | | } |
| </style> | | | | | <script src="http://js.arcgis.com/3.13/"></script> | | | <script> | | | var map, tb, featureLayer1, featureLayer2, featureLayer3; | | | | | require([ | | | "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/toolbars/draw", "dojo/promise/all", "dojo/_base/array", | | "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", | | | "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/layers/FeatureLayer", "dijit/registry", | | | "esri/graphic", "esri/tasks/query", "esri/tasks/QueryTask", "esri/InfoTemplate", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", | | | "esri/Color", "dojo/dom", "dojo/on", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", | | "dijit/layout/AccordionContainer", "esri/tasks/FindTask", "esri/tasks/FindParameters", "dojo/domReady!" | | | ], function( | | | Map, ArcGISDynamicMapServiceLayer, Draw, All, arrayUtils, | | SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, | | | PictureFillSymbol, CartographicLineSymbol, FeatureLayer, registry, | | | Graphic, Query, QueryTask, InfoTemplate, DataGrid, ItemFileReadStore, | | | Color, dom, on, parser, FindTask, FindParameters | | ) { | | | |
| var findTask, findParams; | | parser.parse(); |
| //Load Search | | registry.byId("search").on("click", doFind); |
| // map = new Map("mapDiv", { | | | // basemap: "streets", | | | // center: [-85.82966, 33.666494], | | | // zoom: 13 | | | // }); | |
| map.on("load", function () { | | //Create the find parameters | | initToolbar(); | | findParams = new FindParameters(); | | findParams.returnGeometry = true; | | findParams.layerIds = [7]; | | findParams.searchFields = ["MAPNAME", "MAPTYPE", "MAPSCALE"]; | | findParams.outSpatialReference = map.spatialReference; | | console.log("find sr: ", findParams.outSpatialReference); | | }); |
| function doFind() { | | //Set the search text to the value in the box | | findParams.searchText = dom.byId("ownerName").value; | | findTask.execute(findParams, showResult); | | } | | | | | function showResult(results) { | | //This function works with an array of FindResult that the task returns | | map.graphics.clear(); | | var symbol = new SimpleFillSymbol( | | SimpleFillSymbol.STYLE_SOLID, | | new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([98, 194, 204]), 2), | | new Color([98, 194, 204, 0.5]) | | ); |
| //create array of attributes | | var items = arrayUtils.map(results, function (result) { | | var graphic = result.feature; | | graphic.setSymbol(symbol); | | map.graphics.add(graphic); | | return result.feature.attributes; | | }); |
| //Create data object to be used in store | | var data = { | | identifier : "OBJECTID", //This field needs to have unique values | | label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere. | | items : items | | }; |
| | | //Create data store and bind to grid. | | store = new ItemFileReadStore({ | | data : data | | }); | | var grid = registry.byId("grid"); | | grid.setStore(store); | | | | grid.on("rowclick", onRowClickHandlers); | | | | //Zoom back to the initial map extent | | map.centerAndZoom(center, zoom); |
| function onRowClickHandlers(evt) { | | var clickedTaxLotId = evt.grid.getItem(evt.rowIndex).OBJECTID; | | var selectedTaxLot = arrayUtils.filter(map.graphics.graphics, function (graphic) { | | return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedTaxLotId); | | }); | | if ( selectedTaxLot.length ) { | | map.setExtent(selectedTaxLot[0].geometry.getExtent(), true); | | } | | } |
| featureLayer1 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/0",{ | | | mode: FeatureLayer.MODE_SELECTION, | | | infoTemplate: new InfoTemplate("Block: ${BLOCK}", "${*}"), | | | outFields: ["*"] | | | }); | | | | | featureLayer2 = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{ | | | mode: FeatureLayer.MODE_SELECTION, | | | infoTemplate: new InfoTemplate("Block Group: ${BLKGRP}", "${*}"), | | | outFields: ["*"] | | | }); | | | | | featureLayer3 = new FeatureLayer("http://172.16.1.35/arcgis/rest/services/MapIndex/MapServer/7",{ | | | mode: FeatureLayer.MODE_SELECTION, | | | infoTemplate: new InfoTemplate("Map Attributes Details: ${NAME}", "${*}"), | | | outFields: ["*"] | | | }); | | | | | map.addLayers([featureLayer1, featureLayer2, featureLayer3]); | | | | | // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples | | | var markerSymbol = new SimpleMarkerSymbol(); | | | markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z"); | | | markerSymbol.setColor(new Color("#00FFFF")); | | | | | // lineSymbol used for freehand polyline, polyline and line. | | | var lineSymbol = new CartographicLineSymbol( | | | CartographicLineSymbol.STYLE_SOLID, | | | new Color([255,0,0]), 10, | | | CartographicLineSymbol.CAP_ROUND, | | | CartographicLineSymbol.JOIN_MITER, 5 | | | ); | | | | | // fill symbol used for extent, polygon and freehand polygon | | | var fillSymbol = new SimpleFillSymbol(); | | | | | function initToolbar() { | | | tb = new Draw(map); | | | tb.on("draw-end", addGraphic); | | | | | // event delegation so a click handler is not | | | // needed for each individual button | | | on(dom.byId("info"), "click", function(evt) { | | | if ( evt.target.id === "info" ) { | | | return; | | | } | | | var tool = evt.target.id.toLowerCase(); | | | map.disableMapNavigation(); | | | tb.activate(tool); | | | }); | | | } | | | | | function addGraphic(evt) { | | map.graphics.clear(); | | //deactivate the toolbar and clear existing graphics | | | tb.deactivate(); | | | map.enableMapNavigation(); | | | | | // figure out which symbol to use | | | var symbol; | | | if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") { | | | symbol = markerSymbol; | | | } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") { | | | symbol = lineSymbol; | | | } | | | else { | | | symbol = fillSymbol; | | | } | | | | | map.graphics.add(new Graphic(evt.geometry, symbol)); | | | queryMapService(evt.geometry); | | | } | | | | | function queryMapService(Geom){ | | var promises = []; | | | | | var query = new Query(); | | | query.returnGeometry = false; | | | query.outFields = ["*"]; | | | query.geometry = Geom; | | | promises.push(featureLayer1.selectFeatures(query, FeatureLayer.SELECTION_NEW)); | | | promises.push(featureLayer2.selectFeatures(query, FeatureLayer.SELECTION_NEW)); | | | promises.push(featureLayer3.selectFeatures(query, FeatureLayer.SELECTION_NEW)); | | | var allPromises = new All(promises); | | | allPromises.then(function (r) { | | showResults(r); | | }); | | | } | | | | | function showResults(results) { | | var featureLayer1Message = results[0].length; | | var featureLayer2Message = results[1].length; | | var featureLayer3Message = results[2].length; | | | | var count = 0; | | for(var i = 0; i < results.length; i++){ | | | count = count + results.length; | | } | | | | dom.byId("messages").innerHTML = "<p class=\"bg-danger\" style=\"width:300px; padding:5px;\">Total results selected: <b>" + count + "</b></p>"; | | | | var items = arrayUtils.map(results, function (result) { | | | return result; | | }); | | | | var allItems = []; | | | | arrayUtils.map(items[0], function(item){ | | allItems.push(item.attributes); | | | }) | | | | arrayUtils.map(items[1], function(item){ | | allItems.push(item.attributes); | | | }) | | | | arrayUtils.map(items[2], function(item){ | | allItems.push(item.attributes); | | | }) | | | | var data = { | | identifier : "OBJECTID", //This field needs to have unique values | | label : "OBJECTID", //Name field for display. Not pertinent to a grid but may be used elsewhere. | | items : allItems | | }; | | | | //Create data store and bind to grid. | | store = new ItemFileReadStore({ | | data : data | | }); |
| var grid = registry.byId("grid"); | | grid.setStore(store); | | grid.on("rowclick", onRowClickHandler); |
| // function createLink(data){ | | // | return ("<a href="+data+" data-lightbox='roadtrip'>"+'View Map'+"</a> <img src='zoom.png' style='padding-top:5px;'>"); | | // } |
| // | /*set up layout*/ | | // var layout = [[ | | // {'name': 'ID', 'field': 'OBJECTID','width': '200px' }, | | // {'name': 'Map Name', 'field': 'MAPNAME','width': '200px'}, | | // {'name': 'Map Scale', 'field': 'MAPSCALE1','width': '200px'}, | | // {'name': 'Map Type', 'field': 'MAPTYPE','width': '200px'}, | | // {'name': 'Produced Date', 'field':'PRINTINGDATE','width': '200px'}, | | // {'name': 'Projection', 'field': 'PROJECTION','width': '200px'}, | | // {'name': 'Map Viewer', 'field': 'HYPLINK','width': '200px', formatter: createLink}, |
| // /*create a new grid*/ | | // var grid = new DataGrid({ | | // | id: 'grid', | | // | store: store, | | // | structure: layout, | | // | rowSelector: '20px'}); |
| // | /*append the new grid to the div*/ | | // | grid.placeAt("gridDiv"); |
| // | grid.on("rowclick", onRowClickHandler); | | // | /*Call startup() to render the grid*/ | | // | grid.startup(); | | } | | | | function onRowClickHandler(evt) { | | | var clickedId = evt.grid.getItem(evt.rowIndex).OBJECTID; | | | | var selectedFeature1 = arrayUtils.filter(featureLayer1.getSelectedFeatures(), function (graphic) { | | return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedId); | | }); | | | | var selectedFeature2 = arrayUtils.filter(featureLayer2.getSelectedFeatures(), function (graphic) { | | return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedId); | | }); | | | | var selectedFeature3 = arrayUtils.filter(featureLayer3.getSelectedFeatures(), function (graphic) { | | return ((graphic.attributes) && graphic.attributes.OBJECTID === clickedId); | | }); | | | | if ( selectedFeature1.length ) { | | var center = [selectedFeature1[0].geometry.getLongitude(), selectedFeature1[0].geometry.getLatitude()]; | | var zoom = 17; | | map.centerAndZoom(center, zoom); | | | } | | | else if ( selectedFeature2.length ) { | | map.setExtent(selectedFeature2[0].geometry.getExtent(), true); | | | } | | else if ( selectedFeature3.length ) { | | map.setExtent(selectedFeature3[0].geometry.getExtent(), true); | | | } | | } | | | }); | | | </script> | | | </head> | | | | | <body class="claro"> | |
| <div class="navbar navbar-inverse navbar-fixed-top"> | | <div class="container"> | | <div class="navbar-header"> | | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> | | <span class="icon-bar"></span> | | <span class="icon-bar"></span> | | <span class="icon-bar"></span> | | </button> | | <a class="navbar-brand" href="#">Map Discovery</a> | | </div> | | <div class="collapse navbar-collapse"> | | <ul class="nav navbar-nav"> | | <!--li class="active"><a href="#">Basemaps</a></li--> | | <li class="active dropdown" id="basemapList"> | | <a href="#" class="dropdown-toggle" data-toggle="dropdown">Basemaps <b class="caret"></b></a> | | <ul class="dropdown-menu" id="myDropdown"> | | <li><a href="#">Streets</a></li> | | <li><a href="#">Imagery</a></li> | | <li><a href="#">National Geographic</a></li> | | <li><a href="#">Topographic</a></li> | | <li><a href="#">Gray</a></li> | | <li class="divider"></li> | | <li><a href="#">Open Street Map</a></li> | | </ul> | | </li> | | <li><a href="#about">About</a></li> | | <li><a href="#contact">Contact</a></li> | | </ul> | | </div><!--/.nav-collapse --> | | </div> | | </div> |
| <div class="container-fluid" id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" | | style="width:100%; height:100%;"> |
| <div class="row"> | | <div class="col-md-4"> | | <h3>Default Tab</h3> |
| <div class="tabbable-panel"> | | <div class="tabbable-line"> | | <ul class="nav nav-tabs "> | | <li class="active"> | | <a href="#tab_default_1" data-toggle="tab"> | | Search By Text </a> | | </li> | | <li> | | <a href="#tab_default_2" data-toggle="tab"> | | Search By Geometry |
| </a> | | </li> | | <li> | | <a href="#tab_default_3" data-toggle="tab"> | | Search By Bounds </a> | | </li> | | </ul> | | <div class="tab-content"> | | <div class="tab-pane active" id="tab_default_1"> | | Find Maps <input type="text" id="ownerName" size="44" value="" placeholder="Search by name, scale, type, date ..." /> | | | <button id="search" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button" >Search | | | </button> | | </div> | | <div class="tab-pane" id="tab_default_2"> | | <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'Graphics'" id='graphics'> | | <div id="info"> | | | <p>Select a shape and draw on map to discover maps</p> | | <div class="btn-group"> | | <button id="Point" type="button" class="btn btn-info ">Point</button> | | | <button id="Multipoint" type="button" class="btn btn-info ">Multipoint</button> | | | <button id="Line" type="button" class="btn btn-info">Line</button> | | | <button id="Polyline" type="button" class="btn btn-info">Polyline</button> | | | <button id="FreehandPolyline" type="button" class="btn btn-success">Freehand Polyline</button> | | | <button id="Triangle" type="button" class="btn btn-success">Triangle</button> | | | <button id="Extent" type="button" class="btn btn-success">Rectangle</button> | | | <button id="Circle" type="button" class="btn btn-success">Circle</button> | | | <button id="Ellipse" type="button" class="btn btn-info">Ellipse</button> | | | <button id="Polygon" type="button" class="btn btn-info">Polygon</button> | | | <button id="FreehandPolygon" type="button" class="btn btn-info">Freehand Polygon</button> | | | </div> | | </div> | | <div id="messages"></div> | | </div> | | </div> | | <div class="tab-pane" id="tab_default_3"> | | | | </div> | | </div> | | </div> | | </div> | | | </div> | | </div> |
| | | <!-- <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="vertical-align: bottom; float: none;"> | | <div id="gridDiv"></div> | | </div> | --> |
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'" style="height:250px;"> | <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'" formatterScope="myFormatters"> | | <thead> | | <tr> | | <th field="OBJECTID" width='50px'>ID</th> | | <th field="MAPNAME" width='300px'>Name</th> | | <th field="MAPTYPE" width='200px'>Map Type</th> | | <th field="MAPSCALE1" width='100px'>Map Scale</th> | | <th field="PRINTINGDATE" width='200px'>Date Produced</th> | | <th field="PROJECTION" width='200px'>Projection</th> | | <th field="HYPLINK" width='200px' formatter="formatLink">Map</th> | | <th field="PUBLISHEDBY" width='200px'>Published By</th> | | <th field="SHAPE_Area" width='200px'>Shape Area</th> | | | </tr> | | </thead> | | </table> | | </div> | |
</div> formatLink : function(value, index) { | return "<a href="+value+" data-lightbox='roadtrip'>"+'View Map'+"</a> <img src='zoom.png' style='padding-top:5px;'>"; |
} }; </script> |