Cette carte interactive a été générée grâce à l'app embedMap : https://www.owlapps.net/modules/owlapps_apps/embedmap
<script src = "https://www.owlapps.net/modules/owlapps_apps/embedmap/main.js" language="javascript" defer></script>
<div name="Displaying pie charts" data-owlappsmaplyrgroup = "yes">
<iframe name= "Using Sencha Ext JS" style = "border:none;width:100%;height:100%;min-height:400px;" data-owlappsmap = "yes" >
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
<name>
Métropoles francaises
</name>
<Snippet>
<![CDATA[
Pie charts made with <a href="https://www.sencha.com/products/extjs" target="_blank" >Sencha Ext Js</a> library!
]]>
</Snippet>
<open> 1 </open>
<Style id= "metros" >
<BalloonStyle>
<text>
<![CDATA[
$[parts/displayName]
]]>
</text>
</BalloonStyle>
<IconStyle>
<scale>
0
</scale>
<richDecos>
<label>
<color>
magenta
</color>
<content>
$[name]
</content>
<anchor>
0, 60
</anchor>
<scale>
2
</scale>
<minZoom>
6
</minZoom>
</label>
<raw>
<content>
<![CDATA[
<iframe alt="Pie Chart" loading="lazy" style="pointer-events:none;overflow:hidden;height:80px;width:80px;border:none;background-color:black;" src="/modules/owlapps_apps/embedmap/piechartgen.html?values=$[parts]" />
]]>
</content>
</raw>
</richDecos>
</IconStyle>
</Style>
<Placemark>
<name>
Bordeaux
</name>
<Snippet>
<![CDATA[
Parts: <br/>
$[parts/displayName]
]]>
</Snippet>
<styleUrl>
#metros
</styleUrl>
<ExtendedData>
<Data name="parts">
<displayName>
<![CDATA[
<span style="color:#94ae0a" ><b> Part 1 </b>: 33.33%</span><br/>
<span style="color:#115fa6" ><b> Part 2 </b>: 33.33%</span><br/>
<span style="color:#a61120" ><b> Part 3 </b>: 33.33%</span><br/>
]]>
</displayName>
<value> 33.33,33.33,33.33 </value>
</Data>
</ExtendedData>
<Point>
<coordinates>
-0.58002,44.84122
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>
Lyon
</name>
<styleUrl>
#metros
</styleUrl>
<ExtendedData>
<Data name="parts">
<displayName>
<![CDATA[
<span style="color:#94ae0a" ><b> Part 1 </b>: 25%</span><br/>
<span style="color:#115fa6" ><b> Part 2 </b>: 60%</span><br/>
<span style="color:#a61120" ><b> Part 3 </b>: 15%</span><br/>
]]>
</displayName>
<value> 25,60,15 </value>
</Data>
</ExtendedData>
<Point>
<coordinates>
4.8322,45.7578
</coordinates>
</Point>
</Placemark>
<Placemark>
<name>
Marseille
</name>
<Snippet>
<![CDATA[
If you want to embed videos, use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" target="_blank" ><embed></a> tag rather than <iframe> tag. For instance: <br/>
<pre><embed type="video/webm" src="https://www.youtube.com/embed/Hd4J8_hC5rA?si=kORGLQTMjxFSygik" width="100%" height="100%" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;" /></pre>
<embed type="video/webm" src="https://www.youtube.com/embed/Hd4J8_hC5rA?si=kORGLQTMjxFSygik" width="100%" height="100%" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share;" />
]]>
</Snippet>
<Style>
<BalloonStyle>
<text>
<![CDATA[
$[Snippet] <br/><br/> Parts:<br/>$[parts/displayName]
]]>
</text>
</BalloonStyle>
</Style>
<styleUrl>
#metros
</styleUrl>
<ExtendedData>
<Data name="parts">
<displayName>
<![CDATA[
<span style="color:#94ae0a" ><b> Part 1 </b>: 50%</span><br/>
<span style="color:#115fa6" ><b> Part 2 </b>: 19.45%</span><br/>
<span style="color:#a61120" ><b> Part 3 </b>: 30.55%</span><br/>
]]>
</displayName>
<value> 50,19.45,30.55 </value>
</Data>
</ExtendedData>
<Point>
<coordinates>
5.37,43.29611
</coordinates>
</Point>
</Placemark>
</Document>
</kml>
</iframe>
</div>
<!DOCTYPE html>
<html>
<head>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-classic/resources/theme-classic-all.css"
rel = "stylesheet" />
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/charts.js"></script>
<link href = "https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/packages/charts/classic/classic/resources/charts-all.css"
rel = "stylesheet" />
<script type = "text/javascript">
Ext.onReady(function() {
const queryString = window.location.search,
urlParams = new URLSearchParams(queryString);
;
let values,
parts = new Array();
values = urlParams.get('values').replace(/\s/g,'').split(',');
for (let i= 0 ; i <values.length; i++) {
parts.push({"name": "Item-" + i , "g1": parseFloat(values[i]) }) ;
}
Ext.create('Ext.chart.PolarChart', {
renderTo: document.body,
width: 80,
height: 80,
store: {
fields: ['name', 'g1'],
data: parts
},
series: [{
type: 'pie',
xField: 'g1',
renderer: function(sprite, record, attr, index, store) {
const value = index;
const color = [ "#94ae0a", "#115fa6","#a61120", "#ff8809", "#ffd13e", "#a61187", "#24ad9a", "#7c7474", "#a66111"][value];
return Ext.apply(attr, {
fill: color
});
}
}]
});
});
</script>
</head>
<body style="width:80px;height:80px;" >
</body>
</html>