Geek Answers Handbook

A simple example of ArcGIS dynamically displaying a marker

It's hard for me to try adding a simple clickable marker to ArcGIS using pure JavaScript. All ArcGIS Samples seem to get their token and related pop-up information from the server. How can I achieve the same result using ArcGIS, like this Google Maps code example 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>
+8
javascript google-maps arcgis
source share
2 answers

Try the following:

  • Create a Point for Longitude and Latitude
  • Convert point to spatial reference of the web Mercator, if necessary
  • Create a PictureMarkerSymbol for a custom image marker
  • Create Graphic using the dot and symbol.
  • Create GraphicsLayer
  • Add Graphics to Graphics Layer
  • Add a graphics layer to the map.
  • Add a custom onClick event listener to your layer

Some equivalent codes:

 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);

In the event listener, you can open a custom infoWindow or whatever:

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

Change "marker.png" and 32x32 to use custom images and marker sizes.

+10
source share

Try placing the image icon anywhere on the XY screen using CSS positioning, and then just put the onClick handler in the actual DIV or IMG tag. Try playing with a combination of relative versus absolute to get it on track.

 div#header { position: relative; } img#headimg { position: absolute; left: whatever you like top: whatever you like }
-3
source share

More articles:


All Articles