Styling Attribute Inspector in Bootstrap

KeithGerhartz1 · ‎01-04-2016

I am attempting to include the AttributeInspector widget in a Bootstrap app but can't seem to get it to style as expected. Date picker does not appear in a popup, drop downs do not work and the associated fields display as three stacked text boxes, etc.

I know I should not use Claro in combination. Tyring it causes the display to change and improve a bit but still not good and not what should be done in any case.

Any guidance for a Bootstrap newbie?

<Head> listed below. Thanks.

Keith

<head>

<!-- <meta name="description" content="">

<title>Bootstrap Map JS - Get Started</title>

#mapDiv {

min-height: 100%;

max-height: 100%;

}

#search {

display: block;

}

</style>

</head>

ChrisSmith7 · ‎01-04-2016

Do you have the rest of your code that will highlight your issue? Right off the bat, I do see the href links aren't complete... The browser might resolve them, though.

KeithGerhartz1 · ‎01-04-2016

Here is the code. Thanks for the quick reply.

<!DOCTYPE html>

<head>

<!-- <meta name="description" content="">

<title>Bootstrap Map JS - Get Started</title>

#mapDiv {

min-height: 100%;

max-height: 100%;

}

#search {

display: block;

}

</style>

</head>

<body>

</div>

</div>

</button>

</div>

<li><a href="#">Manage Layers</a></li>

<li><a href="#">Use Color Basemap</a></li>

<li><a href="#">Use Greyscale Basemap</a></li>

<li><a href="#">Use Aerial Basemap</a></li>

</ul>

</li>

<li><a id="geosearchNav" href="#">Search</a></li>

<li><a id="aboutNav">About</a></li>

</ul>

</div>

<h4 class="modal-title">Search</h4>

</div>

</div>

<button id="btnDismiss" type="submit" class="btn btn-default btn-fixed" data-dismiss="modal">Dismiss</button>

</form>

</div>

</div>

</div>

<h4 class="modal-title">About</h4>

</div>

</div>

<button id="Button2" type="submit" class="btn btn-default btn-fixed" data-dismiss="modal">Dismiss</button>

</form>

</div>

</div>

</div>

<h4 class="modal-title">Layers</h4>

</div>

<div id="layersContent">vsvvsv</div>

</div>

<button id="Button1" type="submit" class="btn btn-default btn-fixed" data-dismiss="modal">Dismiss</button>

</form>

</div>

</div>

</div>

</body>

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));

var dojoConfig = {

//The location.pathname.replace() logic below may look confusing but all its doing is

// enabling us to load the api from a CDN and load local modules from the correct location.

packages: [{

name: "application",

location: package_path + '/src/js'

}, {

name: "bootstrap",

location: "//rawgit.com/xsokev/Dojo-Bootstrap/master"

}]

};

</script>

require([

"esri/domUtils",

"dijit/registry",

"esri/dijit/Popup",

"esri/InfoTemplate",

"esri/tasks/IdentifyTask",

"esri/tasks/IdentifyParameters",

"esri/dijit/Search",

"esri/dijit/editing/Editor",

"esri/dijit/AttributeInspector",

"esri/dijit/editing/TemplatePicker",

"esri/layers/GraphicsLayer",

"esri/tasks/GeometryService",

"esri/SpatialReference",

"esri/geometry/Point",

"esri/map",

"esri/dijit/BasemapGallery",

"esri/dijit/BasemapLayer",

"esri/dijit/Basemap",

"esri/layers/FeatureLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/dijit/Scalebar",

"esri/graphic",

"esri/Color",

"esri/symbols/SimpleFillSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/PictureMarkerSymbol",

"application/bootstrapmap",

"dojo/parser",

"dojo/query",

"dojo/touch",

"dojo/dom",

"dojo/on",

"dojo/_base/array",

"dojo/_base/connect",

"dojo/dom-construct",

"bootstrap/Modal",

"bootstrap/Collapse",

"bootstrap/Dropdown",

"dojo/domReady!"],

function (

domUtils,

registry,

Popup,

InfoTemplate,

IdentifyTask,

IdentifyParameters,

Search,

Editor,

AttributeInspector,

TemplatePicker,

GraphicsLayer,

GeometryService,

SpatialReference,

Point,

Map,

BasemapGallery,

BasemapLayer,

Basemap,

FeatureLayer,

ArcGISTiledMapServiceLayer,

Scalebar,

Graphic,

Color,

SimpleFillSymbol,

SimpleLineSymbol,

SimpleMarkerSymbol,

PictureMarkerSymbol,

BootstrapMap,

parser,

query,

touch,

dom,

on,

arrayUtils,

connect,

domConstruct)

{

parser.parse();

var graphic;

var identifyTask;

var identifyParams;

var gsvc = new GeometryService("http://wpk-gis01/arcgis/rest/services/Utilities/Geometry/GeometryServer");

basemapColor = new ArcGISTiledMapServiceLayer("http://wpk-gis01/arcgis/rest/services/BaseMapColor/MapServer");

basemapGreyscale = new ArcGISTiledMapServiceLayer("http://wpk-gis01/arcgis/rest/services/BaseMapGreyscale/MapServer");

basemapAerial = new ArcGISTiledMapServiceLayer("http://wpk-gis01/arcgis/rest/services/Aerials/MapServer");

var myLocationLayer = new GraphicsLayer({ id: "location" });

var map = BootstrapMap.create("mapDiv", {

zoom: 0

});

var currentBasemap = []

currentBasemap.push(basemapColor);

map.addLayer(basemapColor);

map.reorderLayer(basemapColor, 0);

var scalebar = new Scalebar({

map: map,

scalebarUnit: "dual"

});

//query("#layersContent").replaceWith("test");

//query("#layersModal").modal("show");

map.addLayer(myLocationLayer);

map.on("layers-add-result", initEditor);

var incidentLayer = new FeatureLayer("http://wpk-gis01/arcgis/rest/services/InfoShare_DataEditing/FeatureServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"], id: "incidentLayer"

});

