Latest Contributions by KennethLindhardt1

‎05-22-2019

Hi, I hope you can help. I need the buttons from the dropdown, controlling the widgets moved out in the calcite-navbar, like the picture, and they need to work :-): The "Full map " are working, but that are not controlling the widgets, the basemap button don't do anything Although it has the same lines as the links in the drop-down. I’m trying on this example: https://developers.arcgis.com/javascript/latest/sample-code/frameworks-bootstrap/index.html <nav class="navbar calcite-navbar navbar-fixed-top calcite-text-light calcite-bg-dark" >  <div class="dropdown calcite-dropdown calcite-text-dark calcite-bg-light" role="presentation" > <a class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" > <div class="calcite-dropdown-toggle"> <span class="sr-only">Toggle dropdown menu</span> <span></span> <span></span> <span></span> <span></span> </div> </a> <ul class="dropdown-menu"> <li class="active"> <a class="hidden-md hidden-lg" href="#mapTab" aria-controls="mapTab" role="tab" data-toggle="tab" > Map</a > </li> <li> <a class="hidden-md hidden-lg" href="#sceneTab" aria-controls="sceneTab" role="tab" data-toggle="tab" > Scene</a > </li>  <li> <a role="button" data-target="#panelBasemaps" aria-haspopup="true" ><span class="glyphicon glyphicon-th-large"></span> Basemaps</a > </li> <li> <a role="button" data-target="#panelSettings" aria-haspopup="true" ><span class="glyphicon glyphicon-cog"></span> Settings</a > </li> <li> <a role="button" id="calciteToggleNavbar" aria-haspopup="true" ><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a > </li>  </ul> </div>  <div class="calcite-title calcite-overflow-hidden"> <span class="calcite-title-main">Calcite Maps</span> <span class="calcite-title-divider hidden-xs"></span> <span class="calcite-title-sub hidden-xs" >A modern framework for building map apps</span > </div>  <ul class="nav navbar-nav calcite-nav"> <li class="active"> <a id="mapNav" class="hidden-xs hidden-sm" href="#mapTab" aria-controls="mapTab" aria-expanded="true" role="tab" data-toggle="tab" data-tooltip="tip" title="2D View" data-placement="bottom" >Map</a > </li> <li> <a id="sceneNav" class="hidden-xs hidden-sm" href="#sceneTab" aria-controls="sceneTab" role="tab" data-toggle="tab" data-tooltip="tip" title="3D View" data-placement="bottom" >Scene</a > </li> <li> <div class="calcite-navbar-search calcite-search-expander"> <div id="searchWidgetDiv"></div> </div> </li> <li> <a role="button" data-target="#panelBasemaps" aria-haspopup="true" ><span class="glyphicon glyphicon-th-large"></span> Basemaps</a > </li> <li> <a role="button" id="calciteToggleNavbar" aria-haspopup="true" ><span class="glyphicon glyphicon-fullscreen"></span> Full Map</a > </li> </ul> </nav> And then it has to open this panel <div id="panelSettings" class="panel panel-map collapse"> <div id="headingSettings" class="panel-heading"> <div class="panel-title"> <a class="panel-toggle" role="button" data-toggle="collapse" href="#collapseSettings" data-parent="#panelAccordion" aria-expanded="true" aria-controls="collapseSettings" ><span class="glyphicon glyphicon-cog" aria-hidden="true"></span ><span class="panel-label">Settings</span></a > <a class="panel-close" role="button" data-toggle="collapse" data-target="#panelSettings" ><span class="esri-icon esri-icon-close" aria-hidden="true"></span ></a> </div> </div> Hope it make sense 🙂 Thanks.

‎05-22-2019

Did you guys ever found a solution to this? I got the exact same issue. I came as far as, it seems to be this blocking the X: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> If you take a basic calcite and ad it to the code, it will brake the X function. I haven’t figured out in what order, when and why it brakes the X. If you remove the: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> It will work again, but then the modal breaks

‎04-24-2019

