topic Re: Error message: Script error. URL: http://js.arcgis.com/3.14/ in ArcGIS JavaScript Maps SDK Questions

Error message: Script error. URL: http://js.arcgis.com/3.14/

JulieBiju — Sun, 27 Sep 2015 16:36:41 GMT

Hi All, Advance Thanks.

HTML code attached here with.I am very new in JSAPI. All suggestions valuable .

First time the web application is working fine. But when I do refresh page more than two times Firefox showing an error stated below and map is getting blank n white colour .Wts the issue? Is it require to unload map each time???

The error below

Error message: Script error. URL: http://js.arcgis.com/3.14/ Line Number: 0

2.When click Lastpostion button 3 graphics will add on the map. Is it possible to add a line(polyline) with arrow from

pointGraphic to pointGraphic2 and and from pointGraphic2 to pointGraphic3?Can anyone help me with the code????

Code below

<!DOCTYPE html>

<html>

<head>

<title>Basemap Gallery - Bing Maps</title>

html,
body,
#mapDiv {
padding: 0;
margin: 0;
height: 100%;
z-index: -1;
-moz-border-radius: 4px;
overflow: hidden;
}

.claro .dijitButtonText {
color: #03c;
font-family: Arial, Helvetica, sans-serif font-weight: bold;
}

.claro td.dijitMenuItemLabel {
color: #03c;
font-family: Arial, Helvetica, sans-serif font-weight: 500;
}

.auto-style1 {}

.auto-style2 {
height: 20px;
}

.auto-style3 {
height: 20px;
}

.auto-style6 {
height: 2%;
width: 279px;
}

.auto-style7 {
width: 279px;
}

#TxtAltareeqEng {
width: 55px;
}

#TxtAltareeqEng0 {
width: 55px;
}
</style>

window.onerror = function (msg, url, linenumber) {
alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
return true;
}

