Merged PR 2451: included dynamic legend on enlarged map

included dynamic legend on enlarged map

Related work items: #23879

components/search/dnssearchresults.js

@@ -68,86 +68,9 @@ const DNSSearchResults = (props) => {
     const [showSpinnerState, setShowSpinnerState] = useState(false);
     const [isMapExpanded, setIsMapExpanded] = useState(false);
 
-    // let dataArray = [];
+    const mapLegend = mapTarget.replaceAll("-", "_");
-    // //push your Json Data in the array
-    // if (showMap == "true") {
-    //     dnsCoords.map((item) => {
-    //         let point = new OSPoint(
-    //             item.pinswg_anticipatedgridrefnorthing ||
-    //                 item.pinswg_anticipatedgridreferencenorthingtext ||
-    //                 0,
-    //             item.pinswg_anticipatedgridrefeasting ||
-    //                 item.pinswg_anticipatedgridreferenceeastingtext ||
-    //                 0
-    //         );
-    //         let siteCoords = point.toOSGB36();
-    //         //console.log(siteCoords);
-    //         //console.log(item);
-    //         dataArray.push({
-    //             appellant:
-    //                 item[
-    //                     "_pinswg_appellant_value@OData.Community.Display.V1.FormattedValue"
-    //                 ],
-    //             name: item.pinswg_projectname,
-    //             lat: parseFloat(siteCoords.latitude),
-    //             lng: parseFloat(siteCoords.longitude),
-    //             title: item.pinswg_name,
-    //         });
-    //     });
-    // }
 
-    //console.log(dataArray);
+    console.log(mapLegend);
-
-    // const ModelsMap = (map, maps) => {
-    //     //instantiate array that will hold your Json Data
-    //     //console.log("here");
-    //     var prev_infowindow = false;
-    //     //Loop through the dataArray to create a marker per data using the coordinates in the json
-    //     console.log(dataArray.length);
-    //     for (let i = 0; i < dataArray.length; i++) {
-    //         const infowindow = new google.maps.InfoWindow({
-    //             content:
-    //                 "<div>" +
-    //                 (_.isEmpty(dataArray[i].name)
-    //                     ? ""
-    //                     : dataArray[i].name.indexOf(";") > 0
-    //                     ? router.locale == "cy"
-    //                         ? dataArray[i].name.split(";")[1]
-    //                         : dataArray[i].name.split(";")[0]
-    //                     : dataArray[i].name) +
-    //                 "</div>" +
-    //                 (dataArray[i].appellant != null
-    //                     ? "<div>" + dataArray[i].appellant + "</div>"
-    //                     : "") +
-    //                 "<div>" +
-    //                 dataArray[i].title +
-    //                 "</div>",
-    //         });
-    //         let marker = new maps.Marker({
-    //             position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
-    //             title: _.isEmpty(dataArray[i].name)
-    //                 ? ""
-    //                 : dataArray[i].name.indexOf(";") > 0
-    //                 ? router.locale == "cy"
-    //                     ? dataArray[i].name.split(";")[1]
-    //                     : dataArray[i].name.split(";")[0]
-    //                 : dataArray[i].name,
-    //             map,
-    //         });
-    //         marker.addListener("click", () => {
-    //             if (prev_infowindow) {
-    //                 prev_infowindow.close();
-    //             }
-
-    //             prev_infowindow = infowindow;
-    //             infowindow.open({
-    //                 anchor: marker,
-    //                 map,
-    //                 shouldFocus: true,
-    //             });
-    //         });
-    //     }
-    // };
 
     let spinnerState = () => {
         showSpinnerState == true
@@ -972,6 +895,16 @@ const DNSSearchResults = (props) => {
                         </p>
                     </div>
 
+                    {showMap == "true" && isMapExpanded && (
+                        <div>
+                            <h3>Map Legend</h3>
+                            <img
+                                src={`https://datamap.gov.wales/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image/png&height=12&width=12&layer=geonode:${mapLegend}&style=&version=1.3.0&SLD_VERSION=1.1.0&LEGEND_OPTIONS=forceLabels:on&LANGUAGE=${locale}&SCALE=2000000&access_token=n3cRovjblNL1ND9bmzu6S9fupzg3wo`}
+                                width="120%"
+                            />
+                        </div>
+                    )}
+
                     {showMap == "true" && !isMapExpanded && (
                         <div className="govuk-grid-column-one-half">
                             <div className="map-container">

middleware.js

@@ -9,7 +9,7 @@ export function middleware(request) {
             process.env.NODE_ENV === "production" ? "" : `'unsafe-eval'`
         };
         style-src 'self' 'unsafe-eval' 'unsafe-inline';
-        img-src 'self' 'unsafe-inline'  https://www.gov.wales https://gov.wales https://fonts.gstatic.com https://www.googletagmanager.com  blob: data: https://img.youtube.com;
+        img-src 'self' 'unsafe-inline'  https://datamap.gov.wales/  https://www.gov.wales https://gov.wales https://fonts.gstatic.com https://www.googletagmanager.com  blob: data: https://img.youtube.com;
         connect-src 'self' http://127.0.0.1 https://uksouth-1.in.applicationinsights.azure.com https://ukwest-0.in.applicationinsights.azure.com https://js.monitor.azure.com https://region1.google-analytics.com;
         font-src 'self'  https://pro.fontawesome.com/ https://fonts.gstatic.com/ ;
         object-src 'none';