The answer for that, can be found here: https://community.esri.com/message/848040-re-update-graphic-location?commentID=848040#comment-848040

‎04-24-2019

That is so amazing, thank you so much. Exactly what I would need.

‎04-24-2019

Thank you. This is the almost clean version, where I haven’t any queryElevation() stuff in there: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Add Graphics to a SceneView - 4.10</title> <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css"> <script src="https://js.arcgis.com/4.11/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #outputMessages { position: absolute; z-index: 70; top: 0px; right: 0; bottom: 0; box-sizing: border-box; padding: 20px; height: 100%; width: 350px; background: rgba(0, 0, 0, 0.7); color: white; font-size: 14px; line-height: 30px; overflow: auto; } #outputMessages span { color: #f7be81; font-weight: bold; } </style> <script> require([ "esri/Map", "esri/views/SceneView", "esri/Graphic", "esri/geometry/Polyline", "esri/layers/ElevationLayer", "esri/core/promiseUtils", "esri/core/watchUtils", "esri/layers/GraphicsLayer", ], function( Map, SceneView, Graphic, Polyline, ElevationLayer, promiseUtils,watchUtils, GraphicsLayer ) { // Create elevation layers var beforeLandslideUrl = "https://sampleserver6.arcgisonline.com/arcgis/rest/services/OsoLandslide/OsoLandslide_Before_3DTerrain/ImageServer/"; var beforeLandslideLayer = new ElevationLayer({ url: beforeLandslideUrl }); // Create Map and View var map = new Map({ basemap: "satellite", ground: { layers: [beforeLandslideLayer] } }); var view = new SceneView({ container: "viewDiv", map: map, camera: { // initial view: heading: 332.8, tilt: 65.5, position: { x: -13563643, y: 6153016, z: 577, spatialReference: { wkid: 3857 } }, heading: 0.34445102566290225, tilt: 82.95536300536367 } }); var outputMessages = document.getElementById("outputMessages"); var cameraX, cameraY, point, markerSymbol; var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); markerSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], size : 100, outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 0.2 } }; watchUtils.whenTrue(view, "stationary", function() { graphicsLayer.removeAll(); cameraX = view.camera.position.longitude; cameraY = view.camera.position.latitude + 0.20; point = { type: "point", // autocasts as new Point() x: cameraX, y: cameraY }; graphicsLayer.add(new Graphic({ geometry: point, symbol: markerSymbol, })); }); watchUtils.whenTrue(view, "stationary", function() { // Get the new center of the view only when view is stationary. var info = "<br> <span> the view center changed. </span> x: " + cameraX + " y: " + cameraY + " Z: " + " Camera Z " + view.camera.position.z displayMessage(info); }); function displayMessage(info) { outputMessages.innerHTML += info; outputMessages.scrollTop = outputMessages.scrollHeight; } }); </script> </head> <body> <div id="viewDiv"> <div id="outputMessages"></div> <div id="titleDiv"></div> </div> </body> </html> I’m trying to get this implemented, in some way, but yea, it fails: var cameraX, cameraY, DefindePoint, markerSymbol; var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); markerSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], size : 10, outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 0.2 } }; watchUtils.whenTrue(view, "stationary", function(event) { // var position = event; // var queryBeforeLandslide = beforeLandslideLayer.queryElevation( // position // ); graphicsLayer.removeAll(); cameraX = view.camera.position.longitude; cameraY = view.camera.position.latitude + 0.02; DefindePoint = { // type: "point", // autocasts as new Point() x: cameraX, y: cameraY, // mode: "on-the-ground", }; beforeLandslideLayer.queryElevation(new Point(DefindePoint)) .then(function(result) { // Print result of each sampled point to the console result.geometry.DefindePoint.forEach(function(point, index) { var elevation = Math.round(point[2]); var resolution = result.sampleInfo[index].demResolution; var coordinateText = "(" + point[0] + ", " + point[1] + ")"; var resolutionText = Math.round(resolution) + " meter resolution"; console.log("Sampled " + coordinateText + ": " + elevation + " at " + resolutionText); }); }) // Failed to sample (e.g. service unavailable) .catch(function(error) { console.error("Failed to query elevation:", error); }); graphicsLayer.add(new Graphic({ geometry: DefindePoint, symbol: markerSymbol, })); }); watchUtils.whenTrue(view, "stationary", function() { // Get the new center of the view only when view is stationary. var info = "<br> <span> the view center changed. </span> x: " + cameraX + " y: " + " Ponit = " + + " " + cameraY + " Z: " + " Camera Z " + view.camera.position.z displayMessage(info); }); function displayMessage(info) { outputMessages.innerHTML += info; outputMessages.scrollTop = outputMessages.scrollHeight; } });

