andygup/js4-webmap-click.html

## js4-webmap-click.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Dock Positions with Popup - 4.3</title>

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        .docking-control {
            font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
            position: absolute;
            z-index: 10;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 80px;
            padding: 10px;
            box-sizing: border-box;
            margin: -40px 0 0 -125px;
            background-color: #fff;
            color: #323232;
            text-align: center;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .docking-control label {
            display: inline-block;
            font-weight: bold;
            margin: 0 0 10px 0;
            padding: 0;
            font-size: 16px;
        }
    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/4.3/dijit/themes/claro/claro.css">
    <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/WebMap",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/layers/GraphicsLayer",
            "dojo/dom",
            "dojo/on",
            "dojo/domReady!"
        ], function(
            Map, MapView, WebMap,SimpleMarkerSymbol,GraphicsLayer,
            dom, on
        ) {

            var _placeHolderGraphic = null;
            var _graphicsLayer = new GraphicsLayer();

            var _webmap = new WebMap({
                portalItem: { // autocasts as new PortalItem()
                    id: "3af548bac6054938b615d08104197ba0"
                }
            });

            var _view = new MapView({
                map: _webmap,
                popup: {
                    dockEnabled: true,
                    dockOptions: {
                        // Disables the dock button from the popup
                        buttonEnabled: false,
                        // Ignore the default sizes that trigger responsive docking
                        breakpoint: false,
                    }
                },
                container: "viewDiv"
            });

            var _popup = _view.popup;

            var _symbol = new SimpleMarkerSymbol({
                style: "square",
                color: "blue",
                size: "20px",  // pixels
                outline: {  // autocasts as esri/symbols/SimpleLineSymbol
                    color: [ 255, 255, 0 ],
                    width: 3  // points
                }
            });

            _view.then(function() {

                _view.map.add(_graphicsLayer);
                var centerPoint = _view.center.clone();

                _popup.open({
                    title: "Popup dock positions",
                    location: centerPoint,
                    content: "Use the control in the center of the map to change the location where the popup will dock."
                });

                // Watch currentDockPosition of the popup and open the
                // popup at the specified position.
                _popup.watch("currentDockPosition", function(value) {
                    _popup.visible = true;
                });

                var selectNode = dom.byId("dockPositionControl");

                // Let user change the position dockOptions.position property of the
                // popup at runtime from the drop-down list.
                on(selectNode, "change", function(e) {
                    _popup.set("dockOptions", {
                        breakpoint: false,
                        buttonEnabled: false,
                        position: e.target.value
                    });
                });

                // Listen for click events on the map
                _view.on("click", function(result){

                    // Test to see if a graphic is near the click
                    _view.hitTest({
                        x: result.x,
                        y: result.y
                    })
                    .then(function(value){

                        // You can view the value of the hitTest by uncommenting out the console.log below
                        //console.log(value);

                        if(value.results[0].hasOwnProperty("graphic")){

                            if(_placeHolderGraphic){
                                // Remove the old placeHolderGraphic if it exists
                                _graphicsLayer.graphics.remove(_placeHolderGraphic);
                            }

                            _placeHolderGraphic =  value.results[0].graphic;
                            _placeHolderGraphic.symbol = _symbol;
                            _placeHolderGraphic.uid = 566868686138900; // A randomly picked UID

                            _graphicsLayer.graphics.add(_placeHolderGraphic);
                        }
                    })
                })

            });
        });
    </script>
</head>

<body>
<div id="viewDiv">
    <div class="docking-control">
        <label for="dockPositionControl">Popup Dock Position</label>
        <select id="dockPositionControl">
            <option selected value="auto">Auto</option>
            <option value="top-left">Top Left</option>
            <option value="top-center">Top Center</option>
            <option value="top-right">Top Right</option>
            <option value="bottom-left">Bottom Left</option>
            <option value="bottom-center">Bottom Center</option>
            <option value="bottom-right">Bottom Right</option>
        </select>
    </div>