var map, basemapGallery;
require([
"esri/map",
"esri/graphic",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/Extent",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/InfoTemplate",
"esri/dijit/Basemap",
"esri/dijit/BasemapGallery",
"esri/dijit/BasemapLayer",
"esri/graphicsUtils",
"dojo/_base/array",
"dojo/parser",
"dojo/dom",
"dojo/_base/lang",
"dijit/MenuItem",
"dijit/Menu",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/RadioButton",
"dijit/form/DropDownButton",
"dojo/domReady!"
],
function (
Map,
Graphic,
ArcGISDynamicMapServiceLayer,
GraphicsLayer,
Extent,
Point,
PictureMarkerSymbol,
InfoTemplate,
Basemap,
BasemapGallery,
BasemapLayer,
graphicsUtils,
array,
parser,
dom,
lang,
MenuItem
) {
parser.parse();

var TareeqENG, TareeqARB;
var graphicsLayer;
var AltareeqArb, AltareeqEng;

/*Manually define the maps LODs*/
var lods = [
{
"level": 0,
"resolution": 156543.03392800014,
"scale": 5.91657527591555E8
},
{
"level": 1,
"resolution": 78271.51696399994,
"scale": 2.95828763795777E8
},
{
"level": 2,
"resolution": 39135.75848200009,
"scale": 1.47914381897889E8
},
{
"level": 3,
"resolution": 19567.87924099992,
"scale": 7.3957190948944E7
},
{
"level": 4,
"resolution": 9783.93962049996,
"scale": 3.6978595474472E7
},
{
"level": 5,
"resolution": 4891.96981024998,
"scale": 1.8489297737236E7
},
{
"level": 6,
"resolution": 2445.98490512499,
"scale": 9244648.868618
},
{
"level": 7,
"resolution": 1222.992452562495,
"scale": 4622324.434309
},
{
"level": 8,
"resolution": 611.4962262813797,
"scale": 2311162.217155
},
{
"level": 9,
"resolution": 305.74811314055756,
"scale": 1155581.108577
},
{
"level": 10,
"resolution": 152.87405657041106,
"scale": 577790.554289
},
{
"level": 11,
"resolution": 76.43702828507324,
"scale": 288895.277144
},
{
"level": 12,
"resolution": 38.21851414253662,
"scale": 144447.638572
},
{
"level": 13,
"resolution": 19.10925707126831,
"scale": 72223.819286
},
{
"level": 14,
"resolution": 9.554628535634155,
"scale": 36111.909643
},
{
"level": 15,
"resolution": 4.77731426794937,
"scale": 18055.954822
},
{
"level": 16,
"resolution": 2.388657133974685,
"scale": 9027.977411
},
{
"level": 17,
"resolution": 1.1943285668550503,
"scale": 4513.988705
},
{
"level": 18,
"resolution": 0.5971642835598172,
"scale": 2256.994353
},
{
"level": 19,
"resolution": 0.29858214164761665,
"scale": 1128.497176
},
{
"level": 20,
"resolution": 0.1492910708238083,
"scale": 564.248588
},
{
"level": 21,
"resolution": 0.0746455354119042,
"scale": 282.124294
}
];

map = new Map("mapDiv", {
center: [6.389, 36.054],
zoom: 4,
lods: lods
});
createBasemapGallery();

dijit.byId("radioOne").on("change", function (isChecked) {
if (isChecked) {
dijit.byId("LnkLastPosition").set("label", "LastPosition");
dijit.byId("LnkTracking").set("label", "Tracking");
}
}, true);

dijit.byId("radioTwo").on("change", function (isChecked) {
if (isChecked) {
dijit.byId("LnkLastPosition").set("label", "الموقف الأخير");
dijit.byId("LnkTracking").set("label", "التتبع");
}
}, true);

dijit.byId("LnkLastPosition").on("click", LastPosClick);
dijit.byId("LnkTracking").on("click", LastPosClick);

function createBasemapGallery() {
AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";

//Manually create a list of basemaps to display
var basemaps = [];

/*Add the your basemaps is reverse order. We need the Bing basemap loaded first in the BasemapGallery
we will latter reverse the array so that it lists in the order you want*/
BingMapsHybrid = new Basemap({
layers: [new BasemapLayer({
type: "BingMapsHybrid"
})],
id: "bmHybrid",
title: "BingMaps-Aerial-Labels"
});
basemaps.push(BingMapsHybrid);

BingMapsAerial = new Basemap({
layers: [new BasemapLayer({
type: "BingMapsAerial"
})],
id: "bmAerial",
title: "BingMaps-Aerial"
});
basemaps.push(BingMapsAerial);

BingMapsRoad = new Basemap({
layers: [new BasemapLayer({
type: "BingMapsRoad"
})],
id: "bmRoad",
title: "BingMaps-Road"
});
basemaps.push(BingMapsRoad);

TareeqARB = new Basemap({
layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
id: "TareeqARB",
title: "Al-Tareeq(AR)"
});
basemaps.push(TareeqARB);

TareeqENG = new Basemap({
layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
id: "TareeqENG",
title: "Al-Tareeq(ENG)"
});
basemaps.push(TareeqENG);

basemapGallery = new BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
bingMapsKey: "yourbingkey",
map: map
});
basemapGallery.startup();

graphicsLayer = new GraphicsLayer();
map.addLayer(graphicsLayer);

//BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
//we are going to create a custom user interface to display the basemaps, in this case a menu.
array.forEach(basemapGallery.basemaps.reverse(), function (basemap) {
//Add a menu item for each basemap, when the menu items are selected
dijit.byId("bingMenu").addChild(new MenuItem({
label: basemap.title,
onClick: lang.hitch(this, function () {
this.basemapGallery.select(basemap.id);
})
}));
});
/*Select that basemap that you want to be initially displayed*/
basemapGallery.select(TareeqENG.id);
}

