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>