I've been using LabelLayer, but the documentation says I should be using LabelClass and setting the LabelingInfo on my FeatureLayer instead. This seems to be another robust objects that has almost no documentation, postings in the forum or examples to work from.
Here's a link.Food Inspections in Missouri
I got no takers on my previous posting about overlapping labels, so I'm hoping one of my other options will give me the results I'm looking for. I have a layer of labels in in ArcGISDynamicServiceLayer, but the hierarchy of featureLayer vs dynamicmeant my labels were under my shaded polygon.
This shouldn't be so hard! I can just hear a web developer - "Why aren't you just using a Google map, it's so much easier? " Ugh. It works properly, it just needs county names.
I'm not getting any errors, but this doesn't work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Food Inspections in Missouri</title>
<link rel="stylesheet" href="https://community.esri.com//js.arcgis.com/3.16/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="https://community.esri.com//js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" type="text/css" href="https://community.esri.com//esri.github.io/bootstrap-map-js/dist/css/bootstrapmap.min.css">
<style type="text/css">
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#mapDiv {
padding: 0;
height: 96%;
width: 100%;
min-height: 400px;
}
.esriPopup .titlePane, .esriPopup.dark .titlePane, .esriPopup.light .titlePane {
height: 20px;
background-color:#ffffff;
}
</style>
</head>
<body class="claro">
<script type="text/javascript">
var dojoConfig = {
parseOnLoad: false,
async: true,
packages: [{
name: 'js',
location: window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/')) + "/js"
},{
name: 'bootstrap-map-js',
location: '//esri.github.io/bootstrap-map-js/src/'
}]
};
</script>
<script type="text/javascript" src="//js.arcgis.com/3.16compact/"></script>
<script type="text/javascript" >
require(["dojo/parser", "dojo/on", "dojo/dom","dojo/dom-construct", "esri/InfoTemplate",
"esri/dijit/Popup", "esri/SpatialReference", "esri/geometry/Extent","bootstrap-map-js/js/bootstrapmap",
"esri/layers/FeatureLayer", "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/LabelLayer",
"esri/layers/LabelClass",
"esri/renderers/SimpleRenderer","esri/renderers/ScaleDependentRenderer",
"esri/symbols/TextSymbol","esri/symbols/Font","esri/Color","esri/symbols/jsonUtils","js/mySymbol",
"dojo/domReady!"],
function(parser, on,dom, domConstruct, InfoTemplate,Popup,SpatialReference, Extent,
BootstrapMap,FeatureLayer,ArcGISDynamicMapServiceLayer,LabelClass, LabelLayer,SimpleRenderer,ScaleDependentRenderer,
TextSymbol,Font,Color,jsonUtils, mySymbol
){
window.app = {};
var pathName = "https://ogitest.oa.mo.gov";
var popup;
parser.parse();
app.spatialReference = new SpatialReference({ wkid: 102100 });
app.startExtent = new Extent(-10583000, 4287025, -9979000, 4980462, app.spatialReference);
popup = new Popup({
fillSymbol: mySymbol.highlightFillSymbol(),
markerSymbol: mySymbol.highlightMarkerSymbol()
}, domConstruct.create("div"));
app.map = BootstrapMap.create(dom.byId('mapDiv'), {
extent: app.startExtent,
slider:false,
autoResize:true,
scrollWheelZoom: false,
infoWindow: popup,
showLabels: true
});
app.map.on("load", function () {
app.map.disablePan();
app.map.disableMapNavigation();
});
on(app.map, "layers-add-result", function(e){
for (var i = 0; i < e.layers.length; i++) {
var result = (e.layers.error == undefined) ? "OK" : e.layers.error.message;
console.log(" - " + e.layers.layer.id + ": " + result);
}
});
var countyLayer = new FeatureLayer(pathName + "/arcgis/rest/services/BaseMap/county_simple/MapServer/0", {
id: "countyLayer",
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var countyLabelPt = new FeatureLayer(pathName + "/arcgis/rest/services/DHSS/foodInspection_label/MapServer/0", {
id:'countyLabel',
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
})
var infoTemplate = new InfoTemplate(
"View Food Inspections",
"<a href= ${Web_Url} target=_blank ;'>${Agency_Name}</a>");
var inspectionCountyLayer = new FeatureLayer(pathName+"/arcgis/rest/services/DHSS/foodInspection/MapServer/1", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate,
opacity:0.5
});
var inspectionCityLayer = new FeatureLayer(pathName+"/arcgis/rest/services/DHSS/foodInspection/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: infoTemplate
});
app.map.addLayers([countyLayer,inspectionCountyLayer,inspectionCityLayer]);
var labelClass = new LabelClass({
labelExpressionInfo: {
value: '{NAME}'
},
labelPlacement: 'center-center'
});
labelClass.symbol = jsonUtils.fromJson({
type: 'esriTS',
color: [0, 0, 255],
haloColor: [255, 255, 255],
haloSize: 1,
font: {
size: 8,
weight: 'bold',
family: 'sans-serif'
}
});
countyLabelPt.setLabelingInfo([ labelClass ]);
app.map.addLayer(countyLabelPt);
});
</script>
Click a shaded county to get information on food inspections.
<div id="mapDiv" ></div>
</body>
</html>