function LastPosClick() {
map.infoWindow.hide();
var colourstyle = "images/sphere-blue-dark-16x16.png"
var Status = "status";
var procname = "procname";
var location = "location";
var Driver = "Drv";
var strhotspot = "strhotspot";
var geomPoint1 = new Point(58.46236, 23.61581);
var geomPoint2 = new Point(59.46236, 23.61581);
var geomPoint3 = new Point(60.43362666666, 23.583081666666);
var symbol = new PictureMarkerSymbol({
"url": colourstyle,
"height": 16,
"width": 16,
"type": "esriPMS"
});

var infoTemplate = new InfoTemplate();
infoTemplate.content = strhotspot;
var pointGraphic = new Graphic(geomPoint1, symbol);
var pointGraphic2 = new Graphic(geomPoint2, symbol);
var pointGraphic3 = new Graphic(geomPoint3, symbol);
pointGraphic.setInfoTemplate(infoTemplate);
pointGraphic2.setInfoTemplate(infoTemplate);
pointGraphic3.setInfoTemplate(infoTemplate);
graphicsLayer.add(pointGraphic);
graphicsLayer.add(pointGraphic2);
graphicsLayer.add(pointGraphic3);
setextent();
var DivesriLogoImage = dom.byId('DivesriLogoImage');
var mapDiv = dom.byId('mapDiv');
mapDiv.style.visibility = "visible";
DivesriLogoImage.style.visibility = "hidden";
}

function setextent() {
var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
map.setExtent(gextent);
}
});
</script>

</head>

<input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br />

<input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label>

</td>

</td>

</tr>

</td>

</td>

</tr>

</td>

</td>

</tr>

</td>

</tr>

Last Position</button>

</td>

Tracking</button>

</td>

</tr>

</td>

</tr>

</table>

</td>

</div>

</button>

</div>

</div>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Re: Error message: Script error. URL: http://js.arcgis.com/3.14/

RobertScheitlin__GISP — Sun, 12 Dec 2021 07:29:42 GMT

Julie,

This version of the code seems to be a lot more dependable. Cartographic line symbols with arrows is not supported by JS API out of the box, but you can add custom elements like this one created by Nick Cameron

