&quot;extras/ClusterLayer&quot; causing problems

JohnPreston · ‎04-07-2014

Hi I am trying to add Clustering to my map and am having a problem with "extras/ClusterLayer". I have downloaded the "extras" file and added this code...

var dojoConfig = {
        paths: {
            extras: "../StormWater/extras"
        }
      };

I added "extras/ClusterLayer" to the require([...]) and added "CustomLayer" to the "function(...)" as in example http://projectserver.dataplus.ru/arcgis_js_api/sdk/jssamples/layers_point_clustering.html.

However now the map does not display. Any ideas?

RobertoPepato · ‎04-07-2014

Hi I am trying to add Clustering to my map and am having a problem with "extras/ClusterLayer". I have downloaded the "extras" file and added this code...

var dojoConfig = {
        paths: {
            extras: "../StormWater/extras"
        }
      };

I added "extras/ClusterLayer" to the require([...]) and added "CustomLayer" to the "function(...)" as in example http://projectserver.dataplus.ru/arcgis_js_api/sdk/jssamples/layers_point_clustering.html.

However now the map does not display. Any ideas?

What happens if you change it to

var dojoConfig = { 
        paths: {
            extras: location.pathname.replace(/\/[^/]+$/, "") + "/StormWater/extras"
        }
      };

?

JohnPreston · ‎04-08-2014

Same result, the map doesn't display. When I launched the page in Firefox I got "File Not found" error see attached picture.

derekswingley1 · ‎04-08-2014

Are you able to download and run the clustering sample locally? From the screen shot you posted, the API is looking for extras/ClusterLayer on js.arcgis.com, which is why it's 404'ing (it needs to be loaded from your web server, not js.arcgis.com). The fix will be to make sure you have your dojoConfig set up properly.

You also mentioned "CustomLayer" in your first post. I'm guessing that's a typo but wanted to point it out in case you're mixing up ClusterLayer and CustomLayer in your code which could break things since one is likely undefined.

As an aside, where did you get the link to the dataplus.ru site? They're hosting an older version of the SDK. You should always reference pages from developers.arcgis.com for the latest JS API SDK content. Here's the clustering sample.

JohnPreston · ‎04-08-2014

Thank you,
Yes CustomLayer is a typo.

No, the sample didn't run locally. Do you have a resource so I can configure it correctly?

derekswingley1 · ‎04-08-2014

First thing is to verify you're using a web server (accessing files over http:// as opposed to file://). Are you using a web server? If so, you can download the .zip, uncompress, drop that folder on a web server and it should work.

JohnPreston · ‎04-08-2014

I got everything work great using from local machine. I then got the cluster to work with data from SQL. I found that the snag was when I used this reference...
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

I'm using jquery mobile. ArcGIS and jquery mobile has worked together on other pages, but having a problem with ClusterLayer. Any ideas on what the problem may be?

derekswingley1 · ‎04-09-2014

I really couldn't say...if you can post a simple test page that reproduces your issue we could take a look.

JohnPreston · ‎04-10-2014

Not sure if this is what you want...I took the point clusterting example and added the jquery and jquery mobile references. When this reference is in the code the map does not display...but map displays when I remove it.

<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

