topic Re: Using PictureMarkerSymbol instead of SimpleMarkerSymbol in ArcGIS Server with JavaScript API Questions

Using PictureMarkerSymbol instead of SimpleMarkerSymbol

BrianRoscher — Tue, 30 Apr 2019 19:58:29 GMT

I built a simple program that let's the user type in the latitude and longitude in user fields and then click a button and it puts a marker on that point in the map. I want to be able to use picture files (like png or jpg files) instead of a symbol. When I try to replace the markerSymbol in my code with a PictureMarkerSymbol, it does not work.

Using the below code, you will need to scroll the rendered program in your browser down in order to see the latitude and longitude fields below the map. Simply click either button and it will place the marker on the map.

Any ideas?

Here is the code:

require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol",
"esri/graphic",
"esri/geometry/Point",
"esri/Color",
"dojo/dom",
"dojo/on",
"dojo/domReady!",
"esri/symbols/PictureMarkerSymbol"
],
function(Map, Draw, SimpleMarkerSymbol, Graphic, Point, Color, dom, on, PictureMarkerSymbol) {
map = new Map("mapDiv", {
basemap: "streets",
center: [-81.122685, 33.941193],
zoom: 15
});
map.on("load", initToolbar);

function initToolbar() {
tb = new Draw(map);

on(dom.byId("GoGo"), "click", function() {
addGraphic();
});
}

function addGraphic() {
var point = new Point
({
longitude: document.getElementById("lon").value,
latitude: document.getElementById("lat").value
});

// markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples

var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));

map.enableMapNavigation();
map.graphics.add(new Graphic(point, markerSymbol));
}

});
</script>
</head>

<body>
<div id="mapDiv"></div>
<input type=text name=lat id=lat value=33.941193>
<input type=text name=lon id=lon value=-81.122685>
<input type=button value=Go! id=GoGo> <input type=button value=Go2! onclick=document.getElementById("GoGo").click();>
</body>
</html>

Re: Using PictureMarkerSymbol instead of SimpleMarkerSymbol

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:01:53 GMT

Brian,

Your require oder is off. dojo/domReady! should always be last in your require array.

<script>
  var map, tb;

  require([
    "esri/map", "esri/toolbars/draw",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/graphic", 
    "esri/geometry/Point",
    "esri/Color", 
    "dojo/dom", 
    "dojo/on",
    "esri/symbols/PictureMarkerSymbol",
    "dojo/domReady!"

  ], 
  function(Map, Draw, SimpleMarkerSymbol, Graphic, Point, Color, dom, on, 
    PictureMarkerSymbol) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Using PictureMarkerSymbol instead of SimpleMarkerSymbol

BrianRoscher — Wed, 01 May 2019 12:32:31 GMT

Hi Robert,

Thanks for your reply and for teaching me that. It works now... I moved the PictureMarkerSymbol around and I also replaced:

With this instead:

var markerSymbol = new PictureMarkerSymbol();
markerSymbol.setUrl("https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png");
markerSymbol.setHeight(64);
markerSymbol.setWidth(64);

Worked like a charm!

Thank you!

Re: Using PictureMarkerSymbol instead of SimpleMarkerSymbol

RobertScheitlin__GISP — Wed, 01 May 2019 12:42:52 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.