nickcam/DirectionalLineSymbol · GitHub

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--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>Basemap Gallery - Bing Maps</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

  <style type="text/css">
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      z-index: -1;
      -moz-border-radius: 4px;
      overflow: hidden;
    }

    .claro .dijitButtonText {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: bold;
    }

    .claro td.dijitMenuItemLabel {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: 500;
    }

    .auto-style1 {}

    .auto-style2 {
      height: 20px;
    }

    .auto-style3 {
      height: 20px;
    }

    .auto-style6 {
      height: 2%;
      width: 279px;
    }

    .auto-style7 {
      width: 279px;
    }

    #TxtAltareeqEng {
      width: 55px;
    }

    #TxtAltareeqEng0 {
      width: 55px;
    }
  </style>

  <script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>
  <script type="text/javascript">
    window.onerror = function (msg, url, linenumber) {
      alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
      return true;
    }

    var map, basemapGallery;
    require([
        "esri/map",
        "esri/graphic",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/GraphicsLayer",
        "esri/geometry/Extent",
        "esri/geometry/Point",
        "esri/geometry/Polyline",
        "esri/SpatialReference",
        "esri/symbols/PictureMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/InfoTemplate",
        "esri/dijit/Basemap",
        "esri/dijit/BasemapGallery",
        "esri/dijit/BasemapLayer",
        "esri/graphicsUtils",
        "dojo/_base/array",
        "dojo/parser",
        "dojo/dom",
        "dojo/_base/lang",
        "dijit/MenuItem",
        "dijit/Menu",
        "dijit/layout/ContentPane",
        "dijit/form/Button",
        "dijit/form/RadioButton",
        "dijit/form/DropDownButton",
        "dojo/domReady!"
        ],
      function (
        Map,
        Graphic,
        ArcGISDynamicMapServiceLayer,
        GraphicsLayer,
        Extent,
        Point,
        Polyline,
        SpatialReference,
        PictureMarkerSymbol,
        SimpleLineSymbol,
        InfoTemplate,
        Basemap,
        BasemapGallery,
        BasemapLayer,
        graphicsUtils,
        array,
        parser,
        dom,
        lang,
        MenuItem
      ) {
        parser.parse();

        var TareeqENG, TareeqARB;
        var graphicsLayer;
        var AltareeqArb, AltareeqEng;

        map = new Map("mapDiv", {
          center: [6.389, 36.054],
          zoom: 4,
          basemap: 'topo'
        });

        map.on('load', function() {
          createBasemapGallery();
        });

        dijit.byId("radioOne").on("change", function(isChecked){
          if(isChecked){
            dijit.byId("LnkLastPosition").set("label", "LastPosition");
            dijit.byId("LnkTracking").set("label", "Tracking");
          }
        }, true);

        dijit.byId("radioTwo").on("change", function(isChecked){
          if(isChecked){
            dijit.byId("LnkLastPosition").set("label", "الموقف الأخير");
            dijit.byId("LnkTracking").set("label", "التتبع");
          }
        }, true);

        dijit.byId("LnkLastPosition").on("click", LastPosClick);
        dijit.byId("LnkTracking").on("click", LastPosClick);

        function createBasemapGallery() {
          AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
          AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";

          //Manually create a list of basemaps to display
          var basemaps = [];

          TareeqENG = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
            id: "TareeqENG",
            title: "Al-Tareeq(ENG)"
          });
          basemaps.push(TareeqENG);

          TareeqARB = new Basemap({
            layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
            id: "TareeqARB",
            title: "Al-Tareeq(AR)"
          });
          basemaps.push(TareeqARB);

          BingMapsRoad = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsRoad"
            })],
            id: "bmRoad",
            title: "BingMaps-Road"
          });
          basemaps.push(BingMapsRoad);

          BingMapsAerial = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsAerial"
            })],
            id: "bmAerial",
            title: "BingMaps-Aerial"
          });
          basemaps.push(BingMapsAerial);

          BingMapsHybrid = new Basemap({
            layers: [new BasemapLayer({
              type: "BingMapsHybrid"
            })],
            id: "bmHybrid",
            title: "BingMaps-Aerial-Labels"
          });
          basemaps.push(BingMapsHybrid);

          basemapGallery = new BasemapGallery({
            showArcGISBasemaps: false,
            basemaps: basemaps,
            bingMapsKey: "your bing key",
            map: map
          });
          basemapGallery.startup();

          graphicsLayer = new GraphicsLayer();
          map.addLayer(graphicsLayer);

          //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
          //we are going to create a custom user interface to display the basemaps, in this case a menu.
          array.forEach(basemapGallery.basemaps, function (basemap) {
            //Add a menu item for each basemap, when the menu items are selected
            dijit.byId("bingMenu").addChild(new MenuItem({
              label: basemap.title,
              onClick: lang.hitch(this, function () {
                this.basemapGallery.select(basemap.id);
              })
            }));
          });
          /*Select that basemap that you want to be initially displayed*/
          basemapGallery.select(TareeqENG.id);
        }

        function LastPosClick() {
          map.infoWindow.hide();
          var colourstyle = "images/sphere-blue-dark-16x16.png"
          var Status = "status";
          var procname = "procname";
          var location = "location";
          var Driver = "Drv";
          var strhotspot = "strhotspot";
          var geomPoint1 = new Point(58.46236, 23.61581);
          var geomPoint2 = new Point(59.46236, 23.61581);
          var geomPoint3 = new Point(60.43362666666, 23.583081666666);
          var polyline = new Polyline(new SpatialReference(4326));
          polyline.addPath([geomPoint1,geomPoint2,geomPoint3]);
          var symbol = new PictureMarkerSymbol({
            "url": colourstyle,
            "height": 16,
            "width": 16,
            "type": "esriPMS"
          });

          var infoTemplate = new InfoTemplate();
          infoTemplate.content = strhotspot;
          var pointGraphic = new Graphic(geomPoint1, symbol);
          var pointGraphic2 = new Graphic(geomPoint2, symbol);
          var pointGraphic3 = new Graphic(geomPoint3, symbol);
          var lineGraphic = new Graphic(polyline, new SimpleLineSymbol());
          pointGraphic.setInfoTemplate(infoTemplate);
          pointGraphic2.setInfoTemplate(infoTemplate);
          pointGraphic3.setInfoTemplate(infoTemplate);
          graphicsLayer.add(pointGraphic);
          graphicsLayer.add(pointGraphic2);
          graphicsLayer.add(pointGraphic3);
          graphicsLayer.add(lineGraphic);
          setextent();
          var DivesriLogoImage = dom.byId('DivesriLogoImage');
          var mapDiv = dom.byId('mapDiv');
          mapDiv.style.visibility = "visible";
          DivesriLogoImage.style.visibility = "hidden";
        }

        function setextent() {
          var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
          map.setExtent(gextent);
        }
      });
  </script>
