Latest Contributions by MatildaOtiede

‎06-08-2020

Hi All, The code below without the search widget works and its the sample from the link below ArcGIS API for JavaScript Sandbox Want to be able to add a searchwidget to the code as shown below. But not quite sure why, i' m unable to see the mapview after adding the search widget. <!DOCTYPE html> <html> <head> <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>Project a point</title> <link rel="stylesheet" href="https://js.arcgis.com/3.32/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.32/esri/css/esri.css"> <style> .esriPopup .contentPane span { display: inline-block; padding: 0 0 0.2em 0; width: 6em; } </style> <script src="https://js.arcgis.com/3.32/"></script> <script> var map,search, gsvc, pt; require([ "esri/map", "esri/graphic", "esri/symbols/SimpleMarkerSymbol", "esri/tasks/GeometryService", "esri/tasks/ProjectParameters", "esri/SpatialReference", "esri/widgets/Search", "esri/InfoTemplate", "dojo/dom", "dojo/on", "dojo/domReady!" ], function( Map, Search, Graphic, SimpleMarkerSymbol, GeometryService, ProjectParameters, SpatialReference, InfoTemplate, dom, on ) { map = new Map("map", { basemap: "streets", center: [-0.14718, 51.51161], zoom: 17 }); // Search var search = new Search({ view: view }); search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only view.ui.add(search, "top-right"); // Add to the map gsvc = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); map.on("click", projectToWebMercator); function projectToWebMercator(evt) { map.graphics.clear(); var point = evt.mapPoint; var symbol = new SimpleMarkerSymbol().setStyle("diamond"); var graphic = new Graphic(point, symbol); var outSR = new SpatialReference(27700); map.graphics.add(graphic); gsvc.project([ point ], outSR, function(projectedPoints) { pt = projectedPoints[0]; graphic.setInfoTemplate(new InfoTemplate("Coordinates", "<span>X:</span>" + pt.x.toFixed() + "<br>" + "<span>Y:</span>" + pt.y.toFixed() + "<br>" + "<input type='button' value='Convert back to LatLong' id='convert'>" + "<div id='latlong'></div>")); map.infoWindow.setTitle(graphic.getTitle()); map.infoWindow.setContent(graphic.getContent()); map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint)); on.once(dom.byId("convert"), "click", projectToLatLong); }); } function projectToLatLong() { var outSR = new SpatialReference(4326); var params = new ProjectParameters(); params.geometries = [pt.normalize()]; params.outSR = outSR; gsvc.project(params, function(projectedPoints) { pt = projectedPoints[0]; dom.byId("latlong").innerHTML = "<span>Latitude: </span> " + pt.y.toFixed(5) + "<br><span>Longitude:</span>" + pt.x.toFixed(5); }); } }); </script> </head> <body class="claro"> <b>Click a location on the map to Project from LatLng -> Web Mercator:</b> <div id="map" style="width:600px; height:400px; border:1px solid #000;"></div> </body> </html> Thanks in advance

‎06-08-2020

Thanks. This is what I was looking for.

‎06-08-2020

Hi Christian, Thanks for your help. How do I assign the Point graphics on click function so it returns the searched address using the graphic point symbol As shown below the code displays the location of the search. But I would like the graphic to be used to pinpoint location Hope this helps a bit. Thanks in advance

‎06-05-2020

