topic Re: Override Map Click Event - Display Graphic InfoTemplate Instead in ArcGIS JavaScript Maps SDK Questions

Override Map Click Event - Display Graphic InfoTemplate Instead

BrianRoscher — Thu, 02 May 2019 11:55:48 GMT

The program below let's the user put in latitude and longitude coordinates plus an associated image onto the map. The input fields are found below the map (you will have to scroll down to see them).

The desired behavior is that when you click on the map, it should say the coordinates but if they click on a graphic that was added to the map, it should only display the "Hi Dude" infotemplate associated with that graphic rather than the map coordinates.

How do I make that happen? Right now, when I click on the graphic that was added to the map, it displays the coordinates instead of saying "Hi Dude".

Thanks!

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

require([
"esri/map",
"esri/InfoTemplate",
"esri/toolbars/draw",
"esri/symbols/PictureMarkerSymbol",
"esri/graphic",
"esri/geometry/Point",
"esri/Color",
"dojo/dom",
"dojo/dom-construct",
"esri/dijit/InfoWindow",
"dojo/on",
"dojo/domReady!"
],
function(Map, InfoTemplate, Draw, PictureMarkerSymbol, Graphic, Point, Color, dom, domConstruct, InfoWindow, on) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-81.122685, 33.941193],
zoom: 15
});
map.disableDoubleClickZoom();
map.on("load", initToolbar);

function initToolbar() {
tb = new Draw(map);

on(dom.byId("GoGo"), "click", function() {
addGraphic();
});
}

function addGraphic() {
var point = new Point();
point.setLongitude(document.getElementById("lon").value);
point.setLatitude(document.getElementById("lat").value);

var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Population");
infoTemplate.setContent("Hi<br/>Dude!");

var markerSymbol = new PictureMarkerSymbol();
markerSymbol.setUrl(document.getElementById("picture_url").value);
markerSymbol.setHeight(64);
markerSymbol.setWidth(64);

map.enableMapNavigation();
var graphic = new Graphic(point, markerSymbol);
graphic.setInfoTemplate(infoTemplate);
map.graphics.add(graphic);
}

map.on("Click", function(evt)
{
map.infoWindow.setTitle("Coordinates");
map.infoWindow.setContent("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x);
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});
});
</script>
</head>

<body>
<div id="mapDiv"></div>
<input type=text name=lat id=lat value=33.941193>
<input type=text name=lon id=lon value=-81.122685>
<input type=text name=picture_url id=picture_url value="https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png">
<input type=button value=Go! id=GoGo> <input type=button value=Go2! onclick=document.getElementById("GoGo").click();>
</body>
</html>

Re: Override Map Click Event - Display Graphic InfoTemplate Instead

KenBuja — Fri, 10 Dec 2021 20:28:06 GMT

Check the event of the map click. If it's not a graphic, then set the title and content of the point.

map.on("Click", function(evt)
{
  if (!evt.graphic){
    map.infoWindow.setTitle("Coordinates");
    map.infoWindow.setContent("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x);
  }
  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));
});‍‍‍‍‍‍‍‍

Re: Override Map Click Event - Display Graphic InfoTemplate Instead

BrianRoscher — Thu, 02 May 2019 13:38:56 GMT

That worked! Thank you!

Re: Override Map Click Event - Display Graphic InfoTemplate Instead

RobertScheitlin__GISP — Fri, 10 Dec 2021 20:28:10 GMT

Brain,

Another possible route (that may help you in the future). Use on.pausable.

<!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>Shapes and Symbols</title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
  <link rel="stylesheet" href="styles/InfoWindow.css">
  <style>
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/3.28/"></script>
  <script>
    var map, tb;

    require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/toolbars/draw",
        "esri/symbols/PictureMarkerSymbol",
        "esri/graphic",
        "esri/geometry/Point",
        "esri/Color",
        "dojo/dom",
        "dojo/dom-construct",
        "esri/dijit/InfoWindow",
        "dojo/on",
        "dojo/domReady!"
      ],
      function (Map, InfoTemplate, Draw, PictureMarkerSymbol, Graphic, Point, Color, dom, domConstruct, InfoWindow,
        on) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-81.122685, 33.941193],
          zoom: 15
        });
        map.disableDoubleClickZoom();
        map.on("load", initToolbar);

        function initToolbar() {
          tb = new Draw(map);

          on(dom.byId("GoGo"), "click", function () {
            addGraphic();
          });

          map.graphics.on("mouse-over", function(evt) {
            mapClickEvent.pause();
          });

          map.graphics.on("mouse-out", function(evt) {
            mapClickEvent.resume();
          });
        }

        function addGraphic() {
          var point = new Point();
          point.setLongitude(document.getElementById("lon").value);
          point.setLatitude(document.getElementById("lat").value);

          var infoTemplate = new InfoTemplate();
          infoTemplate.setTitle("Population");
          infoTemplate.setContent("Hi<br/>Dude!");

          var markerSymbol = new PictureMarkerSymbol();
          markerSymbol.setUrl(document.getElementById("picture_url").value);
          markerSymbol.setHeight(64);
          markerSymbol.setWidth(64);

          map.enableMapNavigation();
          var graphic = new Graphic(point, markerSymbol);
          graphic.setInfoTemplate(infoTemplate);
          map.graphics.add(graphic);
          map.graphics.enableMouseEvents();
        }

        var mapClickEvent = on.pausable(map, "Click", function (evt) {
          map.infoWindow.setTitle("Coordinates");
          map.infoWindow.setContent("lat/lon : " + evt.mapPoint.y + ", " + evt.mapPoint.x);
          map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
        });
      });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
  <input type=text name=lat id=lat value=33.941193>
  <input type=text name=lon id=lon value=-81.122685>
  <input type=text name=picture_url id=picture_url
    value="https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png">
  <input type=button value=Go! id=GoGo> <input type=button value=Go2! onclick=document.getElementById("GoGo").click();>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Override Map Click Event - Display Graphic InfoTemplate Instead

BrianRoscher — Thu, 02 May 2019 13:50:37 GMT

Thanks so much for sharing that! Good to know that I can do this too in the future.