JAVASCRIPT API

akashmagoon · ‎05-15-2012

If you already have a map created, and wanted to add a new sample to the code, what part of the code would you take to add to your existing code.

For example, I want to make an infowindow popup when click on any place on map so that the info windows shows the coordinates of the click. I got this idea from the PROJECT a POINT Sample in the API : http://help.arcgis.com/en/webapi/javascript/arcgis/demos/util/util_project.html

I tried adding a new dojo and a new function, but it didnt work.

My code (below) has hoovering pinpoint and also shows the coordinates in the bottom. But i want it to show in a infowindow when click as well

Here is my current working code. Please Amend It and also explain. Thanks. All help is appreciated

<!doctype html>
<html lang="en">
<head>
<script language=JavaScript> var message="Please Choose your coordinates!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title></title>
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }
    </style>
    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      var map;
      function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13114922,"ymin":-5500000,"xmax":9292585,"ymax":10351408, "spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);

dojo.connect(map, "onLoad", function() {

var points = {
   "points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[77,19]],
   "spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);

var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Bob","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);

var points = {
   "points": [[85,45.51],[-5,45.51],[45,45.55],[20,45.00],[20,19]],
   "spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);

var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Jack","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);

dojo.connect(map.graphics, "onMouseOver", function(evt) {
                  var g = evt.graphic;
                  map.infoWindow.setContent(g.getContent());
                  map.infoWindow.setTitle(g.getTitle());
                  map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

               });
               dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
dojo.connect(map, "onMouseMove", function(evt) {
      var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
      dojo.byId("spanCoords").innerHTML = mp.x + ", " + mp.y;
dojo.byId("spanCoords").innerHTML = (Math.round(mp.x * 10000) / 10000) + ", " + (Math.round(mp.y * 10000) / 10000);
});

        });

}
      dojo.ready(init);
    </script>
</head>

<div style="position: absolute; bottom: 5px; left: 5px; z-index: 8999; padding: 5px; background-color: #ADD8E6;">
    Current Coordinates (Latitude, Longitude): <span id="spanCoords"></span>
</div>

<body class="tundra">
    <div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
</body>
</html>

JMcNeil · ‎05-16-2012

Yea if you go down to the projectToWebMecator function and your first line of code is clearing your graphics (I commented this out). Now your 3rd line of code is creating your marker symbol. I commented the default diamond out and added a new line which adds a Square symbol with a green transparent fill and a blue outline. If you read that line and tweak the RGB colors you should be able to dial in a symbol that works for you. Here's a ref:
http://www.w3schools.com/html/html_colors.asp
If you don't want a square or diamond change that also ( STYLE_CIRCLE, STYLE_CROSS, STYLE_DIAMOND, ETC. ) here's ref:
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jsapi_start.htm#jsapi/si...

function projectToWebMercator(evt) {       //  map.graphics.clear();                           var point = evt.mapPoint; // var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);         var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255]), 1), new dojo.Color([0, 255, 0, 0.25]));                         var graphic = new esri.Graphic(point, symbol);         var outSR = new esri.SpatialReference({ wkid: 102113});                  map.graphics.add(graphic);          gsvc.project([ point ], outSR, function(projectedPoints) {           pt = projectedPoints[0];           graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",             "<p> X: " + pt.x +             "<br/> Y: " + pt.y +             "</p>"  +             "<input type='button' value='Convert back to LatLong' onclick='projectToLatLong();' />" +             "<div id='latlong'></div>"));           map.infoWindow             .setTitle(graphic.getTitle())             .setContent(graphic.getContent())             .show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));         });       }

View solution in original post

JMcNeil · ‎05-15-2012

This will get you started. It should work! I highlighted the code I add in red. Take note in the function projectToWebMercator(evt) the first line of code clears your map graphics -
map.graphics.clear(); ----- This will clear all your predefined graphic points so if you don't want this to happen then comment it out.

<!doctype html>
<html lang="en">
<head>
<script language=JavaScript> var message="Please Choose your coordinates!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
var map;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13114922,"ymin":-5500000,"xmax":9292585,"ymax":10351408, "spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);


        gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        dojo.connect(map, "onClick", projectToWebMercator);
        
dojo.connect(map, "onLoad", function() {

var points = {
"points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[77,19]],
"spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);

var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Bob","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);

var points = {
"points": [[85,45.51],[-5,45.51],[45,45.55],[20,45.00],[20,19]],
"spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);

var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Jack","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);


dojo.connect(map.graphics, "onMouseOver", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));




});
dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
dojo.connect(map, "onMouseMove", function(evt) {
var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
dojo.byId("spanCoords").innerHTML = mp.x + ", " + mp.y;
dojo.byId("spanCoords").innerHTML = (Math.round(mp.x * 10000) / 10000) + ", " + (Math.round(mp.y * 10000) / 10000);
});






});


}

  function projectToWebMercator(evt) {
        map.graphics.clear();
        
        var point = evt.mapPoint;
        var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
        var graphic = new esri.Graphic(point, symbol);
        var outSR = new esri.SpatialReference({ wkid: 102113});
        
        map.graphics.add(graphic);

        gsvc.project([ point ], outSR, function(projectedPoints) {
          pt = projectedPoints[0];
          graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",
            "<p> X: " + pt.x +
            "<br/> Y: " + pt.y +
            "</p>"  +
            "<input type='button' value='Convert back to LatLong' onclick='projectToLatLong();' />" +
            "<div id='latlong'></div>"));
          map.infoWindow
            .setTitle(graphic.getTitle())
            .setContent(graphic.getContent())
            .show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
        });
      }

      function projectToLatLong() {
        var outSR = new esri.SpatialReference({ wkid: 4326});
        gsvc.project([ pt ], outSR, function(projectedPoints) {
          pt = projectedPoints[0];
          dojo.byId("latlong").innerHTML = " Latitude = " + pt.y + "<br/> Longitude = " + pt.x;
        });
      }
      
      