Thanks Christian. See the full code below. Using the search to search for an address, the search result should have a red graphic point and a popup window. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>DevLabs - Search and Geocode</title> <style> html, body { padding: 0; margin: 0; height: 100%; width: 100%; } #viewDiv { padding: 0; margin: 0; height: 80%; width: 60%; } #instruction { padding: 15px; background: white; color: black; border: 5px solid gold; font-family: sans-serif; font-size: 1.2em; } #instruction2 { width: 60%; margin-top: 4px; } #getLocBtn { float: left; margin-top: 4px; } </style> <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css"> <script src="https://js.arcgis.com/4.3/"></script> <script> require([ "esri/Map", "esri/views/MapView", "esri/widgets/Search", "esri/layers/FeatureLayer", "esri/widgets/Locate", "esri/Graphic", "dojo/domReady!" ], function(Map, MapView, Search, Graphic, FeatureLayer, Locate) { var map = new Map({ basemap: "topo" }); // Add the layer to the map //map.add(trailsLayer); // Optionally add layer to map var view = new MapView({ container: "viewDiv", map: map, center: [-0.14718, 51.51161], zoom: 17 }); // Search var search = new Search({ view: view }); search.defaultSource.withinViewEnabled = false; // Limit search to visible map area only view.ui.add(search, "top-right"); // Add to the map // Add instruction to the map view.ui.add("instruction", "bottom-left") // Find address var simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // orange outline: { color: [255, 255, 255], // white width: 1 } }; var pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); function showPopup(address, pt) { view.popup.open({ title: "Find Address Result", content: address + "<br><br> Lat: " + Math.round(pt.latitude * 100000)/100000 + " Lon: " + Math.round(pt.longitude * 100000)/100000, location: pt, actions: [{ id: "find-brewery", image: "beer.png", title: "get xy" }] }); } view.on("click", function(evt){ search.clear(); view.popup.clear(); var locatorSource = search.defaultSource; locatorSource.locator.locationToAddress(evt.mapPoint) .then(function(response) { var address = response.address.Match_addr; // Show the address found showPopup(address, evt.mapPoint); }, function(err) { // Show no address found showPopup("No address found for this location.", evt.mapPoint); }); }); view.on("click", function (event) { view.popup .fetchFeatures(event.screenPoint) .then(function (response) { console.log(response); // Access the response from fetchFeatures response.allGraphicsPromise.then(function (graphics) { // Set the feature widget's graphic to the returned graphic from fetchFeatures console.log(graphics[0]); }); }); view.popup.open({ location: event.mapPoint, }); }); });</script> </head> <body> <div id="viewDiv"></div> <div id="instruction"> Click on the map to retrieve coordinates and address </div> </body> </html>

‎06-02-2020

Hi All, Need help to achieve the following What works at the moment, you click on a map and it returns the coordinates of that location You do a search and it returns a popup info. I would like to click on the map using a graphic point Also when the search result is on the map, I want the graphic point to be used. I have the graphic symbol in the code, not sure how to use it on the locator and evt.mapPoint. Thanks in advance ***************************************************************************************** function(Map, MapView, Search, Graphic, FeatureLayer) { var map = new Map({ basemap: "topo" }); // Add the layer to the map //map.add(trailsLayer); // Optionally add layer to map var view = new MapView({ container: "viewDiv", map: map, center: [-0.14718, 51.51161], zoom: 17 }); // Search var search = new Search({ view: view }); search.defaultSource.withinViewEnabled = false; // Limit search to visible map area only view.ui.add(search, "top-right"); // Add to the map // Add instruction to the map view.ui.add("instruction", "bottom-left") // Find address var simpleMarkerSymbol = { type: "simple-marker", color: [226, 119, 40], // orange outline: { color: [255, 255, 255], // white width: 1 } }; var pointGraphic = new Graphic({ geometry: point, symbol: simpleMarkerSymbol }); view.graphics.add(pointGraphic); function showPopup(address, pt) { view.popup.open({ title: "Find Address Result", content: address + "<br><br> Lat: " + Math.round(pt.latitude * 100000)/100000 + " Lon: " + Math.round(pt.longitude * 100000)/100000, location: pt, actions: [{ id: "find-brewery", image: "beer.png", title: "get xy" }] }); } view.on("click", function(evt){ search.clear(); view.popup.clear(); var locatorSource = search.defaultSource; locatorSource.locator.locationToAddress(evt.mapPoint) .then(function(response) { var address = response.address.Match_addr; // Show the address found showPopup(address, evt.mapPoint); }, function(err) { // Show no address found showPopup("No address found for this location.", evt.mapPoint); }); }); });</script>

Online Status	Offline
Date Last Visited	‎10-31-2022 10:08 AM

My Ideas

Latest Contributions by MatildaOtiede

LatLong Conversion and a Search Widget

Re: Graphics for on Map click

Re: Graphics for on Map click

Re: Graphics for on Map click

Graphics for on Map click

Re: Graphics for on Map click