POST
|
How can you start multiple widget simultaneously with LaunchPad theme? In the Web appbuilder editor, I have grouped 4 widgets but still on the load, only icons show in the menu. None of the widgets startups up automatically in group. This was easy with Dart Theme but with Launch pad no real luck. Any help? I have attached the screenshot. It opens only menu group
... View more
01-14-2017
12:43 PM
|
0
|
0
|
1152
|
POST
|
Hi Adrian, You can see the screeshot. I am using the demo widget to create the cedar charts. I am kind of new to widget development. How do you add external javascript and css files in the widget?
... View more
05-01-2016
10:23 PM
|
0
|
2
|
812
|
POST
|
Hi. I am trying to create a webapp builder widget of Esri Cedar Map Interaction Chart. Example - Filter Chart by Map Extent | Esri Cedar I am unable to load the widget properly as whenever I add external d3 and vega files, my widget crashes. Can someone help me create widget for Cedar Library with Basemap Interaction. Your support is appreciated.
... View more
05-01-2016
10:09 PM
|
0
|
1
|
1986
|
POST
|
Hi. I am trying to create a webapp builder widget of Esri Cedar Map Interaction Chart. Example - Filter Chart by Map Extent | Esri Cedar I am unable to load the widget properly as whenever I add external d3 and vega files, my widget crashes. Can someone help me create widget for Cedar Library with Basemap Interaction. Your support is appreciated.
... View more
05-01-2016
01:09 PM
|
0
|
8
|
3470
|
DOC
|
Thanks for the amazing Location widget. I tried to make it work with web app builder 1.3, the latest one but the widget is not showing up at all. Could you please help me work it for the latest 1.3 web app builder or provide any instructions how to do it?
... View more
04-10-2016
11:46 PM
|
0
|
0
|
3230
|
POST
|
Hi Jake. I am creating a Map Discovery tool and extending your code. I am trying to search by Geometry, Text (Using Find Task) and By Bounds (DD, DMS, MGRS) with Buffer I have added the text search but it is not working. Could you please help me add these features including X, Y coordinates (DD) with Buffer. My code is below. <!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); //Load BaseMap map = new Map("mapDiv"); var basemap = new ArcGISDynamicMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); // map = new Map("mapDiv", { // basemap: "streets", // center: [-85.82966, 33.666494], // zoom: 13 // }); findTask = new FindTask("http://172.16.1.35/arcgis/rest/services/MapIndex/MapServer"); // map.on("load", initToolbar); 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 id="mapDiv"></div> <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> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script> var myFormatters = { formatLink : function(value, index) { return "<a href="+value+" data-lightbox='roadtrip'>"+'View Map'+"</a> <img src='zoom.png' style='padding-top:5px;'>"; } }; </script> </body> </html>
... View more
07-07-2015
05:52 AM
|
0
|
0
|
4482
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:25 AM
|