Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About leonidkostuyk
leonidkostuyk
New Contributor
since
06-03-2015
11-11-2020
7
Posts created
0
Kudos given
0
Solutions
0
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by leonidkostuyk
|
POST
|
Thanks, now it works as I expected. I also tried to enclose divs as BorderContainer
ContentPane center
BorderContainer
Toolbar top
Div "map" center
ContentPane bottom splitter
BorderContainer
Toolbar top
ContentPane center - Div "myTableNode" but haven't received the required result because I did't specify in MapDiv: data-dojo-type="dijit/layout/ContentPane". And as I see table does't display data if I define myTableNode as data-dojo-type="dijit/layout/ContentPane" but if myTableNode enclosed in ContentPane - all right. As a result we have the structure: BorderContainer
ContentPane center
BorderContainer
Toolbar top
ContentPane center - Div "map"
ContentPane bottom splitter
BorderContainer
Toolbar top
ContentPane center
Div "myTableNode" It would be desirable to understand where is the logic and what are the necessary principles for building structure.
... View more
12-12-2016
08:22 PM
|
0
|
0
|
715
|
|
POST
|
It doesn't help and I don't understand how it could help. When I resize window so that buttons occupy two rows, toolbar change height, and it is necessary that the map div has changed the size. Position of navToolbar remains former. Whole example: <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Using FeatureTable</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
<style>
html, body{
width:100%;
height:100%;
margin:0;
padding:0;
}
#map, #myTableNode {
height: calc(100% - 30px);
margin:0;
padding:0;
}
</style>
<script>
require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/geometry/webMercatorUtils",
"esri/map",
"dojo/dom-construct",
"dojo/dom",
"dojo/parser",
"dojo/ready",
"dojo/on",
"dojo/_base/lang",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/form/TextBox"
], function (
FeatureLayer, FeatureTable, webMercatorUtils, Map,
domConstruct, dom, parser, ready, on,lang,
registry, Button, ContentPane, BorderContainer, TextBox
) {
parser.parse();
ready(function(){
var myFeatureLayer;
var map = new Map("map",{
basemap: "dark-gray"
});
map.on("load", loadTable);
function loadTable(){
// Create the feature layer
myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
visible: true,
outFields: [
"Collected", "Status", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Street", "Native"
],
id: "fLayer"
});
//set map extent
on(myFeatureLayer, "load", function(evt){
var extent = myFeatureLayer.fullExtent;
if (webMercatorUtils.canProject(extent, map)) {
map.setExtent( webMercatorUtils.project(extent, map) );
}
});
map.addLayer(myFeatureLayer);
myFeatureTable = new FeatureTable({
"featureLayer" : myFeatureLayer,
"outFields": [
"Collected", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Native"
],
fieldInfos: [
{
name: 'Spp_Code',
alias: 'Species Code',
},
{
name: 'Cmn_Name',
alias: 'Common Name',
},
{
name: 'Sci_Name',
alias: 'Scientific Name',
}
],
"map" : map
}, 'myTableNode');
myFeatureTable.startup();
};
on(dom.byId("homebutton"), "click", function(){
Fun1('1');
});
on(dom.byId("butbutton"), "click", function(){
Fun1('2');
});
});
function Fun1(Msg){window.alert(Msg);};
});
</script>
</head>
<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
<div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
<div data-dojo-type="dijit/form/Button" id="homebutton" >Home</div>
<div data-dojo-type="dijit/form/Button" id="homebutton2" >Home2</div>
<div data-dojo-type="dijit/form/Button" id="homebutton3" >Home3</div>
<div data-dojo-type="dijit/form/Button" id="homebutton4" >Home4</div>
<div data-dojo-type="dijit/form/Button" id="homebutton5" >Home5</div>
<div data-dojo-type="dijit/form/Button" id="homebutton6" >Home6</div>
<div data-dojo-type="dijit/form/Button" id="homebutton7" >Home7</div>
<div data-dojo-type="dijit/form/Button" id="homebutton8" >Home8</div>
<div data-dojo-type="dijit/form/Button" id="homebutton9" >Home9</div>
<div data-dojo-type="dijit/form/Button" id="homebutton10" >Home10</div>
</div>
<div id="map"></div>
</div>
<div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
<div id="navToolbarBot" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
<div data-dojo-type="dijit/form/Button" id="butbutton" >Some</div>
</div>
<div id="myTableNode"></div>
</div>
</div>
</body>
</html>
... View more
12-12-2016
01:50 AM
|
0
|
2
|
715
|
|
POST
|
Thank you for answer! It works, but only for persistent toolbar height. If I have many buttons on toolbar and resize window so that buttons occupy two rows, toolbar change height. What could you advise in this case?
... View more
12-11-2016
08:02 PM
|
0
|
4
|
715
|
|
POST
|
Hello! I am trying to add toolbars into map and table in FeatureTable-example from https://developers.arcgis.com/javascript/3/jssamples/featuretable.html <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Using FeatureTable</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
<script src="https://js.arcgis.com/3.18/"></script>
<style>
html, body, #map{
width:100%;
height:100%;
margin:0;
padding:0;
}
</style>
<script>
require([
"esri/layers/FeatureLayer",
"esri/dijit/FeatureTable",
"esri/geometry/webMercatorUtils",
"esri/map",
"dojo/dom-construct",
"dojo/dom",
"dojo/parser",
"dojo/ready",
"dojo/on",
"dojo/_base/lang",
"dijit/registry",
"dijit/form/Button",
"dijit/layout/ContentPane",
"dijit/layout/BorderContainer",
"dijit/form/TextBox"
], function (
FeatureLayer, FeatureTable, webMercatorUtils, Map,
domConstruct, dom, parser, ready, on,lang,
registry, Button, ContentPane, BorderContainer, TextBox
) {
parser.parse();
ready(function(){
var myFeatureLayer;
var map = new Map("map",{
basemap: "dark-gray"
});
map.on("load", loadTable);
function loadTable(){
// Create the feature layer
myFeatureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Warren_College_Trees/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
visible: true,
outFields: [
"Collected", "Status", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Street", "Native"
],
id: "fLayer"
});
//set map extent
on(myFeatureLayer, "load", function(evt){
var extent = myFeatureLayer.fullExtent;
if (webMercatorUtils.canProject(extent, map)) {
map.setExtent( webMercatorUtils.project(extent, map) );
}
});
map.addLayer(myFeatureLayer);
myFeatureTable = new FeatureTable({
"featureLayer" : myFeatureLayer,
"outFields": [
"Collected", "Spp_Code", "Height", "Cmn_Name", "Sci_Name", "Native"
],
fieldInfos: [
{
name: 'Spp_Code',
alias: 'Species Code',
},
{
name: 'Cmn_Name',
alias: 'Common Name',
},
{
name: 'Sci_Name',
alias: 'Scientific Name',
}
],
"map" : map
}, 'myTableNode');
myFeatureTable.startup();
};
on(dom.byId("homebutton"), "click", function(){
Fun1('1');
});
on(dom.byId("butbutton"), "click", function(){
Fun1('2');
});
});
function Fun1(Msg){window.alert(Msg);};
});
</script>
</head>
<body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center', splitter:true" style="height:50%">
<div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
<div data-dojo-type="dijit/form/Button" id="homebutton" >Home</div>
</div>
<div id="map"></div>
</div>
<div id="bot" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom', splitter:true" style="height:50%">
<div id="navToolbarBot" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
<div data-dojo-type="dijit/form/Button" id="butbutton" >Some</div>
</div>
<div id="myTableNode"></div>
</div>
</div>
</body>
</html> I have added toolbars with buttons but now I see excess scroll-bars. It's not good. Then I changed ContentPane to BorderContainer and set property "region": <body class="claro esri">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" >
<div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
<div data-dojo-type="dijit/form/Button" id="homebutton" >Home</div>
</div>
<div id="map" data-dojo-props="region:'center'"></div>
</div>
<div id="bot" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'bottom', splitter:true, style:'height:200px'">
<div id="navToolbarBot" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
<div data-dojo-type="dijit/form/Button" id="butbutton" >Some</div>
</div>
<div id="myTableNode" data-dojo-props="region:'center'"></div>
</div>
</div>
</body>
Now it looks better - without scroll-bars, but when I try to move splitter, bottom div run to top of screen. Probably I don't understand something impotant.
... View more
12-08-2016
07:58 PM
|
0
|
6
|
1772
|
|
POST
|
Unfortunately it does't work correctly: after clicking on button div 'map' does't display map in the place where bottom div disappeared. It displays map with the same size.
... View more
12-01-2016
07:12 PM
|
0
|
2
|
1634
|
|
POST
|
I am trying create toggle bottom div, but center div does not updates its size. What is wron? When I resize browser window, all divs became right size. <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0%;}
</style>
<script src="http://js.arcgis.com/3.18/init.js"></script>
<script>
require(["esri/map", "esri/dijit/Basemap", "dojo/parser"], function(
Map, Basemap, parser
) {
parser.parse();
map = new Map("map", {
basemap: "osm",
center: [37.6,55.7],
zoom: 8,
});
});
function toggle_visibility(id) {
var e = document.getElementById(id);
var s = document.getElementById(id+'_splitter');
if(e.style.display == 'none'){
if (s){
s.style.display = 'block';
e.style.display = 'block';
}
} else {
if (s){
s.style.display = 'none';
e.style.display = 'none';
}
};
};
</script>
</head>
<body class="claro">
<div id="contentAll" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0;">
<div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="region:'center'" style="width: 100%; height: 100%; margin: 0;">
<div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'" >
<div data-dojo-type="dijit/form/Button" id="tableButton" data-dojo-props="onClick: function(){toggle_visibility('bott')}">Show/Hide bottom table</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden">
</div>
</div>
<div id="bott" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='region:"bottom", splitter:true, style:"height:150px"'>
</div>
</div>
</body>
</html>
... View more
12-01-2016
02:58 AM
|
0
|
4
|
3318
|
Activity Feed
- Posted Re: Hierarchy of layouts BorderContainer and ContentPane on ArcGIS JavaScript Maps SDK Questions. 12-12-2016 08:22 PM
- Posted Re: Hierarchy of layouts BorderContainer and ContentPane on ArcGIS JavaScript Maps SDK Questions. 12-12-2016 01:50 AM
- Posted Re: Hierarchy of layouts BorderContainer and ContentPane on ArcGIS JavaScript Maps SDK Questions. 12-11-2016 08:02 PM
- Posted Hierarchy of layouts BorderContainer and ContentPane on ArcGIS JavaScript Maps SDK Questions. 12-08-2016 07:58 PM
- Posted Re: How to refresh div's size? on ArcGIS JavaScript Maps SDK Questions. 12-04-2016 10:57 PM
- Posted Re: How to refresh div's size? on ArcGIS JavaScript Maps SDK Questions. 12-01-2016 07:12 PM
- Posted How to refresh div's size? on ArcGIS JavaScript Maps SDK Questions. 12-01-2016 02:58 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
11-11-2020
02:25 AM
|
Latest Tags
No tags yet