A little confused. I have been referencing the examples and am putting together a basic Java Script app.I moved to the examples on Printing and am confused with the examples referencing app.mapExample:https://developers.arcgis.com/javascript/jssamples/widget_print_esri_request.html
app.map = new esri.Map("map", {
basemap: "hybrid",
center: [-117.447, 33.906],
zoom: 17,
slider: false
});All examples up to this point have been like thismap = new Map("mapDiv", {
basemap: "topo",
center: [-77.4329, 37.5410],
zoom: 7,
slider: true
});
Can someone help me understand this. I have attached my HTML code and Js page if you need a reference as to how I can incorporate this into my app.Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
<!-- Reference the DGIF CSS page -->
<link rel="stylesheet" href="css/dgif.css" media="screen">
<title>PAGE_TITLE</title>
<!-- Reference the js frame work from ESRI-->
<script src="http://js.arcgis.com/3.8/"></script>
<!-- Reference the js page containing all the Java Script code -->
<script type="text/javascript" src="js/test.js"></script>
</head>
<body>
<div id="master-wrapper">
<div id="common-banner">
</div>
<div id="agency-header">
</div>
<div id="wrapper">
<div id="sidebar">
</div>
<div id="content">
<div id="info">
<div id="buttoncontainer";>
<div id="leftcolumn">
<div class="one">
<button id="Point" style="width:130px; height:20px; font-size:13px;">Point</button>
</div>
</div>
<div id="rightcolumn">
<button id="Point" style="width:50px; height:20px; font-size:13px;">Point</button>
</div>
</div>
</div>
<div id="mapDiv"></div>
<div id="info">
<div id="print_button"></div>
<div>
<a href="https://developers.arcgis.com/en/javascript/jsapi/printtemplate.html">Print templates</a> are generated
from the Export Web Map Task's <a href="http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task">Layout_Template parameter</a>. This info is retrieved from the service
using <a href="https://developers.arcgis.com/en/javascript/jsapi/namespace_esri.html#request">esri.request</a>.
</div>
</div>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
var map, tb;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/InfoTemplate", "esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol",
"esri/renderers/UniqueValueRenderer", "esri/renderers/SimpleRenderer",
"dojo/parser", "dojo/_base/Color", "esri/symbols/SimpleMarkerSymbol",
"esri/arcgis/utils", "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
"esri/graphic", "dojo/dom", "dojo/on",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, FeatureLayer, InfoTemplate, Draw,
SimpleLineSymbol, SimpleFillSymbol,
UniqueValueRenderer, SimpleRenderer,
parser, Color, SimpleMarkerSymbol,
arcgisUtils, PictureFillSymbol, CartographicLineSymbol,
Graphic, dom, on
) {
parser.parse();
map = new Map("mapDiv", {
basemap: "topo",
center: [-77.4329, 37.5410],
zoom: 7,
slider: true
});
map.on("load", initToolbar);
map.on("load", addFeatureLayer);
function addFeatureLayer() {
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
//create renderer
var renderer = new UniqueValueRenderer(defaultSymbol, "LAKE_NAME");
//add symbol for each possible value
renderer.addValue("LAKE NOTTOWAY", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
var featureLayer = new FeatureLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/WERMS/WERMS/FeatureServer/8", {
infoTemplate: new InfoTemplate(" ", "${LAKE_NAME}"),
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["LAKE_NAME"]
});
var featureLayer2 = new FeatureLayer("https://fwisweb1.dgif.virginia.gov/arcgis/rest/services/WERMS/WERMS/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['*']
});
featureLayer.setRenderer(renderer);
map.addLayer(featureLayer);
map.addLayer(featureLayer2);
}
// 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([55,77,173,.75]), 1.5,
CartographicLineSymbol.CAP_ROUND,
CartographicLineSymbol.JOIN_MITER, 5
);
// fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
// the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
var fillSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([55,77,173,0.35]),
2
),
new Color([125,125,125,0.35])
);
// function toolbar
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);
});
}
// add graphic
function addGraphic(evt) {
//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));
}
});
