ArcGIS simple example dynamically rendering a marker

Question

I am having a hard time trying to add a simple clickable marker to an ArcGIS, map purely using JavaScript. All of the ArcGIS Samples seem to get their marker and related popup information from the server. How can I achieve the same result with ArcGIS as this Google Maps sample code below?

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map" style="width: 500px; height: 500px;"></div>
<script type="text/javascript">
    window.onload = function() {
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(40, -75),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map"), myOptions);

        var icon = new google.maps.MarkerImage("http://cinnamonthoughts.org/wp-content/uploads/2010/01/Custom-Marker-Avatar.png");

        var markerOptions = {
            icon: icon,
            map: map,
            position: new google.maps.LatLng(37.7699298, -122.4469157),
        };

        var marker = new google.maps.Marker(markerOptions);

        google.maps.event.addListener(marker, 'click', function() {
            var infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent("hello world");
            infoWindow.open(map, marker);
        });
    };
</script>

Seems to work fine for me: http://jsfiddle.net/j08691/DLAsJ/. Do I get the bounty ;) — j08691, Mar 14 '12 at 19:07
@j08691 you put my code in jsfiddle... you did not use ArcGIS, as my question asked. — Langdon, Mar 15 '12 at 03:00

Juan Mellado · Accepted Answer · 2012-03-15T17:01:45.053

Try this:

Create a Point for you longitude and latitude
Convert the point to Web Mercator spatial reference, if it's necessary
Create a PictureMarkerSymbol for you custom picture marker
Create a Graphic using the point and the symbol
Create a GraphicsLayer
Add the graphic to the graphic layer
Add the graphic layer to your map
Add a custom onClick event listener to your layer

Some equivalent code:

var point = new esri.geometry.Point(longitude, latitude);
point = esri.geometry.geographicToWebMercator(point);
var symbol = new esri.symbol.PictureMarkerSymbol("marker.png", 32, 32);
var graphic = new esri.Graphic(point, symbol);
var layer = new esri.layers.GraphicsLayer();
layer.add(graphic);
map.addLayer(layer);
dojo.connect(layer, "onClick", onClick);

On the event listener you can open a custom infoWindow or whatever you like:

function onClick(event) {
    map.infoWindow(...)
...

Change "marker.png" and 32x32 to use your custom marker image and dimensions.

Thanks! Having some trouble with esri.geometry.Point. It doesn't appear to take my latitude/longitude and will always put the marker at lat:0, and long:0. Example here: http://jsfiddle.net/v8EEy/ — Langdon, Mar 15 '12 at 15:50
@Langdon Your map is using the Web Mercator spatial reference. Use `esri.geometry.geographicToWebMercator` to convert your (longitude, latitude). I have updated the answer. — Juan Mellado, Mar 15 '12 at 17:05

score -3 · Answer 2 · answered Mar 14 '12 at 18:39

-3

Try placing your image icon anywhere on the screen X Y using the CSS positioning then just put your onClick handler inside the actual DIV or IMG tag. Try playing with combination relative vs. absolute to get it just right.

div#header {
position: relative;
}

img#headimg {
position: absolute;
left: whatever you like
top: whatever you like
}

answered Mar 14 '12 at 18:39

Josh P

1,325
14
12

I'm not sure you understood my question. I have a lat/long, and I need to place an icon on an ArcGIS map dynamically with JavaScript. – Langdon Mar 15 '12 at 03:01

ArcGIS simple example dynamically rendering a marker

2 Answers2