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.
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 );
I could do so but does not show me the image on the map
I am minding X and Y
<!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="https://js.arcgis.com/3.16/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" href="https://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;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
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>
<div id="mapDiv"></div>
</body>
</html>
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>
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
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) });
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
<Other data>
<Other data>
<Other data>
<Other data>
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);
}
);
}
Fabien,
Maybe show what your code looks like now as I am not understanding your workflow at all.
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>
add checkbox 'choferes':
<input type="checkbox" name="chofer[]" class="choferes" id="chofer_8" value="8" attr_nombre="chofer 8" />
<input type="checkbox" name="chofer[]" class="choferes" id="chofer_10" value="10" attr_nombre="chofer 10" />
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 );