Consulta de la API javascript

RodrigoAbadia_Mondragon · ‎09-28-2015

Buenas tardes, tengo la siguiente consulta.

Utilizo ArcGis 10.2 y tengo una geodatabase con varias tablas. Una de la tablas corresponde a los departamentos de Colombia, son 35 seccionales para este caso son departamentos, cada departamento tiene un id que es el código de departamento.

Por otro lado tengo también una tabla texto con las direcciones y teléfonos de ubicación de las sedes de esos departamentos con su código de departamento, respectivamente.

Necesito mostrar en en un portal web todo el mapa de tal manera que al hacer clic en cualquier departamento me muestre en un popup el nombre del departamento, la dirección y el teléfono, obviamente para hacer esto habría que hacer un join entre la tabla espacial y la tabla con los datos. Por lo anterior me surgen varias preguntas:

1 Podria hacer lo anterior utilizando la API de javascript…?,.

2 Si utilizo la APi de javascript, como se haría el join entre la tabla espacial y la tabla de datos…?

3 La idea es mostrar este mapa en un portal web por eso se me ocurrió hacerlo en javascript.

4 Al pasar el mouse por encima del polígono de cada departamento se deberían ver los datos de este departamento, como se ilustra en este ejemplo: (https://developers.arcgis.com/javascript/jssamples/fl_hover.html)https://developers.arcgis.com/javascript/jssamples/fl_hover.html

5 Desde javascript me puedo conectar a una geodatabase con mis datos…?

ChrisSmith7 · ‎09-28-2015

I translated your question from Google... I believe I understand everything:

1) Yes - you would need ArcGIS Server/ArcGIS Online (AGOL) as well

2) You can create joins using JoinDataSource | API Reference | ArcGIS API for JavaScript

Here's a Github example of joins:

developer-support/web-js/join-data-source at master · Esri/developer-support · GitHub

And a live sample:

Dynamic Layer

Here's the code:

