Now click or tap ${legendSymbols.join(\" or \")} with the problem.
`;\r\n\r\n } else {\r\n msgTitle = 'Select a location';\r\n msgBody = `
Now click or tap on the map to select a location.
`;\r\n }\r\n\r\n showMessageModal(msgTitle, msgBody,'OK', modalType.info);\r\n}\r\n\r\nfunction zoomToAddress(lat:number,lng:number,address:string) {\r\n\r\n map.setView(L.latLng(lat, lng), 12);\r\n showModalAfterLocated();\r\n\r\n}\r\n\r\nfunction returnAddresses(searchText: string) {\r\n let addressSearchSpinner =Sorry, there is a problem finding the address.
`;\r\n\r\n console.error(textStatus);\r\n })\r\n\r\n}\r\n\r\nfunction addressSearchFromDesktop() {\r\n \r\n let sidEl = You must zoom in to select a location.
1. Use the search above or zoom into the map to find the location.
2. Click or tap ${legendSymbols.join(\" or \")} to select a location.
1. Use the search above or zoom into the map to find the location.
2. Click or tap on the map to select a location.
Map Key:
${mapKey.join('
')}
Case ref: ${feature.properties.CASENO}
Closed on ${new Date(feature.properties.DATE_CLOSED).toDateString()}
Case ref: ${feature.properties.CASENO}
Raised on ${new Date(feature.properties.DATE_CREATED).toDateString()}
${feature.properties.NOTES}
`;\r\n }\r\n } else {\r\n html = '';\r\n for (const key of Object.keys(feature.properties)) {\r\n const value = feature.properties[key];\r\n if (value.STATUS == 'FIVE') {\r\n html += `Case ref: ${value.CASENO}
Closed on ${new Date(value.DATE_CLOSED).toDateString()}
Case ref: ${value.CASENO}
Raised on ${new Date(value.DATE_CREATED).toDateString()}
${value.NOTES}
`;\r\n }\r\n html += ``;\r\n }\r\n }\r\n return html;\r\n}\r\n\r\nfunction postMessageToForm(latitude: number, longitude: number, assetid: string = '', case_type: string = '') {\r\n let mapResult = {};\r\n let mapResultDefault = { latitude: latitude, longitude: longitude, assetid: assetid, case_type: case_type };\r\n\r\n if (assetAttributes && Object.keys(assetAttributes).length != 0) {\r\n mapResult = { ...mapResultDefault, ...assetAttributes };\r\n } else {\r\n mapResult = mapResultDefault;\r\n }\r\n window.parent.postMessage(mapResult, \"*\");\r\n}\r\n\r\nfunction getAssetAttributes(): string {\r\n let assetAttributeParams: string = '';\r\n if (assetAttributes) {\r\n for (let attribute in assetAttributes) {\r\n assetAttributeParams += \"&\" + attribute + \"=\" + assetAttributes[attribute];\r\n }\r\n }\r\n return assetAttributeParams;\r\n}\r\n\r\nfunction clickEventHandlerForYesButton() {\r\n let lat: number = selectedLatForDisplay;\r\n let lng: number = selectedLngForDisplay;\r\n let newLat: number|null = null;\r\n let newLng: number | null = null;\r\n //let latDiff: number;\r\n //let lngDiff: number;\r\n\r\n //*Convert lat / lng to BNG coordinates for re-conversion if non asset\r\n let xyConverted = crs.project({ lat, lng });\r\n let xForConversion = xyConverted.x;\r\n let yForConversion = xyConverted.y;\r\n\r\n const handleClick = function (lat: number, lng: number) {\r\n if (inForm) {\r\n map.closePopup();\r\n if (highlightLayer) {\r\n highlightLayer.addTo(map);\r\n }\r\n map.panTo(L.latLng(selectedLatForDisplay, selectedLngForDisplay));\r\n postMessageToForm(lat, lng, selectedAssetId, case_type?.toString());\r\n } else {\r\n //*show working screen\r\n $('#working').css(\"visibility\", \"visible\");\r\n //*check for additional asset attributes\r\n let assetAttributeParams: string = getAssetAttributes();\r\n let firmstepUrl: string = `${mapSettings.formUrl}?&lat=${lat}&lng=${lng}&assetid=${selectedAssetId}&case_type=${case_type}${assetAttributeParams}`;\r\n //*add any additional parameters included in the map url to the form url\r\n if (optParams) {\r\n firmstepUrl += optParams;\r\n }\r\n window.open(firmstepUrl, '_top');\r\n }\r\n };\r\n\r\n //*Set the coordinates for conversion using the asset feature if an asset\r\n if (selectedFeatureX && selectedFeatureY) {\r\n xForConversion = selectedFeatureX;\r\n yForConversion = selectedFeatureY;\r\n }\r\n \r\n //**Get the more accurate lat/long for both assets with existing BNG coordinates, or non assets with inaccurate transformed coordinates*/\r\n $('#working').css(\"visibility\", \"visible\");\r\n let accConversion = returnLatLongFromOScoords(xForConversion, yForConversion);\r\n accConversion.then((coords) => {\r\n newLat = coords.lat;\r\n newLng = coords.lng;\r\n //latDiff = Math.abs(lat - newLat);\r\n //lngDiff = Math.abs(lng - newLng);\r\n\r\n }).catch((error) => {\r\n sendErrorEmail(`returnLatLongFromOScoords Error. Using Lat: ${lat} Lng: ${lng} Error msg: ${error.statusText}`);\r\n //console.log(error); no point writing to console as redirecting to form\r\n\r\n }).finally(() => {\r\n $('#working').css(\"visibility\", \"hidden\");\r\n if (newLat == null || newLng == null) {\r\n handleClick(lat, lng);\r\n } else {\r\n handleClick(newLat, newLng);\r\n }\r\n \r\n })\r\n\r\n}\r\n\r\n//*event handler to close the popup when the 'Yes' button is clicked on the report a fault popup\r\n$('#mapid').on('click', '#btnNewFault', function (e) {\r\n clickEventHandlerForYesButton();\r\n});\r\n\r\n\r\nfunction returnHTMLforNewFaultPopup(lat: number, lng: number, land_type: string = '', assetid: string = ''): Promise
${msgText}
`;\r\n googleDiv.appendChild(panoDiv);\r\n\r\n var heading = google.maps.geometry.spherical.computeHeading(data?.location?.latLng!, googleLatLng);\r\n\r\n let panOptions: google.maps.StreetViewPanoramaOptions = {\r\n //position: googleLatLng,\r\n pano: data?.location?.pano,\r\n pov: {\r\n heading: heading,\r\n pitch: 0\r\n },\r\n addressControl: false,\r\n clickToGo: false,\r\n disableDefaultUI: false,\r\n disableDoubleClickZoom: true,\r\n enableCloseButton: false,\r\n fullscreenControl: true,\r\n linksControl: false,\r\n motionTracking: true,\r\n visible:true\r\n };\r\n pano = new google.maps.StreetViewPanorama(panoDiv, panOptions);\r\n let panid: string;\r\n\r\n } else {\r\n msgText = \"as an additional guide, here's an aerial view of this location...\";\r\n googleDiv.innerHTML = `${msgText}
`;\r\n googleDiv.appendChild(panoDiv);\r\n\r\n let styles: any = {\r\n hide: [\r\n {\r\n featureType: 'poi.business',\r\n stylers: [{ visibility: 'off' }]\r\n }\r\n ]\r\n };\r\n\r\n const gMap = new google.maps.Map(panoDiv, {\r\n center: googleLatLng,\r\n draggable: false,\r\n mapTypeId: google.maps.MapTypeId.HYBRID,\r\n tilt: 45,\r\n zoom: 18,\r\n mapTypeControl: false,\r\n panControl: false,\r\n rotateControl: false,\r\n scaleControl: true,\r\n scrollwheel: true,\r\n streetViewControl: false,\r\n zoomControl: true\r\n });\r\n\r\n gMap.setOptions({ styles: styles['hide'] });\r\n\r\n let marker = new google.maps.Marker({\r\n clickable: false,\r\n map: gMap,\r\n position: googleLatLng\r\n });\r\n\r\n }\r\n\r\n });\r\n }\r\n \r\n let pArray: Array${mapSettings.private_Land_Msg}
`;\r\n }\r\n let onLocationDescriptionResult: string = results[0];\r\n if (onLocationDescriptionResult) {\r\n popupBody.innerHTML = `
you've chosen a ${searchPointType}:-
${onLocationDescriptionResult}
Choose this location?
`;\r\n } else {\r\n popupBody.innerHTML = `Choose this location?
`;\r\n }\r\n\r\n if (results[1]) {\r\n pano.setPano(results[1]);\r\n }\r\n\r\n //*Add buttons to popup for reporting a new fault\r\n let yesButtonHtml = '';\r\n let noButtonHtml = '\\n';\r\n popupFooter.innerHTML = yesButtonHtml + noButtonHtml;\r\n\r\n if (!isSmallScreen) {\r\n getGoogleImage();\r\n popupContent.appendChild(googleDiv);\r\n }\r\n popupContent.appendChild(popupBody);\r\n popupContent.appendChild(popupFooter);\r\n\r\n resolve(popupContent);\r\n })\r\n })\r\n return promise;\r\n \r\n}\r\n\r\nfunction returnHTMLforAssetFaultPopup(feature:any): HTMLDivElement {\r\n let popupContent = document.createElement(\"div\"),\r\n popupHeader = document.createElement(\"div\"),\r\n popupBody = document.createElement(\"div\"),\r\n popupFooter = document.createElement(\"div\");\r\n\r\n popupContent.id = 'popUpContentDiv';\r\n popupBody.id = 'popUpBodyDiv';\r\n\r\n let lat: number = feature?.geometry.coordinates[1],\r\n lng: number = feature?.geometry.coordinates[0],\r\n assetId: string = feature?.properties.ASSETID;\r\n\r\n //*if the feature has multiple faults, use the html from the multipleFaults object, otherwise use the features attributes\r\n if (multipleFaults[assetId]) {\r\n popupBody.innerHTML = multipleFaults[assetId];\r\n } else {\r\n popupBody.innerHTML = generateHtmlForPopup(feature.properties);\r\n }\r\n\r\n //*Add button to popup for reporting a new fault\r\n let anotherIssueButtonHtml = '
';\r\n\r\n popupFooter.innerHTML = anotherIssueButtonHtml;\r\n\r\n popupHeader.innerHTML = \"
\" + mapSettings.popupTitle + \"
\";\r\n popupContent.appendChild(popupHeader);\r\n popupContent.appendChild(popupBody);\r\n popupContent.appendChild(popupFooter);\r\n\r\n return popupContent;\r\n}\r\n\r\n\r\n//#endregion\r\n\r\n//#region Map Setup\r\n\r\n\r\n\r\nfunction addButtons() {\r\n const locateBtn = L.Control.extend({\r\n options: {\r\n position: 'topleft'\r\n },\r\n \r\n onAdd: function (map: L.Map) {\r\n const container = L.DomUtil.create('div', 'leaflet-control-locate leaflet-bar leaflet-control'),\r\n link = L.DomUtil.create('a', 'leaflet-bar-part', container);\r\n link.id = \"leafletLocate\";\r\n link.title = \"Show me where I am..\";\r\n\r\n L.DomEvent.addListener(link, 'click', function () {\r\n map.locate(); \r\n })\r\n L.DomEvent.disableClickPropagation(container);\r\n\r\n return container;\r\n }\r\n\r\n });\r\n map.addControl(new locateBtn);\r\n\r\n //*Add an 'open in new tab' button IF the map is in an iframe on the websites\r\n\r\n if ((window.location != window.parent.location)) {\r\n \r\n let parentUrl: string;\r\n if (window.location.ancestorOrigins) {\r\n parentUrl = window.location.ancestorOrigins[0];\r\n } else {\r\n parentUrl = document.referrer;\r\n }\r\n console.log('parentUrl: '+ parentUrl);\r\n\r\n if (parentUrl.includes('www.sutton.gov.uk') || parentUrl.includes('www.kingston.gov.uk')) {\r\n const openInNewTabBtn = L.Control.extend({\r\n options: {\r\n position: 'topleft'\r\n },\r\n\r\n onAdd: function (map: L.Map) {\r\n const container = L.DomUtil.create('div', 'leaflet-control-newtab leaflet-bar leaflet-control'),\r\n link = L.DomUtil.create('a', 'leaflet-bar-part', container);\r\n link.id = \"leafletOpenInNewTab\";\r\n link.title = \"Open fullscreen in a new tab.\";\r\n\r\n L.DomEvent.addListener(link, 'click', function () {\r\n window.open(location.toString(), '_blank');\r\n })\r\n L.DomEvent.disableClickPropagation(container);\r\n\r\n return container;\r\n }\r\n\r\n });\r\n map.addControl(new openInNewTabBtn);\r\n }\r\n }\r\n\r\n \r\n\r\n const legendBtn = L.Control.extend({\r\n options: {\r\n position: 'topleft'\r\n },\r\n\r\n onAdd: function (map: L.Map) {\r\n const container = L.DomUtil.create('div', 'leaflet-control-legend leaflet-bar leaflet-control'),\r\n link = L.DomUtil.create('a', 'leaflet-bar-part', container);\r\n link.id = \"leafletLegend\";\r\n link.title = \"Show/Hide Legend.\";\r\n\r\n L.DomEvent.addListener(link, 'click', function () {\r\n if ($('#legend').css(\"visibility\") === \"visible\") {\r\n $('#legend').css(\"visibility\", \"hidden\");\r\n $('#legendCloseBtn').css(\"visibility\", \"hidden\");\r\n } else {\r\n $('#legend').css(\"visibility\", \"visible\");\r\n $('#legendCloseBtn').css(\"visibility\", \"visible\");\r\n } \r\n })\r\n L.DomEvent.disableClickPropagation(container);\r\n\r\n return container;\r\n }\r\n\r\n });\r\n map.addControl(new legendBtn);\r\n \r\n\r\n \r\n\r\n\r\n}\r\n\r\nfunction toggleScreenElements(blnHide: boolean) {\r\n let strVis: string,\r\n isSmallScreen = $(window).width()! < smallScreenWidth;\r\n if (blnHide) {\r\n strVis = \"hidden\";\r\n } else {\r\n strVis = \"visible\";\r\n }\r\n \r\n $('#desktopAddressSearchDiv').css(\"visibility\", `${strVis}`);\r\n $('#mapid > div.leaflet-control-container > div.leaflet-top.leaflet-left').css(\"visibility\", `${strVis}`);\r\n //*only want to show the legend button on small screens\r\n if (!blnHide) {\r\n $(\"#mapTooltip\").css(\"display\", \"inline-block\");\r\n \r\n if (isSmallScreen) {\r\n //*show legend button only\r\n $('.leaflet-control-legend').css(\"visibility\", `${strVis}`);\r\n } else {\r\n //*show legend\r\n $('#legend').css(\"visibility\", `${strVis}`);\r\n }\r\n \r\n\r\n if (isMobileDevice()) {\r\n //*hide tooltip on mobile devices\r\n $(\"#mapTooltip\").css(\"display\", \"none\");\r\n }\r\n } else {\r\n $(\"#mapTooltip\").css(\"display\", \"none\");\r\n $('.leaflet-control-legend').css(\"visibility\", `${strVis}`);\r\n $('#legend').css(\"visibility\", `${strVis}`);\r\n $('#legendCloseBtn').css(\"visibility\", `${strVis}`);\r\n \r\n\r\n }\r\n\r\n \r\n}\r\n\r\nfunction createIcons() {\r\n let i = L.icon({\r\n iconUrl: baseurl + \"/images/\" + 'cursorPin.png',\r\n iconSize: [32, 32],\r\n iconAnchor: [16, 32],\r\n popupAnchor: [0, -32]\r\n });\r\n icons['pin'] = i;\r\n\r\n openFaultImage = baseurl + \"/images/\" + 'openFault.png';\r\n i = L.icon({\r\n iconUrl: openFaultImage,\r\n iconSize: [32, 32],\r\n iconAnchor: [16, 16],\r\n popupAnchor: [0, -16]\r\n });\r\n icons['openFault'] = i;\r\n\r\n fiveDayFaultImage = baseurl + \"/images/\" + 'fiveDayFault.png';\r\n i = L.icon({\r\n iconUrl: fiveDayFaultImage,\r\n iconSize: [32, 32],\r\n iconAnchor: [16, 16],\r\n popupAnchor: [0, -16]\r\n });\r\n icons['fiveDayFault'] = i;\r\n\r\n addressPinImage = baseurl + \"/images/\" + 'GreenPin1LargeB.png';\r\n i = L.icon({\r\n iconUrl: addressPinImage,\r\n iconSize: [50, 50],\r\n className: 'iconFade'\r\n });\r\n icons['addressPinImage'] = i;\r\n\r\n let featureSymbology: FeatureSymbology[] = [];\r\n\r\n if (mapSettings.symbology) {\r\n featureSymbology.push({ type: \"AssetLayer\", symbology: mapSettings.symbology });\r\n }\r\n\r\n if (mapSettings.infoLayers) {\r\n for (let infoLayer of mapSettings.infoLayers) {\r\n featureSymbology.push({ type: \"InfoLayer\", symbology: infoLayer.symbology });\r\n }\r\n }\r\n\r\n if (featureSymbology) {\r\n for (let layer of featureSymbology) {\r\n for (let symSettings of layer.symbology) {\r\n iconImage = baseurl + \"/images/\" + symSettings.icon;\r\n let iconKey: string = symSettings.name;\r\n i = L.icon({\r\n iconUrl: iconImage,\r\n iconSize: symSettings.iconSize,\r\n iconAnchor: symSettings.iconAnchor,\r\n popupAnchor: symSettings.popupAnchor\r\n });\r\n icons[symSettings.name] = i;\r\n\r\n if (symSettings.filter) {\r\n iconKey = symSettings.filter;\r\n }\r\n if (layer.type == \"AssetLayer\") {\r\n iconsForAssets[iconKey] = icons[symSettings.name];\r\n }\r\n if (layer.type == \"InfoLayer\") {\r\n iconsForInfoLayers[iconKey] = icons[symSettings.name];\r\n }\r\n \r\n }\r\n } \r\n }\r\n\r\n iconsForStatus = { OPEN: icons['openFault'], FIVE: icons['fiveDayFault'] };\r\n exlamationImagePath = baseurl + \"/images/exclamation.png\";\r\n}\r\n\r\nfunction setUpEvents() {\r\n\r\n\r\n map.on(\"load\", function (e) {\r\n //*show the other screen elements\r\n $('#working').css(\"visibility\", \"hidden\");\r\n })\r\n\r\n //*Set up map tooltip movement\r\n $('#mapid').on('mousemove', function (e) {\r\n $('#mapTooltip').css(\"opacity\", \"0.9\");\r\n $('#mapTooltip', this).css({ left: e.pageX + 10, top: e.pageY - 10});\r\n });\r\n\r\n //*Hide tooltip for touch events / display legend if hidden from small screen toggling\r\n $('#mapid').on({\r\n 'touchstart': function () {\r\n $('#mapTooltip').css(\"display\", \"none\");\r\n }\r\n });\r\n\r\n //*disable map click events for non map div ids and change cursor on mouse over\r\n const divElements = [\"legend\", \"addressSearchModal\", \"desktopAddressSearchDiv\", \"msgModal\"];\r\n divElements.forEach(function (e) {\r\n let selectedElement =\" + mapSettings.popupTitle + \"
\" + featureContent;\r\n popupContent.appendChild(popupHeader);\r\n\r\n if (mapSettings.isAsset) {\r\n //Add report button for different issues\r\n let anotherIssueButton = document.createElement(\"div\");\r\n anotherIssueButton.innerHTML = '';\r\n popupContent.appendChild(anotherIssueButton);\r\n }\r\n\r\n faultsPopup.setLatLng(L.latLng(selectedLatForDisplay, selectedLngForDisplay));\r\n faultsPopup.setContent(popupContent);\r\n map.openPopup(faultsPopup);\r\n\r\n window.setTimeout(function () {\r\n if (faultsPopup.isOpen()) {\r\n map.closePopup(faultsPopup);\r\n }\r\n }, 6000);\r\n\r\n map.on(\"popupclose\", function (e) {\r\n //*show the other screen elements\r\n toggleScreenElements(false);\r\n })\r\n\r\n }\r\n\r\n //*Map Events\r\n\r\n map.on('moveend', function (e) {\r\n //*update asset legend text with zoom in msg if assets not showing\r\n let msg =
2. Click or tap ';\r\n mapTooltip.innerHTML = 'Scroll to zoom map';\r\n $('.leaflet-interactive').css('cursor', 'grab');\r\n if (faultsLayer) {\r\n faultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Scroll to zoom map';\r\n $('.leaflet-interactive').css('cursor', 'grab');\r\n });\r\n }\r\n if (multipleFaultsLayer) {\r\n multipleFaultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Scroll to zoom map';\r\n $('.leaflet-interactive').css('cursor', 'grab');\r\n });\r\n }\r\n }\r\n if (zoomLevel >= mapSettings.mapLayerMinZoom) {\r\n hasZoomedIn = true;\r\n //*add assets for asset maps\r\n assetLayer = L.Proj.geoJson(addWFSLayer(mapSettings.mapLayerID, getMapExtent(),mapSettings.mapLayerFilter), {\r\n pointToLayer: function (geojson, latlng) {\r\n let iconKey = mapSettings.symbology[0].name;\r\n if (geojson.properties.LEAFLET_STYLE) {\r\n console.log(\"LEAFLET_STYLE: \" + geojson.properties.LEAFLET_STYLE);\r\n iconKey = geojson.properties.LEAFLET_STYLE;\r\n }\r\n let marker = L.marker(latlng, {\r\n icon: iconsForAssets[iconKey]\r\n });\r\n\r\n return marker;\r\n }\r\n });\r\n if (mapSettings.label_Settings?.field) {\r\n assetLabelsLayer = L.Proj.geoJson(addWFSLayer(mapSettings.mapLayerID, getMapExtent(), mapSettings.mapLayerFilter), {\r\n pointToLayer: function (geojson, latlng) {\r\n let marker = L.marker(latlng, {\r\n icon: L.divIcon({\r\n html: geojson.properties[mapSettings.label_Settings.field],\r\n className: 'text-below-marker'\r\n }),\r\n interactive: false\r\n });\r\n return marker;\r\n }\r\n });\r\n mapLayerGroup.addLayer(assetLabelsLayer);\r\n }\r\n mapLayerGroup.addLayer(assetLayer);\r\n msg.innerHTML = 'Click or tap ';\r\n mapTooltip.innerHTML = 'Click on the ' + mapSettings.popupTitle.toLowerCase();\r\n if (faultsLayer) {\r\n faultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Click on the ' + mapSettings.popupTitle.toLowerCase();\r\n });\r\n }\r\n if (multipleFaultsLayer) {\r\n multipleFaultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Click on the ' + mapSettings.popupTitle.toLowerCase();\r\n });\r\n }\r\n }\r\n } else {\r\n\r\n if (zoomLevel < mapSettings.mapLayerMinZoom) {\r\n msg.innerHTML = '1. Use the search above or zoom into the map to find the location.
2. Click or tap on the map to select a location.';\r\n //councilLandLayer.clearAllEventListeners();\r\n mapTooltip.innerHTML = 'Scroll to zoom map';\r\n let t = map.getContainer();\r\n //L.DomUtil.removeClass(map.getContainer(), 'pin-cursor-enabled');\r\n //mapDiv.style.cursor = '';\r\n $('.leaflet-interactive').css('cursor', 'grab');\r\n if (faultsLayer) {\r\n faultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Scroll to zoom map';\r\n $('.leaflet-interactive').css('cursor', 'grab');\r\n });\r\n }\r\n if (multipleFaultsLayer) {\r\n multipleFaultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Scroll to zoom map';\r\n $('.leaflet-interactive').css('cursor', 'grab');\r\n });\r\n }\r\n } else {\r\n msg.innerHTML = 'Click or tap on the map to select a location.';\r\n //councilLandLayer.clearAllEventListeners();\r\n if (!mapSettings.allow_Private) {\r\n mapTooltip.innerHTML = 'Find location - █ council land only';\r\n mapDiv.style.cursor = 'not-allowed';\r\n if (faultsLayer) {\r\n faultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Find location - █ council land only';\r\n });\r\n }\r\n if (multipleFaultsLayer) {\r\n multipleFaultsLayer.on('mouseout', function () {\r\n mapTooltip.innerHTML = 'Find location - █ council land only';\r\n });\r\n }\r\n } else {\r\n mapTooltip.innerHTML = 'Click / tap at the location';\r\n //mapDiv.style.cursor = 'url(\"' + pinCursor + '\") 16 32, auto';\r\n //L.DomUtil.addClass(map.getContainer(), 'pin-cursor-enabled');\r\n $('.leaflet-interactive').css('cursor', 'crosshair');\r\n if (faultsLayer) {\r\n faultsLayer.on(\"mouseout\", function () {\r\n mapTooltip.innerHTML = 'Click / tap at the location';\r\n });\r\n }\r\n if (multipleFaultsLayer) {\r\n multipleFaultsLayer.on(\"mouseout\", function () {\r\n mapTooltip.innerHTML = 'Click / tap at the location';\r\n });\r\n }\r\n }\r\n }\r\n\r\n }\r\n //*copyright text\r\n let copyright =
Sorry, you can only report an incident within the borough.
`;\r\n if (!mapSettings.allow_Private) {\r\n msg += `The areas maintained by the council are highlighted on the map in orange.
`;\r\n } else {\r\n msg += ``;\r\n }\r\n showMapPopup(latLng, msg);\r\n }\r\n //Create popup template for new reports\r\n const createPopup = function (land_type?: string) {\r\n if (!faultsPopup.isOpen()) {\r\n $('#working').css(\"visibility\", \"visible\");\r\n if (selectLayer) {\r\n selectLayer.remove();\r\n }\r\n if (highlightLayer) {\r\n highlightLayer.remove();\r\n }\r\n\r\n\r\n const popUpFromLatLong = function () {\r\n selectLayer = L.marker([selectedLatForDisplay, selectedLngForDisplay], {\r\n icon: icons['pin']\r\n });\r\n\r\n if (mapSettings.isAsset) {\r\n highlightLayer = L.circleMarker(L.latLng(selectedLatForDisplay, selectedLngForDisplay), {\r\n color: 'red',\r\n fillColor: '#f03',\r\n fillOpacity: 0.5,\r\n radius: 50\r\n }).addTo(map);\r\n\r\n selectLayer.setOpacity(0);\r\n }\r\n\r\n returnHTMLforNewFaultPopup(selectedLatForDisplay, selectedLngForDisplay, land_type).then(content => {\r\n let theMaxWidth: number = 0,\r\n theMaxHeight: number = 0;\r\n\r\n if (isSmallScreen) {\r\n theMaxWidth = 270;\r\n } else {\r\n theMaxWidth = 500;\r\n }\r\n\r\n selectLayer.bindPopup((content), {\r\n maxWidth: theMaxWidth\r\n });\r\n selectLayer.on(\"popupopen\", function (e) {\r\n let p = selectLayer.getPopup();\r\n //*update after 2 seconds to ensure the google image will fit on the screen\r\n setTimeout(function () {\r\n $('#working').css(\"visibility\", \"hidden\");\r\n p?.update();\r\n }, 2000);\r\n });\r\n selectLayer.addTo(map);\r\n selectLayer.openPopup();\r\n //*hide the legend and address search\r\n toggleScreenElements(true);\r\n\r\n selectLayer.on(\"popupclose\", function (e) {\r\n //selectLayer.remove();\r\n //*show the legend and address search\r\n toggleScreenElements(false);\r\n if (highlightLayer) {\r\n highlightLayer.remove();\r\n }\r\n })\r\n })\r\n };\r\n\r\n\r\n selectedLatForDisplay = e.latlng.lat;\r\n selectedLngForDisplay = e.latlng.lng;\r\n\r\n //*Use the coords from the asset feature if available\r\n if (e.layer.feature.geometry.type=='Point') {\r\n\r\n let xy = e.sourceTarget.feature.geometry.coordinates;\r\n selectedFeatureX = xy[0];\r\n selectedFeatureY = xy[1];\r\n }\r\n popUpFromLatLong();\r\n }\r\n }\r\n\r\n if (e.sourceTarget.feature.layer == mapSettings.councilMaintainedLayerID) {\r\n //Clicked on council maintained land layer\r\n createPopup(\"council\");\r\n }\r\n if (e.sourceTarget.feature.layer == mapSettings.boroughBoundaryLayerID && mapSettings.allow_Private) {\r\n //Clicked inside borough and private reports allowed\r\n createPopup(\"private\");\r\n }\r\n if (e.sourceTarget.feature.layer == mapSettings.boroughBoundaryLayerID && !mapSettings.allow_Private && !mapSettings.isAsset) {\r\n let msg: string = `Sorry, you can only report an incident on council maintained land.
`;\r\n if (!mapSettings.allow_Private) {\r\n msg += `The areas maintained by the council are highlighted on the map in orange.
`;\r\n } else {\r\n msg += ``;\r\n }\r\n showMapPopup(latLng, msg);\r\n }\r\n if (e.sourceTarget.feature.layer == mapSettings.mapLayerID) {\r\n //Clicked on an asset\r\n let featureProperties = e.sourceTarget.feature.properties;\r\n selectedAssetId = featureProperties.ASSETID;\r\n if (mapSettings.out_Parameters) {\r\n let fieldList: string[] = mapSettings.out_Parameters.split(',');\r\n assetAttributes = {};\r\n //fieldList.push('UID');\r\n fieldList.forEach((e) => {\r\n for (let attribute in featureProperties) {\r\n if (e == attribute) {\r\n assetAttributes[e] = featureProperties[attribute];\r\n }\r\n }\r\n });\r\n console.log(assetAttributes);\r\n }\r\n createPopup();\r\n }\r\n }\r\n });\r\n}\r\n\r\nfunction getMapExtent() {\r\n let latlngBounds = map.getBounds();\r\n let nw = crs.project(latlngBounds.getNorthWest());\r\n let ne = crs.project(latlngBounds.getNorthEast());\r\n let sw = crs.project(latlngBounds.getSouthWest());\r\n let se = crs.project(latlngBounds.getSouthEast());\r\n let projectedBounds = L.bounds([nw, ne, sw, se]);\r\n currentMapExtent = projectedBounds?.min?.x + \",\" + projectedBounds?.min?.y + \",\" + projectedBounds?.max?.x + \",\" + projectedBounds?.max?.y;\r\n return currentMapExtent;\r\n}\r\n\r\nfunction mergeMultipleFaults(geoJson: any) {\r\n // group features by ASSETID\r\n const assets = Array.from(\r\n geoJson.features.reduce((a: any, c: any) => {\r\n const id = c.properties.ASSETID;\r\n if (!a.has(id)) a.set(id, []); // <-- initialise each entry with an empty array\r\n a.get(id).push(c); // <-- add the feature to the array for that ASSETID\r\n return a;\r\n }, new Map()) // <-- the accumulator is a Map\r\n );\r\n\r\n // create new features\r\n const newFeatures = assets.reduce((a: any, c: any) => {\r\n a.push({\r\n \"type\": \"Feature\",\r\n \"geometry\": c[1][0].geometry, // <-- take geometry from first array entry\r\n \"properties\": c[1].map((f: { properties: any; }) => f.properties) // <-- just retain the properties of the feature\r\n });\r\n return a;\r\n }, []);\r\n\r\n // create new feature collection\r\n const newFc = {\r\n \"type\": \"FeatureCollection\",\r\n \"title\": mapSettings.multipleFaultsLayerID,\r\n \"features\": newFeatures\r\n }\r\n return newFc;\r\n}\r\n\r\n/*Some assets (lights) may have additional attributes which the form needs but are not held in the Fault layer\r\nso they need to be read from another layer and looked up whenever another fault is reported on an asset with\r\nan existing OPEN/FIVE fault\r\n*/\r\nfunction getAttributesForFeaturesWithFaults(layerName: string) {\r\n let geoJson:any = addWFSLayer(layerName);\r\n featuresWithFaults = geoJson?.features;\r\n\r\n}\r\n\r\nfunction addFeatureInfo(geoJson: any, projection: string, layername: string) {\r\n geoJson.crs = {\r\n \"type\": \"name\",\r\n \"properties\": {\r\n \"name\": \"urn:ogc:def:crs:EPSG::\" + projection\r\n }\r\n };\r\n let geoJsonFeatures = geoJson.features;\r\n geoJsonFeatures.forEach(function (e: any) {\r\n e.layer = layername;\r\n });\r\n return geoJson;\r\n}\r\n\r\nfunction addWFSLayer(layerName: string, extent?: string, filter?: string) {\r\n let rootUrl = mapSettings.featureServiceUrl;\r\n let defaultParameters: any;\r\n defaultParameters = {\r\n service: 'WFS',\r\n request: 'GetFeature',\r\n srsname: 'EPSG:27700',\r\n typeName: 'statmap:' + layerName,\r\n outputFormat: 'geojson'\r\n };\r\n if (extent) {\r\n defaultParameters.bbox = currentMapExtent;\r\n }\r\n if (filter) {\r\n defaultParameters.filter = filter;\r\n }\r\n\r\n let parameters = L.Util.extend(defaultParameters);\r\n let URL = rootUrl + L.Util.getParamString(parameters);\r\n\r\n let jsonData;\r\n\r\n $.ajax({\r\n url: URL,\r\n async: false,\r\n crossDomain: true\r\n }).done(function (response, textStatus, jqXHR) {\r\n if (!jqXHR.responseJSON) {\r\n serviceError(URL);\r\n }\r\n if (layerName == mapSettings.multipleFaultsLayerID) {\r\n response = mergeMultipleFaults(response);\r\n }\r\n addFeatureInfo(response, \"27700\", layerName);\r\n jsonData = response;\r\n //L.Proj.geoJson(response).addTo(map);\r\n }).fail(function (jqXHR, textStatus, errorThrown) {\r\n if (!jqXHR.responseJSON) {\r\n serviceError(URL);\r\n }\r\n console.log(jqXHR);\r\n console.log(textStatus);\r\n console.log(errorThrown);\r\n });\r\n\r\n return jsonData;\r\n\r\n}\r\n\r\nfunction addLayers() {\r\n\r\n mapLayerGroup = L.featureGroup().addTo(map);\r\n infoLayerGroup = L.featureGroup();\r\n\r\n //*configuration settings for different os basemaps\r\n let basemapConfig = [\r\n { type: \"overview\", minZoom: 5, maxZoom: 10 },\r\n { type: \"detailed\", minZoom: 11, maxZoom: 13, className: \"grayscale\" }\r\n ];\r\n\r\n //*add os basemaps\r\n basemapConfig.forEach(function (basemap) {\r\n let cssStyle = (basemap.className != null) ? basemap.className : '';\r\n let url = mapSettings.oSbaseMapUrl + '/Road_27700/{z}/{x}/{y}.png';\r\n let tileLayer = L.tileLayer(url, {\r\n minZoom: basemap.minZoom,\r\n maxZoom: basemap.maxZoom,\r\n className: cssStyle,\r\n attribution: mapSettings.oScopyright\r\n }).addTo(map);\r\n });\r\n \r\n\r\n //*add borough mask\r\n boroughMaskLayer = L.Proj.geoJson(addWFSLayer(mapSettings.boroughMaskLayerID), {\r\n style: function () {\r\n return {\r\n color: 'black',\r\n fillColor: 'white',\r\n fillOpacity: 0.8\r\n }\r\n }\r\n });\r\n mapLayerGroup.addLayer(boroughMaskLayer);\r\n\r\n //*add borough boundary\r\n boroughBoundaryLayer = L.Proj.geoJson(addWFSLayer(mapSettings.boroughBoundaryLayerID), {\r\n style: function () {\r\n return {\r\n color: 'black',\r\n fillColor: 'white',\r\n fillOpacity: 0\r\n }\r\n }\r\n });\r\n mapLayerGroup.addLayer(boroughBoundaryLayer);\r\n\r\n //*add information layers to the map\r\n if (mapSettings.infoLayers) {\r\n mapSettings.infoLayers.forEach(function (layer) {\r\n var infoLayer = L.Proj.geoJson(addWFSLayer(layer.info_layer_id), {\r\n pointToLayer: function (geojson, latlng) {\r\n let iconKey = layer.symbology[0].name;\r\n let marker = L.marker(latlng, {\r\n icon: iconsForInfoLayers[iconKey]\r\n });\r\n return marker;\r\n }\r\n });\r\n infoLayerGroup.addLayer(infoLayer);\r\n });\r\n }\r\n \r\n\r\n //*initialise single faults layer\r\n faultsLayer = L.Proj.geoJson(addWFSLayer(mapSettings.singleFaultsLayerID,undefined,mapSettings.singleFaultsLayerFilter), {\r\n //filter: function (feature) {\r\n // if (feature.properties.CASE_TYPE.toUpperCase() === mapSettings.event_Type.toUpperCase() && feature.properties.BOROUGH.toUpperCase() === borough?.toUpperCase() && [\"OPEN\", \"FIVE\"].includes(feature.properties.STATUS)) {\r\n // return true;\r\n // }\r\n // return false;\r\n //},\r\n pointToLayer: function (geojson, latlng) {\r\n let marker = L.marker(latlng, {\r\n icon: iconsForStatus[geojson.properties.STATUS]\r\n });\r\n return marker;\r\n }\r\n });\r\n\r\n //*initialise multiple faults layer\r\n multipleFaultsLayer = L.Proj.geoJson(addWFSLayer(mapSettings.multipleFaultsLayerID, undefined, mapSettings.multipleFaultsLayerFilter), {\r\n //filter: function (feature) {\r\n // if (feature.properties[0].CASE_TYPE.toUpperCase() === mapSettings.event_Type.toUpperCase() && feature.properties[0].BOROUGH.toUpperCase() === borough?.toUpperCase()) {\r\n // return true;\r\n // }\r\n // return false;\r\n //},\r\n pointToLayer: function (geojson, latlng) {\r\n let statusIcon = \"FIVE\";\r\n for (const key of Object.keys(geojson.properties)) {\r\n const value = geojson.properties[key];\r\n if (value.STATUS == \"OPEN\") {\r\n statusIcon = \"OPEN\";\r\n }\r\n }\r\n let marker = L.marker(latlng, {\r\n icon: iconsForStatus[statusIcon]\r\n });\r\n return marker;\r\n }\r\n });\r\n}\r\n\r\n\r\n\r\n//#endregion\r\n\r\n//#region Async web service calls\r\n\r\nfunction sendErrorEmail(msg: string): Promise