I am having performance issue in my application. My feature layer has 220 polygons, but when I load the map with the feature layer, the browser hangs. On the advice of forum experts, I have now developed cached services, but I don't know what to do with it. As far I know, the cache service loads PNG file. So for each extent or zooming, we have to load different levels of map. Is this right?
Secondly, I want to add interactive feature to the map where I want the user to be able to select some countries on the map. So when they click on the map, I can do some javascript action. For this to happen, I have to load the feature layer and then add my onclick functionality. Can I achieve this with Cache service? Do i have to add Feature Layer to the basemap? Please explain.
Below is Rest service
Map Name: Layers
Legend
All Layers and Tables
Dynamic Legend
Dynamic All Layers
Layers:
WorldCountries_50K (0)
WorldCountries_100K (1)
WorldCountries_250K (2)
WorldCountries_500K (3)
Description:
Copyright Text:
Spatial Reference: 102100 (3857)
Single Fused Map Cache: true
Tile Info:
Height: 256
Width: 256
DPI: 96
Levels of Detail: 20
Level ID: 0 [ Start Tile, End Tile ]
Resolution: 156543.03392800014
Scale: 5.91657527591555E8
Level ID: 1 [ Start Tile, End Tile ]
Resolution: 78271.51696399994
Scale: 2.95828763795777E8
Level ID: 2 [ Start Tile, End Tile ]
Resolution: 39135.75848200009
Scale: 1.47914381897889E8
Level ID: 3 [ Start Tile, End Tile ]
Resolution: 19567.87924099992
Scale: 7.3957190948944E7
Level ID: 4 [ Start Tile, End Tile ]
Resolution: 9783.93962049996
Scale: 3.6978595474472E7
Level ID: 5 [ Start Tile, End Tile ]
Resolution: 4891.96981024998
Scale: 1.8489297737236E7
Level ID: 6 [ Start Tile, End Tile ]
Resolution: 2445.98490512499
Scale: 9244648.868618
Level ID: 7 [ Start Tile, End Tile ]
Resolution: 1222.992452562495
Scale: 4622324.434309
Level ID: 8 [ Start Tile, End Tile ]
Resolution: 611.4962262813797
Scale: 2311162.217155
Level ID: 9 [ Start Tile, End Tile ]
Resolution: 305.74811314055756
Scale: 1155581.108577
Level ID: 10 [ Start Tile, End Tile ]
Resolution: 152.87405657041106
Scale: 577790.554289
Level ID: 11 [ Start Tile, End Tile ]
Resolution: 76.43702828507324
Scale: 288895.277144
Level ID: 12 [ Start Tile, End Tile ]
Resolution: 38.21851414253662
Scale: 144447.638572
Level ID: 13 [ Start Tile, End Tile ]
Resolution: 19.10925707126831
Scale: 72223.819286
Level ID: 14 [ Start Tile, End Tile ]
Resolution: 9.554628535634155
Scale: 36111.909643
Level ID: 15 [ Start Tile, End Tile ]
Resolution: 4.77731426794937
Scale: 18055.954822
Level ID: 16 [ Start Tile, End Tile ]
Resolution: 2.388657133974685
Scale: 9027.977411
Level ID: 17 [ Start Tile, End Tile ]
Resolution: 1.1943285668550503
Scale: 4513.988705
Level ID: 18 [ Start Tile, End Tile ]
Resolution: 0.5971642835598172
Scale: 2256.994353
Level ID: 19 [ Start Tile, End Tile ]
Resolution: 0.29858214164761665
Scale: 1128.497176
Format: PNG32
Compression Quality: 0.0
Origin: X: -2.0037508342787E7
Y: 2.0037508342787E7
Spatial Reference: 102100 (3857)
Initial Extent:
XMin: -2.6548096424178407E7
YMin: -1.4376721731989654E7
XMax: 2.204125777392E7
YMax: 2.400182614911706E7
Spatial Reference: 102100 (3857)
Full Extent:
XMin: -2.2041257773920003E7
YMin: -3.578420532071707E7
XMax: 2.204125777392E7
YMax: 2.400182614911706E7
Spatial Reference: 102100 (3857)
Units: esriMeters
Supported Image Format Types: PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP
Document Info:
Title:
Author:
Comments:
Subject:
Category:
Keywords:
AntialiasingMode: Fast
TextAntialiasingMode: Force
Supports Dynamic Layers: true
MaxRecordCount: 1000
MaxImageHeight: 2048
MaxImageWidth: 2048
Supported Query Formats: JSON, AMF
Min Scale: 5.91657527591555E8
Max Scale: 1.8489297737236E7
HTML code
Display Different Map Services Based on Zoom Level
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
<style>
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
<script src="http://js.arcgis.com/3.6/"></script>
<script>
var map;
// The satellite layer will be visible at zoom levels 0 - 11.
// The streets layer will be visible at zoom levels 11 - 15.
//
// Both are visible at zoom level 11.
require([
"esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer","dojo/dom",
"dojo/domReady!"
], function(
Map, ArcGISTiledMapServiceLayer, dom
) {
var customLods = [];
var loadCount = 0;
// satellite imagery from ArcGIS Online, use levels 0 - 11
var satellite = new ArcGISTiledMapServiceLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_WMS_Cached_v2/MapServer", {
displayLevels: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
});
satellite.on("load", addLods);
satellite.on("click","alert('hi')");
// street Map service from ArcGIS Online, use levels 11 - 15
/* var streets = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
displayLevels: [11, 12, 13, 14, 15 ],
opacity : 0.75
});
streets.on("load", addLods);*/
// popuplate an array with zoom levels
function addLods(evt) {
customLods = customLods.concat(evt.layer.tileInfo.lods);
loadCount++;
if (loadCount === 1) {
initMap();
}
}
// create the map and use the custom zoom levels
function initMap() {
console.log(" init map");
map = new Map("mapDiv", {
lods : customLods
});
map.addLayer(satellite);
try{
var info_content = "<table><tr><td><b>COUNTRY :</b></td><td style='text-align:right'>${COUNTRY}</td></tr></table>";
console.log(" adding neghbordhoods");
var infoTemplate1 = new esri.InfoTemplate("fdsfd", "Sdfd");
var featureLayer1 = new esri.layers.FeatureLayer("http://10.32.9.106:6080/arcgis/rest/services/KX_Mapping/World_Countries_WMS_Cached_v2/MapServer/0",{
infoTemplate: infoTemplate1,
id: "sd_neighborhoods"
});
dojo.connect(featureLayer1, "onLoad", function(){
console.log("feture layer added ");
//myMap.addLayer(featureLayer1);
require(["dojo/on", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "dojo/_base/Color", "esri/graphic"], function(on, SimpleFillSymbol, SimpleLineSymbol, Color, Graphic) {
on(featureLayer1, "click", function(evt) {
console.log(" added ");
// clears current selection
map.graphics.clear();
// create new graphic with selected graphic's geometry
var graphic = new Graphic(evt.graphic.geometry);
// create a new symbol for the graphic
var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_FORWARD_DIAGONAL, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.5]));
// add symbol to the graphic
graphic.setSymbol(sfs);
// map the graphic to the map
map.graphics.add(graphic);
});
});
});
}catch(e){
console.log("error "+e);
}
// map.addLayer(streets);
}
//Report which layer is being shown
function changeScale(evt) {
dom.byId("scale").innerHTML = "Level: <i>" + evt.lod.level;
if (evt.lod.level < 11) {
dom.byId("visibleLayer").innerHTML = "Layer: <i>Imagery</i>";
} else if (evt.lod.level == 11) {
// both layers are loaded
dom.byId("visibleLayer").innerHTML = "<i>Both layers currently visible</i>";
} else {
dom.byId("visibleLayer").innerHTML = "Layer: <i>Streets</i>";
}
}
});
</script>