How to use a feature layer map for mobile version?

BulbulMajumder1 · ‎11-18-2016

I am trying to use the mobile version for my code. When I am trying to use

Getting Started - Mobile this code along with 3.13/3.17/3.18 version with the feature layer of java script but whenever I am trying to use
"dojox/mobile",
"dojox/mobile/parser",
"esri/sniff",
"dojox/mobile/deviceTheme",
"dojo/dom",
"dijit/registry",
"dojo/on",
"dojox/mobile/ToolBarButton",
"dojox/mobile/View",
"dojox/mobile/ContentPane"

from the "Getting Started" its not showing up and giving me an error....I can provide my code upon request....Any help will be greatly appreciated.

Thanks and regards
Bulbul

RobertScheitlin__GISP · ‎11-18-2016

Bulbul,

I would have to see your code to tell you where you error is. There is no reason why you can not use FeatureLayer class when using the compact API or dojox mobile.

BulbulMajumder1 · ‎11-18-2016

Thanks Robert,I am attaching my code with this reply.

Bulbul

the js I am using is

/************************************************
Script: productionWellsView313.js
************************************************/

/* Script updated to AMD-style formatting */

var map;
var navToolbar;

require([
"esri/config", "esri/map", "esri/arcgis/utils", "esri/geometry/Extent", "esri/SpatialReference",
"esri/InfoTemplate", "esri/dijit/Legend",
"esri/tasks/LegendLayer", "dojo/on", "dijit/registry", "esri/dijit/BasemapGallery", "esri/geometry/webMercatorUtils",
"esri/geometry/scaleUtils", "esri/dijit/OverviewMap",
"esri/dijit/Scalebar", "esri/dijit/HomeButton",
"esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol", "esri/tasks/GeometryService",
"dojo/dom", "dojo/dom-construct", "dojo/parser", "dojo/_base/array",
"dijit/form/HorizontalSlider", "dijit/form/Button",
"dijit/form/DropDownButton",
"dijit/form/TextBox",
"dijit/form/CheckBox",
"dijit/Menu",
"dijit/MenuItem",
"esri/Color",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/TitlePane",
"dojo/domReady!"
],
function (
esriConfig, Map, utils, Extent, SpatialReference,
InfoTemplate, Legend,
LegendLayer, on, registry, BasemapGallery, webMercatorUtils,
scaleUtils, OverviewMap,
Scalebar, HomeButton,
Popup, PopupTemplate, ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer, FeatureLayer,
SimpleMarkerSymbol, GeometryService,
dom, domConstruct, parser, arrayUtils,
HorizontalSlider, Button, DropDownButton, TextBox, CheckBox, Menu, MenuItem, Color,
AccordionContainer, BorderContainer, ContentPane, TitlePane
) {

parser.parse();

/* Define the initial extent for the map area */
//var initialExtent = new Extent({ "xmin": -12972052.788, "ymin": 5429282.436, "xmax": -11508904.02, "ymax": 6363263.470, "spatialReference": { "wkid": 3857 } });

// var llExtent = new Extent(-12972052.788, 5429282.436, -11508904.02, 6363263.470, new SpatialReference({ "wkid": 3857 }));
var legendLayers = [];
var popupOptions = {
markerSymbol: new SimpleMarkerSymbol("circle", 32, null,
new Color([0, 0, 0, 0.25])),
marginLeft: "20",
marginTop: "20"
};

var popup = new Popup(popupOptions, domConstruct.create("div"));

var map = new esri.Map("map", {
//extent: initialExtent,
basemap: "topo",
center: [-110, 47],
zoom: 6
});

//map.setExtent(llExtent);

/* Add the BASEMAP GALLERY from ESRI */

var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
map: map
});

//basemapGallery.startup(); // This is commented out since handled in DDLB

/* Home Button */
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();

/* Scale Bar */
var scalebar = new Scalebar({
map: map,
});

/* Overview Map */
var overviewMapDijit = new OverviewMap({
map: map,
attachTo: "top-right",
height: 100,
width: 100,
visible: true
});
overviewMapDijit.startup();

map.on("load", function () { dojo.byId("mapName").innerHTML = "<strong>Current Basemap:</strong> Topographic"; });

/* When the map is loaded enable coordinate display in DIV */

