Hello,
First, I apologize for this topic so long ... but I seriously need help.
I have an Oracle database that stores geographic data (x, y, address,...) and I need to integrate this data with ESRI map using JavaScript. ESRI documentation shows the following source code:
CODE FROM ESRI (https://developers.arcgis.com/en/javascript/jssamples/locator_address.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Find Address</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">;
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">'>http://js.arcgis.com/3.6/js/esri/css/esri.css">;
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
map{
padding:0;
border:solid 1px #343642;
margin:5px 5px 5px 0px;
}
#leftPane{
width:20%;
border-top: solid 1px #343642;
border-left: solid 1px #343642;
border-bottom: solid 1px #343642;
margin:5px 0px 5px 5px;
color: #343642;
font:100% Georgia,"Times New Roman",Times,serif;
/*letter-spacing: 0.05em;*/
}
</style>
<script src="http://js.arcgis.com/3.6/"></script>;
<script>
var map, locator;
require([
"esri/map", "esri/tasks/locator", "esri/graphic",
"esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/Font", "esri/symbols/TextSymbol",
"dojo/_base/array", "dojo/_base/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
"dijit/form/Button", "dijit/form/Textarea",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Locator, Graphic,
InfoTemplate, SimpleMarkerSymbol,
Font, TextSymbol,
arrayUtils, Color,
number, parser, dom, registry
) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-93.5, 41.431],
zoom: 5
});
locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"'>http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";);
locator.on("address-to-locations-complete", showResults);
// listen for button click then geocode
registry.byId("locate").on("click", locate);
map.infoWindow.resize(200,125);
function locate() {
map.graphics.clear();
var address = {
"SingleLine": dom.byId("address").value
};
locator.outSpatialReference = map.spatialReference;
var options = {
address: address,
outFields: ["Loc_name"]
}
locator.addressToLocations(options);
}
function showResults(evt) {
var candidate;
var symbol = new SimpleMarkerSymbol();
var infoTemplate = new InfoTemplate(
"Location",
"Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
);
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setColor(new Color([153,0,51,0.75]));
var geom;
arrayUtils.every(evt.addresses, function(candidate) {
console.log(candidate.score);
if (candidate.score > 80) {
console.log(candidate.location);
var attributes = {
address: candidate.address,
score: candidate.score,
locatorName: candidate.attributes.Loc_name
};
geom = candidate.location;
var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
//add a graphic to the map at the geocoded location
map.graphics.add(graphic);
//add a text symbol to the map listing the location of the matched address.
var displayText = candidate.address;
var font = new Font(
"16pt",
Font.STYLE_NORMAL,
Font.VARIANT_NORMAL,
Font.WEIGHT_BOLD,
"Helvetica"
);
var textSymbol = new TextSymbol(
displayText,
font,
new Color("#666633")
);
textSymbol.setOffset(0,8);
map.graphics.add(new Graphic(geom, textSymbol));
return false; //break out of loop after one candidate with score greater than 80 is found.
}
});
if ( geom !== undefined ) {
map.centerAndZoom(geom, 12);
}
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'sidebar', gutters:false"
style="width:100%; height:100%;">
<div id="leftPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'left'">
Enter an address then click the locate button to use a sample address locator to return the location for
street addresses in the United States.
<textarea type="text" id="address"/>380 New York St, Redlands</textArea>
<button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
</div>
</body>
</html>
I tried to put this code in the event of PHPRunner OnPageLoad but I'm not able to launch the event shows the map when I reach the data sheet by clicking on the "view" of the row that I choose.
CODE (PHPRUNNER):
function OnPageLoad(pageid) {
if (proxy.values['Direccion'] != '')
{
var map, locator;
require([
"esri/map", "esri/tasks/locator", "esri/graphic",
"esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/Font", "esri/symbols/TextSymbol",
"dojo/_base/array", "dojo/_base/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",
"dijit/form/Button", "dijit/form/Textarea",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Locator, Graphic,
InfoTemplate, SimpleMarkerSymbol,
Font, TextSymbol,
arrayUtils, Color,
number, parser, dom, registry
) {
parser.parse();
map = new Map("map", {
basemap: "streets",
center: [-93.5, 41.431],
zoom: 5
});
locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"'>http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer";);
locator.on("address-to-locations-complete", showResults);
// listen for button click then geocode
//--registry.byId("locate").on("click", locate);
//map.infoWindow.resize(200,125);
//function locate() {
//map.graphics.clear();
var address = {
"SingleLine": proxy.values['Direccion']
};
locator.outSpatialReference = map.spatialReference;
/var options = {
address: proxy.values['Direccion'],
outFields: ["Loc_name"]
}/
//locator.addressToLocations(options);
locator.addressToLocations(address);
//console.log("**"+options.address);
//}
function showResults(evt) {
var candidate, json;
var symbol = new SimpleMarkerSymbol();
var myaddress = "Address:" + proxy.values['Direccion'];
/var infoTemplate = new InfoTemplate(
"Location",
"Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
);/
var json = {title:"Attributes",content:myaddress};
console.log("----"+json.content);
infoTemplate = new esri.InfoTemplate(json);
symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setColor(new Color([153,0,51,0.75]));
var geom;
arrayUtils.every(evt.addresses, function(candidate) {
console.log(candidate.score);
if (candidate.score > 80) {
console.log(candidate.location);
var attributes = {
address: candidate.address,
score: candidate.score,
locatorName: candidate.attributes.Loc_name
};
geom = candidate.location;
var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
//add a graphic to the map at the geocoded location
map.graphics.add(graphic);
//add a text symbol to the map listing the location of the matched address.
var displayText = candidate.address;
var font = new Font(
"16pt",
Font.STYLE_NORMAL,
Font.VARIANT_NORMAL,
Font.WEIGHT_BOLD,
"Helvetica"
);
var textSymbol = new TextSymbol(
displayText,
font,
new Color("#666633")
);
textSymbol.setOffset(0,8);
map.graphics.add(new Graphic(geom, textSymbol));
return false; //break out of loop after one candidate with score greater than 80 is found.
}
});
if ( geom !== undefined ) {
map.centerAndZoom(geom, 12);
}
}
});
}
// Place event code here.
// Use "Add Action" button to add code snippets.
}[/font]
EVENT BEFORE DISPLAY...
//header('Access-Control-Allow-Origin: ');
$pageObject->setProxyValue("values", $pageObject->getCurrentRecord());
HTML (view page)
<!DOCTYPE html>
<HTML {$html_attrs}><HEAD><TITLE>{$pagetitle}</TITLE>
<META content=IE=7 http-equiv=X-UA-Compatible>
<META content="text/html; charset=Windows-1252" http-equiv=Content-Type><LINK rel=stylesheet type=text/css href="styles/default.css">{BEGIN rtlCSS}<LINK rel=stylesheet type=text/css href="styles/defaultRTL.css">{END rtlCSS}{BEGIN styleCSSFiles}<LINK rel=stylesheet type=text/css href="{$stylepath}">{END styleCSSFiles}{BEGIN pageCSSFiles}<LINK rel=stylesheet type=text/css href="{$pagestylepath}">{END pageCSSFiles}<!--[if IE]><LINK rel=stylesheet type=text/css href="styles/defaultIE.css">{BEGIN IEcssFiles}<LINK rel=stylesheet type=text/css href="{$stylepathIE}">{END IEcssFiles}<![endif]-->
<META name=GENERATOR content="MSHTML 8.00.7601.18210">
<META content="IE=7, IE=9, IE=10" http-equiv=X-UA-Compatible>
<META name=viewport content="initial-scale=1, maximum-scale=1,user-scalable=no">
<META content= http-equiv=Access-Control-Allow-Origin>
<META content=text/javascript http-equiv=content-script-type><LINK
rel=stylesheet href="http://js.arcgis.com/3.6/js/esri/css/esri.css">'>http://js.arcgis.com/3.6/js/esri/css/esri.css">;
<STYLE>
map {
height:300px;
width:400px;
margin:0;
padding:0;
}
</STYLE>
<script src="http://js.arcgis.com/3.6/"></SCRIPT>;
<script>
dojo.require("esri.map");
//dojo.require("esri.dijit.Geocoder");
</SCRIPT>
</HEAD>
<BODY class="{$stylename}" {$bodyattrs}>{BEGIN body}{$header}
<DIV id=map align=center></DIV>
<TABLE class=runner-toptable cellPadding=0>
<TBODY>
<TR class=runner-header>
<TD class=runner-top colSpan=3>
{BEGIN container_view}
<TABLE class="runner-c runner-c-view" cellPadding=0 align=center>
<TBODY>
<TR class="runner-toprow style2 header">
<TD class=runner-cl><IMG src="images/spacer.gif"></TD>
<TD class=runner-cc>
<DIV class="runner-b-viewheader {$brickclass_viewheader}">Table Esri
JS, Ver registro [ Codigo: {$show_key1}
]</DIV></TD>
<TD class=runner-cr><IMG src="images/spacer.gif"></TD></TR>
<TR class="runner-row style1 runner-b-wrapper {$wrapperclass_fields}">
<TD class=runner-cl></TD>
<TD class="runner-cc runner-brickcontents runner-wrapper">
{BEGIN container_fields}
<TABLE class="runner-c runner-c-fields" cellPadding=0>
<TBODY>
{BEGIN Codigo_fieldblock}<TR class="runner-toprow header style1 runner-b-viewfields">
<TD class=runner-cl><IMG src="images/spacer.gif"></TD>
<TD class="runner-cc runner-cc1">
<DIV
class="fieldlabel_Codigo {$fielddispclass_Codigo}"><B>Codigo</B>
</DIV></TD>
<TD class="runner-cc alt">
<DIV class="fieldvalue_Codigo {$fielddispclass_Codigo}">{$Codigo_value} </DIV></TD>
<TD class="runner-cr alt"><IMG src="images/spacer.gif"></TD></TR>
{END Codigo_fieldblock}{BEGIN Pais_fieldblock}<TR class="runner-row style1 runner-b-viewfields">
<TD class=runner-cl></TD>
<TD class="runner-cc runner-cc1">
<DIV
class="fieldlabel_Pais {$fielddispclass_Pais}"><B>Pais</B>
</DIV></TD>
<TD class="runner-cc alt">
<DIV class="fieldvalue_Pais {$fielddispclass_Pais}">{$Pais_value} </DIV></TD>
<TD class="runner-cr alt"></TD></TR>
{END Pais_fieldblock}{BEGIN Provincia_fieldblock}<TR class="runner-row style1 runner-b-viewfields">
<TD class=runner-cl></TD>
<TD class="runner-cc runner-cc1">
<DIV
class="fieldlabel_Provincia {$fielddispclass_Provincia}"><B>Provincia</B>
</DIV></TD>
<TD class="runner-cc alt">
<DIV
class="fieldvalue_Provincia {$fielddispclass_Provincia}">{$Provincia_value}
</DIV></TD>
<TD class="runner-cr alt"></TD></TR>
{END Provincia_fieldblock}{BEGIN Direccion_fieldblock}<TR class="runner-row style1 runner-b-viewfields">
<TD class=runner-cl></TD>
<TD class="runner-cc runner-cc1">
<DIV
class="fieldlabel_Direccion {$fielddispclass_Direccion}"><B>Direccion</B>
</DIV></TD>
<TD class="runner-cc alt">
<DIV
class="fieldvalue_Direccion {$fielddispclass_Direccion}">{$Direccion_value}
</DIV></TD>
<TD class="runner-cr alt"></TD></TR>
{END Direccion_fieldblock}{BEGIN Latitud_fieldblock}<TR class="runner-row style1 runner-b-viewfields">
<TD class=runner-cl></TD>
<TD class="runner-cc runner-cc1">
<DIV
class="fieldlabel_Latitud {$fielddispclass_Latitud}"><B>Latitud</B>
</DIV></TD>
<TD class="runner-cc alt">
<DIV
class="fieldvalue_Latitud {$fielddispclass_Latitud}">{$Latitud_value}
</DIV></TD>
<TD class="runner-cr alt"></TD></TR>
{END Latitud_fieldblock}{BEGIN Longitud_fieldblock}<TR class="runner-row style1 runner-b-viewfields">
<TD class=runner-cl></TD>
<TD class="runner-cc runner-cc1">
<DIV
class="fieldlabel_Longitud {$fielddispclass_Longitud}"><B>Longitud</B>
</DIV></TD>
<TD class="runner-cc alt">
<DIV
class="fieldvalue_Longitud {$fielddispclass_Longitud}">{$Longitud_value}
</DIV></TD>
<TD class="runner-cr alt"></TD></TR>
{END Longitud_fieldblock}<TR
class="runner-row style2 runner-b-viewbuttons {$brickclass_viewbuttons}">
<TD class=runner-cl></TD>
<TD class="runner-cc runner-brickcontents" colSpan=2>
{BEGIN prev_button}<SPAN class=runner-btnframe><SPAN class=runner-btnleft></SPAN><SPAN class=runner-btnright></SPAN><A class=runner-button href="#" {$prevbutton_attrs}><<<</A> </SPAN>{END prev_button}{BEGIN back_button}<SPAN class=runner-btnframe><SPAN class=runner-btnleft></SPAN><SPAN class=runner-btnright></SPAN><A class=runner-button onclick="window.location.href='PROBAS_GIS_TableEsriJS_list.php?a=return'" href="#" {$backbutton_attrs}>Volver a la lista</A>
</SPAN>{END back_button}{BEGIN next_button}<SPAN class=runner-btnframe><SPAN class=runner-btnleft></SPAN><SPAN class=runner-btnright></SPAN><A class=runner-button href="#" {$nextbutton_attrs}>>>></A> </SPAN>{END next_button}</TD>
<TD class=runner-cr></TD></TR>
<TR class="{$cfooterclass_fields}">
<TD class=runner-cl><IMG src="images/spacer.gif"></TD>
<TD class=runner-cc></TD>
<TD class=runner-cc></TD>
<TD class=runner-cr><IMG src="images/spacer.gif"></TD></TR></TBODY></TABLE>{END container_fields}</TD>
<TD class=runner-cr></TD></TR>
<TR class="{$cfooterclass_view}">
<TD class=runner-cl><IMG src="images/spacer.gif"></TD>
<TD class=runner-cc></TD>
<TD class=runner-cr><IMG src="images/spacer.gif"></TD></TR></TBODY></TABLE>{END container_view}</TD></TR>
<TR class=runner-body>
<TD class="runner-left {$blockclass_left}"></TD>
<TD class="runner-center {$blockclass_center}"></TD>
<TD class="runner-right {$blockclass_right}"></TD></TR>
<TR class=runner-footer>
<TD class=runner-bottom
colSpan=3><!--%%bottom%%--></TD></TR></TBODY></TABLE>{$footer}{END body} </BODY></HTML>
[/font]
Any suggestions?
I'm use PHPRunner 6.1, Oracle 11g and ArcGIS 10.1
Thanks you very much!
Best regards
