Show x,y ArcGIS API 3.22

BrandonPrice · ‎12-14-2017

Hello,

I would like to make my show x,y script I got from ArcGIS API for JavaScript Sandbox media responsive. I want it centered at all times. I also want the x,y raised to 50px when the screen size is less than 768px. I have not been able to do this. This is what I have:

CSS:

@media screen and (max-width: 768px) {
   #xy {
      position: absolute;
   l   eft:5px !important;
      bottom: 70px;
   }
}

HTML:

Script:

function showCoordinates(evt) {
   //the map is in web mercator but display coordinates in geographic (lat, long)
   var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
   //display mouse coordinates
   dom.byId("coordInfo").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
};

// The application is ready
topic.subscribe("tpl-ready", function(){

   app.map.on("mouse-move", showCoordinates);
   app.map.on("mouse-drag", showCoordinates);

Any suggestions appreciated.

Thanks,
Brandon

RobertScheitlin__GISP · ‎12-14-2017

Andy beat me to it but here is another sample based on what you are trying to do:

<!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>Create Map Display Mouse Coordinates</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

    <style>
      html, body, #map{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
      }
      #xy {
        position:absolute;
        left:15px;
        bottom:5px;
        color:#000;
        z-index:50;
      }
      @media screen and (max-width: 768px) {
         #xy {
            position: absolute;
            left:5px !important;
            bottom: 70px;
            color:#000;
            z-index:50;
         }
      }
    </style>

    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/geometry/webMercatorUtils", "dojo/dom",
        "dojo/domReady!"
      ], function(
        Map, webMercatorUtils, dom
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-47.109, 14.945],
          zoom: 2
        });
        map.on("load", function() {
          //after map loads, connect to listen to mouse move & drag events
          map.on("mouse-move, mouse-drag", showCoordinates);
        });

        function showCoordinates(evt) {
          //the map is in web mercator but display coordinates in geographic (lat, long)
          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
          //display mouse coordinates
          dom.byId("coordInfo").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
        }
      });
    </script>
  </head>
  <body>
    <div id="map">
      <div id="xy">
         <i>Lat/Long: </i><span id="coordInfo"></span> <i>(DD)</i>
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

AndyGup · ‎12-14-2017

Here's a rough sample that might be similar to what you want: JS Bin - Collaborative JavaScript Debugging

RobertScheitlin__GISP · ‎12-14-2017

Andy beat me to it but here is another sample based on what you are trying to do:

<!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>Create Map Display Mouse Coordinates</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/esri/css/esri.css">

    <style>
      html, body, #map{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
      }
      #xy {
        position:absolute;
        left:15px;
        bottom:5px;
        color:#000;
        z-index:50;
      }
      @media screen and (max-width: 768px) {
         #xy {
            position: absolute;
            left:5px !important;
            bottom: 70px;
            color:#000;
            z-index:50;
         }
      }
    </style>

    <script src="https://js.arcgis.com/3.22/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/geometry/webMercatorUtils", "dojo/dom",
        "dojo/domReady!"
      ], function(
        Map, webMercatorUtils, dom
      ) {
        map = new Map("map", {
          basemap: "streets",
          center: [-47.109, 14.945],
          zoom: 2
        });
        map.on("load", function() {
          //after map loads, connect to listen to mouse move & drag events
          map.on("mouse-move, mouse-drag", showCoordinates);
        });

        function showCoordinates(evt) {
          //the map is in web mercator but display coordinates in geographic (lat, long)
          var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
          //display mouse coordinates
          dom.byId("coordInfo").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
        }
      });
    </script>
  </head>
  <body>
    <div id="map">
      <div id="xy">
         <i>Lat/Long: </i><span id="coordInfo"></span> <i>(DD)</i>
      </div>
    </div>
  </body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

BrandonPrice · ‎12-14-2017

Thanks for the example. I am not sure what part of mine was incorrect. Something with the css was off though. I was able to get it to work using the css provided above.

-Brandon

BrandonPrice · ‎12-14-2017

I figured out what the problem was. I doubled up on my css. I had css in my html body I forgot to delete after I added css to the style part of my html.