JSFiddle - React, Tailwind, and code Playground

by grichter

HTML

<script src="https://d2j08eeng8k3jv.cloudfront.net/stage/ui/js/htmlgui_api.js"></script>
<script src="https://d2j08eeng8k3jv.cloudfront.net/stage/ui/libs/jquery/jquery-1.7.1.min.js">
</script>

<body>
  <!-- iframe per ricevere la mappa interattiva definito in sequito -->

  <iframe id="map1" width="100%" height="600" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=""></iframe>

  <!-- example of a user implemented map control -->

  <div id="tools on map" style="position:absolute;left:3em;bottom:0.7em;background:#fff">
    esempio interazione
    <br>  grandezza grafici:
    <a href="javascript:ixmaps.changeThemeStyle('map1',null,'scale:0.75','factor')">[-]</a>
    <a href="javascript:ixmaps.changeThemeStyle('map1',null,'scale:1.5','factor')">[+]</a>
  </div>

</body>

JavaScript

(function(window, document, $, ixmaps, undefined) {

    // --------------------------------------------
    // define the map
    // --------------------------------------------

    // the SVG maptemplate:
    // provides italian towns defined by CIE
    // --------------------------------------------
    var szMap = "https://d2j08eeng8k3jv.cloudfront.net/stage/maps/svg/maps/ISTAT 2011 Comuni/italia_comuni_2011_s_cie.svgz";

    // the DATA:
    // una tabella con dati SIOPE 
    // --------------------------------------------
    var szData = "https://d2j08eeng8k3jv.cloudfront.net/stage/app/varie/stories/SIOPE_Italia_2014/all_dec_pivot_2014.csv";

    // the iXMaps map+ui container
    // --------------------------------------------
    var szUI = "https://d2j08eeng8k3jv.cloudfront.net/stage/ui/dispatch.htm?ui=embed";

    // parameter to config the iXMaps map+ui container
    // --------------------------------------------
    var szParam = "&svggis=" + szMap +
      "&basemap=ll" +
      "&maptype=OpenStreetMap - FR" +
      "&minimal=1" +
      "&toolbutton=1" +
      "&themelegend=0" +
      "&name=map1";

    // --------------------------------------------
    // define the theme
    // --------------------------------------------

    var theme = {
      "layer": "com2011_s",
      "field": "TITOLO 1O: ENTRATE TRIBUTARIE|TITOLO 1O: SPESE CORRENTI|TITOLO 4O: ENTRATE DERIVANTI DA ALIENAZIONI, DA TRASFERIMENTI DI CAPITALE E DA RISCOSSIONE DI CREDITI|TITOLO 2O: SPESE IN CONTO CAPITALE|TITOLO 5O: ENTRATE DERIVANTI DA ACCENSIONE DI PRESTITI|TITOLO 3O: SPESE PER RIMBORSO DI PRESTITI|TITOLO 6O: ENTRATE DA SERVIZI PER CONTO DI TERZI|TITOLO 4O: SPESE DA SERVIZI PER CONTO DI TERZI|PAGAMENTI DA REGOLARIZZARE|INCASSI DA REGOLARIZZARE|TITOLO 2O: ENTRATE DERIVANTI DA CONTRIBUTI E TRASFERIMENTI CORRENTI|TITOLO 3O: ENTRATE EXTRATRIBUTARIE",
      "field100": "",
      "style": {
        "type": "CHART|SYMBOL|VALUES|SEQUENCE|STAR|SORT|DOWN|SUM|SIZE|SUM",
       ...