Here is whole page...
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Cluster</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      #map{ margin: 0; padding: 0; }

      /* center the image in the popup */
      .esriViewPopup .gallery { margin: 0 auto !important; }
    </style>

    <script>
      // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
      // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
      var dojoConfig = {
        paths: {
          extras: location.pathname.replace(/\/[^/]+$/, "") + "/extras"
        }
      };
    </script>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
        var map;
        require([
        "dojo/parser",
        "dojo/ready",
        "dojo/_base/array",
        "esri/Color",
        "dojo/dom-style",
        "dojo/query",

        "esri/map",
        "esri/request",
        "esri/graphic",
        "esri/geometry/Extent",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/PictureMarkerSymbol",
        "esri/renderers/ClassBreaksRenderer",

        "esri/layers/GraphicsLayer",
        "esri/SpatialReference",
        "esri/dijit/PopupTemplate",
        "esri/geometry/Point",
        "esri/geometry/webMercatorUtils",

        "extras/ClusterLayer",

        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ], function (
        parser, ready, arrayUtils, Color, domStyle, query,
        Map, esriRequest, Graphic, Extent,
        SimpleMarkerSymbol, SimpleFillSymbol, PictureMarkerSymbol, ClassBreaksRenderer,
        GraphicsLayer, SpatialReference, PopupTemplate, Point, webMercatorUtils,
        ClusterLayer
      ) {
          ready(function () {
              parser.parse();

              var clusterLayer;
              var popupOptions = {
                  "markerSymbol": new SimpleMarkerSymbol("circle", 20, null, new Color([0, 0, 0, 0.25])),
                  "marginLeft": "20",
                  "marginTop": "20"
              };
              map = new Map("map", {
                  basemap: "oceans",
                  center: [-117.789, 33.543],
                  zoom: 13
              });

              map.on("load", function () {
                  // hide the popup's ZoomTo link as it doesn't make sense for cluster features
                  domStyle.set(query("a.action.zoomTo")[0], "display", "none");

                  // get the latest 1000 photos from instagram/laguna beach
                  var photos = esriRequest({
                      "url": "data/1000-photos.json",
                      "handleAs": "json"
                  });
                  photos.then(addClusters, error);
              });

              function addClusters(resp) {
                  var photoInfo = {};
                  var wgs = new SpatialReference({
                      "wkid": 4326
                  });
                  photoInfo.data = arrayUtils.map(resp, function (p) {
                      var latlng = new Point(parseFloat(p.lng), parseFloat(p.lat), wgs);
                      var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
                      var attributes = {
                          "Caption": p.caption,
                          "Name": p.full_name,
                          "Image": p.image,
                          "Link": p.link
                      };
                      return {
                          "x": webMercator.x,
                          "y": webMercator.y,
                          "attributes": attributes
                      };
                  });

                  // popupTemplate to work with attributes specific to this dataset
                  var popupTemplate = PopupTemplate({
                      "title": "",
                      "fieldInfos": [{
                          "fieldName": "Caption",
                          visible: true
                      }, {
                          "fieldName": "Name",
                          "label": "By",
                          visible: true
                      }, {
                          "fieldName": "Link",
                          "label": "On Instagram",
                          visible: true
                      }],
                      "mediaInfos": [{
                          "title": "",
                          "caption": "",
                          "type": "image",
                          "value": {
                              "sourceURL": "{Image}",
                              "linkURL": "{Link}"
                          }
                      }]
                  });

                  // cluster layer that uses OpenLayers style clustering
                  clusterLayer = new ClusterLayer({
                      "data": photoInfo.data,
                      "distance": 100,
                      "id": "clusters",
                      "labelColor": "#fff",
                      "labelOffset": 10,
                      "resolution": map.extent.getWidth() / map.width,
                      "singleColor": "#888",
                      "singleTemplate": popupTemplate
                  });
                  var defaultSym = new SimpleMarkerSymbol().setSize(4);
                  var renderer = new ClassBreaksRenderer(defaultSym, "clusterCount");

                  var picBaseUrl = "http://static.arcgis.com/images/Symbols/Shapes/";
                  var blue = new PictureMarkerSymbol(picBaseUrl + "BluePin1LargeB.png", 32, 32).setOffset(0, 15);
                  var green = new PictureMarkerSymbol(picBaseUrl + "GreenPin1LargeB.png", 64, 64).setOffset(0, 15);
                  var red = new PictureMarkerSymbol(picBaseUrl + "RedPin1LargeB.png", 72, 72).setOffset(0, 15);
                  renderer.addBreak(0, 2, blue);
                  renderer.addBreak(2, 200, green);
                  renderer.addBreak(200, 1001, red);

                  clusterLayer.setRenderer(renderer);
                  map.addLayer(clusterLayer);

                  // close the info window when the map is clicked
                  map.on("click", cleanUp);
                  // close the info window when esc is pressed
                  map.on("key-down", function (e) {
                      if (e.keyCode === 27) {
                          cleanUp();
                      }
                  });
              }

              function cleanUp() {
                  map.infoWindow.hide();
                  clusterLayer.clearSingles();
              }

              function error(err) {
                  console.log("something failed: ", err);
              }

              // show cluster extents...
              // never called directly but useful from the console
              window.showExtents = function () {
                  var extents = map.getLayer("clusterExtents");
                  if (extents) {
                      map.removeLayer(extents);
                  }
                  extents = new GraphicsLayer({ id: "clusterExtents" });
                  var sym = new SimpleFillSymbol().setColor(new Color([205, 193, 197, 0.5]));

                  arrayUtils.forEach(clusterLayer._clusters, function (c, idx) {
                      var e = c.attributes.extent;
                      extents.add(new Graphic(new Extent(e[0], e[1], e[2], e[3], map.spatialReference), sym));
                  }, this);
                  map.addLayer(extents, 0);
              }
          });
      });
    </script>
</head>

<body>
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
</body>
</html>

JonathanUihlein · ‎04-10-2014

You probably know this but it's because when you include the jquery-mobile script, it adds a bunch of CSS rules to your page.

I have a temporary solution but you'll want to find a better one eventually:

In tundra.css, change the following from relative to absolute:


.dijitBorderContainer, .dijitBorderContainerNoGutter {
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.dijitBorderContainer, .dijitBorderContainerNoGutter {
    overflow: hidden;
    position: absolute;
    z-index: 0;
}

&amp;quot;extras/ClusterLayer&amp;quot; causing problems

"extras/ClusterLayer" causing problems