//incidentLayer.setSelectionSymbol(new SimpleMarkerSymbol().setColor(new Color("red")));

map.addLayers([incidentLayer]);

var incidentCommentsLayer = new FeatureLayer("http://wpk-gis01/arcgis/rest/services/InfoShare_DataEditing/FeatureServer/1", {

outFields: ["*"], id: "incidentCommentsLayer"

});

function initEditor(evt)

{

var layers = arrayUtils.map(evt.layers, function (result)

{

return { featureLayer: result.layer };

});

var attributeInspector = new AttributeInspector({ layerInfos: layers }, "attributeDiv");

var settings = {

attributeInspector: attributeInspector,

map: map,

layerInfos: layers,

toolbarVisible: false

};

var params = { settings: settings };

var myEditor = new Editor(params, 'editorDiv');

myEditor.startup();

}

//map.on("load", mapReady);

//var parcelsURL = "http://wpk-gis01/arcgis/rest/services/BaseMapGreyscale/MapServer";

//function mapReady()

//{

// map.on("click", executeIdentifyTask);

// identifyTask = new IdentifyTask(parcelsURL);

// identifyParams = new IdentifyParameters();

// identifyParams.tolerance = 3;

// identifyParams.returnGeometry = true;

// identifyParams.layerIds = [3, 20];

// identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;

// identifyParams.width = map.width;

// identifyParams.height = map.height;

//};

//function executeIdentifyTask(event)

//{

// identifyParams.geometry = event.mapPoint;

// identifyParams.mapExtent = map.extent;

// var deferred = identifyTask

// .execute(identifyParams)

// .addCallback(function (response)

// {

// return arrayUtils.map(response, function (result)

// {

// var feature = result.feature;

// var layerName = result.layerName;

// feature.attributes.layerName = layerName;

// if (layerName === 'Parcels - Orange')

// {

// var infoTemplateParcel = new InfoTemplate("Parcel",

// "${PARCEL}");

// feature.setInfoTemplate(infoTemplateParcel);

// }

// else if (layerName === 'Cities - Orange')

// {

// var infoTemplateCities = new InfoTemplate("Cities",

// "${CITY_NAME}");

// feature.setInfoTemplate(infoTemplateCities);

// }

// return feature;

// });

// map.infoWindow.setFeatures([deferred]);

// map.infoWindow.show(event.mapPoint);

//}

function changeLayer(layerName)

{

map.removeLayer(currentBasemap[0])

currentBasemap.length = 0;

currentBasemap.push(layerName)

map.addLayer(layerName)

map.reorderLayer(layerName, 0);

}

function findMe()

{

var options = {

enableHighAccuracy: true,

timeout: 5000,

maximumAge: 0

};

if (navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(

function (position)

{

var pointin = new Point(position.coords.longitude, position.coords.latitude, new SpatialReference({

wkid: 4326

}));

gsvc.project([pointin], new SpatialReference({ wkid: 2236 }), function (projectedPoints)

{

var pt = projectedPoints[0];

var graphic = new Graphic(pt, new PictureMarkerSymbol('images/i_target.png', 38, 38));

myLocationLayer.add(graphic);

map.centerAndZoom(pt, 5);

});

var interval = setInterval(function ()

{

clearInterval(interval);

map.getLayer('location').clear();

}, 5000);

}, function (err)

{

console.warn('ERROR(' + err.code + '): ' + err.message);

}, options);

}

else

{

alert("Browser doesn't support Geolocation. Visit http://caniuse.com to see browser support for the Geolocation API.");

}

//UI EVENTS

var s = new Search({

map: map,

enableHighlight: false

}, "search");

s.startup();

on(s, 'select-result', function (e)

{

query("#geosearchModal").modal("hide");

});

query("#basemapList li").on(touch.press, function (e)

{

e.preventDefault();

switch (e.target.text)

{

case "Use Color Basemap":

changeLayer(basemapColor);

break;

case "Use Greyscale Basemap":

changeLayer(basemapGreyscale);

break;

case "Use Aerial Basemap":

changeLayer(basemapAerial);

break;

case "Manage Layers":

query("#layersModal").modal("show");

collapseNavbarAfterSelection(e);

break;

}

collapseNavbarAfterSelection(e);

});

query("#findMe").on(touch.press, function (e)

{

e.preventDefault();

findMe();

});

query("#geosearchNav").on('click', function (e)

{

query("#geosearchModal").modal("show");

collapseNavbarAfterSelection(e);

});

query("#aboutNav").on('click', function (e)

{

query("#aboutModal").modal("show");

collapseNavbarAfterSelection(e);

});

function collapseNavbarAfterSelection(e)

{

if (query(".navbar-collapse.in").length > 0)

{

e.stopPropagation();

query(".navbar-toggle")[0].click();

} else

{

e.stopPropagation();

}

});

</script>

</html>

ChrisSmith7 · ‎01-04-2016

Are you sure your bootstrap module is sourced correctly? It seems to be throwing a 404 for me.

KeithGerhartz1 · ‎01-04-2016

Not getting an error here.