How to add a simple marker to map from XY coordinates?

JustinChamberlain-Dupree · ‎05-23-2011

I am trying to integrate an esri map into our companies webpage as part of a proof oc concept for a future project.

I am trying to add a simple marker to a map using the XY coordinate we have stored in a DB. Most of the information I have found relates to SilverLight, VB. I am using C# in vs 2005. Can someone point me in the right direction as to how/where to get started?

I am a bit new to this technology (mapping, ARCGIS) so forgive my naivete in advance and please tell me any info I missing.

Here is the code I have for my basic map:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestBaseMap.aspx.cs" Inherits="OnDemand.Pages.TestBaseMap" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3" type="text/javascript"></script>
    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    dojo.require("esri.map");
    var map;
    function init() {
      map = new esri.Map("mapDiv");
      var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
      map.addLayer(basemap);
    }
    dojo.addOnLoad(init);

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
    </form>
</body>
</html>

All I would like to be able to do is add a pin/marker to the map with a popup displaying the coordinate info.

Any suggestions would be appreciated.

Thank you very much.

derekswingley1 · ‎05-23-2011

Here's how you do it with JavaScript:
-listen to the map's onLoad event
-create a point object
-create a graphic object using your point, create some attributes and specify an InfoTemplate
-add your graphic to the map

Code would be something like this:

        dojo.connect(map, 'onLoad', function() { 
          var pt = new esri.geometry.Point(-100, 40, new esri.SpatialReference({ 'wkid': 4326 }));
          map.graphics.add(new esri.Graphic(
            esri.geometry.geographicToWebMercator(pt), // geometry
            new esri.symbol.SimpleMarkerSymbol(), // symbol
            { 'title': 'Some Title...', 'content': 'Some content...' }, // attributes
            new esri.InfoTemplate('${title}', '${content}')
          ));
        });

JustinChamberlain-Dupree · ‎05-24-2011

Thank you very much that was extraordinarily helpful. I have a few questions if I may.

I am still having trouble getting the point to appear on the map.

Are there any require statements that are required with the code you provided? (dojo.require(stuff));

Similarly I presently do not have an 'OnLoad' function in my code. Is this a function that is already build into the esri map?

Using the code as you described with xy coordinate (-100,40) where would that point appear on the map? In the ArcGIS documentation they indicate these coordinates are 'map units'. Is this different from true latitude and longitude?

Again I am new to this realm so I apologize if my queries are elementary.

Here is a look at my code...

<head id="Head1" runat="server">
    <title>Untitled Page</title>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3" type="text/javascript"></script>
    <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    dojo.require("esri.map");
    var map;
    function init() {
      var initExtent = new esri.geometry.Extent({"xmin":-10427539.398660975,"ymin":5592973.796653195,"xmax":-10358746.073204407,"ymax":5638836.013624239,"spatialReference":{"wkid":102100}});
      map = new esri.Map("mapDiv",{extent:initExtent});
      var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
      var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
      map.addLayer(basemap);
    }
    dojo.addOnLoad(init);
    dojo.connect(map, 'onLoad', function() { 
          var pt = new esri.geometry.Point(-118.15, 33.80, new esri.SpatialReference({ 'wkid': 4326 }));
          map.graphics.add(new esri.Graphic(
            esri.geometry.geographicToWebMercator(pt), // geometry
            new esri.symbol.SimpleMarkerSymbol(), // symbol
            { 'title': 'Test Point Location', 'content': 'This is content' }, // attributes
            new esri.InfoTemplate('${title}', '${content}')
          ));
        });
    
    </script>
</head>

Thank you for your help again.

derekswingley1 · ‎05-24-2011

Hi Justin,

No require statements necessary.

The code I provided needs to go inside your init function like so:

function init() {
    var initExtent = new esri.geometry.Extent({"xmin":-10427539,"ymin":5592973,"xmax":-10358746,"ymax":5638836,"spatialReference":{"wkid":102100}});
    map = new esri.Map("mapDiv",{extent:initExtent});
    var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
    var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL);
    map.addLayer(basemap);
    dojo.connect(map, 'onLoad', function() { 
      var pt = new esri.geometry.Point(-100, 40, new esri.SpatialReference({ 'wkid': 4326 }));
      map.graphics.add(new esri.Graphic(
        esri.geometry.geographicToWebMercator(pt), // geometry
        new esri.symbol.SimpleMarkerSymbol(), // symbol
        { 'title': 'Some Title...', 'content': 'Some content...' }, // attributes
        new esri.InfoTemplate('${title}', '${content}')
      ));
    });
  }

The coordinates I used are geographic (lat, long) but they're converted to Web Mercator (the coordinate system you're using) using the geographicToWebMercator function so that they'll display properly on the map. Since you're also using a custom extent when your map is created, you will probably need to zoom out to see the graphic that is added to the map (the graphic is placed somewhere in the middle of the country, I chose longitude -100 and latitude 40 for convenience).

'onLoad' refers to an event fired by the map, so, yes, it's a function built into the API. The code above listens for this event and then adds a graphic when the map is ready.

JustinChamberlain-Dupree · ‎05-24-2011

My sincerest thanks! That helped immensely. Now I can work on creating a custom graphic and trying to dynamically read in values from another data source.

You are truly a credit to the development community.

Thanks again.

derekswingley1 · ‎05-24-2011

You're too kind :).

PattyRueger · ‎08-10-2012

Greetings,
It has been awhile since I have done any work with the java script API.....

I would like to automagically display a lat / long on a map that is part of web page. When the user clicks on a transaction record, I can fire off a url (to my html file), and package with the url, the Lat / Long to display.... in other words, I think I am passing the lat long as a parameter in the initial url request.

I understand the code you have generously provided above, but that had the lat long hard coded in. I want them to be a parameter.... any ideas? I don't think this is a big deal, right?

Thanks again,
Patty Rueger