Hello
I have multiple x and y coordinates, how I do to display in a map using PictureMarkerSymbol
applying this example:http://developers.arcgis.com/javascript/samples/playground/main.html#/config=symbols/PictureMarkerSy...
He does not tell me how to put the images on the map
Thank you
Solved! Go to Solution.
Fabien,
I hate using a additional library when dojo is already there for your use because of the JS API is using it. Here is your code shown in the way I would do it (still not really knowing your desired workflow) using dojo (just use a drop down select and one button):
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Select with feature layer</title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } #HomeButton { position: absolute; top: 95px; left: 20px; z-index: 50; } .tools{ position: absolute; top: 95px; right: 20px; z-index: 50; border: 1px solid black; background-color: gray; width: 190px; height: 30px; padding: 12px; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> var map, choferes; require([ "esri/map", "esri/dijit/HomeButton", "esri/symbols/PictureMarkerSymbol", "esri/geometry/webMercatorUtils", "dojo/on", "esri/graphic", "esri/InfoTemplate", "esri/geometry/Point", "esri/SpatialReference", "dojo/dom", "dijit/registry", "dojo/parser", "dijit/form/Select" ], function(Map, HomeButton, PictureMarkerSymbol, webMercatorUtils, on, Graphic, InfoTemplate, Point, SpatialReference, dom, registry, parser) { parser.parse(); map = new Map("mapDiv", { center: [-58.791635351999616, -34.60544583699959], // lon, lat OK CENTER MAP zoom: 6, basemap: "gray" }); //Here is how I would make a list of my values to use later choferes = [ { nombre: "chofer con depo 1", email: "dcdc@wjwj", telefono: "dcdc", direccion: "Depos nº 1", x: -34.569560161999625, y: -58.45888624899965, color: "Blue" }, { nombre: "chofer con depo 2", email: "dcdc2@wjwj", telefono: "dcdc2", direccion: "Depos nº 2", x: -34.569560161999725, y: -58.45888624899965, color: "Red" }, { nombre: "chofer con depo 3", email: "dcdc3@wjwj", telefono: "dcdc3", direccion: "Depos nº 3", x: -34.569560161999825, y: -58.45888624899965, color: "Green" }, { nombre: "chofer con depo 4", email: "dcdc4@wjwj", telefono: "dcdc4", direccion: "Depos nº 4", x: -34.569560161999925, y: -58.45888624199965, color: "Yellow" }, { nombre: "chofer con depo 5", email: "dcdc5@wjwj", telefono: "dcdc5", direccion: "Depos nº 5", x: -34.569560161999625, y: -58.45888624399865, color: "Red" }, { nombre: "chofer con depo 6", email: "dcdc6@wjwj", telefono: "dcdc6", direccion: "Depos nº 6", x: -34.569560161999625, y: -58.45888624399765, color: "Purple" }, { nombre: "chofer con depo 7", email: "dcdc7@wjwj", telefono: "dcdc7", direccion: "Depos nº 7", x: -34.569560161999625, y: -58.45888624499665, color: "Orange" }, { nombre: "chofer con depo 8", email: "dcdc8@wjwj", telefono: "dcdc8", direccion: "Depos nº 8", x: -34.569560161999625, y: -58.45888624599565, color: "Red" }, { nombre: "chofer con depo 9", email: "dcdc9@wjwj", telefono: "dcdc9", direccion: "Depos nº 9", x: -34.569560161999625, y: -58.45888624699465, color: "Black" }, { nombre: "chofer con depo 10", email: "dcdc10@wjwj", telefono: "dcdc10", direccion: "Depos nº 10", x: -34.569560161999625, y: -58.45888624799365, color: "Blue" } ]; var home = new HomeButton({ map: map }, "HomeButton"); home.startup(); on(map, 'load', function(map) { var mapPnt = new Point(-58.791635351999616, -34.60544583699959, new SpatialReference({wkid:4326})); nodalas(webMercatorUtils.geographicToWebMercator(mapPnt)); }); function nodalas(pnt) { var rigaSymbol = new PictureMarkerSymbol("http://raimondsverpejs.lv/images/2015/06/lgia_riga.png", 39, 40); var lgiaTemplate = new InfoTemplate("${Name}", "<i><font color='grey'>Adrese:</font></i> ${Adrese}<br /><i><font color='grey'>Kontakti:</font></i> ${Kontakti}<br /><i><font color='grey'>Klientu pieņemšanas laiki:</font></i> ${Darbs}"); var nodala1 = new Graphic( pnt, rigaSymbol, { "Name": "Parada 1", "Adrese": "<br/><b>Uriarte 100</b>", "Kontakti": "<br/><b>Tel.: 28655590, <br/>Fakss: 29370505, <br/>Mob.tel.: 26458270</b>", "Darbs": "<br/><b>HOrarios: 9.00 - 16.00</b>" }, lgiaTemplate); map.graphics.add(nodala1); map.infoWindow.resize(270, 350); } on(dom.byId('ButtonNodeAddMark'), "click", function(){ var selected = registry.byId('choferSelect').get('value'); addDinamicMark(choferes[selected - 1]); }); function addDinamicMark(selChoferes) { var mapPnt = new Point(selChoferes.y, selChoferes.x, new SpatialReference({wkid:4326})); _width = _height = 50; setMark(webMercatorUtils.geographicToWebMercator(mapPnt), selChoferes.nombre, selChoferes.direccion, selChoferes.telefono, selChoferes.color, _width, _height); } function setMark(pnt, nombre, direccion, telefono, color, _width, _height) { var Symbol = new PictureMarkerSymbol("https://static.arcgis.com/images/Symbols/Shapes/" + color + "Pin1LargeB.png", _width, _height); var Template = new InfoTemplate("${Nombre}", "<i><font color='grey'>Dirección:</font></i> ${Direccion}<br />" + "<i><font color='grey'>Telefono:</font></i> ${Contacto}<br />"); var mark = new Graphic( pnt, Symbol, { "Nombre": nombre, "Direccion": "<br/>" + direccion, "Contacto": "<br/>" + telefono }, Template); map.graphics.add(mark); map.infoWindow.resize(270, 350); } }); </script> </head> <body class="tundra"> <div class="tools"> <select id="choferSelect" data-dojo-type="dijit/form/Select"> <option value="1">chofer 1</option> <option value="2">chofer 2</option> <option value="3">chofer 3</option> <option value="4" selected="selected">chofer 4</option> <option value="5">chofer 5</option> <option value="6">chofer 6</option> <option value="7">chofer 7</option> <option value="8">chofer 8</option> <option value="9">chofer 9</option> <option value="10">chofer 10</option> </select> <button id="ButtonNodeAddMark" data-dojo-type="dijit/form/Button" class="btnClass lista_choferes">Add Mark</button> </div> <div id="mapDiv"> <div id="HomeButton"></div> </div> </body> </html>
choferes