map.on("load", function () {
map.on("mouse-move", showCoordinates);
map.on("mouse-drag", showCoordinates);
});

/* When the extent changes show the changed scale in DIV */

map.on("extent-change", changeScale);

/* When the extent changes show the new extent in DIV */

//map.on("extent-change", showExtent);

/* When the slider changes, change the opacity */

map.on("load", function () {
on(registry.byId("sliderOpacity"), "change", changeOpacity);
});

/* Create the DDLB for the basemaps layers and place
it in the DIV labeled "basemapMenu" in the Layers
section */

map.on("load", function () {
on(basemapGallery, "load", function () {
dojo.forEach(basemapGallery.basemaps, function (basemap) {
//Add a menu item for each basemap, when the menu items are selected
dijit.byId("basemapMenu").addChild(
new dijit.MenuItem({
label: basemap.title,
onClick: dojo.hitch(function () {
basemapGallery.select(basemap.id);
dojo.byId("mapName").innerHTML = "<strong>Current Basemap:</strong> " + basemap.title;
})
})
);
});
});
});

/* Create the legend */
map.on("layers-add-result", function () {
var legend = new Legend({
map: map,
layerInfos: legendLayers
}, "legendDiv");
legend.startup();
});

/*********************************************************
1:500,000 MBMG GEOLOGY LAYER DEFINITIONS
*********************************************************/

/* Add the MBMG 1:500,000 geology layer as a Tiled Map Service Layer */
var geo500Layer = new ArcGISTiledMapServiceLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/Geology/Geology_500k/MapServer", { id: 'geo500Layer', opacity: 0.2 });
// map.addLayer(geo500Layer);

/*********************************************************
STREAMS LAYER DEFINITIONS
*********************************************************/

/* Add the STREAMS layer */
var streamLayer = new ArcGISDynamicMapServiceLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/Surface/Streams/MapServer", { id: 'streamLayer' });
//map.addLayer(streamLayer);

legendLayers.push({
layer: streamLayer,
title: "Streams"
})

/*********************************************************
HYDROLOGIC UNIT CODE LAYER DEFINITIONS
*********************************************************/

/* Add the HUC layer */
var hucLayer = new ArcGISDynamicMapServiceLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/Surface/HUCs/MapServer", { id: 'hucLayer' });
legendLayers.push({
layer: hucLayer,
title: "HUC Boundary"
})
//map.addLayer(hucLayer);

/*********************************************************
GWAAMON LAYER DEFINITIONS
*********************************************************/

/*
Create a PopupTemplate for the GWAAMON layer - Superceded
by the InfoTemplate definition below
*/

var gwaamonTemplate = new PopupTemplate({
title: "GWAAMON Site Details",
fieldInfos: [
{ fieldName: "gwicid", visible: true, label: "GWIC Id" },
{ fieldName: "site_name", visible: true, label: "Site Name" },
{ fieldName: "site_type", visible: true, label: "Site Type" },
{ fieldName: "township", visible: true, label: "Township" },
{ fieldName: "range", visible: true, label: "Range" },
{ fieldName: "section", visible: true, label: "Section" },
{ fieldName: "qsection", visible: true, label: "Q Section" },
{ fieldName: "swl_meas", visible: true, label: "# Meas" },
{ fieldName: "samples", visible: true, label: "W Qual" },
{ fieldName: "field_visits", visible: true, label: "F Visit" }
],
showAttachments: true
});

/* Create a new InfoTemplate for the GWAAMON layer 2014-12-29 */

var gwaamonInfoTemplate = new InfoTemplate();
gwaamonInfoTemplate.setTitle("GWIC Record ${gwicid}");
gwaamonInfoTemplate.setContent("<table>" +
"<tr valign='top'><td style='white-space:nowrap;'>Site Name</td><td>${site_name}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Well Log</td><td><a target='_newwellwin' href='http://mbmggwic.mtech.edu/sqlserver/v11/reports/SiteSummary.asp?gwicid=${gwicid}&agency=mbmg&reqby=M&'>View</a></td></tr>" +
"<tr><td style='white-space:nowrap;'>Site Type</td><td style='white-space:nowrap;'>${site_type}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>${township} ${range} ${section} ${qsection}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Water Levels</td><td>${swl_meas} <a target='_newwellwin' href='http://mbmggwic.mtech.edu/sqlserver/v11/reports/WellHydrograph.asp?gwicid=${gwicid}&agency=mbmg&reqby=M&'>Graph</a></td></tr>" +
"<tr><td style='white-space:nowrap;'>Samples</td><td>${samples}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Field Visits</td><td>${field_visits}</td></tr>" +
"</table>");