</head>

<body class="claro">
  <form id="form1" >
    <div style="width: 100%; height: 100%">
      <table id="Tablecontrols0" style="font-size: 15px; z-index: 101; background-color: #5B748B; width: 100%; height: 100%;">
        <tr style="font-family: Times New Roman">
          <td style="border-style: none; background-color: #496277; " valign="top" class="auto-style6">
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br />
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label>
          </td>
          <td align="left" style="border-style: none; background-color: #496277; height: 2%;" valign="top" class="auto-style3">
          </td>
        </tr>
        <tr style="font-family: Times New Roman">
          <td style="border-style: none;" valign="top" bgcolor="#496277" class="auto-style7">
            <table id="Tablecontrols" style="border-color: #F2F0EE; font-size: 15px; z-index: 101;
            background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left">
              <tr style="font-family: Times New Roman">
                <td rowspan="1" valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2">
                  <button dojotype="dijit/form/Button" id="LnkLastPosition" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Last Position</button>
                </td>
                <td style="border-style: none; text-align: center;" valign="top" class="auto-style3">
                  <button dojotype="dijit/form/Button" id="LnkTracking" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Tracking</button>
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold;  position: static;
                    height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left">
                  <div id="Something"></div>
                  <div style="width: 300px; height: 356px; overflow: scroll"></div>
                </td>
              </tr>
            </table>
          </td>
          <td style="border-style: none; background-color: white;  width: 100%; height:100%;" valign="top" id="td11">
            <div id="mapDiv"  dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: visible; height: 100%;">
              <div style="position:absolute; right:50px; top:100px; z-Index:99;">
                <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
                  <div data-dojo-type="dijit/Menu" id="bingMenu">
                    <!--The menu items are dynamically created using the basemap gallery layers-->
                  </div>
                </button>
              </div>
            </div>
            <div id="DivesriLogoImage"  style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">
            </div>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>

</html>

Re: Error message: Script error. URL: http://js.arcgis.com/3.14/

JulieBiju — Tue, 29 Sep 2015 05:05:56 GMT

Thank U Robert,

I added ncam folder to my web directory and just added "ncam/DirectionalLineSymbol" in require part and

DirectionalLineSymbol in function part. After addding this when i click button , The page is getting refresh.

Is it require to add any other thing for this?

<!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>Basemap Gallery - Bing Maps</title>

<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">

