nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

set PictureMarkerSymbol to map

CloudingSoft

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/PictureMarkerSymbol.json

He does not tell me how to put the images on the map

Thank you

Find more posts tagged with

Accepted answers

CloudingSoft

good in the end I solved it with jQuery, I could not understand it well with dojo.

also thanks to your help I could add dynamic points to my map.

the solution with jquery:

var chks = $('.choferes');

for (var i = 0; i < chks.length; i++) {

idButtonDojo = chks[i].value;

var newButton = 'ButtonNodeAddMark_'+idButtonDojo;

$( "#"+newButton ).on( "click", {

y : $('#cho_y_'+idButtonDojo).attr("value"),

x : $('#cho_x_'+idButtonDojo).attr("value"),

nombre : $('#cho_nombre_'+idButtonDojo).attr("value"),

direccion : $('#cho_direccion_'+idButtonDojo).attr("value"),

telefono : $('#cho_telefono_'+idButtonDojo).attr("value"),

color : "Blue"

}, addDinamicMark );

All comments

RobertScheitlin__GISP

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&ordm; 1",
                    x: -34.569560161999625,
                    y: -58.45888624899965,
                    color: "Blue"
                  }, {
                    nombre: "chofer con depo 2",
                    email: "dcdc2@wjwj",
                    telefono: "dcdc2",
                    direccion: "Depos n&ordm; 2",
                    x: -34.569560161999725,
                    y: -58.45888624899965,
                    color: "Red"
                  }, {
                    nombre: "chofer con depo 3",
                    email: "dcdc3@wjwj",
                    telefono: "dcdc3",
                    direccion: "Depos n&ordm; 3",
                    x: -34.569560161999825,
                    y: -58.45888624899965,
                    color: "Green"
                  }, {
                    nombre: "chofer con depo 4",
                    email: "dcdc4@wjwj",
                    telefono: "dcdc4",
                    direccion: "Depos n&ordm; 4",
                    x: -34.569560161999925,
                    y: -58.45888624199965,
                    color: "Yellow"
                  }, {
                    nombre: "chofer con depo 5",
                    email: "dcdc5@wjwj",
                    telefono: "dcdc5",
                    direccion: "Depos n&ordm; 5",
                    x: -34.569560161999625,
                    y: -58.45888624399865,
                    color: "Red"
                  }, {
                    nombre: "chofer con depo 6",
                    email: "dcdc6@wjwj",
                    telefono: "dcdc6",
                    direccion: "Depos n&ordm; 6",
                    x: -34.569560161999625,
                    y: -58.45888624399765,
                    color: "Purple"
                  }, {
                    nombre: "chofer con depo 7",
                    email: "dcdc7@wjwj",
                    telefono: "dcdc7",
                    direccion: "Depos n&ordm; 7",
                    x: -34.569560161999625,
                    y: -58.45888624499665,
                    color: "Orange"
                  }, {
                    nombre: "chofer con depo 8",
                    email: "dcdc8@wjwj",
                    telefono: "dcdc8",
                    direccion: "Depos n&ordm; 8",
                    x: -34.569560161999625,
                    y: -58.45888624599565,
                    color: "Red"
                  }, {
                    nombre: "chofer con depo 9",
                    email: "dcdc9@wjwj",
                    telefono: "dcdc9",
                    direccion: "Depos n&ordm; 9",
                    x: -34.569560161999625,
                    y: -58.45888624699465,
                    color: "Black"
                  }, {
                    nombre: "chofer con depo 10",
                    email: "dcdc10@wjwj",
                    telefono: "dcdc10",
                    direccion: "Depos n&ordm; 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

CloudingSoft

good in the end I solved it with jQuery, I could not understand it well with dojo.

also thanks to your help I could add dynamic points to my map.

the solution with jquery:

var chks = $('.choferes');

for (var i = 0; i < chks.length; i++) {

idButtonDojo = chks[i].value;

var newButton = 'ButtonNodeAddMark_'+idButtonDojo;

$( "#"+newButton ).on( "click", {

y : $('#cho_y_'+idButtonDojo).attr("value"),

x : $('#cho_x_'+idButtonDojo).attr("value"),

nombre : $('#cho_nombre_'+idButtonDojo).attr("value"),

direccion : $('#cho_direccion_'+idButtonDojo).attr("value"),

telefono : $('#cho_telefono_'+idButtonDojo).attr("value"),

color : "Blue"

}, addDinamicMark );

CloudingSoft

add checkbox 'choferes':

CloudingSoft

html

<button id="ButtonNodeAddMark_8" value="8" data-dojo-type="dijit/form/Button" class="btnClass lista_choferes">Add Mark 8</button>

require([

"esri/map",

"esri/dijit/HomeButton",

"esri/symbols/PictureMarkerSymbol",

"esri/geometry/webMercatorUtils",

"dojo/on",

"dijit/registry",

"dojo/parser",

"esri/graphic",

"esri/InfoTemplate",

"esri/geometry/Point",

"esri/SpatialReference"
],

function(Map, HomeButton, PictureMarkerSymbol, webMercatorUtils, on,registry,parser, Graphic, InfoTemplate, Point, SpatialReference) {

parser.parse();

var map = new Map("map_camino", {

center: [-58.791635351999616, -34.60544583699959], // lon, lat OK CENTER MAP
zoom: 6,

basemap: "gray"
});

var chks = $('.choferes');

for (var i = 0; i < chks.length; i++) {

idButtonDojo = chks[i].value;

var newButton = 'ButtonNodeAddMark_'+idButtonDojo;

on(registry.byId(newButton),

"click",

function(){

var y = $('#cho_y_'+idButtonDojo).attr("value");

var x = $('#cho_x_'+idButtonDojo).attr("value");

var nombre = $('#cho_nombre_'+idButtonDojo).attr("value");

var direccion = $('#cho_direccion_'+idButtonDojo).attr("value");

var telefono = $('#cho_telefono_'+idButtonDojo).attr("value");

var color = "Blue";

addDinamicMark(y, x, nombre, direccion, telefono, color,newButton);

}

);

}

function addDinamicMark(y,x,nombre,direccion,telefono,color,newButton) {

console.log(y);

console.log(x);

console.log(nombre);

console.log(direccion);

console.log(telefono);

console.log(color);

console.log(newButton);

var mapPnt = new Point(y,x, new SpatialReference({wkid:4326}));

_width=_height=50;

setMark(webMercatorUtils.geographicToWebMercator(mapPnt),nombre,direccion,telefono,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 />\n\
<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>

RobertScheitlin__GISP

Fabien,

Maybe show what your code looks like now as I am not understanding your workflow at all.

CloudingSoft

ok, but always takes the latest data.

if I have the id buttons: ButtonNodeAddMark_8 and ButtonNodeAddMark_10

when I click the button ButtonNodeAddMark_8 ButtonNodeAddMark_10 data shows.

example:

click shows

-65.29711873399964

-24.19455872499958

depo co driver 2

Depos No. 2

Blue

ButtonNodeAddMark_10

should show

Blue

ButtonNodeAddMark_8

code:

var chks = $('.choferes');

for (var i = 0; i < chks.length; i++) {

idButtonDojo = chks.value; //first get id=8 and last get id=10

var newButton = 'ButtonNodeAddMark_'+idButtonDojo;

on(registry.byId(newButton),

"click",

function(){

var y = $('#cho_y_'+idButtonDojo).attr("value");

var x = $('#cho_x_'+idButtonDojo).attr("value");

var nombre = $('#cho_nombre_'+idButtonDojo).attr("value");

var direccion = $('#cho_direccion_'+idButtonDojo).attr("value");

var telefono = $('#cho_telefono_'+idButtonDojo).attr("value");

var color = "Blue";

addDinamicMark(y, x, nombre, direccion, telefono, color,newButton);

}

);

}

RobertScheitlin__GISP

Fabien,

Where is the "y,x,nombre,direccion,telefono,color" data coming from, form elements or what?

If they are coming from a form then something like this:

on(registry.byId('DINAMIC_ButtonNodeAddMark'), "click", function(){
    var y = registry.byId('yTB').get("value"),
    x = registry.byId('xTB').get("value"),
    nombre = registry.byId('nombreTB').get("value"),
    direccion = registry.byId('direccionTB').get("value"),
    telefono = registry.byId('telefonoTB').get("value"),
    color = registry.byId('colorTB').get("value");
    addDinamicMark(y, x, nombre, direccion, telefono, color)
});

CloudingSoft

excelent!

now, how add parameter's to method addDinamicMark???

function addDinamicMark(y,x,nombre,direccion,telefono,color) {
                    var mapPnt = new Point(y,x, new SpatialReference({wkid:4326}));  
                    _width=_height=50;
                    setMark(webMercatorUtils.geographicToWebMercator(mapPnt),nombre,direccion,telefono,color,_width,_height);  
                }
                /*
                 * how add parameter's????
                 */
                on(registry.byId('DINAMIC_ButtonNodeAddMark'), "click", addDinamicMark);
                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 />\n\
                                                                     <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);  
                }

addDinamicMark

RobertScheitlin__GISP

Fabien,

Here is your code working with out mixing Legacy and AMD style coding.

Legacy style will be unsupported in the JS API 4.0 so you should not code using legacy anymore.

The abc’s of AMD | ArcGIS Blog

<!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%;
        }

        #messages {
            background-color: #fff;
            box-shadow: 0 0 5px #888;
            font-size: 1.1em;
            max-width: 15em;
            padding: 0.5em;
            position: absolute;
            right: 20px;
            top: 20px;
            z-index: 40;
        }

        #HomeButton {
            position: absolute;
            top: 95px;
            left: 20px;
            z-index: 50;
        }
        </style>
    <script src="http://js.arcgis.com/3.16/"></script>
    <script>
        require([
                "esri/map",
                "esri/dijit/HomeButton",
                "esri/symbols/PictureMarkerSymbol",
                "esri/geometry/webMercatorUtils",
                "dojo/on",
                "esri/graphic",
                "esri/InfoTemplate",
                "esri/geometry/Point",
                "esri/SpatialReference"
            ],
            function(Map, HomeButton, PictureMarkerSymbol, webMercatorUtils, on, Graphic, InfoTemplate, Point, SpatialReference) {

                var map = new Map("mapDiv", {
                    center: [-58.791635351999616, -34.60544583699959], // lon, lat  OK CENTER MAP
                    zoom: 6,
                    basemap: "gray"
                });

                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);
                }
            });
    </script>