var gwaamonFeatureLayer = new FeatureLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/Water/GWAAMON_wells/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["gwicid", "site_name", "site_type", "township", "range", "section", "qsection", "swl_meas", "samples", "field_visits"],
infoTemplate: gwaamonInfoTemplate
});
legendLayers.push({
layer: gwaamonFeatureLayer,
title: "MBMG GWAAMON Network"
});
//map.addLayer(gwaamonFeatureLayer);

/*********************************************************
GWIC LAYER DEFINITIONS
*********************************************************/

/* Create a new InfoTemplate for the MBMG SWAMP layer 2014-12-29 */
var gwicInfoTemplate = new InfoTemplate();
gwicInfoTemplate.setTitle("GWIC Record ${GWICId}");
gwicInfoTemplate.setContent("<table>" +
"<tr valign='top'><td style='white-space:nowrap;'>Site Name</td><td>${site_name}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Well Log</td><td><a target='_newwellwin' href='http://mbmggwic.mtech.edu/sqlserver/v11/reports/SiteSummary.asp?gwicid=${gwicid}&agency=mbmg&reqby=M&'>View</a></td></tr>" +
"<tr><td style='white-space:nowrap;'>Site Type</td><td style='white-space:nowrap;'>${site_type}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Location</td><td style='white-space:nowrap;'>${township} ${range} ${section} ${qsection}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Total Depth</td><td>${total_depth}</td></tr>" +
"<tr><td style='white-space:nowrap;'>Static Water Level</td><td>${swl}</td></tr>" +
"</table>");

var gwicFeatureLayer = new FeatureLayer("http://mbmgmap.mtech.edu/ArcGIS/rest/services/Water/GWIC_wells_map_service_250k_vis/MapServer/0",
{
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: gwicInfoTemplate,
outFields: ["*"]
});
legendLayers.push({
layer: gwicFeatureLayer,
title: "GWIC Wells"
});

/* Add the layers to the map that have been defined above */

map.addLayers([geo500Layer, streamLayer, hucLayer, gwaamonFeatureLayer, gwicFeatureLayer]);

/* Turn on mouse features */

// map.enableScrollWheelZoom();
//map.enableDoubleClickZoom();

/*
Build the check boxes that represent the layers
that have been added to the map above.
*/

map.on("layers-add-result", function () {
//add check boxes
arrayUtils.forEach(legendLayers, function (layer) {
var layerName = layer.title;
var checkBox = new CheckBox({
name: "checkBox" + layer.layer.id,
value: layer.layer.id,
checked: layer.layer.visible
});
checkBox.on("change", function () {
var targetLayer = map.getLayer(this.value);
targetLayer.setVisibility(!targetLayer.visible);
this.checked = targetLayer.visible;
});

//add the check box and label to the toc
domConstruct.place(checkBox.domNode, dom.byId("toggle"), "after");
var checkLabel = domConstruct.create("label", {
"for": checkBox.name,
innerHTML: layerName
}, checkBox.domNode, "after");
domConstruct.place("<br />", checkLabel, "after");
});
});

/* Re-size the infoWindow to fit the standard contents */

map.infoWindow.resize(300, 150);

/* Function to change the opacity of a layer */

function changeOpacity(op) {
var newOp = (op / 100);
geo500Layer.setOpacity(newOp);
}

/* Show Lat/Long coordinate pairs */

function showCoordinates(evt) {
var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
dom.byId("currentPosition").innerHTML = "<strong>Lon:</strong> " + mp.x.toFixed(6) + "<strong> Lat:</strong> " + mp.y.toFixed(6) + " ";
}

/* New changeScale function uses esri/geometry/scaleUtils */

function changeScale() {
var scale = scaleUtils.getScale(map);
dojo.byId("currentScale").innerHTML = "<strong>Scale:</strong> 1:" + addCommas(scale.toFixed(0));
}

