robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 2377: added enlarge map view on dnsapplication list

Browse Source 
added enlarge map view on dnsapplication list

Related work items: #23774
This commit is contained in:
Robert Bond
2026-06-09 10:04:32 +00:00
parent c39e4bcc9a
commit 7e47340326
6 changed files with 72 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dnssearchresults.js
+2
View File
@@ -11,6 +11,7 @@ export default function Search(props) {
watchedCases,
showMap,
showLoginCheck,
mapTarget
} = props;
let { t } = useTranslation();
@@ -48,6 +49,7 @@ export default function Search(props) {
watchedCases={watchedCases}
showMap={showMap}
showLoginCheck={showLoginCheck}
mapTarget={mapTarget}
/>
</div>
</div>
components/search/dnssearchresults.js
+42 -39
View File
@@ -53,7 +53,8 @@ const DNSSearchResults = (props) => {
setWatchedCases,
setWatchedCasesDetails,
showMap,
showLoginCheck
showLoginCheck,
mapTarget
} = props;
let { t } = useTranslation();
@@ -65,6 +66,7 @@ const DNSSearchResults = (props) => {
const [searchLoaded, setSearchLoaded] = useState(false);
const [showSpinnerState, setShowSpinnerState] = useState(false);
const [isMapExpanded, setIsMapExpanded] = useState(false);
// let dataArray = [];
// //push your Json Data in the array
@@ -907,9 +909,30 @@ const DNSSearchResults = (props) => {
<>
<div className="govuk-grid-row">
<div className="flex-container grid-row govuk-body case">
{showMap == "true" && isMapExpanded && (
<div className="govuk-grid-column-full">
<div className="map-container map-container--expanded">
<iframe
src={`https://datamap.gov.wales/maps/${mapTarget}/embed?center=-3.6553189192727347,52.214962933659415&zoom=2#/`}
width="100%"
height="600"
frameBorder="0"
title="Map"
/>
<button
type="button"
className="govuk-link map-expand-link"
onClick={() => setIsMapExpanded(false)}
>
Reduce map
</button>
</div>
</div>
)}
<div
className={
showMap == "true"
showMap == "true" && !isMapExpanded
? "govuk-grid-column-one-half"
: "govuk-grid-column-two-thirds"
}
@@ -965,50 +988,30 @@ const DNSSearchResults = (props) => {
</p>
</div>
{showMap == "true" && (
{showMap == "true" && !isMapExpanded && (
<div className="govuk-grid-column-one-half">
<div
// style={{
// height: "45vh",
// width: "100%",
// }}
>
{/* <GoogleMapReact
options={function (maps) {
return {
overviewMapControl: true,
mapTypeControl: true,
};
}}
bootstrapURLKeys={{
key: "AIzaSyCzeVrHt544bp_72YCFkw21eDsmI2JEsQo",
}}
defaultCenter={{
id: "",
lat: 52.412272,
lng: -3.437989,
}}
defaultZoom={7}
onGoogleApiLoaded={({ map, maps }) =>
ModelsMap(map, maps)
}
/> */}
<div className="map-container">
<iframe
src={
"https://datamap.gov.wales/maps/pedw-dev/embed?center=-3.6553189192727347,52.214962933659415&zoom=2#/"
}
//src={"https://datamap.gov.wales/maps/pedw-dev/embed#/"}
width={"100%"}
style={{ maxHeight: "400px" }}
height={"500px"}
className={"mappingFrame"}
></iframe>
src={`https://datamap.gov.wales/maps/${mapTarget}/embed?center=-3.6553189192727347,52.214962933659415&zoom=2#/`}
width="100%"
height="500"
frameBorder="0"
title="Map"
/>
</div>
<button
type="button "
className="govuk-link map-expand-link mapSizeButton"
onClick={() => setIsMapExpanded(true)}
>
Enlarge map
</button>
</div>
)}
</div>
</div>
{searchResultsObj["@odata.count"] > 5 && (
<div id="recordCountSelect" className="govuk-grid-row">
<div className="govuk-form-group">