javascript - InfoWindowLite not appearing -
i trying implement infowindowlite javascript function on map. however, else working i.e. legend, scalebar, featurelayer. below code reference:
<!doctype html> <html> <head> <!-- add in meta elements --> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>map</title> <!-- reference styles --> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> <!-- reference arcgis javascript --> <script src="http://js.arcgis.com/3.9/"></script> <style> html, body { height: 97%; width: 98%; margin: 1%; } #rightpane { width: 20%; } #legendpane { border: solid #97dcf2 1px; } </style> <!-- javascript --> <script> var map; require([ "esri/map", "esri/dijit/infowindowlite", "esri/infotemplate", "esri/layers/featurelayer", "esri/dijit/legend", "dojo/_base/array", "dojo/parser", "esri/dijit/scalebar", "dijit/layout/bordercontainer", "dijit/layout/contentpane", "dijit/layout/accordioncontainer", "dojo/dom-construct", "dojo/domready!" ], function( map, infowindowlite, infotemplate, featurelayer, legend, arrayutils, parser, scalebar, domconstruct ) { parser.parse(); map = new map("map", { basemap:"topo", center: [-98.416, 39.781], zoom: 6 }); // scalebar var scalebar = new scalebar({ map: map, // "dual" displays both miles , kilmometers // "english" default, displays miles // use "metric" kilometers scalebarunit: "dual", attachto:"bottom-center" }); // feature layer var featurelayer = new featurelayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/census/mapserver/3", { mode: featurelayer.mode_ondemand, outfields:["state_name", "sub_region", "state_abbr"] }); map.addlayer(featurelayer); //add legend map.on("layers-add-result", function (evt) { var layerinfo = arrayutils.map(evt.layers, function (layer, index) { return {layer:layer.layer, title:layer.layer.name}; }); if (layerinfo.length > 0) { var legenddijit = new legend({ map: map, layerinfos: layerinfo }, "legenddiv"); legenddijit.startup(); } }); map.addlayers([featurelayer]); var legendfeature = new featurelayer("http://www.onemap.sg/arcgis/rest/services/toc/mapserver/6", { mode: featurelayer.mode_ondemand, outfields:["*"] }); // infowindow var infowindow = new infowindowlite(null, domconstruct.create("div", null, null, map.root)); infowindow.startup(); map.setinfowindow(infowindow); var template = new infotemplate(); template.settitle("<b>state name ${state_name} - state abbr ${state_abbr}</b>"); template.setcontent("${sub_region} in district ${state_name}."); map.infowindow.resize(200,75); }); function init() { dojo.connect(map,"onload", function(map) {map.infowindow.resize(200, 90);} ); dojo.connect(map, "onclick", addpoint); } function addpoint(evt) { map.infowindow.settitle("coordinates"); map.infowindow.setcontent("lat/lon : " + evt.mappoint.y + ", " + evt.mappoint.x); map.infowindow.show(evt.screenpoint,map.getinfowindowanchor(evt.screenpoint)); } dojo.addonload(init); </script> </head> <body class="claro"> <div id="content" data-dojo-type="dijit/layout/bordercontainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div id="rightpane" data-dojo-type="dijit/layout/contentpane" data-dojo-props="region:'right'"> <div data-dojo-type="dijit/layout/accordioncontainer"> <div data-dojo-type="dijit/layout/contentpane" id="legendpane" data-dojo-props="title:'legend', selected:true"> <div id="legenddiv"></div> </div> <div data-dojo-type="dijit/layout/contentpane" data-dojo-props="title:'pane 2'"> pane contain tools or additional content </div> </div> </div> <div id="map" data-dojo-type="dijit/layout/contentpane" data-dojo-props="region:'center'" style="overflow:hidden;"> </div> </div> </body> </html> i thinking maybe sequence in codes placed reason why isn't appearing. when move codes under //infowindow before other functions //legend etc., other functions not displayed when run in chrome.
well, found small faults in above snippet code. below details.
you forget add "bordercontainer, contentpane, accordioncontainer," before domconstruct.
below working code:
<!doctype html> <html> <head> <!-- add in meta elements --> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>map</title> <!-- reference styles --> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css"> <!-- reference arcgis javascript --> <script src="http://js.arcgis.com/3.9/"></script> <style> html, body { height: 97%; width: 98%; margin: 1%; } #rightpane { width: 20%; } #legendpane { border: solid #97dcf2 1px; } </style> <!-- javascript --> <script> var map; require([ "esri/map", "esri/dijit/infowindowlite", "esri/infotemplate", "esri/layers/featurelayer", "esri/dijit/legend", "dojo/_base/array", "dojo/parser", "esri/dijit/scalebar", "dijit/layout/bordercontainer", "dijit/layout/contentpane", "dijit/layout/accordioncontainer", "dojo/dom-construct", "dojo/domready!" ], function( map, infowindowlite, infotemplate, featurelayer, legend, arrayutils, parser, scalebar, bordercontainer, contentpane, accordioncontainer, domconstruct ) { parser.parse(); map = new map("map", { basemap:"topo", center: [-98.416, 39.781], zoom: 6 }); // scalebar var scalebar = new scalebar({ map: map, // "dual" displays both miles , kilmometers // "english" default, displays miles // use "metric" kilometers scalebarunit: "dual", attachto:"bottom-center" }); // feature layer var featurelayer = new featurelayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/census/mapserver/3", { mode: featurelayer.mode_ondemand, outfields:["state_name", "sub_region", "state_abbr"] }); map.addlayer(featurelayer); //add legend map.on("layers-add-result", function (evt) { var layerinfo = arrayutils.map(evt.layers, function (layer, index) { return {layer:layer.layer, title:layer.layer.name}; }); if (layerinfo.length > 0) { var legenddijit = new legend({ map: map, layerinfos: layerinfo }, "legenddiv"); legenddijit.startup(); } }); map.addlayers([featurelayer]); var legendfeature = new featurelayer("http://www.onemap.sg/arcgis/rest/services/toc/mapserver/6", { mode: featurelayer.mode_ondemand, outfields:["*"] }); // infowindow var infowindow = new infowindowlite(null, domconstruct.create("div", null, null, map.root)); infowindow.startup(); map.setinfowindow(infowindow); var template = new infotemplate(); template.settitle("<b>state name ${state_name} - state abbr ${state_abbr}</b>"); template.setcontent("${sub_region} in district ${state_name}."); map.infowindow.resize(200,75); }); function init() { dojo.connect(map,"onload", function(map) {map.infowindow.resize(200, 90);} ); dojo.connect(map, "onclick", addpoint); } function addpoint(evt) { map.infowindow.settitle("coordinates"); map.infowindow.setcontent("lat/lon : " + evt.mappoint.y + ", " + evt.mappoint.x); map.infowindow.show(evt.screenpoint,map.getinfowindowanchor(evt.screenpoint)); } dojo.addonload(init); </script> </head> <body class="claro"> <div id="content" data-dojo-type="dijit/layout/bordercontainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;"> <div id="rightpane" data-dojo-type="dijit/layout/contentpane" data-dojo-props="region:'right'"> <div data-dojo-type="dijit/layout/accordioncontainer"> <div data-dojo-type="dijit/layout/contentpane" id="legendpane" data-dojo-props="title:'legend', selected:true"> <div id="legenddiv"></div> </div> <div data-dojo-type="dijit/layout/contentpane" data-dojo-props="title:'pane 2'"> pane contain tools or additional content </div> </div> </div> <div id="map" data-dojo-type="dijit/layout/contentpane" data-dojo-props="region:'center'" style="overflow:hidden;"> </div> </div> </body> </html> this show infopopup whenever click on map.
hope :)
Comments
Post a Comment