Hi,I'm in a bit of a struggle here. I don't seem to be able to get the legend to work here. Maybe i'm overlooking something.dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.toolbars.draw");
dojo.require("esri.toolbars.edit");
dojo.require("esri.dijit.Legend");
var layer, map, editToolbar, ctxMenuForGraphics, selected, visible = [];
function init() {
esriConfig.defaults.map.slider = {left : "23px", top : "65px", width : null, height : "200px"};
esri.bundle.toolbars.draw.addPoint = "Klik om een punt toe te voegen";
esri.bundle.toolbars.draw.start = "Klik om te beginnen met tekenen";
esri.bundle.toolbars.draw.resume = "Klik om verder te tekenen";
esri.bundle.toolbars.draw.complete = "Dubbelklik om te voltooien";
esri.bundle.toolbars.draw.freehand = "Druk om te beginnen en laat los om te voltooien";
var initExtent = new esri.geometry.Extent({"xmin":126966,"ymin":359066,"xmax":198909,"ymax":401108,"spatialReference":{"wkid":28992}});
map = new esri.Map("map", {extent: initExtent , logo: false});
//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.ArcGISDynamicMapServiceLayer("http://atlas.sre.nl/ArcGIS/rest/services/OpenStreetMapZW/MapServer");
map.addLayer(basemap);
//Add the layer for the layerlist
layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://atlas.sre.nl/ArcGIS/rest/services/Gemeentegrenzen/MapServer");
if (layer.loaded) {
buildLayerList(layer);
}
else {
dojo.connect(layer, "onLoad", buildLayerList);
}
dojo.connect(map,'onLayersAddResult',function(results){
//add the legend
var legend = new esri.dijit.Legend({
map:map,
layerInfos:[{layer:dynamicLayer,title:"Public Safety"}],
arrangement:esri.dijit.Legend.ALIGN_RIGHT
},"legendDiv");
legend.startup();
});
//resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
//the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm
var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 500);
});
//add the overview map
var overviewMapDijit = new esri.dijit.OverviewMap(
{
map : map,
attachTo : "bottom-right",
color : "#769dc0",
visible : true
}
);
overviewMapDijit.startup();
});
//add the scale bar
var scalebar = new esri.dijit.Scalebar(
{
map : map,
scalebarUnit : 'metric'
}
);
dojo.connect(map, "onLoad", createToolbarAndContextMenu)
dojo.connect(map, "onLoad", createToolbar);
}
function buildLayerList(layer) {
var items = dojo.map(layer.layerInfos,function(info,index){
if (info.defaultVisibility) {
visible.push(info.id);
}
return "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label><br>";
});
dojo.byId("layer_list").innerHTML = items.join("");
layer.setVisibleLayers(visible);
map.addLayer(layer);
}
function updateLayerVisibility() {
var inputs = dojo.query(".list_item"), input;
visible = [];
dojo.forEach(inputs,function(input){
if (input.checked) {
visible.push(input.id);
}
});
//if there aren't any layers visible set the array to be -1
if(visible.length === 0){
visible.push(-1);
}
layer.setVisibleLayers(visible);
}
function createToolbarAndContextMenu(map) {
// Create and setup editing tools
editToolbar = new esri.toolbars.Edit(map);
dojo.connect(map,"onClick", function(evt){
editToolbar.deactivate();
//navToolbar.deactivate();
});
createMapMenu();
createGraphicsMenu();
}
function createMapMenu() {
// Creates right-click context menu for map
ctxMenuForMap = new dijit.Menu({
onOpen: function(box) {
editToolbar.deactivate();
}
});
/*ctxMenuForMap.addChild(new dijit.MenuItem({
label: "Add Point",
onClick: function addToMap (geometry) {
map.showZoomSlider();
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
var graphic = new esri.Graphic(geometry, symbol);
map.graphics.add(graphic);
}
}));*/
ctxMenuForMap.startup();
ctxMenuForMap.bindDomNode(map.container);
}
function createGraphicsMenu() {
// Creates right-click context menu for GRAPHICS
ctxMenuForGraphics = new dijit.Menu({});
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "bewerken",
onClick: function() {
if(selected.geometry.type !== "point"){
editToolbar.activate(esri.toolbars.Edit.EDIT_VERTICES, selected);
}
else{
alert("Niet van toepassing");
}
}
}));
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "verplaatsen",
onClick: function() {
editToolbar.activate(esri.toolbars.Edit.MOVE, selected);
}
}));
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "roteren/schaal",
onClick: function() {
if(selected.geometry.type !== "point"){
editToolbar.activate(esri.toolbars.Edit.ROTATE | esri.toolbars.Edit.SCALE, selected);
}
else{
alert("Niet van toepassing");
}
}
}));
/*ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "Style",
onClick: function() {
alert("Not implemented");
}
})); */
ctxMenuForGraphics.addChild(new dijit.MenuSeparator());
ctxMenuForGraphics.addChild(new dijit.MenuItem({
label: "verwijderen",
onClick: function() {
map.graphics.remove(selected);
}
}));
ctxMenuForGraphics.startup();
dojo.connect(map.graphics, "onMouseOver", function(evt) {
// We'll use this "selected" graphic to enable editing tools
// on this graphic when the user click on one of the tools
// listed in the menu.
selected = evt.graphic;
// Let's bind to the graphic underneath the mouse cursor
ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
});
dojo.connect(map.graphics, "onMouseOut", function(evt) {
ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
});
}
function createToolbar(themap) {
dojo.connect(dijit.byId('map'), 'resize', function() {
resizeMap();
});
toolbar = new esri.toolbars.Draw(map);
dojo.connect(toolbar, "onDrawEnd", addToMap);
}
function addToMap(geometry) {
toolbar.deactivate();
map.showZoomSlider();
switch (geometry.type) {
case "point":
var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
break;
case "polyline":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1);
break;
case "polygon":
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
break;
case "extent":
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]));
break;
}
var graphic = new esri.Graphic(geometry, symbol);
map.graphics.add(graphic);
}
dojo.addOnLoad(init);
Thanks in advance for all your help.