</div>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<title>Dock Positions with Popup - 4.3</title>

	<style>
	html,
	body,
	#viewDiv {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
	}

	.docking-control {
	font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: absolute;
	z-index: 10;
	top: 50%;
	left: 50%;
	width: 250px;
	height: 80px;
	padding: 10px;
	box-sizing: border-box;
	margin: -40px 0 0 -125px;
	background-color: #fff;
	color: #323232;
	text-align: center;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	}

	.docking-control label {
	display: inline-block;
	font-weight: bold;
	margin: 0 0 10px 0;
	padding: 0;
	font-size: 16px;
	}
	</style>

	<link rel="stylesheet" href="https://js.arcgis.com/4.3/dijit/themes/claro/claro.css">
	<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/WebMap",
	"esri/symbols/SimpleMarkerSymbol",
	"esri/layers/GraphicsLayer",
	"dojo/dom",
	"dojo/on",
	"dojo/domReady!"
	], function(
	Map, MapView, WebMap,SimpleMarkerSymbol,GraphicsLayer,
	dom, on
	) {

	var _placeHolderGraphic = null;
	var _graphicsLayer = new GraphicsLayer();

	var _webmap = new WebMap({
	portalItem: { // autocasts as new PortalItem()
	id: "3af548bac6054938b615d08104197ba0"
	}
	});

	var _view = new MapView({
	map: _webmap,
	popup: {
	dockEnabled: true,
	dockOptions: {
	// Disables the dock button from the popup
	buttonEnabled: false,
	// Ignore the default sizes that trigger responsive docking
	breakpoint: false,
	}
	},
	container: "viewDiv"
	});

	var _popup = _view.popup;

	var _symbol = new SimpleMarkerSymbol({
	style: "square",
	color: "blue",
	size: "20px", // pixels
	outline: { // autocasts as esri/symbols/SimpleLineSymbol
	color: [ 255, 255, 0 ],
	width: 3 // points
	}
	});

	_view.then(function() {

	_view.map.add(_graphicsLayer);
	var centerPoint = _view.center.clone();

	_popup.open({
	title: "Popup dock positions",
	location: centerPoint,
	content: "Use the control in the center of the map to change the location where the popup will dock."
	});

	// Watch currentDockPosition of the popup and open the
	// popup at the specified position.
	_popup.watch("currentDockPosition", function(value) {
	_popup.visible = true;
	});

	var selectNode = dom.byId("dockPositionControl");

	// Let user change the position dockOptions.position property of the
	// popup at runtime from the drop-down list.
	on(selectNode, "change", function(e) {
	_popup.set("dockOptions", {
	breakpoint: false,
	buttonEnabled: false,
	position: e.target.value
	});
	});

	// Listen for click events on the map
	_view.on("click", function(result){

	// Test to see if a graphic is near the click
	_view.hitTest({
	x: result.x,
	y: result.y
	})
	.then(function(value){

	// You can view the value of the hitTest by uncommenting out the console.log below
	//console.log(value);

	if(value.results[0].hasOwnProperty("graphic")){

	if(_placeHolderGraphic){
	// Remove the old placeHolderGraphic if it exists
	_graphicsLayer.graphics.remove(_placeHolderGraphic);
	}

	_placeHolderGraphic = value.results[0].graphic;
	_placeHolderGraphic.symbol = _symbol;
	_placeHolderGraphic.uid = 566868686138900; // A randomly picked UID

	_graphicsLayer.graphics.add(_placeHolderGraphic);
	}
	})
	})

	});
	});
	</script>
	</head>

	<body>
	<div id="viewDiv">
	<div class="docking-control">
	<label for="dockPositionControl">Popup Dock Position</label>
	<select id="dockPositionControl">
	<option selected value="auto">Auto</option>
	<option value="top-left">Top Left</option>
	<option value="top-center">Top Center</option>
	<option value="top-right">Top Right</option>
	<option value="bottom-left">Bottom Left</option>
	<option value="bottom-center">Bottom Center</option>
	<option value="bottom-right">Bottom Right</option>
	</select>
	</div>
	</div>
	</body>

	</html>