Solved! Go to Solution.
Prunima,
Here is your code updated for that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[Get started with graphics - 4.3]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the get-started-graphics sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html
-->
<title>Get started with graphics - 4.3</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
var highfillSymbol, fillSymbol;
require([
"esri/core/watchUtils",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/_base/array",
"dojo/domReady!"
], function(
watchUtils, Map, MapView,
Graphic, GraphicsLayer, Point, Polyline, Polygon,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
array
) {
var layer = new GraphicsLayer({title: "myPolyGL"});
var map = new Map({
basemap: "hybrid",
layers: [layer]
});
var view = new MapView({
center: [-80, 35],
container: "viewDiv",
map: map,
zoom: 3
});
/************************
* Create a polygon graphic
************************/
// Create a polygon geometry
var polygon = new Polygon({
rings: [
[-64.78, 32.3],
[-66.07, 18.45],
[-80.21, 25.78],
[-92.21, 35.78],
[-85.21, 32.78],
[-64.78, 32.3]
]
});
// Create a symbol for rendering the graphic
fillSymbol = new SimpleFillSymbol({
color: [227, 139, 79, 0.8],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
});
// Create a highlight symbol for rendering the graphic
highfillSymbol = new SimpleFillSymbol({
color: [255, 139, 0, 0.8],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
});
// Add the geometry and symbol to a new graphic
var polygonGraphic = new Graphic({
geometry: polygon,
symbol: fillSymbol
});
// Add the graphics to the view's graphics layer
layer.graphics.addMany([polygonGraphic]);
function getGraphics(response) {
//loop through all the layers.graphics and remove any with the highfillsymbol
array.map(layer.graphics.items, function(gra){
if(gra.symbol === highfillSymbol){
layer.graphics.remove(gra);
}
});
// the topmost graphic from the click location
// from the graphic to the user
if(response.results[0] && response.results[0].graphic){
var graphic = response.results[0].graphic.clone();
graphic.symbol = highfillSymbol;
layer.graphics.add(graphic);
view.popup.open({
title: "Your Popup",
location: response.results[0].mapPoint
});
}else{
view.popup.close();
}
}
view.then(function() {
view.whenLayerView(layer).then(function(lview) {
watchUtils.whenFalseOnce(lview, "updating", function(){
// Set up a click event handler and retrieve the screen x, y coordinates
view.on("pointer-move", function(evt) {
var screenPoint = {
x: evt.x,
y: evt.y
};
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(screenPoint)
.then( function(response){
getGraphics(response);
});
});
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Prunima,
Here is your code updated for that:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="description" content="[Get started with graphics - 4.3]">
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the get-started-graphics sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/get-started-graphics/index.html
-->
<title>Get started with graphics - 4.3</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
var highfillSymbol, fillSymbol;
require([
"esri/core/watchUtils",
"esri/Map",
"esri/views/MapView",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/geometry/Polyline",
"esri/geometry/Polygon",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/_base/array",
"dojo/domReady!"
], function(
watchUtils, Map, MapView,
Graphic, GraphicsLayer, Point, Polyline, Polygon,
SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
array
) {
var layer = new GraphicsLayer({title: "myPolyGL"});
var map = new Map({
basemap: "hybrid",
layers: [layer]
});
var view = new MapView({
center: [-80, 35],
container: "viewDiv",
map: map,
zoom: 3
});
/************************
* Create a polygon graphic
************************/
// Create a polygon geometry
var polygon = new Polygon({
rings: [
[-64.78, 32.3],
[-66.07, 18.45],
[-80.21, 25.78],
[-92.21, 35.78],
[-85.21, 32.78],
[-64.78, 32.3]
]
});
// Create a symbol for rendering the graphic
fillSymbol = new SimpleFillSymbol({
color: [227, 139, 79, 0.8],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
});
// Create a highlight symbol for rendering the graphic
highfillSymbol = new SimpleFillSymbol({
color: [255, 139, 0, 0.8],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
});
// Add the geometry and symbol to a new graphic
var polygonGraphic = new Graphic({
geometry: polygon,
symbol: fillSymbol
});
// Add the graphics to the view's graphics layer
layer.graphics.addMany([polygonGraphic]);
function getGraphics(response) {
//loop through all the layers.graphics and remove any with the highfillsymbol
array.map(layer.graphics.items, function(gra){
if(gra.symbol === highfillSymbol){
layer.graphics.remove(gra);
}
});
// the topmost graphic from the click location
// from the graphic to the user
if(response.results[0] && response.results[0].graphic){
var graphic = response.results[0].graphic.clone();
graphic.symbol = highfillSymbol;
layer.graphics.add(graphic);
view.popup.open({
title: "Your Popup",
location: response.results[0].mapPoint
});
}else{
view.popup.close();
}
}
view.then(function() {
view.whenLayerView(layer).then(function(lview) {
watchUtils.whenFalseOnce(lview, "updating", function(){
// Set up a click event handler and retrieve the screen x, y coordinates
view.on("pointer-move", function(evt) {
var screenPoint = {
x: evt.x,
y: evt.y
};
// the hitTest() checks to see if any graphics in the view
// intersect the given screen x, y coordinates
view.hitTest(screenPoint)
.then( function(response){
getGraphics(response);
});
});
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
thank you so much...
if i need any more help can i ask u???
thank u
Purnima
On Thu, Apr 13, 2017 at 7:06 PM, Robert Scheitlin, GISP <geonet@esri.com>
thank u for answering my question
thanks a ton
Purnima
Prunima,
Don't forget to mark this question as answered by clicking on the "Correct Answer" link on the reply that answered your question. If you have other questions then start a new question/thread since this question has been answered already.
Where should i paste this code. we have already arcgis portal running, in that we need one maplayer need mousehover action. Shall paste the whole code in main config. Or shall i create a widget? I am confused .Please suggest
Ashok,
This is the JS API space and it sounds like you are asking about Web App Builder or Experience Builder... Is that the case?