Where is it safe to build?
In case you consider building a house for you and your family you may wonder what the likelyhood and expected impact of natural hazards on your new home might be at your target location. You might be able to find some hazard maps telling you how often certain hazard events with a specific severity are statistically happening. How do all the different hazards add up? You may also look for a shortcut and dig up a risk map. This will show you how risky your location is with regards to the current land use, say crops, but it will not reveal how dangerous this spot is for your new home. Obviously, the forces of nature affect crops very differently from a residential building.
One solution to this is calculating the expected impact of all relevant hazards on hypothetical residential buildings for a whole area. Different hazards cause different types of damages but all damages may be expressed in economic terms, for example as percentage of the value of the house. Adding the calculated percentages up for all hazards gives a realistic picture of the danger a building is facing or, describing this in a more positve way, how suitable the area is for homes.
Visualizing the data in the net gives the user many different options. He/she can chose between three different graphs (donut, bar, pie) and one can select the contribution of different hazards as well as the total. In the bar and the pie chart actual values are displayed as a table too. Furthermore, many different backgrounds may be chosen.
The sample data are from Abuyog, Leyte, Philippines. By clicking on a spot the respective data are visible.
This interactive map is not only useful for residents who want to know what is threatening their home or people in search for the best location of their future hut or palace, but also for governmental land use planners, investors and the insurance industry.
Background
The finished map is easy to understand but producing it requires some effort. Finding reliable data on many different hazards and the damage different severities of the hazards will cause is challenging at times. Once the data are available the statistical expected damages may be calculated for each hazard. This follows the generally accepted equation of risk (risk = hazard x vulnerability) and the risk is described as the annual building damage in percent of the value of the house.
Data processing
As the hazards come mostly in sets of five return periods the combination of the risks is done in a Geographic Information System (GIS).
Data sources and tools
The Markercluster Pie Chart ( http://bl.ocks.org/gisminister/10001728) was used. Data sources:
Link to visualization
Limitations
The output of the suitability map is only as good as the input data. Limitations applying to the input data are therefore also limiting the accuracy of the output. In some cases assumptions were used if no applicable, reliable data were available.
Climate change may influence hydrological and meteorological hazards and sea level rise will also aggraveate the threat of tsunamis. This has not been factored in for the calculations.
The visualization will be getting some more sophisticated features and the coloured risk map will be available as one of the backgrounds too.
Code
<html lang=”en”> <head> <meta charset=”utf-8" /> <meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> <meta name=”viewport” content=”initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width” /> <meta name=”mobile-web-app-capable” content=”yes” /> <meta name=”apple-mobile-web-app-capable” content=”yes” /> <link rel=”stylesheet” href=”https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" media=”screen” title=”leaflet” /> <script type=”text/javascript” src=”https://gc.kis.v2.scr.kaspersky-labs.com/FD126C42-EBFA-4E12-B309-BB3FDD723AC1/main.js" charset=”UTF-8"></script><script src=”https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" charset=”utf-8" ></script>
<script src=”https://code.jquery.com/jquery-3.3.1.js"></script> <script src=”https://cdn.rawgit.com/twbs/bootstrap/v4.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href=”https://cdn.rawgit.com/twbs/bootstrap/v4.1.3/dist/css/bootstrap.min.css" rel=”stylesheet” /> <link href=”css/bootstrap-colorpicker.css” rel=”stylesheet” /> <script src=”js/bootstrap-colorpicker.js”></script>
<script src=”js/leaflet.minichart.min.js” charset=”utf-8"></script>
<script src=”https://cdn.rawgit.com/hayeswise/Leaflet.PointInPolygon/v1.0.0/wise-leaflet-pip.js"></script>
<! — API mapbox → <script src=”https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script> <link href=”https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel=”stylesheet” />
<! — library for the donut chart → <script src=”https://d3js.org/d3.v4.js"></script>
<! — Library for the display donut chart on the map → <link rel=”stylesheet” href=”css/MarkerCluster.css” /> <link rel=”stylesheet” href=”css/style.css” /> <link rel=”stylesheet” href=”css/MarkerCluster.Default.css” /> <script src=”js/leaflet.markercluster.js”></script>
<! — Responsive popup with new plugin → <script src=”https://unpkg.com/leaflet-responsive-popup@0.6.4/leaflet.responsive.popup.js"></script> <link rel=”stylesheet” href=”https://unpkg.com/leaflet-responsive-popup@0.6.4/leaflet.responsive.popup.css" /> <link rel=”stylesheet” href=”https://unpkg.com/leaflet-responsive-popup@0.6.4/leaflet.responsive.popup.rtl.css" />
<! — <style></style> → <title>Flood Proofing Project</title> </head> <body> <div id=”map”></div>
<script src=”data/multihazard_composite_leyte_island_sample_for_Leaflet_web_0.js”></script> <script> document.getElementById(“map”).style.height = (window.screen.availHeight — 100).toString() + “px”; var Url = “https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiaW50ZWdyYXRpb25naXoiLCJhIjoiY2p3eGJjMjdtMHN0ejQ4bXphajRzdW5kaSJ9.SZwDvz3cud952K_aFzfbmg";
var grayscale = L.tileLayer(Url, { id: “mapbox.light”, attribution: “” }), streets = L.tileLayer(Url, { id: “mapbox.streets”, attribution: “” }), dark = L.tileLayer(Url, { id: “mapbox.dark”, attribution: “” }), streetsSatellite = L.tileLayer(Url, { id: “mapbox.streets-satellite”, attribution: “” }), wheatpaste = L.tileLayer(Url, { id: “mapbox.wheatpaste”, attribution: “” }), streetsbasic = L.tileLayer(Url, { id: “mapbox.streets-basic”, attribution: “” }), comic = L.tileLayer(Url, { id: “mapbox.comic”, attribution: “” }), outdoors = L.tileLayer(Url, { id: “mapbox.outdoors”, attribution: “” }), runbikehike = L.tileLayer(Url, { id: “mapbox.run-bike-hike”, attribution: “” }), emerald = L.tileLayer(Url, { id: “mapbox.emerald”, attribution: “” }), highcontrast = L.tileLayer(Url, { id: “mapbox.high-contrast”, attribution: “” }); var map = L.map(“map”, { layers: [streets], zoom: 11 }).fitBounds([ [10.648035786182241, 124.76645517946658], [10.889875389092303, 125.16335664541897] ]);
var baseLayers = { Grayscale: grayscale, Streets: streets, Dark: dark, StreetSatellite: streetsSatellite, Wheatpaste: wheatpaste, Streetsbasic: streetsbasic, Comic: comic, Outdoors: outdoors, “Run-bike-hike”: runbikehike, Emerald: emerald, Highcontrast: highcontrast }; L.control.layers(baseLayers, null, { collapsed: false }).addTo(map);
//Retrieve data from file var polygons = []; for ( var i = 0; i < json_multihazard_composite_leyte_island_sample_for_Leaflet_web_0 .features.length; i++ ) { polygons.push( json_multihazard_composite_leyte_island_sample_for_Leaflet_web_0 .features[i].geometry.coordinates[0] ); }
var properties = json_multihazard_composite_leyte_island_sample_for_Leaflet_web_0 .features[0].properties;
//get labels from file
////@@@@@@@@@@@@@@ INCODEABLE var labels = [ “typhoon”, “earthquake”, “ril”, “stormsurge”, “tsunami”, “flood”, “total dama” ];
var labelsOfLegend = [ “typhoon”, “earthquake”, “rain induced landslide”, “stormsurge”, “tsunami”, “flood”, “total damage” ];
// labels.shift(); // console.log(labels); //Declare the variable for the chart var m1; var barChart; var markers;
//Create custom legend control at the bottom right of map
var colors = [ “#00802b”, “#00e6e6”, “#ff3300”, “#ff6600”, “#b82e8a”, “#ffcc00”, “#996633” ]; var dataCounter = [0, 0, 0, 0, 0, 0, 0, 0, 0]; //Variable for the visualization of data var mapstyle = “donut”;
////@@@@@@@@@@@@@@ INCODEABLE var title = “Percent annual damage”;
//Control board for choosing color and data to display var info = L.control({ position: “bottomright” }); info.onAdd = function(map) { this._div = L.DomUtil.create(“div”, “info”); // create a div with a class “info” this._div.innerHTML = “<form action=’index.html’><b>” + title + “</b><br><br><input type=’checkbox’ id=’item0' name=’item0' onchange=’getDataVal0(this)’/> <div id=’color0' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + labelsOfLegend[0] + “ <br>\ <input type=’checkbox’ id=’item1' name=’item1' onchange=’getDataVal1(this)’/> <div id=’color1' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + labelsOfLegend[1] + “<br>\ <input type=’checkbox’ id=’item2' name=’item2' onchange=’getDataVal2(this)’> <div id=’color2' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + labelsOfLegend[2] + “<br>\ <input type=’checkbox’ id=’item3' name=’item3' onchange=’getDataVal3(this)’> <div id=’color3' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + labelsOfLegend[3] + “<br>\ <input type=’checkbox’ id=’item4'name=’item4' onchange=’getDataVal4(this)’> <div id=’color4' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + labelsOfLegend[4] + “<br>\ <input type=’checkbox’ id=’item5'name=’item5' onchange=’getDataVal5(this)’> <div id=’color5' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + labelsOfLegend[5] + “<br>\ <input type=’checkbox’ id=’item6'name=’item6' onchange=’getDataVal6(this)’> <div id=’color6' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + labelsOfLegend[6] + “<br>” + // <input type=’checkbox’ id=’item7' name=’item7' onchange=’getDataVal7(this)’> <div id=’color7' style=’display:inline-block;’><span class=’colorpicker-input-addon’><i></i></span></div> ” + // labels[7] + “<hr><select onchange=’getMapStyleValue(this)’><option value=’donut’>Donut chart</option><option value=’bar’ >Bar chart</option><option value=’pie’>Pie chart</option></select><br>\ </form>”; return this._div; }; info.addTo(map);
//Functions to get the visualization of data when changed function getMapStyleValue(value) { mapstyle = value.value; }
function getColorVal0(e) { colors[0] = e; }
function getColorVal1(e) { colors[1] = e; }
function getColorVal2(e) { colors[2] = e; }
function getColorVal3(e) { colors[3] = e; }
function getColorVal4(e) { colors[4] = e; }
function getColorVal5(e) { colors[5] = e; }
function getColorVal6(e) { colors[6] = e; }
function getColorVal8(e) { colors[8] = e; }
//Data function function getDataVal0(data) { if (data.checked) { dataCounter[0] = 1; // alert(dataCounter); } else { dataCounter[0] = 0; } }
function getDataVal1(data) { if (data.checked) { dataCounter[1] = 1; } else { dataCounter[1] = 0; } }
function getDataVal2(data) { if (data.checked) { dataCounter[2] = 1; } else { dataCounter[2] = 0; } }
function getDataVal3(data) { if (data.checked) { dataCounter[3] = 1; } else { dataCounter[3] = 0; } }
function getDataVal4(data) { if (data.checked) { dataCounter[4] = 1; } else { dataCounter[4] = 0; } }
function getDataVal5(data) { if (data.checked) { dataCounter[5] = 1; } else { dataCounter[5] = 0; } }
function getDataVal6(data) { if (data.checked) { dataCounter[6] = 1; } else { dataCounter[6] = 0; } }
function getDataVal7(data) { if (data.checked) { dataCounter[7] = 1; } else { dataCounter[7] = 0; } }
function getDataVal8(data) { if (data.checked) { dataCounter[8] = 1; } else { dataCounter[8] = 0; } }
$(function() { $(“#color0”) .colorpicker({ color: “#00802b”, format: “auto” }) .on(“colorpickerChange”, function(e) { // colors.push(e.color); colors[0] = e.color.toString(); }); });
$(function() { $(“#color1”) .colorpicker({ color: “#00e6e6”, format: “auto” }) .on(“colorpickerChange”, function(e) { // colors.push(e.color); colors[1] = e.color.toString(); }); }); $(function() { $(“#color2”) .colorpicker({ color: “#ff3300”, format: “auto” }) .on(“colorpickerChange”, function(e) { // colors.push(e.color); colors[2] = e.color.toString(); }); });
$(function() { $(“#color3”) .colorpicker({ color: “#ff6600”, format: “auto” }) .on(“colorpickerChange”, function(e) { // colors.push(e.color); colors[3] = e.color.toString(); }); }); $(function() { $(“#color4”) .colorpicker({ color: “#b82e8a”, format: “auto” }) .on(“colorpickerChange”, function(e) { // colors.push(e.color); colors[4] = e.color.toString(); }); }); $(function() { $(“#color5”) .colorpicker({ color: “#ffcc00”, format: “auto” }) .on(“colorpickerChange”, function(e) { // colors.push(e.color); colors[5] = e.color.toString(); }); }); $(function() { $(“#color6”) .colorpicker({ color: “#996633”, format: “auto” }) .on(“colorpickerChange”, function(e) { // colors.push(e.color); colors[6] = e.color.toString(); }); }); // $(function() { // $(“#color7”) // .colorpicker({ color: “#ff0066”, format: “auto” }) // .on(“colorpickerChange”, function(e) { // // colors.push(e.color); // colors[7] = e.color.toString(); // }); // }); // $(function() { // $(“#color8”) // .colorpicker({ color: “#ff0066”, format: “auto” }) // .on(“colorpickerChange”, function(e) { // // colors.push(e.color); // colors[8] = e.color.toString(); // }); // });
//activated state map.on(“click”, function(e) { var layer = e.target;
if (barChart != undefined) { map.removeLayer(barChart); } if (markers != undefined) { map.removeLayer(markers); } var popLocation = e.latlng; var point = []; point.push(popLocation.lng); point.push(popLocation.lat); var mapPoint = []; mapPoint.push(popLocation.lat); mapPoint.push(popLocation.lng);
var mypolygon; var polygonLayer = []; m1 = L.marker(point); var result; // console.log(points); polygons.forEach(function(value, index) { mypolygon = L.polygon(value).addTo(map); // if (mypolygon.contains(m1.getLatLng())) { result = index; } }); // console.log(result); var dataArr = []; var colorArange = []; var roundData = [];
var valueStr = “”; var popup; var roundData;
if (result != undefined && mapstyle === “bar”) { properties = json_multihazard_composite_leyte_island_sample_for_Leaflet_web_0 .features[result].properties;
dataCounter.forEach(function(value, index) { if (value == 1) { dataArr.push(properties[labels[index]]); colorArange.push(colors[index]); roundData = properties[labels[index]].toFixed(1); // console.log(properties[labels[index]]); valueStr += labelsOfLegend[index] + “ “ + roundData; valueStr += “<br>”; } });
popup = L.responsivePopup({ offset: [10, 60] }); barChart = L.minichart(mapPoint, { type: mapstyle, data: dataArr, // labels: roundData, colors: colorArange //this spaces is customized or adjusted according the the requirement }) .addTo(map) .bindPopup(popup);
//add popup to the map as to the bar and pie chart barChart.bindPopup(valueStr).openPopup(); } else if (result != undefined && mapstyle === “pie”) { properties = json_multihazard_composite_leyte_island_sample_for_Leaflet_web_0 .features[result].properties;
dataCounter.forEach(function(value, index) { if (value == 1) { dataArr.push(properties[labels[index]]); colorArange.push(colors[index]); roundData = properties[labels[index]].toFixed(1); //Math.round(properties[labels[index]] * 10) / 10; // console.log(properties[labels[index]]); valueStr += labelsOfLegend[index] + “ “ + roundData; valueStr += “<br>”; } });
popup = L.responsivePopup({ offset: [10, 30] }); barChart = L.minichart(mapPoint, { type: mapstyle, data: dataArr, // labels: roundData, colors: colorArange //this spaces is customized or adjusted according the the requirement }) .addTo(map) .bindPopup(popup);
//add popup to the map as to the bar and pie chart barChart.bindPopup(valueStr).openPopup(); } else if (result != undefined && mapstyle === “donut”) { var totalCounter = 0; properties = json_multihazard_composite_leyte_island_sample_for_Leaflet_web_0 .features[result].properties;
dataCounter.forEach(function(value, index) { if (value == 1 && properties[labels[index]] > 0) { dataArr.push(properties[labels[index]]); colorArange.push(colors[index]); totalCounter += properties[labels[index]]; //Math.round(properties[labels[index]] * 10) / 10; } }); // delete two string objects delete properties.ID; delete properties.Titel; // console.log(properties); // totalCounter = Math.round(totalCounter);
//process the zoom level to be resposive to the visualization of map //from the zoom level 9 to 18 var width = 60; height = 60; margin = 4; if (map.getZoom() <= 11) { width = 45; height = 45; mapPoint[0] += 0.01; mapPoint[1] -= 0.01; // console.log(map.getZoom()); } else if (map.getZoom() == 12) { mapPoint[0] += 0.008; mapPoint[1] -= 0.008; // console.log(map.getZoom()); } else if (map.getZoom() == 13) { mapPoint[0] += 0.004; mapPoint[1] -= 0.004; // console.log(map.getZoom()); } else if (map.getZoom() == 14) { mapPoint[0] += 0.002; mapPoint[1] -= 0.002; // console.log(map.getZoom()); } else if (map.getZoom() == 15) { mapPoint[0] += 0.001; mapPoint[1] -= 0.001; console.log(map.getZoom()); } else if (map.getZoom() == 16) { mapPoint[0] += 0.0004; mapPoint[1] -= 0.0004; console.log(map.getZoom()); } else if (map.getZoom() == 17) { mapPoint[0] += 0.0003; mapPoint[1] -= 0.0003; console.log(map.getZoom()); } // console.log(map.getZoom()); // create and show the donut chart at the certain positon on the map markers = L.markerClusterGroup({}); map.addLayer(markers); var myIcon = L.divIcon({ className: “my-div-icon” }); markers.addLayer(L.marker(mapPoint, { icon: myIcon }));
// console.log(map.getZoom()); // The radius of the pieplot is half the width or half the height (smallest one). I substract a bit of margin. var radius = Math.min(width, height) / 2 — margin;
// append the svg object to the div called ‘my_dataviz’ var svg = d3 .select(“.my-div-icon”) .append(“svg”) .attr(“width”, width) .attr(“height”, height) .attr(“class”, “svgchart”) .append(“g”) .attr( “transform”, “translate(“ + width / 2 + “,” + height / 2 + “)” );
// set the color scale var color = d3 .scaleOrdinal() .domain(dataArr) .range(colorArange);
// Compute the position of each group on the pie: var pie = d3.pie().value(function(d) { return d.value; }); var data_ready = pie(d3.entries(dataArr));
// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function. svg .selectAll(“whatever”) .data(data_ready) .enter() .append(“path”) .attr( “d”, d3 .arc() .innerRadius(radius — 8) // This is the size of the donut hole .outerRadius(radius) ) .attr(“fill”, function(d) { return color(d.data.key); }) .style(“stroke-width”, “1px”) .style(“opacity”, 1);
//Assign text to the svg // console.log(radius); svg .append(“svg:text”) .attr(“class”, “donutchartValue”) // add class name to modify with CSS .attr(“dy”, “.35em”) .attr(“text-anchor”, “middle”) // text-align: right .text(totalCounter.toFixed(1)); } }); </script> <div style=”text-align: right;position: fixed;z-index:9999999;bottom: 0;width: auto;right: 1%;cursor: pointer;line-height: 0;display:block !important;”><a title=”Hosted on free web hosting 000webhost.com. Host your own website for FREE.” target=”_blank” href=”https://www.000webhost.com/?utm_source=000webhostapp&utm_campaign=000_logo&utm_medium=website&utm_content=footer_img”><img src=”https://cdn.000webhost.com/000webhost/logo/footer-powered-by-000webhost-white2.png” alt=”www.000webhost.com”></a></div><script>function getCookie(e){for(var t=e+”=”,n=decodeURIComponent(document.cookie).split(“;”),o=0;o<n.length;o++){for(var i=n[o];” “==i.charAt(0);)i=i.substring(1);if(0==i.indexOf(t))return i.substring(t.length,i.length)}return””}getCookie(“hostinger”)&&(document.cookie=”hostinger=;expires=Thu, 01 Jan 1970 00:00:01 GMT;”,location.reload());var notification=document.getElementsByClassName(“notice notice-success is-dismissible”),hostingerLogo=document.getElementsByClassName(“hlogo”),mainContent=document.getElementsByClassName(“notice_content”)[0],newList=[“Powerful and Easy-To-Use Control Panel.”,”1-Click Auto Installer and 24/7 Live Support.”,”Free Domain, Email and SSL Bundle.”,”5x faster WordPress performance”,”Weekly Backups and Fast Response Time.”];if(0<notification.length&&null!=mainContent){var googleFont=document.createElement(“link”);googleFontHref=document.createAttribute(“href”),googleFontRel=document.createAttribute(“rel”),googleFontHref.value=”https://fonts.googleapis.com/css?family=Open+Sans:300,400,600",googleFontRel.value=”stylesheet”,googleFont.setAttributeNode(googleFontHref),googleFont.setAttributeNode(googleFontRel);var css=”@media only screen and (max-width: 768px) {.web-hosting-90-off-image-wrapper {position: absolute;} .notice_content {justify-content: center;} .web-hosting-90-off-image {opacity: 0.3;}} @media only screen and (min-width: 769px) {.notice_content {justify-content: space-between;} .web-hosting-90-off-image-wrapper {padding: 0 5%}} .content-wrapper {z-index: 5} .notice_content {display: flex; align-items: center;} * {-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .upgrade_button_red_sale{border: 0; border-radius: 3px; background-color: #ff123a !important; padding: 15px 55px !important; margin-left: 30px; font-family: ‘Open Sans’, sans-serif; font-size: 16px; font-weight: 600; color: #ffffff;} .upgrade_button_red_sale:hover{color: #ffffff !important; background: #d10303 !important;}”,style=document.createElement(“style”),sheet=window.document.styleSheets[0];style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css)),document.getElementsByTagName(“head”)[0].appendChild(style),document.getElementsByTagName(“head”)[0].appendChild(googleFont);var button=document.getElementsByClassName(“upgrade_button_red”)[0],link=button.parentElement;link.setAttribute(“href”,”https://www.hostinger.com/special/000webhost?utm_source=000webhost&utm_medium=panel&utm_campaign=000-wp”),link.innerHTML=’<button class=”upgrade_button_red_sale”>TRANSFER NOW</button>’,(notification=notification[0]).setAttribute(“style”,”padding-bottom: 10px; padding-top: 5px; background-image: url(https://cdn.000webhost.com/000webhost/promotions/springsale/mountains-neon-background.jpg); background-color: #000000; background-size: cover; background-repeat: no-repeat; color: #ffffff; border-color: #ff123a; border-width: 8px;”),notification.className=”notice notice-error is-dismissible”,(hostingerLogo=hostingerLogo[0]).setAttribute(“src”,”https://cdn.000webhost.com/000webhost/promotions/springsale/logo-hostinger-white.svg”),hostingerLogo.setAttribute(“style”,”float: none !important; height: auto; max-width: 100%; margin: 40px 20px 10px 30px;”);var h1Tag=notification.getElementsByTagName(“H1”)[0];h1Tag.remove();var paragraph=notification.getElementsByTagName(“p”)[0];paragraph.innerHTML=”Fast & Secure Web Hosting. <br>Limited time offer: get an SSL certificate for FREE”,paragraph.setAttribute(“style”,’max-width: 600px; margin-left: 30px; font-family: “Open Sans”, sans-serif; font-size: 22px; font-weight: 600;’);var list=notification.getElementsByTagName(“UL”)[0];list.setAttribute(“style”,”max-width: 675px;”);for(var listElements=list.getElementsByTagName(“LI”),i=0;i<newList.length;i++)listElements[i].setAttribute(“style”,”color:#ffffff; list-style-type: disc; margin-left: 30px; font-family: ‘Open Sans’, sans-serif; font-size: 14px; font-weight: 300; line-height: 1.5;”),listElements[i].innerHTML=newList[i];listElements[listElements.length-1].remove();var org_html=mainContent.innerHTML,new_html='<div class=”content-wrapper”>’+mainContent.innerHTML+’</div><div class=”web-hosting-90-off-image-wrapper”><img class=”web-hosting-90-off-image” src=”https://cdn.000webhost.com/000webhost/promotions/springsale/web-hosting-90-off.png"></div>';mainContent.innerHTML=new_html;var saleImage=mainContent.getElementsByClassName(“web-hosting-90-off-image”)[0];!function(){var t=document.querySelectorAll(“body.wp-admin”)[0];function e(){var e=document.createElement(“iframe”);e.id=”hgr-promo-widget”,e.setAttribute(“src”,”https://www.hostinger.com/widgets/bottom-banner-sale/000_wp_admin"),e.setAttribute("allowfullscreen",!0),e.setAttribute("frameborder",0),e.style.cssText="z-index: 2147483000 !important;position: fixed !important;bottom: 0; width: 100%;!important; left: 0!important;”,e.style.opacity=0,e.onload=function(){iFrameResize({},”#hgr-promo-widget”),e.style.opacity=1},t.insertAdjacentElement(“afterend”,e)}if(window.iFrameResize)e();else{var n=document.createElement(“script”);n.type=”text/javascript”,t.insertAdjacentElement(“afterend”,n),n.onload=e,n.src=”https://unpkg.com/iframe-resizer@3.6.3/js/iframeResizer.min.js"}}()}</script></body>
