POST
|
Thanks for the offers and the ideas. The problem was actually with the parseOnLoad: true as one person suggested and that configuration parameter is apparently incompatible with async: true. When I added parseOnLoad the dijit requires started loading however I was still having the same layout error. Then I started from scratch and built the layout up and found the problem with async in the configuration. I am too new at this to know why this is so. Working example is below. <!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, IE=10">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title></title>
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/soria/soria.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
<link rel="stylesheet" href="Content/layout.css">
<script>
// Instead of using data-dojo-config, we�??re creating a dojoConfig object
// *before* we load dojo.js; they�??re functionally identical.
var dojoConfig = {
parseOnLoad: true,
// This code registers the correct location of the "demo" package
// so we can load Dojo from the CDN whilst still being able to
// load local modules
paths: {
extras: location.pathname.replace(/\/[^/]*$/, '') + "/scripts/dojo"
}
};
</script>
<script src="http://js.arcgis.com/3.7/"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.IdentityManager");
dojo.require("esri.arcgis.utils");
var mapView;
function init() {
console.log("Initializing");
}
//show map on load
dojo.ready(init);
</script>
<script>
var map;
require(["esri/map", "dojo/domReady!"], function (Map) {
map = new Map("mapDiv", {
center: [-56.049, 38.485],
zoom: 3,
basemap: "streets"
});
});
</script>
</head>
<body class="soria">
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
style="width:100%; height:100%;">
<div id="header" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
data-dojo-props="region:'top'">
<div id="title"></div>
</div>
<div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners"
data-dojo-props="region:'center'">
</div>
<div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners"
data-dojo-props="region:'right',splitter:'true'">
Right section
</div>
<div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'bottom'">
<span id="dataSource"></span>
</div>
</div>
</body>
</html>
... View more
10-10-2013
11:24 AM
|
0
|
0
|
513
|
POST
|
I started to replace my bootstrap layout with the suggested layout examples using dojo but not having much luck. I started with "Layout with right pane, map data from ArcGIS.com". The live link works in my browser but when I transfer it to my localhost server it fails to display anything. I downloaded the layout.css file and that is loading. In both the online example and on my localhost the SoriaGrid.css resource fails to load but I assume that is OK (but should be changed in the demo). I have attempted to merge my code with the example. In my best attempt I get the right pane at the bottom. My code is shown below and I could use a pointer where the layout has gone wrong. I am guessing that I am requiring the dijit resources incorrectly but I cannot figure out the syntax for including them. In my worst attempt I get no reference to dojo at the dojo.require lines. I am using chrome as the browser. <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/soria/soria.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dojox/grid/resources/SoriaGrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <link rel="stylesheet" href="Content/layout.css"> <script> // Instead of using data-dojo-config, we???re creating a dojoConfig object // *before* we load dojo.js; they???re functionally identical. var dojoConfig = { async: true, // This code registers the correct location of the "demo" package // so we can load Dojo from the CDN whilst still being able to // load local modules paths: { extras: location.pathname.replace(/\/[^/]*$/, '') + "/scripts/dojo" } }; </script> <script src="http://js.arcgis.com/3.7/"></script> <script> // dojo.require("dijit.layout.BorderContainer"); //dojo.require("dijit.layout.ContentPane"); //dojo.require("esri.map"); //dojo.require("esri.IdentityManager"); //dojo.require("esri.arcgis.utils"); var map; require(["esri/map","dojo/domReady!"], function (Map) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); dojo.byId("title").innerHTML = "Right Side Demo"; // mapDeferred.then(function (response) { // map = response.map; // dojo.byId("title").innerHTML = response.itemInfo.item.title; // dojo.byId("dataSource").innerHTML = "<a target='_blank' href='http://www.arcgis.com/home/item.html?id=" + webmap + "'>View data details</a>"; //}, function (error) { // console.log("Map creation failed: ", dojo.toJson(error)); // }); }) //show map on load // dojo.ready(init); </script> </head> <body class="soria"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners" data-dojo-props="region:'top'"> <div id="title"></div> </div> <div id="mapDiv" data-dojo-type="dijit.layout.ContentPane" class="roundedCorners" data-dojo-props="region:'center'"> </div> <div data-dojo-type="dijit.layout.ContentPane" id="rightPane" class="roundedCorners" data-dojo-props="region:'right',splitter:'true'"> Right section </div> <div id="footer" class="roundedCorners" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'"> <span id="dataSource"></span> </div> </div> </body> </html>
... View more
10-10-2013
09:04 AM
|
0
|
5
|
868
|
POST
|
Thanks! Its too bad that map position does not come in on the mouse event. It was kind of funny that you mentioned the positioning problem. I am looking at your post on the problem now to see if I can fix up my drag/drop. I too am working with the idea of a dojo only implementation and not mixing solutions. Its hard because I already know jquery and bootstrap so having to learn dojo to do something I already know is slower than I want to be. Thanks again for the help
... View more
10-10-2013
07:20 AM
|
0
|
0
|
780
|
POST
|
I have an SVG I want to drag to the map and drop at a given location. However, the mouse event on the drop operation does not contain th needed mapPoint. So is there another way to drag an SVG to the map and drop it at a location? <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"> <link rel='stylesheet' href='https://community.esri.com/Content/bootstrap.css' /> <script> // Instead of using data-dojo-config, we???re creating a dojoConfig object // *before* we load dojo.js; they???re functionally identical. var dojoConfig = { async: true, // This code registers the correct location of the "demo" package // so we can load Dojo from the CDN whilst still being able to // load local modules paths: { extras: location.pathname.replace(/\/[^/]*$/, '') + "/scripts/dojo" } }; </script> <script src="http://js.arcgis.com/3.7/"></script> <script> var map; require(["esri/map", "extras/demot1", "dojo/domReady!"], function (Map, demot1) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); map.on("mouse-move", showCoordinates); map.on("mouse-drag", showCoordinates); map.on("dragover", showCoordinates); setupDropZone(); var startNode = dojo.byId("sensorDiv"); dojo.connect(startNode, "dragstart", handleStartDrag); function setupDropZone() { // Let's verify that we have proper browser support, before // moving ahead. You can also use a library like Modernizr // to detect browser cappabilities: // http://www.modernizr.com/ var node = dojo.byId("mapDiv"); // Reference // http://www.html5rocks.com/features/file // http://www.html5rocks.com/tutorials/dnd/basics/ // https://developer.mozilla.org/En/DragDrop/Drag_Operations dojo.connect(node, "dragenter", function (evt) { // If we don't prevent default behavior here, browsers will // perform the default action for the file being dropped i.e, // point the page to the file. evt.preventDefault(); }); dojo.connect(node, "dragover", function (evt) { evt.preventDefault(); }); dojo.connect(node, "drop", handleDrop); } function handleDrop(evt) { console.log("Drop: ", evt); evt.preventDefault(); var iconPath = evt.dataTransfer.getData("text/plain"); var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint); demot1.placeIcon(map, mp, iconPath); } function handleStartDrag(evt) { console.log("Start Drag"); var iconPath = dojo.query("path", evt.target)[0].attributes["d"].value; evt.dataTransfer.setData('text/plain', iconPath); } function showCoordinates(evt) { console.log("show"); //get mapPoint from event //The map is in web mercator - modify the map point to display the results in geographic var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint); //display mouse coordinates dojo.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3); } }); </script> </head> <body class="claro"> <h1 id="greeting">Hello</h1> <div class="container"> <div class="row"> <div class="span11"> <div id="mapDiv"> <span id="info" style="position:absolute; left:15px; bottom:5px; color:#000; z-index:50;"></span> </div> </div> <div class="span1"> <div id="sensorDiv" draggable="true"> <svg id="sensor1" height="40" version="1.1" width="40" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden;" > <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.2</desc> <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <linearGradient id="29290-_0050af-_002c62" x1="0" y1="1" x2="6.123031769111886e-17" y2="0" gradientTransform="matrix(1,0,0,1,-4,-4)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"> <stop offset="0%" stop-color="#0050af" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop> <stop offset="100%" stop-color="#002c62" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></stop> </linearGradient> </defs> <path fill="url(#29290-_0050af-_002c62)" stroke="none" d="M16,1.466C7.973,1.466,1.466,7.973,1.466,16C1.466,24.027,7.973,30.534,16,30.534C24.027,30.534,30.534,24.027,30.534,15.999999999999998C30.534,7.973,24.027,1.466,16,1.466ZM16,28.792C14.451,28.792,13.193999999999999,27.536,13.193999999999999,25.986S14.45,23.18,16,23.18C17.55,23.18,18.806,24.436,18.806,25.986S17.55,28.792,16,28.792ZM16,21.087L8.142,14.524999999999999H11.610999999999999V5.747H20.39V14.525H23.858L16,21.087Z" transform="matrix(1,0,0,1,4,4)" opacity="1" fill-opacity="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 1; fill-opacity: 1;"></path> <rect x="0" y="0" width="32" height="32" r="0" rx="0" ry="0" fill="#000000" stroke="#000" opacity="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); opacity: 0;"></rect> </svg> </div> </div> </div> </div> </body> </html> </body>
... View more
10-09-2013
11:52 AM
|
0
|
2
|
2881
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:23 AM
|