html
<!-- item 1 -->
<button id="ButtonNodeAddMark_8" value="8" data-dojo-type="dijit/form/Button" class="btnClass lista_choferes">Add Mark 8</button>
<input type="hidden" id="cho_nombre_8" value="chofer con depo 1" />
<input type="hidden" id="cho_email_8" value="dcdc@wjwj" />
<input type="hidden" id="cho_telefono_8" value="dcdc" />
<input type="hidden" id="cho_direccion_8" value="Depos nº 1" />
<input type="hidden" id="cho_y_8" value="-58.45888624899965" />
<input type="hidden" id="cho_x_8" value="-34.569560161999625" />
<!-- item 2 -->
<button id="ButtonNodeAddMark_10" value="10" data-dojo-type="dijit/form/Button" class="btnClass lista_choferes">Add Mark 10</button>
<input type="hidden" id="cho_nombre_10" value="chofer con depo 2" />
<input type="hidden" id="cho_email_10" value="dcdc@wjwj2" />
<input type="hidden" id="cho_telefono_10" value="dcdc2" />
<input type="hidden" id="cho_direccion_10" value="Depos n2" />
<input type="hidden" id="cho_y_10" value="-58.45888624899965 2" />
<input type="hidden" id="cho_x_10" value="-34.569560161999625 2" />
<script src="https://js.arcgis.com/3.16/"></script>
<script>
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>