/* Custom function to add commas to a string (number) */

/* Extents */
function showExtent() {
var s = "";
s = "XMin: " + map.extent.xmin + "<br/>"
+ " YMin: " + map.extent.ymin + "<br/>"
+ " XMax: " + map.extent.xmax + "<br/>"
+ " YMax: " + map.extent.ymax;
dojo.byId("extentDisplay").innerHTML = s;
}

});

and the html is

<!DOCTYPE html>

<html class="layout_1 page_501 layout_responsive hasTopbanner hasLeftbanner hasRightbanner hasBottombanner pagetype_default" lang="en">

&& !/CriOS/.test(navigator.userAgent), y = e.exports = { offset: a(), origin: g, features: {}, xhrWrappable: w }; s

? (s

("DOMContentLoaded", i, !1), f

("load", r, !1)) : (s("onreadystatechange", o), f("onload", r)), u("mark", ["firstbyte", a()], null, "api"); var h = 0 }, {}] }, {}, ["loader"]);</script>
<link rel="shortcut icon" href="http://mbmgweb.mtech.edu/newweb/favicon.ico">

table {
text-align: left;
}

a {
color: #;
}

a:visited {
color: #;
}

a:active {
color: #;
}

input {
font: 14px;
color: #;
}

select {
font: 14px;
}

textarea {
font: 14px;
color: #;
}

.buttons {
font: 14px;
color: white;
font-weight: bold;
background-color: #;
}

.text_misc, .text_misc td {
line-height: normal;
}

.text_misc p {
margin-top: 0px;
}

.hier {
font: 10px;
color: #;
}

#topbanner {
width: 100%;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}

#midcontainer {
background-color: #;
}

#mainmiddle {
width: 100%;
min-height: 200px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}

#contentdiv {
min-height: 200px;
height: 100%;
}

#bottomcontainer {
clear: both;
text-align: center;
}

#bottombanner {
width: 100%;
margin-top:;
margin-right: auto;
margin-bottom:;
margin-left: auto;
padding-top: 0px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0px;
}

#poweredby {
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}

#poweredby div {
width: 100%;
margin: auto;
}
</style>
<script type="text/javascript" src="http://newjs.finalsite.com/160724/javascript/jQuery/jquery.min.js"></script>
<script type="text/javascript"> var $j = jQuery.noConflict(); </script>
<script type="text/javascript" src="http://newjs.finalsite.com/160724/javascript/fs_global.js"></script>
<script type="text/javascript">

window.name = 'finalsite_misericordia';

var pageid = 501;
var pagearray = new Array();
pagearray[0] = 501;

trackingpath = '/Academics'; //Fix syntax highlighting "

</script>

#navtable_5 ul {
list-style-type: none;
margin: 0;
padding: 0;
}

#navtable_5 a, #navtable_5 a:link, #navtable_5 a:visited {
display: block;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-bottom: 0px;
font-size: 13px;
text-decoration: none;
}

#navtable_5 span {
display: block;
background-image: none !important;
}
/* 2nd level */
#navtable_5 ul a {
background: none !important;
padding-left: 24px !important;
border-color: transparent !important;
font-size: 13px !important;
font-weight: normal !important;
}

#navtable_5 ul a span {
background-image: none !important;
}

/* 3rd level */
#navtable_5 ul ul a {
background: none !important;
padding-left: 36px !important;
border-color: transparent !important;
font-size: 13px !important;
font-weight: normal !important;
}

#navtable_5 ul ul a span {
background-image: none !important;
}

/* On State */
#navtable_5 a.navon {
}

#navtable_5 a.navon span {
}

/* Hover State */
#navtable_5 a:hover {
}
</style>
<script type="text/javascript" src="http://newjs.finalsite.com/160724/javascript/jQuery/plugins/jquery.fsBreakly.js"></script>
<script type="text/javascript" src="http://newjs.finalsite.com/160724/javascript/pages/blogs/blog.js"></script>
<link rel="stylesheet" type="text/css" href="http://newcss.finalsite.com/160724/css/news/news.css">
<link type="text/css" rel="stylesheet" href="http://newjs.finalsite.com/160724/javascript/jQuery/themes/finalsite/jquery.ui.1.8rc3.css">
<style type="text/css"></style>
<style type="text/css">
#bannermod208 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod208, #bannermod208 td {
}

