POST
|
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. <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> }
... View more
08-08-2018
08:38 AM
|
0
|
0
|
414
|
Online Status |
Offline
|
Date Last Visited |
11-11-2020
02:25 AM
|