In the new arcgis js api ESRI added new nice infowindow - esri.dijit.Popup. We can use it this way:
//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
});
The code from samples. Is it possible to use it for editing? I like this new infoWindow more than standart editing infoWindow
Yes. Below is the default editor sample tweaked to use the Popup. Create a Popup, pass it to the map's constructor and then place the Popup's dom node as a child of the map.
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
<title>
Default Editor
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/esri/dijit/css/Popup.css"/>
<script type="text/javascript">dojoConfig = { parseOnLoad: true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>
<style type="text/css">
html,body {
height:100%;
width:100%;
margin:0;
}
body {
background-color:#fff;
overflow:hidden;
font-family:Helvetica;
}
#templatePickerPane {
width:225px;
overflow:hidden;
}
#panelHeader{
background-color:#92A661;
border-bottom: solid 1px #92A860;
color:#FFF;
font-size:18px;
height:24px;
line-height:22px;
margin:0;
overflow:hidden;
padding:10px 10px 10px 10px;
}
#map {
margin-right:5px;
padding:0;
}
.esriEditor .templatePicker {
padding-bottom:5px;
padding-top:5px;
height:500px;
border-radius:0px 0px 4px 4px;
border:solid 1px #92A661;
}
.dj_ie .infowindow .window .top .right .user .content,.dj_ie .simpleInfoWindow .content {
position:relative;
}
</style>
<script type="text/javascript">
dojo.require("esri.dijit.editing.Editor-all");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.SnappingManager");
dojo.require("esri.dijit.Popup");
var map, resizeTimer;
function init() {
//snapping is enabled for this sample - change the tooltip to reflect this
esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>CTRL</b> to enable snapping";
esri.bundle.toolbars.draw.addPoint = esri.bundle.toolbars.draw.addPoint + "<br/>Press <b>CTRL</b> to enable snapping";
//This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to
//replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic
//for details on setting up a proxy page.
esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx";
//This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications
esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer");
var extent = new esri.geometry.Extent({
"xmin": -8576501,
"ymin": 4705377,
"xmax": -8574612,
"ymax": 4706867,
"spatialReference": {
"wkid": 3857
}
});
var popup = new esri.dijit.Popup(null, dojo.create("div"));
map = new esri.Map("map", {
extent: extent,
infoWindow: popup
});
dojo.place(popup.domNode, map.root);
dojo.connect(map, "onLoad", function() {
dojo.connect(dijit.byId('map'), 'resize', function() {
resizeMap();
});
});
dojo.connect(map, "onLayersAddResult", initEditing);
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
var operationsPointLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/0", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var operationsLineLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/1", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var operationsPolygonLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/HomelandSecurity/operations/FeatureServer/2", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
map.addLayers([operationsPointLayer, operationsPolygonLayer, operationsLineLayer]);
// map.infoWindow.resize(400, 300);
}
function initEditing(results) {
var featureLayerInfos = dojo.map(results, function(result) {
return {
'featureLayer': result.layer
};
});
var settings = {
map: map,
layerInfos: featureLayerInfos
};
var params = {
settings: settings
};
var editorWidget = new esri.dijit.editing.Editor(params, 'editorDiv');
var options = {snapKey:dojo.keys.copyKey};
map.enableSnapping(options);
editorWidget.startup();
}
//Handle resize of browser
function resizeMap() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 500);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'">
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="templatePickerPane" data-dojo-props="region:'left'">
<div id="panelHeader">
Default Editor
</div>
<div style="padding:10px;" id="editorDiv">
</div>
</div>
</div>
</body>
</html>
