Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
    
Hey Kirill, you seem to be consistently asking solid JS API questions. Are there any public links to the apps you're developing? I'd love to see how you're using the API. –  Derek Swingley Jun 24 '11 at 19:15
    
I've sent you a letter to gmail. –  Kirill Lykov Jul 5 '11 at 10:10
add comment

1 Answer

up vote 8 down vote accepted

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>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.