#bannermod208 .bannermodtitle {
}

#bannermod208 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod180 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod180, #bannermod180 td {
}

#bannermod180 .bannermodtitle {
}

#bannermod180 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod10 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod10, #bannermod10 td {
}

#bannermod10 .bannermodtitle {
}

#bannermod10 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod334 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod334, #bannermod334 td {
}

#bannermod334 .bannermodtitle {
}

#bannermod334 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod182 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod182, #bannermod182 td {
}

#bannermod182 .bannermodtitle {
}

#bannermod182 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#leftbanner {
width: 208px;
}

#bannermod5 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod5, #bannermod5 td {
}

#bannermod5 .bannermodtitle {
}

#bannermod5 .bannermodtd {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#rightbanner {
width: 220px;
}

#bannermod262 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod262, #bannermod262 td {
}

#bannermod262 .bannermodtitle {
}

#bannermod262 .bannermodtd {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#rightbanner {
width: 220px;
}

#bannermod207 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod207, #bannermod207 td {
}

#bannermod207 .bannermodtitle {
}

#bannermod207 .bannermodtd {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod224 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod224, #bannermod224 td {
}

#bannermod224 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod224 .bannermodtitle {
}

#bannermod184 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod184, #bannermod184 td {
}

#bannermod184 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod184 .bannermodtitle {
}

#bannermod191 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod191, #bannermod191 td {
}

#bannermod191 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod191 .bannermodtitle {
}

#bannermod193 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod193, #bannermod193 td {
}

#bannermod193 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod193 .bannermodtitle {
}

#bannermod194 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod194, #bannermod194 td {
}

#bannermod194 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod194 .bannermodtitle {
}

#bannermod195 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod195, #bannermod195 td {
}

#bannermod195 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod195 .bannermodtitle {
}

#bannermod196 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod196, #bannermod196 td {
}

#bannermod196 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod196 .bannermodtitle {
}

#bannermod197 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod197, #bannermod197 td {
}

#bannermod197 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod197 .bannermodtitle {
}

#bannermod192 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod192, #bannermod192 td {
}

#bannermod192 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod192 .bannermodtitle {
}

#bannermod185 {
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
}

#bannermod185, #bannermod185 td {
}

#bannermod185 .bannermodcontent {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
}

#bannermod185 .bannermodtitle {
}
</style>

<meta name="viewport" content="initial-scale=1, width=device-width" />

<link href="http://mbmgweb.mtech.edu/newweb3/core.css" rel="stylesheet" type="text/css">
<link href="http://mbmgweb.mtech.edu/newweb3/layout.css" rel="stylesheet" type="text/css">
<link href="http://mbmgweb.mtech.edu/newweb3/core-desktop.css" rel="stylesheet" type="text/css">
<link href="http://mbmgweb.mtech.edu/newweb3/core-tablet.css" rel="stylesheet" type="text/css">
<link href="http://mbmgweb.mtech.edu/newweb3/core-mobile.css" rel="stylesheet" type="text/css">

<link href="http://mbmgweb.mtech.edu/newweb3/custom.css?604" rel="stylesheet" type="text/css">
<link href="http://www.misericordia.edu/uploaded/code/revisions.css?527" rel="stylesheet" type="text/css">


<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.misericordia.edu/uploaded/template/code/jquery.mCustomScrollbar.css" />

<script src="http://www.misericordia.edu/uploaded/code/jquery.flexslider.js"></script>
<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>

<script src="http://www.misericordia.edu/uploaded/template/code/jquery.core.js?v=2"></script>

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,700italic,600italic,400italic,300...' rel='stylesheet' type='text/css'>

ga('create', 'UA-3000352-1', 'auto');
ga('send', 'pageview');

</script>

<script type="text/javascript">
(function (d, s, i, r) {
if (d.getElementById(i)) { return; }
var n = d.createElement(s), e = d.getElementsByTagName(s)[0];
n.id = i; n.src = '//js.hs-analytics.net/analytics/' + (Math.ceil(new Date() / r) * r) + '/536549.js';
e.parentNode.insertBefore(n, e);
})(document, "script", "hs-analytics", 300000);
</script>


<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-54be8237215169f8" async="async"></script>

