API tools faq
paste
Advertisement
garytownsend

ArcGIS Javascript API query attempt

garytownsend
Jun 17th, 2014
240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 8.92 KB | None | 0 0
raw download clone embed print report
  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Calgary.aspx.vb" Inherits="WebMap.Calgary" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title>SPD Map Test</title>
  8.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  10.     <link rel="stylesheet" href="/dijit/themes/claro/claro.css" />
  11.     <link rel="stylesheet" href="/dijit/themes/claro/form/slider.css" />
  12.     <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
  13.  
  14.     <style>
  15.         #mapDiv, .map.container {
  16.             padding: 0;
  17.             margin: 0;
  18.             height: 500px;
  19.             width: 889px;
  20.             border-color:black;
  21.             border-width:2px;
  22.             border-style:solid;
  23.         }
  24.         #legendDiv {
  25.             background-color: #fff;
  26.             position: absolute !important;
  27.             z-index: 99;
  28.             top: 0px;
  29.             left: 920px;
  30.             width: 400px;
  31.         }
  32.  
  33.     </style>
  34.  
  35.     <script>//var dojoConfig = { parseOnLoad: true };</script>
  36.     <script src="http://js.arcgis.com/3.9compact/"></script>
  37.  
  38. <script>
  39.  
  40.     var map;
  41.     var currPoint;
  42.         require(["esri/map",
  43.             "esri/arcgis/utils",
  44.             "esri/dijit/Legend",
  45.             "esri/graphic",
  46.             "esri/symbols/SimpleLineSymbol",
  47.             "esri/symbols/SimpleMarkerSymbol",
  48.             "esri/renderers/SimpleRenderer",
  49.             "esri/symbols/SimpleFillSymbol",
  50.             "esri/Color",
  51.             "esri/layers/FeatureLayer",
  52.             "esri/geometry/Circle",
  53.             "esri/layers/OpenStreetMapLayer",
  54.             "esri/request",
  55.             "esri/tasks/GeometryService",
  56.             "dojo/dom",
  57.             "dojo/parser",
  58.             "dojo/promise/all",
  59.             "dojo/_base/array",
  60.             "dijit/form/HorizontalSlider",
  61.             "dijit/form/HorizontalRule",
  62.             "dijit/form/HorizontalRuleLabels",
  63.             "dijit/form/TextBox", // this we only include to make an example with TextBox
  64.             "dojo/dom-construct",
  65.             "dojo/on",
  66.             "esri/config",
  67.             "dojo/domReady!"], function (Map, arcgisUtils, Legend, Graphic, SimpleLineSymbol, SimpleMarkerSymbol, SimleRenderer,
  68.                                          SimpleFillSymbol, Color, FeatureLayer, Circle, OpenStreetMapLayer, esriRequest, GeometryService,
  69.                                          dom, parser, all,array, HorizontalSlider, HorizontalRule,
  70.                                          HorizontalRuleLabels, TextBox, domConstruct, on, esriConfig) {
  71.                 var geometryService,baseGraphics;
  72.                 //esriConfig.defaults.io.corsEnabledServers.push("services3.arcgis.com");
  73.                 //esriConfig.defaults.io.proxyUrl = "/proxy";
  74.                 //esriConfig.defaults.io.alwaysUseProxy = false;
  75.                 map = new esri.Map("mapDiv", {
  76.                     center: [-114.0288, 51.0669],
  77.                     zoom: 10
  78.                 });
  79.  
  80.                 var osmLayer = new OpenStreetMapLayer({
  81.                     id:"osmLayer",
  82.                     visible:true
  83.                 });
  84.  
  85.                 geometryService = new GeometryService("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");
  86.  
  87.                 var legend = new Legend({
  88.                     map: map,
  89.                     layerInfos: (arcgisUtils.getLegendLayers(map))
  90.                 }, "legendDiv");
  91.  
  92.                 legend.startup();
  93.                 parser.parse();
  94.                 var rulesNode = domConstruct.create("div", {}, dom.byId("slider"), "first");
  95.                 var sliderRules = new HorizontalRule({
  96.                     container: "topDecoration",
  97.                     count: 6,
  98.                     style: "width: 5px;"
  99.                 }, rulesNode);
  100.  
  101.                 // Create the labels
  102.                 var labelsNode = domConstruct.create("div", {}, dom.byId("slider"), "first");
  103.                 var sliderLabels = new HorizontalRuleLabels({
  104.                     container: "topDecoration",
  105.                     labelStyle: "font-style: italic; font-size: 0.75em",
  106.                     count: 6,
  107.                     labels: [5, 10, 15, 20, 25, 30]
  108.                 }, labelsNode);
  109.  
  110.                 var slider = new HorizontalSlider({
  111.                     name: "slider",
  112.                     value: 5,
  113.                     minimum: 5,
  114.                     maximum: 30,
  115.                     intermediateChanges: true,
  116.                     discreteValues: 6,
  117.  
  118.                     style: "width:300px;",
  119.                     onChange: function (value) {
  120.                         dom.byId("sliderValue").value = value;
  121.                         buildMap();
  122.                     }
  123.                 }, "slider");
  124.  
  125.  
  126.  
  127.                 var siteValue = dom.byId('drpSite').value;
  128.                 var drpSite = dom.byId("drpSite");
  129.                 on(drpSite, "change", function (e) {
  130.                     siteValue = dom.byId('drpSite').value;
  131.                     buildMap();
  132.                 });
  133.                 //alert(value);
  134.                 var sites = new FeatureLayer("http://services.arcgis.com/sG0VAg8cwgcmMUkE/ArcGIS/rest/services/CalgarySites/FeatureServer/0", {
  135.                     mode: FeatureLayer.MODE_ONDEMAND,
  136.                     id: "CalgarySites",
  137.                     name: "Calgary Sites",
  138.                     outFields: ["*"]
  139.                 });
  140.                 var dt = new FeatureLayer("http://services.arcgis.com/sG0VAg8cwgcmMUkE/ArcGIS/rest/services/CalgarySites%20Drive%20Time%20Final/FeatureServer/0", {
  141.                     mode: FeatureLayer.MODE_ONDEMAND,
  142.                     id: "DriveTime",
  143.                     name: "Drive Times",
  144.                 });
  145.  
  146.                 sites.setDefinitionExpression("NICKNAME='" + siteValue + "'");
  147.                 map.addLayer(osmLayer);
  148.                 map.addLayer(dt);
  149.                 map.addLayer(sites);
  150.                 sites.on("update-end", function (evt) {
  151.                     currPoint = new Graphic(evt.target.graphics[0].toJson());
  152.                     dt.setDefinitionExpression("NICKNAME='" + siteValue + "' and ToBreak=" + sliderValue.value);
  153.                 });
  154.  
  155.                 dt.on("update-end", function (evt) {
  156.                     var promises = new all({
  157.                         poilist : executeLocalSearch(currPoint)
  158.                     }).then(updateGIS);
  159.                 });
  160.  
  161.                 sliderRules.startup();
  162.                 sliderLabels.startup();
  163.  
  164.                 function buildMap() {
  165.                     sites.setDefinitionExpression("NICKNAME='" + siteValue + "'");
  166.                 }
  167.  
  168.                 function updateGIS(results) {
  169.                     var pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_DIAMOND, 6, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([0, 0, 0]), 1),
  170.                         new Color([255, 0, 0]));
  171.                     var searchResults = results.poilist.locations;
  172.                     var node = dom.byId("dbg");
  173.                     node.innerHTML = "<ol id=\"poilist\"></ol>";
  174.                     baseGraphics = array.map(searchResults, function (r) {
  175.                         var listnode = dom.byId("poilist");
  176.                         var graphic = new Graphic(r.feature);
  177.                         listnode.innerHTML += "<li>" + r.name + "</li>";
  178.                         graphic.setSymbol(pointSymbol);
  179.                         return map.graphics.add(graphic);
  180.                     });
  181.  
  182.                    
  183.                 }
  184.                 function relateGeometries(results) {
  185.                     var node = dom.byId("dbg");
  186.                     node.innerHTML = 'results.sites : ' + results.toJson();
  187.                 }
  188.                 function executeLocalSearch(graphic) {
  189.                     var params = {
  190.                         text: "pizza",
  191.                         location: JSON.stringify(graphic.geometry.toJson()),
  192.                         bbox: JSON.stringify(map.extent.toJson()),
  193.                         maxLocations: 100,
  194.                         f: "json"
  195.                     };
  196.  
  197.                     return esriRequest({
  198.                         url: "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/find",
  199.                         content: params,
  200.                         callbackParamName: "callback"
  201.                     })
  202.                 }
  203.             });
  204.  
  205.     </script>
  206. </head>
  207. <body class="claro">
  208.     <form id="form1" runat="server">
  209.     <div id="mapDiv"></div>
  210.     <div id="legendDiv"></div>
  211.     <div>
  212.         <asp:DropDownList ID="drpSite" runat="server" ></asp:DropDownList>
  213.     </div>
  214.         Minutes
  215.     <div>
  216.         <div id="slider"></div>
  217. <p><input type="text" value="5" id="sliderValue" data-dojo-type="dijit/form/TextBox" /></p>
  218.     </div>
  219.     <div id="dbg"></div>
  220.     </form>
  221. </body>
  222. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!