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:
<link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css">
<style>
#info {
top: 20px;
color: #444;
height: auto;
font-family: arial;
right: 20px;
margin: 5px;
padding: 10px;
position: absolute;
width: 115px;
z-index: 40;
border: solid 2px #666;
border-radius: 4px;
background-color: #fff;
}
html, body, #mapDiv {
padding:0;
margin:0;
height:100%;
}
button {
display: block;
}
</style>
<script src="https://js.arcgis.com/3.28/"></script>
<script>
var map, tb;
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>