‎04-23-2019

Well, I’m not getting that far in my script as I expected. Maybe I should start a new thread, but since we are on our way here, I’ll continue and pass the result to https://community.esri.com/thread/226394-show-camera-position-relative-to-ground The idea was to take everything in small stages, learn something on the way, but I face issues, every time I try to move forward So I’m trying to combine the Query Elevation (points) https://developers.arcgis.com/javascript/latest/sample-code/elevation-query-points/index.html with the graphic created on camera movement, so I’m trying to use queryElevation() and been trying in many different ways. Now I’m just getting dizzy. So what I would need at the end, is to extract the z value from the graphic, the use view.camera.position.z – the Graphic Z value, then I should have the camera elevation from ground, which will answer my show camera position relative to ground post. In what I’m testing I’m using the ElevationLayer from the elevation query points. I can’t figure out if my issues are related to the graphic using WGS84 (wkid: 4326) and the layer are using wkid: 3857, or if the graphic will reproject to the elevation layer. Thanks.

‎04-17-2019

We wrote on almost the same time, I was even closer 🙂 Now I got it, awesome thank you Robert. Really happy now 🙂

‎04-17-2019

This helped, now I just need to remove the graphic, so I only got one: var cameraX, cameraY, point, markerSymbol, pointGraphic, graphicsLayer; watchUtils.whenTrue(view, "stationary", function() { cameraX = view.camera.position.longitude; cameraY = view.camera.position.latitude + 0.20; point = { type: "point", // autocasts as new Point() x: cameraX, y: cameraY }; markerSymbol= { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], size : 100, outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], //width: } }; pointGraphic = new Graphic({ geometry: point, symbol: markerSymbol, }); graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); graphicsLayer.add(pointGraphic); });

‎04-17-2019

Hi Robert thank you, sorry for the late reply on this. I can't seem to get this to work at all. I would expect, that I also would need to update the graphic layer when I move the camera, so tride different variations of the watchUtils. So I guess the graphic don’t re-read the new camera/cameraY var cameraX, cameraY, point; watchUtils.whenTrue(view, "stationary", function() { cameraX = view.camera.position.longitude; cameraY = view.camera.position.latitude + 0.20; point = { type: "point", // autocasts as new Point() x: cameraX, y: cameraY }; }); markerSymbol = { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: [226, 119, 40], size : 100, outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], //width: } }; var pointGraphic = new Graphic({ geometry: point, symbol: markerSymbol, }); var graphicsLayer = new GraphicsLayer(); map.add(graphicsLayer); graphicsLayer.add(pointGraphic);

‎04-17-2019

Thank you so much, was going back and forward that example, but couldn’t make it fit. Now it works, thank you.

‎04-17-2019

Hi, I’m new to JavaScript, but are starting to get a need app build up, with the help from GeoNet. I’ve used the layerWidget, but some layers I need to hide in the widget. I would expect to use the listMode property to do that, but I can’t seem to hit the right syntax to do so. I’m creating a SceneView with a WebScene, and the layerWidget shows all of those layers. var layerWidget = new LayerList({ view: sceneView, container: "layerPanelDiv" }); But if I want the layer widget not to show a layer from the scene called Cars, so the end user not will be able to turn it off or even see that it exist, how do I do so? Thanks.

‎04-03-2019

Hi, I need to update a graphic point, so that it always stays in front of the camera: This is what I’m trying, but although the cameraX and cameraY are perfectly updating with the prober coordinates I can’t figure out how to clone the graphic with the new coordinates, so basically it needs to refresh the points XY with the new values, when I move the camera and then redraw the point. I’ve been searching for a long time for an answer, so I hope I can get some help var cameraX; watchUtils.whenTrue(view, "stationary", function() { cameraX = view.camera.position.longitude ; }); var cameraY; watchUtils.whenTrue(view, "stationary", function() { cameraY = view.camera.position.latitude + 0.05; }); var point = { type: "point", // autocasts as new Point() x: cameraX, y: cameraY,

‎04-03-2019

Hi Robert, thank you for taking you time to answer, I tried your answer, but I think I did it wrong, it didn’t had the outcome I was expecting. I changed the view.camera.position.x to view.camera.position.longtitude and that seem to fix the issue. Thank you

‎04-01-2019

Hi I’m stuck here. I need to keep track of my XYZ of the camera, and assign that information to a point later in the script. I found out that the coordinate system seems to change, but not on my point. I need the point to always stay in front of my camera, but when it starts with: x: 7.654 y: 45.919 Z: 5183 and changes to: x: 852275.0892005145 y: 5767392.023641216 Z: 5223.5517142592, then I’m a little lost in what to do. I could use some help in getting it to keep the prober coordinates on the camera. Thanks. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>CameraTest</title> <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css"> <script src="https://js.arcgis.com/4.11/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } </style> <script> require([ "esri/Map", "esri/views/SceneView", "esri/WebScene", "esri/layers/GraphicsLayer", "esri/Graphic", "esri/core/watchUtils", ], function( Map, SceneView, WebScene, GraphicsLayer, Graphic,watchUtils ) { var scene = new Map({ basemap: "streets", ground: "world-elevation" }); var view = new SceneView({ map: scene, container: "viewDiv", camera: { position: [7.654, 45.919, 5183], tilt: 80}, padding: { top: 40 } }); var graphicsLayer = new GraphicsLayer(); scene.add(graphicsLayer); cameraX = view.camera.position.x cameraY = view.camera.position.y watchUtils.whenTrue(view, "stationary", function() { var info = "<br> <span> the view center changed. </span> x: " + view.camera.position.x + " y: " + view.camera.position.y + " Z: " + view.camera.position.z ; displayMessage(info); }); function displayMessage(info) { outputMessages.innerHTML += info; outputMessages.scrollTop = outputMessages.scrollHeight; } }); </script> </head> <body> <div id="viewDiv"> <div id="outputMessages"></div> <div id="titleDiv"></div> </div> </body> </html>

‎02-20-2019

Thank you allison, either I'm lost in the layers, or else it's not working as I hoped to 🙂 As you can see at the picture, I've changed the Display name and also in the pop ups, and I hoped that that would change the text in the app, but I have no such luck. Are the aliases connected to the app text, if they are I guess I'm missing the correct place to change it:

Online Status	Online
Date Last Visited	2 hours ago

My Ideas

Latest Contributions by KennethLindhardt1

Buttons in calcite nav to open panels widgets like the dropdown

Re: Modal dialog in Calcite Maps template

Re: Show camera position relative to ground

Re: Update graphic location

Re: Update graphic location

Re: Update graphic location

Re: Update graphic location

Re: Update graphic location

Re: Update graphic location

Re: Remove layers from the layerWidget

Remove layers from the layerWidget

Update graphic location

Re: The camera coordinate system is changing on move.

The camera coordinate system is changing on move.

Re: Some FAQs I had about the Citizen Problem Reporter Solution

Re: Creating relationship classes for repeats on s...

Issues with the authintication

Remove the Select/Edit part in editor widget

Re: How to Redirect URi ArcGIS Online Unreal

Re: Use other ArcGIS products to create spaces in ...