nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

&quot;extras/ClusterLayer&quot; causing problems

JohnPreston

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?

Vind meer berichten getagd met

Accepted answers

All comments

JonathanUihlein

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;
}

JohnPreston

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>

derekswingley1

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

JohnPreston

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

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

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

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

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

ClusterLayer.png

robertopepato_bizpoke

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"
        }
      };

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.