dojo.ready(init);
</script>
</head>

<div style="position: absolute; bottom: 5px; left: 5px; z-index: 8999; padding: 5px; background-color: #ADD8E6;">
Current Coordinates (Latitude, Longitude): <span id="spanCoords"></span>
</div>


<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>

Please mark as answered if I answered your question...or give a point if I helped out.

Jay

akashmagoon · ‎05-15-2012

Thanks for the help.

Also is there anyway to make it so that i can click convert back to lat long.
Because right now if you try to click it the info window goes away

JMcNeil · ‎05-15-2012

I think I forgot a few things:

Declare the geometry task and a few variables:

dojo.require("esri.tasks.geometry");

var gsvc = null;
var pt = null;

Add the dojo.require("esri.tasks.geometry"); right before you declare map and then declare gsvc and pt after you declare map

dojo.require("esri.tasks.geometry");
var map;
var gsvc = null;
var pt = null;

Now you could change your version of your style sheets and JS from 2.5 to 2.8 but that won't matter.

I think once you click a point just don't move your mouse for a second or two and then you can move it and the pop window will stay...its tricky but I got it to work with the code you have.

If you don't care about having the tudra style sheet you could drop these two lines
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">

and replace them with
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">

I think the claro stylesheet might be more forgiving with the pop window...that is what the example is using.

Jay

If I answered your questions please hit the check mark to mark as answered. This lets others know the answer was given (in-case someone is having the same issue) and rewards me with a point. 🙂

Thanks

akashmagoon · ‎05-15-2012

I tried what you had said. Its a bit better, but if after a couple different infowindows it hesitates. What should i do? Is there a way that i can project a point without losing the previous points being cleared off the map.

Also how can i change the color of the marker

Thanks a lot for your help.

Heres my code after all edits.

<!doctype html>
<html lang="en">
<head>
<script language=JavaScript> var message="Please Choose your coordinates!"; function clickIE4(){ if (event.button==2){ alert(message); return false; } } function clickNS4(e){ if (document.layers||document.getElementById&&!document.all){ if (e.which==2||e.which==3){ alert(message); return false; } } } if (document.layers){ document.captureEvents(Event.MOUSEDOWN); document.onmousedown=clickNS4; } else if (document.all&&!document.getElementById){ document.onmousedown=clickIE4; } document.oncontextmenu=new Function("alert(message);return false") </script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title></title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{ margin: 0; padding: 0; }
</style>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script>
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.tasks.geometry");
var map;
var gsvc = null;
var pt = null;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13114922,"ymin":-5500000,"xmax":9292585,"ymax":10351408, "spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);

        gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
        dojo.connect(map, "onClick", projectToWebMercator);

