topic Re: set PictureMarkerSymbol to map in ArcGIS JavaScript Maps SDK Questions

set PictureMarkerSymbol to map

CloudingSoft — Thu, 14 Apr 2016 06:47:34 GMT

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

Re: set PictureMarkerSymbol to map

CloudingSoft — Thu, 14 Apr 2016 09:07:33 GMT

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>

Re: set PictureMarkerSymbol to map

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:15:46 GMT

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>

Re: set PictureMarkerSymbol to map

CloudingSoft — Sun, 12 Dec 2021 03:15:49 GMT

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

Re: set PictureMarkerSymbol to map

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:15:52 GMT

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

Re: set PictureMarkerSymbol to map

CloudingSoft — Sat, 16 Apr 2016 17:39:22 GMT

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

}

);

}

Re: set PictureMarkerSymbol to map

RobertScheitlin__GISP — Sat, 16 Apr 2016 23:36:12 GMT

Fabien,

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

Re: set PictureMarkerSymbol to map

CloudingSoft — Sun, 17 Apr 2016 03:05:11 GMT

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>

Re: set PictureMarkerSymbol to map

CloudingSoft — Sun, 17 Apr 2016 03:11:48 GMT

add checkbox 'choferes':

Re: set PictureMarkerSymbol to map

CloudingSoft — Sun, 17 Apr 2016 16:51:53 GMT

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

Re: set PictureMarkerSymbol to map

RobertScheitlin__GISP — Sun, 12 Dec 2021 03:15:55 GMT

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