I am trying to get both a pop-up and legend but can only get one to work at a time depending on where I put map.addLayer(featureLayer);The code below shows the problem in my comment. If anyone has a suggestion I would greatly appreciate it!<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the
samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>
City of San Luis Obispo CAPITAL IMPROVEMENT PROJECTS
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/esri/dijit/css/Popup.css"/>
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
padding: 20px 20px; } #map{ padding:0;}
#rightPane{
width:20%;
}
#legendPane{
border: solid #97DCF2 1px;
}
</style>
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Popup");
dojo.require("esri.dijit.Legend");
var map;
function init() {
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
//setup the map's initial extent (World View)
var initExtent = new esri.geometry.Extent({
"xmin":-13440283.392,
"ymin":4195625.999,
"xmax":-13424995.986,
"ymax":4207091.553,
"spatialReference":{"wkid":102100}
});
//define custom popup options
var popupOptions = {
'markerSymbol': new esri.symbol.SimpleMarkerSymbol('circle', 32, null, new dojo.Color([0, 0, 0, 0.25])),
'marginLeft': '20',
'marginTop': '20'
};
//create a popup to replace the map's info window
var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));
map = new esri.Map("map", {
extent: initExtent,
infoWindow: popup
});
//Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
//define a popup template
var popupTemplate = new esri.dijit.PopupTemplate({
title: "CIP Project Info",
fieldInfos: [
{fieldName: "JOBNAME", visible: true, label:"ID"},
{fieldName: "DESC", visible:true, label:"Description"},
{fieldName: "START", visible:true, label:"Start Date" ,format:{dateFormat:'shortDateShortTime'}}
],
showAttachments:true
});
//create a feature layer based on the feature collection
var featureLayer = new esri.layers.FeatureLayer("http://mapserver/ArcGIS/rest/services/online/CIP/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
infoTemplate: popupTemplate,
outFields: ['JOBNAME',"DESC","START",'TYPE']
});
featureLayer.setDefinitionExpression("TYPE != ''");
dojo.connect(featureLayer,"onClick",function(evt){
map.infoWindow.setFeatures([evt.graphic]);
});
//if this is herar the layer works
//map.addLayer(featureLayer);
dojo.connect(map, 'onLoad', function(theMap) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
});
//add the legend
dojo.connect(map,'onLayersAddResult',function(results){
var layerInfo = dojo.map(results, function(layer,index){
return {layer:layer.layer,title:layer.layer.name};
});
if(layerInfo.length > 0){
var legendDijit = new esri.dijit.Legend({
map:map,
layerInfos:layerInfo
},"legendDiv");
legendDijit.startup();
}
});
//if this is herar the legend works
map.addLayer(featureLayer);
}
// should this be dojo.addOnLoad(init);
dojo.ready(init);
</script>
</head>
<body class="claro">
<div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
<div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
<div dojoType="dijit.layout.AccordionContainer">
<div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend" selected="true" >
<div id="legendDiv"></div>
</div>
<div dojoType="dijit.layout.ContentPane" title="Pane 2" >
This pane could contain tools or additional content
</div>
</div>
</div>
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>
</div>
</body>
</html>