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:
<div id="xy">
<i>Lat/Long: </i><span id="coordInfo"></span> <i>(DD)</i>
</div>
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
