64 lines
2.3 KiB
JavaScript
64 lines
2.3 KiB
JavaScript
import { he } from "date-fns/locale";
|
|
import GoogleMapReact from "google-map-react";
|
|
const MapComponent = (props) => {
|
|
const { center, zoom, locale, mapTarget } = props;
|
|
|
|
let data = [center];
|
|
|
|
const ModelsMap = (map, maps) => {
|
|
//instantiate array that will hold your Json Data
|
|
let dataArray = [];
|
|
//push your Json Data in the array
|
|
{
|
|
data.map((markerJson) => dataArray.push(markerJson));
|
|
}
|
|
|
|
//Loop through the dataArray to create a marker per data using the coordinates in the json
|
|
for (let i = 0; i < dataArray.length; i++) {
|
|
let marker = new maps.Marker({
|
|
position: { lat: dataArray[i].lat, lng: dataArray[i].lng },
|
|
map,
|
|
label: dataArray[i].id
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<a
|
|
href={
|
|
"https://datamap.gov.wales/maps/pedw-dev/embed?center=" +
|
|
props.center.lng +
|
|
"," +
|
|
props.center.lat +
|
|
"&zoom=7#/"
|
|
}
|
|
rel="noreferrer noopener"
|
|
className="govuk-link govuk-link--no-underline govuk-!-font-size-14 "
|
|
target="_blank"
|
|
>
|
|
{locale === "cy"
|
|
? "Gweler y map hwn ar Datamap Cymru"
|
|
: "See this map on Datamap Wales "}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="govuk-grid-row">
|
|
<div className="govuk-grid-column-full">
|
|
<iframe
|
|
src={`https://${locale === "cy" ? "mapdata.llyw.cymru" : "datamap.gov.wales"}/maps/${mapTarget}/embed?center=${center.lng},${center.lat}&zoom=7#/`}
|
|
width={"100%"}
|
|
style={{ maxHeight: "400px" }}
|
|
height={"500px"}
|
|
className={"mappingFrame"}
|
|
></iframe>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MapComponent;
|