<style type="text/css">
    html,
    body,
    #mapDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      z-index: -1;
      -moz-border-radius: 4px;
      overflow: hidden;
    }

    .claro .dijitButtonText {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: bold;
    }

    .claro td.dijitMenuItemLabel {
      color: #03c;
      font-family: Arial, Helvetica, sans-serif font-weight: 500;
    }

    .auto-style1 {}

    .auto-style2 {
      height: 20px;
    }

    .auto-style3 {
      height: 20px;
    }

    .auto-style6 {
      height: 2%;
      width: 279px;
    }

    .auto-style7 {
      width: 279px;
    }

    #TxtAltareeqEng {
      width: 55px;
    }

    #TxtAltareeqEng0 {
      width: 55px;
    }
</style>

<script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>
<script type="text/javascript">
      window.onerror = function (msg, url, linenumber) {
          alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
          return true;
      }
      var map, basemapGallery;
      require([
          "esri/map",
          "esri/graphic",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/GraphicsLayer",
          "esri/geometry/Extent",
          "esri/geometry/Point",
          "esri/geometry/Polyline",
          "esri/SpatialReference",
          "esri/symbols/PictureMarkerSymbol",
          "esri/symbols/SimpleLineSymbol",
          "esri/InfoTemplate",
          "esri/dijit/Basemap",
          "esri/dijit/BasemapGallery",
          "esri/dijit/BasemapLayer",
          "esri/graphicsUtils",
           "ncam/DirectionalLineSymbol",
          "dojo/_base/array",
          "dojo/parser",
          "dojo/dom",
          "dojo/_base/lang",
          "dijit/MenuItem",
          "dijit/Menu",
          "dijit/layout/ContentPane",
          "dijit/form/Button",
          "dijit/form/RadioButton",
          "dijit/form/DropDownButton",
          "dojo/domReady!"
      ],
        function (
          Map,
          Graphic,
          ArcGISDynamicMapServiceLayer,
          GraphicsLayer,
          Extent,
          Point,
          Polyline,
          SpatialReference,
          PictureMarkerSymbol,
          SimpleLineSymbol,
          InfoTemplate,
          Basemap,
          BasemapGallery,
          BasemapLayer,
          graphicsUtils,
          DirectionalLineSymbol,
          array,
          parser,
          dom,
          lang,
          MenuItem
        ) {
            parser.parse();
            var TareeqENG, TareeqARB;
            var graphicsLayer;
            var AltareeqArb, AltareeqEng;
            map = new Map("mapDiv", {
                center: [6.389, 36.054],
                zoom: 4,
                basemap: 'topo'
            });
            map.on('load', function () {
                createBasemapGallery();
            });
            dijit.byId("radioOne").on("change", function (isChecked) {
                if (isChecked) {
                    dijit.byId("LnkLastPosition").set("label", "LastPosition");
                    dijit.byId("LnkTracking").set("label", "Tracking");
                }
            }, true);
            dijit.byId("radioTwo").on("change", function (isChecked) {
                if (isChecked) {
                    dijit.byId("LnkLastPosition").set("label", "الموقف الأخير");
                    dijit.byId("LnkTracking").set("label", "التتبع");
                }
            }, true);
            dijit.byId("LnkLastPosition").on("click", LastPosClick);
            dijit.byId("LnkTracking").on("click", LastPosClick);
            function createBasemapGallery() {
                AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer";
                AltareeqArb = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer";
                //Manually create a list of basemaps to display
                var basemaps = [];
                TareeqENG = new Basemap({
                    layers: [new ArcGISDynamicMapServiceLayer(AltareeqEng)],
                    id: "TareeqENG",
                    title: "Al-Tareeq(ENG)"
                });
                basemaps.push(TareeqENG);
                TareeqARB = new Basemap({
                    layers: [new ArcGISDynamicMapServiceLayer(AltareeqArb)],
                    id: "TareeqARB",
                    title: "Al-Tareeq(AR)"
                });
                basemaps.push(TareeqARB);
                BingMapsRoad = new Basemap({
                    layers: [new BasemapLayer({
                        type: "BingMapsRoad"
                    })],
                    id: "bmRoad",
                    title: "BingMaps-Road"
                });
                basemaps.push(BingMapsRoad);
                BingMapsAerial = new Basemap({
                    layers: [new BasemapLayer({
                        type: "BingMapsAerial"
                    })],
                    id: "bmAerial",
                    title: "BingMaps-Aerial"
                });
                basemaps.push(BingMapsAerial);
                BingMapsHybrid = new Basemap({
                    layers: [new BasemapLayer({
                        type: "BingMapsHybrid"
                    })],
                    id: "bmHybrid",
                    title: "BingMaps-Aerial-Labels"
                });
                basemaps.push(BingMapsHybrid);
                basemapGallery = new BasemapGallery({
                    showArcGISBasemaps: false,
                    basemaps: basemaps,
                    bingMapsKey: "your bing key",
                    map: map
                });
                basemapGallery.startup();
                graphicsLayer = new GraphicsLayer();
                map.addLayer(graphicsLayer);
                //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
                //we are going to create a custom user interface to display the basemaps, in this case a menu.
                array.forEach(basemapGallery.basemaps, function (basemap) {
                    //Add a menu item for each basemap, when the menu items are selected
                    dijit.byId("bingMenu").addChild(new MenuItem({
                        label: basemap.title,
                        onClick: lang.hitch(this, function () {
                            this.basemapGallery.select(basemap.id);
                        })
                    }));
                });
                /*Select that basemap that you want to be initially displayed*/
                basemapGallery.select(TareeqENG.id);
            }
            function LastPosClick() {
                map.infoWindow.hide();
                var colourstyle = "images/sphere-blue-dark-16x16.png"
                var Status = "status";
                var procname = "procname";
                var location = "location";
                var Driver = "Drv";
                var strhotspot = "strhotspot";
                var geomPoint1 = new Point(58.46236, 23.61581);
                var geomPoint2 = new Point(59.46236, 23.61581);
                var geomPoint3 = new Point(60.43362666666, 23.583081666666);
                var polyline = new Polyline(new SpatialReference(4326));
                polyline.addPath([geomPoint1, geomPoint2, geomPoint3]);
                var symbol = new PictureMarkerSymbol({
                    "url": colourstyle,
                    "height": 16,
                    "width": 16,
                    "type": "esriPMS"
                });
                var infoTemplate = new InfoTemplate();
                infoTemplate.content = strhotspot;
                var pointGraphic = new Graphic(geomPoint1, symbol);
                var pointGraphic2 = new Graphic(geomPoint2, symbol);
                var pointGraphic3 = new Graphic(geomPoint3, symbol);
                var lineGraphic = new Graphic(polyline, new SimpleLineSymbol());
                pointGraphic.setInfoTemplate(infoTemplate);
                pointGraphic2.setInfoTemplate(infoTemplate);
                pointGraphic3.setInfoTemplate(infoTemplate);
                graphicsLayer.add(pointGraphic);
                graphicsLayer.add(pointGraphic2);
                graphicsLayer.add(pointGraphic3);
                graphicsLayer.add(lineGraphic);
                setextent();
                var DivesriLogoImage = dom.byId('DivesriLogoImage');
                var mapDiv = dom.byId('mapDiv');
                mapDiv.style.visibility = "visible";
                DivesriLogoImage.style.visibility = "hidden";
            }
            function setextent() {
                var gextent = graphicsUtils.graphicsExtent(graphicsLayer.graphics).expand(1.2);
                map.setExtent(gextent);
            }
        });