</head>

<body class="tundra">
    <span id="messages">Click on the map to select census block points within 1 mile.</span>
    <div id="mapDiv"><div id="HomeButton"></div>
    </div>
</body>

</html>

CloudingSoft

I could do so but does not show me the image on the map

I am minding X and Y

<!DOCTYPE html>

<html>

<head>

<title>Select with feature layer</title>

<style>

html, body, #mapDiv {

padding: 0;

margin: 0;

height: 100%;

}

#messages{

background-color: #fff;

box-shadow: 0 0 5px #888;

font-size: 1.1em;

max-width: 15em;

padding: 0.5em;

position: absolute;

right: 20px;

top: 20px;

z-index: 40;

}

</style>

require([

"esri/map",

"esri/dijit/HomeButton",

"esri/symbols/PictureMarkerSymbol",

"esri/geometry/webMercatorUtils"],

function (Map, HomeButton, PictureMarkerSymbol,webMercatorUtils) {

var map = new Map("mapDiv", {

center: [-58.791635351999616,-34.60544583699959], // lon, lat OK CENTER MAP

zoom: 6,

basemap: "gray"});

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

dojo.connect(map, 'onLoad', function (map) {

lngLatToXY = webMercatorUtils.lngLatToXY(-58.791635351999616,-34.60544583699959);

//NO DRAW SYMBOL

nodalas(parseFloat(lngLatToXY[0]),parseFloat(lngLatToXY[1]));

});

function nodalas(x,y) {

var rigaSymbol = new esri.symbol.PictureMarkerSymbol("http://raimondsverpejs.lv/images/2015/06/lgia_riga.png", 39, 40);

var lgiaTemplate = new esri.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 esri.Graphic({"geometry": {"x": x, "y": y, "spatialReference": {"wkid": 4326}}, "attributes": {

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

nodala1.setSymbol(rigaSymbol);

nodala1.setInfoTemplate(lgiaTemplate);

map.graphics.add(nodala1);

map.infoWindow.resize(270, 350);

}

});

</script>

</head>

<body>

<span id="messages">Click on the map to select census block points within 1 mile.</span>

</body>

</html>

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.