Michael,
OK I have verified that there seems to be a bug where locally hosted images do not work. This is something you will have to report to esri tech support. Here is a sample that demos the issue. The Picturemarker symbol works if you have a directory called images and a image named search-pointer.png as it will work when adding it to the view as a graphic but will not work if used as a sublayers renderer symbol:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>MapImageLayer - Toggle sublayer visibility - 4.11</title>
<link rel="stylesheet" href="http://js.arcgis.com/4.11/esri/themes/light/main.css" />
<script src="http://js.arcgis.com/4.11/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/MapImageLayer",
"esri/symbols/PictureMarkerSymbol",
"esri/Graphic"
], function (Map, MapView, MapImageLayer, PictureMarkerSymbol, Graphic) {
var renderer = {
type: "simple",
symbol: {
type: "simple-line",
color: [255, 255, 255, 0.5],
width: 0.75,
style: "long-dash-dot-dot"
}
};
var pms = new PictureMarkerSymbol({
url: 'images/search-pointer.png',
width: "22px",
height: "22px"
});
var layer = new MapImageLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
sublayers: [{
id: 2,
visible: true
},
{
id: 4,
visible: false,
title: "Railroads",
renderer: renderer,
source: {
type: "data-layer",
dataSource: {
type: "table",
workspaceId: "MyDatabaseWorkspaceIDSSR2",
dataSourceName: "ss6.gdb.Railroads"
}
}
},
{
id: 1,
visible: true
},
{
id: 0,
renderer: {
type: 'simple',
symbol: pms
},
visible: true
}
]
});
var map = new Map({
basemap: "dark-gray",
layers: [layer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [-99, 39]
});
view.when( function(){
var gra = new Graphic({
geometry: view.center,
symbol: pms
});
view.graphics.add(gra);
});
layer.when(function () {
layer.sublayers.map(function (sublayer) {
var id = sublayer.id;
var visible = sublayer.visible;
var node = document.querySelector(
".sublayers-item[data-id='" + id + "']"
);
if (visible) {
node.classList.add("visible-layer");
}
});
});
var sublayersElement = document.querySelector(".sublayers");
sublayersElement.addEventListener("click", function (event) {
var id = event.target.getAttribute("data-id");
if (id) {
var sublayer = layer.findSublayerById(parseInt(id));
var node = document.querySelector(
".sublayers-item[data-id='" + id + "']"
);
sublayer.visible = !sublayer.visible;
node.classList.toggle("visible-layer");
}
});
});
</script>
<style>
html,
body {
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
height: 60px;
width: 100%;
}
.sublayers {
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.sublayers-item {
flex-grow: 4;
background-color: rgba(34, 111, 14, 0.5);
color: #fff;
margin: 1px;
width: 50%;
padding: 20px;
overflow: auto;
text-align: center;
cursor: pointer;
font-size: 0.7em;
}
.visible-layer {
color: #fff;
background-color: #226f0e;
}
</style>
</head>
<body>
<div id="viewDiv"></div>
<div class="footer">
<div class="sublayers">
<div class="sublayers-item" data-id="0">Cities</div>
<div class="sublayers-item" data-id="1">Highways</div>
<div class="sublayers-item" data-id="4">Railroads</div>
<div class="sublayers-item" data-id="2">States</div>
</div>
</div>
</body>
</html>