Re: How to use a feature layer map for mobile version?

BulbulMajumder1 — Fri, 18 Nov 2016 18:16:04 GMT

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,300italic' 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>

topic Re: How to use a feature layer map for mobile version? in ArcGIS Server with JavaScript API Questions

How to use a feature layer map for mobile version?

Re: How to use a feature layer map for mobile version?

Re: How to use a feature layer map for mobile version?

Re: How to use a feature layer map for mobile version?

Re: How to use a feature layer map for mobile version?

Re: How to use a feature layer map for mobile version?