<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Layer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    
    <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>
    html, body, #mapDiv, .map.container {
      padding:0;
      margin:0;
      height:100%;
      width:100%;
    }
  #title {
        position: relative;
        top: 0;
        padding: 10px;
        background-color: #999;
        font: 30px Segoe UI;
        text-align: left;
  border-style: solid;
  border-width: medium;
  border-left-style: hidden;
  border-top-style: hidden;
  border-right-style: hidden;
    }

    </style>


    <script src="http://js.arcgis.com/3.14/"></script>
    <script>
    var map;
  var AGDynamicLayer;
    require([
      "esri/map", 
      "esri/layers/ArcGISDynamicMapServiceLayer",
      "esri/layers/DynamicLayerInfo",
      "esri/layers/TableDataSource",
      "esri/layers/LayerDataSource",
      "esri/layers/LayerMapSource",
      "esri/symbols/SimpleFillSymbol",
   "esri/tasks/GenerateRendererParameters",
      "esri/tasks/ClassBreaksDefinition",
      "esri/tasks/AlgorithmicColorRamp",
   "esri/tasks/GenerateRendererTask", 
      "esri/layers/LayerDrawingOptions",
   "esri/symbols/SimpleLineSymbol",
   "esri/layers/JoinDataSource",
   "esri/config",
      "esri/Color",
      "dojo/domReady!"
    ], function(
      Map, 
      ArcGISDynamicMapServiceLayer,
      DynamicLayerInfo,
      TableDataSource,
      LayerDataSource,
      LayerMapSource,
      SimpleFillSymbol,
   GenerateRendererParameters,
      ClassBreaksDefinition,
      AlgorithmicColorRamp,
   GenerateRendererTask,
      LayerDrawingOptions,
      SimpleLineSymbol,
   JoinDataSource,
      esriConfig,
      Color
    ) {
        
      esriConfig.defaults.io.proxyUrl = "/sproxy/";
      map = new Map("mapDiv", {
        basemap: "streets",
        center: [-97.453079, 37.696775],
        zoom: 6
      });
        
      //create a new ArcGISDynamicMapServiceLayer layer based on DynamicLayerInfos. 
        AGDynamicLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer",{
  id: "states",
  opacity: 0.7,
  visible: false
  });
  AGDynamicLayer.setVisibleLayers([3]);

  map.addLayer(AGDynamicLayer);
  map.on("update-start", addJoin);
    
   function addJoin(){
   
  var joinDataSource = new JoinDataSource();
  //Using LayerMapSource
  var layerMapSource = new LayerMapSource({mapLayerId:3});

  var rightTableSource  = new LayerDataSource({
   "dataSource": 
            {
                "type": "table",
                "dataSourceName": "ancestry",
                "workspaceId": "CensusFileGDBWorkspaceID"
                //the workspaceID is for the registered file geodatabase, SDE or Shapefile workspace.       
                //Basically, there are two ways to enable this workspace ID
                //1. From ArcMap before publishing the services
                //For more information please take a look about this documentation talks about
                //"Enabling dynamic layers on a map service in ArcGIS for Desktop"
                //http://desktop.arcgis.com/en/desktop/latest/map/publish-map-services/enabling-dynamic-layers-on-a-ma...
                
                //2. Or you can go to the ArcGIS Server Manager to manually add workspace ID for existing services
                //Please check this documenation as a reference: 
                //http://desktop.arcgis.com/en/desktop/latest/map/publish-map-services/enabling-dynamic-layers-on-a-ma...
            }
  });
   
  joinDataSource.leftTableSource = layerMapSource;
        joinDataSource.rightTableSource = rightTableSource;
        joinDataSource.leftTableKey = "STATE_NAME";
        joinDataSource.rightTableKey = "State";
        joinDataSource.joinType = "left-outer-join";


        //source for dynamic layer with join
        var joinLayerDataSource = new LayerDataSource();
        joinLayerDataSource.dataSource = joinDataSource;
        
  //Create DynamicLayerInfo and set it's source to joinLayerDataSource
  var dynamicLayerInfos = [];
  var dynamicLayerInfo = new DynamicLayerInfo;
  dynamicLayerInfo.id = 3;

  dynamicLayerInfo.source = joinLayerDataSource;
  dynamicLayerInfos.push(dynamicLayerInfo);

  AGDynamicLayer.setDynamicLayerInfos(dynamicLayerInfos);
  generateRenderer(joinLayerDataSource);
  }

  function generateRenderer(joinLayerDataSource){
  //make the default symbol
  var symbol = new SimpleFillSymbol(
            SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(
              SimpleLineSymbol.STYLE_SOLID,
              new Color([150, 150, 150, 0.5])));
       

  var classDef = new ClassBreaksDefinition();
     classDef.classificationField = "ancestry.American";
     classDef.classificationMethod = "natural-breaks";
  classDef.normalizationField = "states.POP07_SQMI";
     classDef.breakCount = 7;
     //classDef.baseSymbol = symbol;
     
     var colorRamp = new AlgorithmicColorRamp();
     colorRamp.fromColor = Color.fromHex("#edf8fb");
     colorRamp.toColor = Color.fromHex("#005824");
     colorRamp.algorithm = "hsv";
     classDef.colorRamp = colorRamp;
  var CencusUrl = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/dynamicLayer";
  var generateRendererTask = new GenerateRendererTask(CencusUrl);

  var generateRendererParameters = new GenerateRendererParameters();
  generateRendererParameters.classificationDefinition = classDef;

  generateRendererTask.source = joinLayerDataSource;
  generateRendererTask.execute(generateRendererParameters, applyRenderer, errorHandler);

  function applyRenderer(renderer){
  var optionsArray = [];
  var lyrdrawingOptions = new LayerDrawingOptions();
  //lyrDrawingOptions.layerId = 3;
  lyrdrawingOptions.renderer = renderer; 
  // set the drawing options for the relevant layer
  // optionsArray index corresponds to layer index in the map service
  optionsArray[3] = lyrdrawingOptions;
  map.getLayer("states").setLayerDrawingOptions(optionsArray);
  map.getLayer("states").show();

  }

  function errorHandler(err) {
          // console.log("Something broke, error: ", err);
          console.log("error: ", JSON.stringify(err));
        }
     }
  });
    </script>
  </head>
  
  <body class="claro">
  <div id="mapDiv"><div id="title">Using Join Data Source</div></div>

</body>


</html>

3) It's a good idea - the API can do many things. The sky is the limit!

4) Here's some info on representing joined data in the infoWindow:

Represent joined data in Info window (ArcGIS JSAPI 3.1) - Geographic Information Systems Stack Excha...

5) Yes - you can create map services and you can join to them as well as SQL databases.

View solution in original post

ChrisSmith7 · ‎09-28-2015