Map1.tsx

import InnerHTML from 'dangerously-set-html-content'
/* import { useEffect } from 'react' */


export function Map1(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/statics/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript> 
</div>`
return( 
    <InnerHTML html={htmlFile} />
)   
}


/* export function Map2(){
    const htmlFile = `<div style="min-height: 374px">
        <script type="text/javascript" defer src="src/utils/mapscript.js" charset="utf-8">
        </script>
        <noscript>
        <img src="https://static.igem.wiki/teams/5247/charts-maps/map1-full.png" alt="" />
        </noscript>
</div>`
return(
    <div dangerouslySetInnerHTML={{ __html: htmlFile }} />
)   
} */


/* min-height: "374px" */
/* import { renderDatawrapper } from './seclarations'

 export function Map4(){
	console.log("Map 4 startet")
	
		renderDatawrapper();
    return(
        <>
        
        <div className="datawrapper-script-embed vis-height-fixed vis-d3-maps-choropleth" id="datawrapper-vis-llngz" style={{all: "initial"}}>

		<div className="web-component-body" style={{position: "relative"}}>
			<div className="chart dw-chart vis-d3-maps-choropleth">
				<div className="outer-container svelte-ej8jdi">
					<div className="container container-body datawrapper-llngz-umw1i2">
						<div className="container container-bodyTop datawrapper-llngz-1g865o2">
							<div className="container container-bodyCenter datawrapper-llngz-cca7ux">
								<div slot="visBody" id="chart" className="dw-chart-body vis-height-fixed datawrapper-llngz-1omm849 svelte-9ysojt">
									<div className="dw-chart-body-content svelte-9ysojt datawrapper-llngz-mbp9a6" aria-hidden="false">
                                  
									<div className="map-key export-rect map-key-mt">
										<div className="color-legend continuous horizontal dir-ltr datawrapper-llngz-1j8h2cc datawrapper-llngz-1tjke6r datawrapper-llngz-zuu2r2" role="graphics-legend" aria-label="Continuous color legend, ranging from 0 to 2,542." style={{width: "170px", height: "auto"}}>
											<svg width="170.5" height="28.483322143554688">
												<g>
													<rect width="170" height="13" style={{fill: "url(#g-bca9)"}}>
														</rect>
														<g className="labels" aria-hidden="true" transform="translate(0,16)">
															<text className="min" transform="translate(0,0)">
																<tspan x="0" dy="0">0</tspan>
															</text>
															<text className="max" transform="translate(170,0)">
																<tspan x="0" dy="0">2,542</tspan>
															</text>
														</g>
														<g className="highlight" aria-hidden="true">
                                        					<g className="text" transform="translate(0,25)">
																<text>
																</text>
															</g>
														</g>
												</g>
												<defs>
													<linearGradient id="g-bca9" x2="1" y2="0">
														<stop offset="0%" stopColor="rgb(250, 233, 158)"></stop>
														<stop offset="6.25%" stopColor="rgb(249, 222, 118)"></stop>
														<stop offset="12.5%" stopColor="rgb(247, 211, 73)"></stop>
														<stop offset="18.75%" stopColor="rgb(246, 198, 37)"></stop>
														<stop offset="25%" stopColor="rgb(250, 181, 53)"></stop>
														<stop offset="31.25%" stopColor="rgb(254, 163, 64)"></stop>
														<stop offset="37.5%" stopColor="rgb(253, 149, 59)"></stop>
														<stop offset="43.75%" stopColor="rgb(249, 137, 47)"></stop>
														<stop offset="50%" stopColor="rgb(245, 125, 34)"></stop>
														<stop offset="56.25%" stopColor="rgb(228, 93, 95)"></stop>
														<stop offset="62.5%" stopColor="rgb(206, 57, 141)"></stop>
														<stop offset="68.75%" stopColor="rgb(181, 20, 164)"></stop>
														<stop offset="75%" stopColor="rgb(160, 18, 145)"></stop>
														<stop offset="81.25%" stopColor="rgb(140, 16, 126)"></stop>
														<stop offset="87.5%" stopColor="rgb(112, 28, 100)"></stop>
														<stop offset="93.75%" stopColor="rgb(80, 35, 71)"></stop>
														<stop offset="100%" stopColor="rgb(50, 35, 44)"></stop>
													</linearGradient>
												</defs>
											</svg>
										</div>
									</div>
									
										<div className="map-outer">
											<canvas width="2235.34" height="1006" style={{width: "1117.67px", height: "503px"}}></canvas>
											<svg className="svg-main world-2019" style={{width: "100%", overflow: "hidden", position: "relative"}} width="1117.67" height="503">
												<g className="map" transform="translate(0,0) scale(1)">
													<rect className="background" width="1117.67" height="503"></rect>
													<path className="region-outline hover-outline has-data" style={{vectorEffect: "non-scaling-stroke", strokeWidth: "0.9px", strokeLinejoin: "round", fill: "none"}} d="M0,0"></path>
												</g>
											</svg>
											<div className="annotations"></div>
										</div>
									
										<div className="dw-tooltip" style={{maxHeight: "220px", overflowY: "auto"}}></div>
									</div>
								</div>
							</div>
						</div>
						<div className="container-afterChart svelte-ej8jdi"></div>
					</div>
				</div>
			</div>
		</div>
        </div>
        
        </>
    )
    
} 

 */