I am trying to customize the pop up or info window .The current pop up I have is fine except I cannot display the Html in the way I wish. I would like it to have a layout similar to this. I tried to use the infowindow.setcontent(myDiv) but lost the ability to use my clusterlayer. Any help would be fantastic, I like the functionality of the popup and if this could be done with what I have that is the best option for me.
what this does is it places a bunch of cluster markers on my map and when I click on a clustermarker it brings up the pop up. It works perfect! just cant figure out how to make the popup look the way I want.
![popup i want](/legacyfs/online/418344_Capture.PNG)
<script>
var map;
require([
"dojo/parser",
"dojo/ready",
"dojo/_base/array",
"esri/Color",
"dojo/dom-style",
"dojo/query",
"esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"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,DynamicLayer, 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: "streets",
// center: [- 86.322125, 32.367302],
// zoom: 7
//});
map = new Map("map", {
basemap: "streets",
center: [- 86.322125, 32.367302],
zoom: 7
});
//var baseLayer = new DynamicLayer("");
//map.addLayer(baseLayer);
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");
addClusters();
});
function addClusters() {
var model = @Html.Raw(Json.Serialize(Model.Signs));
var signInfo = {};
var wgs = new SpatialReference({
"wkid": 4326
});
signInfo.data = arrayUtils.map(model, function (p) {
var latlng = new Point(parseFloat(p.longitude), parseFloat(p.latitude), wgs);
var webMercator = webMercatorUtils.geographicToWebMercator(latlng);
var attributes = {
"PermitNumber": p.permitNumber,
"StructureId": p.structureId,
"Classification": p.classification
};
return {
"x": webMercator.x,
"y": webMercator.y,
"attributes": attributes
};
});
// popupTemplate to work with attributes specific to this dataset
var popupTemplate = new PopupTemplate({
"title": "",
"fieldInfos": [
{
"fieldName": "PermitNumber",
visible: true
},
{
"fieldName": "StructureId",
visible: true
},
{
"fieldName": "Classification",
visible: true
}
]
});
clusterLayer = new ClusterLayer({
"data": signInfo.data,
"distance": 75,
"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 = "https://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>
}