Community
Select to view content in your preferred language

set PictureMarkerSymbol to map

5517
10
Jump to solution
04-13-2016 11:47 PM
CloudingSoft
by
Regular Contributor
‎04-13-2016 11:47 PM

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

Tags (1)
0 Kudos
10 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎04-17-2016 01:26 PM

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