<script>
(function (a, b, c, d, e, f, g) {
a = a || function () { (a.q = a.q || []).push(arguments) }; f = b.createElement(c);
g = b.getElementsByTagName(c)[0]; f.async = 1; f.src = d + "/cbe/"; g.parentNode.insertBefore(f, g);
a('create', d, 2);
a('log', 'pageview');
})(window, document, "script", "https://mis.capturehighered.net", "_cbe");
</script>


<script>
(function () {
var sz = document.createElement('script'); sz.type = 'text/javascript'; sz.async = true;
sz.src = '//us1.siteimprove.com/js/siteanalyze_54160.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(sz, s);
})();
</script>


<link href="http://mbmgweb.mtech.edu/newweb3/support.custom.css?542016" rel="stylesheet" type="text/css">
<script src="http://www.misericordia.edu/uploaded/themes/library/js/support.custom.js"></script>

<link href="https://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

<link href="http://mbmgweb.mtech.edu/newweb3/signin.css" rel="stylesheet">

<script src="https://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>

<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.18esri/css/esri.css" />
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://data.mbmg.mtech.edu/css/mapperStyles_1.css">

<script type="text/javascript" src="http://js.arcgis.com/3.13/"></script>

<script type="text/javascript" src="http://mbmgweb.mtech.edu/3.13/mapper/js/productionQuakesView313.js"></script>

<link rel="stylesheet" href="https://developers.arcgis.com/javascript/3/samples/mobile_template/css/main.css">

<style type="text/css">
#HomeButton {
position: absolute;
top: 95px;
left: 20px;
z-index: 50;
}
</style>

</head>

<div id="topcontainer">

<div id="content208">
<button type="button" id="mobile-nav-close">Close</button>
<form method="get" action="searchresults.cfm" name="fs_search">
<input name="keywords" placeholder="search mbmg" id="search_keywords" type="text">
<label for="search_keywords">Search Keywords</label>
<button type="submit" id="search_submit"><i class="fa fa-search"></i>Search</button>
</form>

<div id="content180">

<a href="page.cfm?p=1" class="site-logo"><img src="http://mbmgweb.mtech.edu/newweb3/logombmg.png" alt="Clicking the Misericordia University logo will return you to the homepage"></a>


<form method="get" action="searchresults.cfm" name="fs_search">
<input name="keywords" id="search_keywords_mobile" placeholder="search mbmg" type="text">
<label for="search_keywords_mobile">Search Keywords</label>
<button type="submit" id="search_submit"><i class="fa fa-search"></i>Search</button>
</form>


<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Well Data</a></li>
<li><a href="#">Reports</a></li>
<li><a href="#">DrillerWeb</a></li>
<li><a href="#">DNRC</a></li>
<li><a href="#">Help!</a></li>
</ul>


<button id="mobile-nav-control" class="mobile" type="button"><i class="fa fa-navicon"></i> Menu</button>

</div>

<div id="bannermod10" class="main-nav">
<div id="bannerdiv10" class="bannermodcontent">
<div style="clear: both;"></div>
<div id="content10">
<ul id="nav" class="row">
<li><a href="https://community.esri.com/Final_v1/main.html" target="_self" class="fsBtn">Home</a></li>
<li><a href="https://community.esri.com/Final_v1/about/about-mbmg.html?p=499" target="_self" class="fsBtn">About</a></li>
<li><a href="../newweb3/page.cfm?p=503" class="fsBtn">Research</a></li>
<li><a href="../newweb3/page.cfm?p=505" class="fsBtn">Information</a></li>
<li><a href="https://community.esri.com/Final_v1/museum/museum-main.html?p=504" target="_self" class="fsBtn">Mineral Museum</a></li>
<li><a href="../newweb3/njf/page.cfm?p=506" class="fsBtn">Kids</a></li>
</ul>
</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>

<!--<div id="bannermod182" class="hier-tools hidden">

<div id="content182">
<div class="hiersect"><a href="page.cfm?p=1">Home</a> > <div class=hier style='margin-left: 0'>Information</div>
</div>
</div>

</div>

<li>
<a href="page.cfm?p=518">Staff Information</a>
</li>

<li>
<a href="page.cfm?p=565">Location</a>
</li>

<li>
<a href="page.cfm?p=516">Director's Message</a>
</li>

