Very thankful to u. Actually I am in a big task for changing the platform from silverlight to javascript and I am very new in javascript writing.I cannot move forward without any help.Here my requirement s very simple. We have our own map which is published with ESRI server 10.1. Our two maps I need to show n our application + Bing maps also.For that I write the code below. Pls clcik the Last position button and u can see 3 graphics will add on map. Actually sometimes it is 10 number of graphics .Here I added the code for testing purpose.
1.How to write this code in AMD?
2.Here TareeqENG and TareeqARB are our maps(for security reasns I added the sample ESRI link).I need to add these maps first. Then need to add Bing maps in createBasemapGallery. But if I will add the order like I pasted below Bing map will not show.How to solve this? If I add Bingmap first then no issue in displaying the Bing maps but other two maps will take time to show sometimes.
3.if Graphics count is 10 how can I set visibility of all graphics(setextent)?
4.How can i see the close button of information window?
5.Sometimes graphics will add only two icons,But if I will put some alert message in between it will show all the graphics.How can I solve?
Pls help me and no words for ur valuable time. I am very new here in jsapi...so sorry for the mistakes.
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<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="./CSS/claro.css">
<link rel="stylesheet" href="./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">var dojoConfig = { parseOnLoad: true };</script>
<script type="text/javascript" src="http://js.arcgis.com/3.14/"></script>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
window.onerror = function (msg, url, linenumber) {
alert('Error message: ' + msg + '\nURL: ' + url + '\nLine Number: ' + linenumber);
return true;
}
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("dijit.Tooltip");
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("esri.dijit.Popup");
dojo.require("esri.dijit.PopupTemplate");
dojo.require("esri.graphicsUtils");
var map;
var TareeqENG, TareeqARB, gMap, BingLayer;
var graphicsLayer;
var AltareeqArb, AltareeqEng;
var lastposdate = "";
var DoorOpenClose = 'NO';
var ResolutionCount = 0
var maxdate;
var fahrID = "";
var FahrName = "";
var basemapGallery;
function init() {
map = new esri.Map("mapDiv", {
center: [6.389, 36.054],
zoom: 4
});
var RadioButtonList1 = document.getElementsByName("RadioButtonList1");
if (RadioButtonList1[0].checked) {
dijit.byId("LnkLastPosition").set("label", "LastPosition");
dijit.byId("LnkTracking").set("label", "Tracking");
}
else {
dijit.byId("LnkLastPosition").set("label", "الموقف الأخير");
dijit.byId("LnkTracking").set("label", "التتبع");
}
createBasemapGallery();
}
function createBasemapGallery() {
AltareeqEng = "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapSer...";
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 esri.dijit.Basemap({
layers: [new esri.layers.ArcGISDynamicMapServiceLayer(AltareeqEng)],
id: "TareeqENG",
title: "Al-Tareeq(ENG)"
});
basemaps.push(TareeqENG);
TareeqARB = new esri.dijit.Basemap({
layers: [new esri.layers.ArcGISDynamicMapServiceLayer(AltareeqArb)],
id: "TareeqARB",
title: "Al-Tareeq(AR)"
});
basemaps.push(TareeqARB);
BingMapsRoad = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsRoad"
})],
id: "bmRoad",
title: "BingMaps-Road"
});
basemaps.push(BingMapsRoad);
BingMapsAerial = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsAerial"
})],
id: "bmAerial",
title: "BingMaps-Aerial"
});
basemaps.push(BingMapsAerial);
BingMapsHybrid = new esri.dijit.Basemap({
layers: [new esri.dijit.BasemapLayer({
type: "BingMapsHybrid"
})],
id: "bmHybrid",
title: "BingMaps-Aerial-Labels"
});
basemaps.push(BingMapsHybrid);
basemapGallery = new esri.dijit.BasemapGallery({
showArcGISBasemaps: false,
basemaps: basemaps,
bingMapsKey: "key",
map: map
});
graphicsLayer = new esri.layers.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.
dojo.forEach(basemapGallery.basemaps, function (basemap) {
//Add a menu item for each basemap, when the menu items are selected
dijit.byId("bingMenu").addChild(new dijit.MenuItem({
label: basemap.title,
onClick: dojo.hitch(this, function () {
this.basemapGallery.select(basemap.id);
})
}));
});
}
function LastPosClick() {
map.infoWindow.hide();
colourstyle = "Images/sphere-blue-dark-16x16.png"
Status = "status";
var procname = "procname";
var location = "location";
var Driver = "Drv";
var strhotspot = "strhotspot";
var geomPoint1 = new esri.geometry.Point(58.46236, 23.61581);
var geomPoint2 = new esri.geometry.Point(59.46236, 23.61581);
var geomPoint3 = new esri.geometry.Point(60.43362666666, 23.583081666666);
var symbol = new esri.symbol.PictureMarkerSymbol({
"url": colourstyle,
"height": 16,
"width": 16,
"type": "esriPMS"
});
var infoTemplate = new esri.InfoTemplate();
infoTemplate.content = strhotspot;
var pointGraphic = new esri.Graphic(geomPoint1, symbol);
var pointGraphic2 = new esri.Graphic(geomPoint2, symbol);
var pointGraphic3 = new esri.Graphic(geomPoint3, symbol);
pointGraphic.setInfoTemplate(infoTemplate);
pointGraphic2.setInfoTemplate(infoTemplate);
pointGraphic3.setInfoTemplate(infoTemplate);
graphicsLayer.add(pointGraphic);
graphicsLayer.add(pointGraphic2);
graphicsLayer.add(pointGraphic3);
setextent()
var DivesriLogoImage = document.getElementById('DivesriLogoImage');
var mapDiv = document.getElementById('mapDiv');
mapDiv.style.visibility = "visible";
DivesriLogoImage.style.visibility = "hidden";
}
function setextent() {
//var graphics = graphicsUtils.graphicsExtent(graphicsLayer.graphics);
//map.setExtent(graphics)
}
dojo.ready(init);
</script>
</head>
<body class="claro" style="background-image: url('Images/menubackground.png');" >
<form id="form1" runat="server">
<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" >
<asp:RadioButtonList ID="RadioButtonList1" runat="server" Font-Bold="True" Font-Italic="False" ForeColor="White" RepeatDirection="Horizontal" AutoPostBack="True" Font-Names="Verdana" Font-Size="10pt">
<asp:ListItem Selected="True">English</asp:ListItem>
<asp:ListItem>العربية</asp:ListItem>
</asp:RadioButtonList>
</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" onClick="LastPosClick()"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" onClick="LastPosClick()"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" runat ="server" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000; visibility: hidden; 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>
<%--
<%--<asp:Image runat="server" ImageUrl="Images/tareeq Logo1.jpg" ID="esriLogoImage" Height="495px" style="margin-right: 36px" Width="100%" />--%>
<div id="DivesriLogoImage" runat ="server" style="background-color: #FFFFFF; width: 80%; height:99.8%; visibility: hidden; position: absolute; top: 72px;" align="center">
<asp:Image runat="server" ID="esriLogoImage" ImageAlign="Middle" Height="564px" />
</div>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>