dojo.connect(map, "onLoad", function() {

var points = {
"points": [[-122.63,45.51],[-122.56,45.51],[-122.56,45.55],[-122.62,45.00],[77,19]],
"spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);

var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Bob","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);

var points = {
"points": [[85,45.51],[-5,45.51],[45,45.55],[20,45.00],[20,19]],
"spatialReference": ({ "wkid": 4326 })
};
var mp = new esri.geometry.Multipoint(points);
var wm_mp = esri.geometry.geographicToWebMercator(mp);

var sms = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Jack","Lives in the USA");
var graphic = new esri.Graphic(wm_mp, sms, '', infoTemplate);
map.graphics.add(graphic);

dojo.connect(map.graphics, "onMouseOver", function(evt) {
var g = evt.graphic;
map.infoWindow.setContent(g.getContent());
map.infoWindow.setTitle(g.getTitle());
map.infoWindow.show(evt.screenPoint,map.getInfoWindowAnchor(evt.screenPoint));

});
dojo.connect(map.graphics, "onMouseOut", function() {map.infoWindow.hide();} );
dojo.connect(map, "onMouseMove", function(evt) {
var mp = esri.geometry.webMercatorToGeographic(evt.mapPoint);
dojo.byId("spanCoords").innerHTML = mp.x + ", " + mp.y;
dojo.byId("spanCoords").innerHTML = (Math.round(mp.x * 10000) / 10000) + ", " + (Math.round(mp.y * 10000) / 10000);
});

});

}

function projectToWebMercator(evt) {
        map.graphics.clear();

        var point = evt.mapPoint;
        var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol);
        var graphic = new esri.Graphic(point, symbol);
        var outSR = new esri.SpatialReference({ wkid: 4326});

        map.graphics.add(graphic);

        gsvc.project([ point ], outSR, function(projectedPoints) {
          pt = projectedPoints[0];
          graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",
            "<p> X: " + pt.x +
            "<br/> Y: " + pt.y +
            "</p>" +
            "<input type='button' value='Click Here' onclick='projectToLatLong();' />" +
            "<div id='latlong'></div>"));
          map.infoWindow
            .setTitle(graphic.getTitle())
            .setContent(graphic.getContent())
            .show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
        });
      }

      function projectToLatLong() {
        var outSR = new esri.SpatialReference({ wkid: 4326});
        gsvc.project([ pt ], outSR, function(projectedPoints) {
          pt = projectedPoints[0];
          dojo.byId("latlong").innerHTML = " Latitude = " + pt.y + "<br/> Longitude = " + pt.x;
        });
      }


dojo.ready(init);
</script>
</head>

<div style="position: absolute; bottom: 5px; left: 5px; z-index: 8999; padding: 5px; background-color: #ADD8E6;">
Current Coordinates (Latitude, Longitude): <span id="spanCoords"></span>
</div>

<body class="tundra">
<div data-dojo-type="dijit.layout.BorderContainer"
data-dojo-props="design:'headline',gutters:false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map"
data-dojo-type="dijit.layout.ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>

JMcNeil · ‎05-16-2012

Yea if you go down to the projectToWebMecator function and your first line of code is clearing your graphics (I commented this out). Now your 3rd line of code is creating your marker symbol. I commented the default diamond out and added a new line which adds a Square symbol with a green transparent fill and a blue outline. If you read that line and tweak the RGB colors you should be able to dial in a symbol that works for you. Here's a ref:
http://www.w3schools.com/html/html_colors.asp
If you don't want a square or diamond change that also ( STYLE_CIRCLE, STYLE_CROSS, STYLE_DIAMOND, ETC. ) here's ref:
http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jsapi_start.htm#jsapi/si...

function projectToWebMercator(evt) {       //  map.graphics.clear();                           var point = evt.mapPoint; // var symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);         var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 20, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0, 0, 255]), 1), new dojo.Color([0, 255, 0, 0.25]));                         var graphic = new esri.Graphic(point, symbol);         var outSR = new esri.SpatialReference({ wkid: 102113});                  map.graphics.add(graphic);          gsvc.project([ point ], outSR, function(projectedPoints) {           pt = projectedPoints[0];           graphic.setInfoTemplate(new esri.InfoTemplate("Coordinates",             "<p> X: " + pt.x +             "<br/> Y: " + pt.y +             "</p>"  +             "<input type='button' value='Convert back to LatLong' onclick='projectToLatLong();' />" +             "<div id='latlong'></div>"));           map.infoWindow             .setTitle(graphic.getTitle())             .setContent(graphic.getContent())             .show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));         });       }

akashmagoon · ‎05-16-2012

Thanks alot man your great. I am new to the ARCGIS API, so im not to good with the platform yet.

Your help is much appreciated

Thanks again

akashmagoon · ‎05-17-2012

Hey.

Is there anything i can do with the padding to fix the hesitation w/ the infowindows.

When i project a point, and try to click on the infowindow, the infowindow goes away.

Do you think its padding?