| <!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> | | | var dojoConfig = { | | | parseOnLoad: false, | | | async: true, | | | tlmSiblingOfDojo: false, | | | packages: [{ | | | name: "ncam", | | | location: location.pathname.replace(/\/[^/]+$/, '') + "/ncam" | | | }] | | | }; | | | </script> | | | | | | <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, loading; | | | 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/dijit/Popup", | | | "dojo/dom-construct", | | | "esri/dijit/PopupTemplate", | | | "esri/dijit/Basemap", | | | "esri/dijit/BasemapGallery", | | | "esri/dijit/BasemapLayer", | | | "esri/graphicsUtils", | | | "esri/domUtils", | | | "dojo/_base/array", | | | "dojo/parser", | | | "dojo/dom", | | | "dojo/_base/lang", | | | "dojo/dom-style", | | | "dijit/MenuItem", | | | "dijit/registry", | | | "ncam/DirectionalLineSymbol", | | | "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, | | | Popup, | | | domConstruct, | | | PopupTemplate, | | | Basemap, | | | BasemapGallery, | | | BasemapLayer, | | | graphicsUtils, | | | domUtils, | | | array, | | | parser, | | | dom, | | | lang, | | | domStyle, | | | MenuItem, | | | registry, | | | DirectionalLineSymbol | | | ) { | | | parser.parse(); |
| | var TareeqENG, TareeqARB; | | | var graphicsLayer; | | | var clock; | | | var AltareeqArb, AltareeqEng; | | | loading = dom.byId("loadingImg"); //loading image. id | | | var popup = new Popup({ | | | highlight: false | | | }, domConstruct.create("div")); | | | map = new Map("mapDiv", { | | | center: [6.389, 36.054], | | | zoom: 4, | | | basemap: 'topo', | | | autoResize: false, | | | infoWindow: popup | | | }); |
| | map.on("update-start", showLoading); | | | map.on("update-end", hideLoading); |
| | map.on('load', function () { | | | createBasemapGallery(); | | | }); |
| | registry.byId("radioOne").on("change", function (isChecked) { | | | if (isChecked) { | | | registry.byId("LnkLastPosition").set("label", "LastPosition"); | | | registry.byId("LnkTracking").set("label", "Tracking"); | | | } | | | }, true); |
| | registry.byId("radioTwo").on("change", function (isChecked) { | | | if (isChecked) { | | | registry.byId("LnkLastPosition").set("label", "الموقف الأخير"); | | | registry.byId("LnkTracking").set("label", "التتبع"); | | | } | | | }, true); |
| | //registry.byId("LnkLastPosition").on("click", LastPosClick); | | | //registry.byId("LnkTracking").on("click", LastPosClick); |
| | clock = setInterval(LastPosClick, 10000); |
| | function showLoading() { | | | domStyle.set(registry.byId("dropdownButton").domNode, "display", "none"); | | | domUtils.show(loading); | | | map.disableMapNavigation(); | | | map.hideZoomSlider(); | | | } |
| | function hideLoading(error) { | | | domStyle.set(registry.byId("dropdownButton").domNode, "display", ""); | | | domUtils.hide(loading); | | | map.enableMapNavigation(); | | | map.showZoomSlider(); | | | } |
| | //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: "ApQMgAf0l5kH5_mfhDmDX1q9DOa1eqAw15N9knkX4sj1kbAoOYzJMNCln6w5t3bs", | | | map: map | | | }); | | | basemapGallery.startup(); |
| | graphicsLayer = new GraphicsLayer(); | | | map.addLayer(graphicsLayer); |
| | graphicsLayer.on("mouse-over", function (event) { | | | var graphic = event.graphic; | | | map.infoWindow.highlight = false; | | | map.infoWindow.setFeatures([graphic]); | | | map.infoWindow.show(event.screenPoint); | | | }); |
| | graphicsLayer.on("mouse-out", function () { | | | map.infoWindow.highlight = false; | | | map.infoWindow.hide(); | | | }); |
| | //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 | | | registry.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" | | | }); |
| | //add a basic polyline | | | var basicOptions = { | | | style: SimpleLineSymbol.STYLE_SOLID, | | | color: new dojo.Color([0, 0, 0]), | | | width: 2, | | | directionScale: 0.8, | | | directionStyle: "arrow3", | | | directionPixelBuffer: 80 | | | }; | | | var basicSymbol = new DirectionalLineSymbol(basicOptions); |
| | var popupTemplate = new PopupTemplate(); | | | popupTemplate.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, basicSymbol); | | | pointGraphic.setInfoTemplate(popupTemplate); | | | pointGraphic2.setInfoTemplate(popupTemplate); | | | pointGraphic3.setInfoTemplate(popupTemplate); | | | 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%;"> | | | <img id="loadingImg" src="images/loading.gif" | | | style="position:absolute; right:512px; top:277px; z-index:100; width: 40px; height: 40px;" /> | | | <div style="position:absolute; right:50px; top:100px; z-Index:99;"> | | | <button id="dropdownButton" label="Basemaps" data-dojo-type="dijit/form/DropDownButton" style="display: none;"> | | | <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> |
|