<li>
<a href="page.cfm?p=515">Current Jobs</a>
</li>
</ul>
</div>

<li>
<a href="http://misericordia.edu/page.cfm?p=986" target="_blank">MU Today</a>
</li>

<li>
<a href="http://www.misericordia.edu/page.cfm?p=779" target="_blank">Publications</a>
</li>

<li>
<a href="page.cfm?p=520">Campus Calendar</a>
</li>

</ul>
</div>

<li>
<a href="http://misericordia.edu/page.cfm?p=540" target="_blank">Apply Now</a>
</li>

<li>
<a href="page.cfm?p=530">Majors and Programs</a>
</li>

<li>
<a href="page.cfm?p=709">Academic Colleges</a>
</li>

<li>
<a href="page.cfm?p=710">University Catalog</a>
</li>

<li>
<a href="page.cfm?p=524">Course Schedule</a>
</li>

<li>
<a href="page.cfm?p=712">Honors Program</a>
</li>

<li>
<a href="page.cfm?p=713">Vice President of Academic Affairs</a>
</li>

<li>
<a href="page.cfm?p=714">Office of Service-Learning</a>
</li>

<li>
<a href="page.cfm?p=523">Registrar</a>
</li>

<li>
<a href="page.cfm?p=1476">Academic Calendars</a>
</li>

<li>
<a href="http://library.misericordia.edu">Library</a>
</li>

<li>
<a href="page.cfm?p=1371">Commencement</a>
</li>

<li>
<a href="http://studyabroad-away.misericordia.edu/">Study Abroad/Study Away</a>
</li>

</ul>
</div>

</div>-->

<li>
<a href="http://athletics.misericordia.edu/staff.aspx" target="_blank">SWAMP</a>
</li>

</ul>
</div>

<li>
<a href="http://athletics.misericordia.edu/" target="_blank">Mining Program</a>
</li>

<li>
<a href="http://www.mucougarsgear.com/" target="_blank">Geologic Research and Mapping</a>
</li>

<li>
<a href="http://www.mucougarsgear.com/" target="_blank">State Geology Map</a>
</li>
<li>
<a href="http://www.mucougarsgear.com/" target="_blank">GIS</a>
</li>

</ul>
</div>

<!-- <div id="dhtmlmenu_504" style="visibility:hidden;" onmouseover="clearTimeout(wait);" onmouseout="mnuOut('dhtmlbtn_504',this.id);">

</div>-->

<div id="dhtmlmenu_506" style="visibility:hidden;" onmouseover="clearTimeout(wait);" onmouseout="mnuOut('dhtmlbtn_506',this.id);">
<ul>
<li>
<a href="http://cougarconnect.misericordia.edu/s/352/index.aspx?sid=352&gid=1&pgid=938" target="_blank">Science fair</a>
</li>

</ul>
</div>

<div id="ql_menu" onmouseover="fsBtn('ql_btn');" onmouseout="fsBtn('ql_btn','off');" style="visibility: hidden;">
<ul><li><a href="https://mymu.misericordia.edu" target="_blank">Home</a></li><li><a href="https://mymu.misericordia.edu" target="_blank">WellData</a></li><li><a href="http://cougarconnect.misericordia.edu" target="_blank">Reports</a></li><li><a href="page.cfm?p=557" target="_self">DrillerWeb</a></li><li><a href="page.cfm?p=557" target="_self">DrillerWeb</a></li><li><a href="page.cfm?p=557" target="_self">DNRC</a></li></ul>
</div>

</script>

</body>
</html>

RobertScheitlin__GISP · ‎11-18-2016

Bulbul,

OK, I am a little confused then. You mention you are having issue with a dojox mobile view and the productionWellsView313.js does not have any dojox requires in it?...

BulbulMajumder1 · ‎11-18-2016

The attached html contains the following snippet

without using dojox requires in productionWellsView313.js

The html shows this page. Only clicking on span, the map is being displayed.

I would like to get the map on-screen and use spans to navigate the map.

Now, if I include the dojox requires in productionWellsView313.js, the page becomes completely empty.

Please help. I hope this will make sense , if not let me know.

Thanks
Bulbul

BulbulMajumder1 · ‎11-22-2016

So this make any sense Robert ?