Hi guys,
if i have a php webservice that give me a file json whit this structue:
[{"X":"10.7405452193923","Y":"43.3355923867557"},{"X":"10.7407217984989","Y":"43.3355340533791"},{"X":"10.7408835994563","Y":"43.335480896985"},{"X":"10.7410306223461","Y":"43.3354329176355"},{"X":"10.7411627465152","Y":"43.335390207266"},{"X":"10.7412803393565","Y":"43.3353526702927"},{"X":"10.741383031029","Y":"43.3353203123922"},{"X":"10.7414709448831","Y":"43.3352931317262"},{"X":"10.7415440835355","Y":"43.3352712183308"},{"X":"10.7416789455504","Y":"43.3352336880827"},{"X":"10.7418206609345","Y":"43.3351985744555"},{"X":"10.7419689856675","Y":"43.3351659711827"},{"X":"10.7421240404811","Y":"43.3351357863575"},{"X":"10.7422820134068","Y":"43.3351084381952"},{"X":"10.7424395779608","Y":"43.3350840674097"},{"X":"10.74259636942","Y":"43.3350628596433"},{"X":"10.7427527525556","Y":"43.3350446292572"}]
it's possible to call this php web service and renderer the json into webapp javacript?
There is any exmple?
Thanks
Solved! Go to Solution.
Francesco,
Just change the esriRequest url to yours and this should work:
<!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>PHP WebService Smaple</title> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"> <style> html, body, #map { height:100%; width:100%; margin:0; padding:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } .esriSimpleSliderHomeButton { border-bottom: 2px solid #666666; background-image: url(images/home.png); background-repeat: no-repeat; background-position: center; cursor: pointer; } .esriSimpleSliderHomeButton:hover { background-color: rgb(238, 238, 238); background-color: rgba(238, 238, 238, 0.9); } </style> <script src="//js.arcgis.com/3.13/"></script> <script> var map; require([ "esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "esri/request", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, Point, SimpleMarkerSymbol, Grahpic, GraphicsLayer, esriRequest, parser ) { parser.parse(); map = new Map("map", { basemap: "streets", center: [10.740, 43.335], slider: true, zoom: 16 }); dojo.connect(map,"onLoad",function(){ var initExtent = map.extent; dojo.create("div",{ className: "esriSimpleSliderHomeButton", title: 'Zoom to Full Extent', onclick: function(){ map.setExtent(initExtent); } },dojo.query(".esriSimpleSliderIncrementButton")[0], "after"); }); var gl = new GraphicsLayer({ id: "Sites" }); map.addLayer(gl); var locsRequest = esriRequest({ url: "francisco.json", /*change this*/ handleAs: "json" }); var graphic; locsRequest.then( function(response) { var j = 0; for (var i = 0; i < response.length; i++) { j++; if (j >=9) {j = 1}; graphic = new Grahpic(new Point(response.X,response.Y), new SimpleMarkerSymbol()); var siteid = 'site' + i; gl.add(graphic); } }, function(error) { console.log("Error: ", error.message); }); }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:false" style="width:100%;height:100%;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> </div> </div> </body> </html>
Francesco,
Just change the esriRequest url to yours and this should work:
<!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>PHP WebService Smaple</title> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"> <style> html, body, #map { height:100%; width:100%; margin:0; padding:0; } body { background-color:#FFF; overflow:hidden; font-family:"Trebuchet MS"; } .esriSimpleSliderHomeButton { border-bottom: 2px solid #666666; background-image: url(images/home.png); background-repeat: no-repeat; background-position: center; cursor: pointer; } .esriSimpleSliderHomeButton:hover { background-color: rgb(238, 238, 238); background-color: rgba(238, 238, 238, 0.9); } </style> <script src="//js.arcgis.com/3.13/"></script> <script> var map; require([ "esri/map", "esri/geometry/Point", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/layers/GraphicsLayer", "esri/request", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function( Map, Point, SimpleMarkerSymbol, Grahpic, GraphicsLayer, esriRequest, parser ) { parser.parse(); map = new Map("map", { basemap: "streets", center: [10.740, 43.335], slider: true, zoom: 16 }); dojo.connect(map,"onLoad",function(){ var initExtent = map.extent; dojo.create("div",{ className: "esriSimpleSliderHomeButton", title: 'Zoom to Full Extent', onclick: function(){ map.setExtent(initExtent); } },dojo.query(".esriSimpleSliderIncrementButton")[0], "after"); }); var gl = new GraphicsLayer({ id: "Sites" }); map.addLayer(gl); var locsRequest = esriRequest({ url: "francisco.json", /*change this*/ handleAs: "json" }); var graphic; locsRequest.then( function(response) { var j = 0; for (var i = 0; i < response.length; i++) { j++; if (j >=9) {j = 1}; graphic = new Grahpic(new Point(response.X,response.Y), new SimpleMarkerSymbol()); var siteid = 'site' + i; gl.add(graphic); } }, function(error) { console.log("Error: ", error.message); }); }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:false" style="width:100%;height:100%;"> <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"> </div> </div> </body> </html>
Thanks Robert.
Glad to help.
Don't forget to mark this thread as answered. To do this you have to open the thread (you can not see the correct answer link from inside your inbox) and then you will see the green star with correct answer link. Just click that link on the thread that answered your question.