Community

Override Map Click Event - Display Graphic InfoTemplate Instead

918
4
Jump to solution
05-02-2019 04:55 AM
BrianRoscher
by
New Contributor III
‎05-02-2019 04:55 AM

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">


<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();
});
}

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>

0 Kudos
1 Solution

Accepted Solutions
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎05-02-2019 06:28 AM

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));
});‍‍‍‍‍‍‍‍

View solution in original post

4 Replies
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎05-02-2019 06:28 AM

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));
});‍‍‍‍‍‍‍‍
BrianRoscher
by
New Contributor III
‎05-02-2019 06:38 AM

That worked!  Thank you!

0 Kudos
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-02-2019 06:47 AM

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
BrianRoscher
by
New Contributor III
‎05-02-2019 06:50 AM

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

0 Kudos