Override Map Click Event - Display Graphic InfoTemplate Instead

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

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
MVP Honored Contributor

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
MVP Honored Contributor

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
New Contributor III

That worked!  Thank you!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor III

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

0 Kudos