</script>
</head>

<body class="claro">
<form id="form1" >
    <div style="width: 100%; height: 100%">
      <table id="Tablecontrols0" style="font-size: 15px; z-index: 101; background-color: #5B748B; width: 100%; height: 100%;">
        <tr style="font-family: Times New Roman">
          <td style="border-style: none; background-color: #496277; " valign="top" class="auto-style6">
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioOne" checked value="English"/><label for="radioOne">English</label><br />
            <input type="radio" data-dojo-type="dijit/form/RadioButton" name="uilanguage" id="radioTwo" value="العربية"/><label for="radioTwo">العربية</label>
          </td>
          <td align="left" style="border-style: none; background-color: #496277; height: 2%;" valign="top" class="auto-style3">
          </td>
        </tr>
        <tr style="font-family: Times New Roman">
          <td style="border-style: none;" valign="top" bgcolor="#496277" class="auto-style7">
            <table id="Tablecontrols" style="border-color: #F2F0EE; font-size: 15px; z-index: 101;
            background-color: #496277; width:auto; height: 274px; font-family: verdana; color: tomato; font-weight: bold; border-top-style: none;" align="left">
              <tr style="font-family: Times New Roman">
                <td rowspan="1" valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td rowspan="1" style="font-weight: bold; " valign="top" height="10px" class="auto-style1">
                </td>
                <td rowspan="1" style="border-style: none;" valign="top" height="10px">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; " valign="top" height="10" class="auto-style1" colspan="2">
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td style="font-weight: bold; text-align: center; " valign="top" class="auto-style2">
                  <button dojotype="dijit/form/Button" id="LnkLastPosition" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Last Position</button>
                </td>
                <td style="border-style: none; text-align: center;" valign="top" class="auto-style3">
                  <button dojotype="dijit/form/Button" id="LnkTracking" style="font-family: Arial; font-size: x-small; font-weight: normal">
                    Tracking</button>
                </td>
              </tr>
              <tr style="font-family: Times New Roman">
                <td colspan="2" rowspan="1" style="border-top: 2px solid #547289; border-bottom: 2px solid #547289; font-weight: bold; position: static;
                    height: 100%; text-align: left; width: 30%; border-left-width: 2px; border-right-width: 2px;" valign="top" align="left">
                  <div id="Something"></div>
                  <div style="width: 300px; height: 356px; overflow: scroll"></div>
                </td>
              </tr>
            </table>
          </td>
          <td style="border-style: none; background-color: white; width: 100%; height:100%;" valign="top" id="td11">
            <div id="mapDiv" dojotype="dijit/layout/ContentPane" region="center" style="border:1px solid #000; visibility: visible; height: 100%;">
              <div style="position:absolute; right:50px; top:100px; z-Index:99;">
                <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton">
                  <div data-dojo-type="dijit/Menu" id="bingMenu">
                    
                  </div>
                </button>
              </div>
            </div>
            <div id="DivesriLogoImage" style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">
            </div>
          </td>
        </tr>
      </table>
    </div>
</form>
</body>

</html>

Re: Error message: Script error. URL: http://js.arcgis.com/3.14/

RobertScheitlin__GISP — Tue, 29 Sep 2015 13:23:43 GMT

Julie,

As a developer you should know that you have to do more then just add the require and var. Where do you actually attempt to use the DirectionalLineSymbol object in your code?

Attached is a zip of your code updated to us the DirectionalLineSymbol. The big things to notice are:

The dojo config portion lines 64 - 74. This is required to use an external library in your code.
The use of dijit/registry was necessary not that we are using an external library we can no longer use dijit.byId we need to use registry.byId.
Actually using the DirectionalLineSymbol in the code lines 265 - 274 & 281

Re: Error message: Script error. URL: http://js.arcgis.com/3.14/

JulieBiju — Wed, 30 Sep 2015 03:20:39 GMT

Dear Robert,

U Are Gr8. Working perfect.Actually I tried 1 and 3 points but the second line of information is an updated information to me. When I added the second point it works stunning.

The second set of code u suggested on sep 28th working well without any issue of map display. I reached finishing point of converting app to Silverlight to Javascript API . Here I should mention with your help I reached finishing line.And no words for ur kindness.....