JSFiddle - React, Tailwind, and code Playground

by grichter

HTML

<body>

  <div id="map_div" background="#f8f8f8" onclick="event.stopPropagation();return false;">
    <iframe id="map" width="100%" height="700px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://cdn.ixmaps.com.s3-website-eu-west-1.amazonaws.com/ui/dispatch.htm?ui=embed&basemap=ll&maptype=CartoDB - Positron&tools=1&name=map">
    </iframe>
  </div>

  <!-- ixmaps api ================================================================= -->

  <script type="text/javascript" src="http://cdn.ixmaps.com.s3-website-eu-west-1.amazonaws.com/ui/js/htmlgui_api.js">
  </script>
</body>

JavaScript

// --------------------------------------------
		// Temi
		// --------------------------------------------

		var tema = {
		  "layer": "generic",
		  "field": "pop",
		  "field100": "",
		  "style": {
		    "type": "CHART|BUBBLEVALUES",
		    "colorscheme": [
		      "#bb2233"
		    ],
		    "shadow": "true",
		    "dbtable": "theme_data",
		    "lookupfield": "lat|lon",
		    "titlefield": "name",
		    "showdata": "true",
		    "units": "",
		    "normalsizevalue": "1000000",
		    "scale": "1",
		    "title": "Population"
		  }
		};

		var data = [{
		  name: "Roma",
		  pop: "2875472",
		  lat: "41.893056",
		  lon: "12.482778"
		}, {
		  name: "Parigi",
		  pop: "7 389 520",
		  lat: "48.856667",
		  lon: "2.351944"
		}, {
		  name: "Berlino",
		  pop: "3 531 201",
		  lat: "52.518611",
		  lon: "13.408056"
		}, {
		  name: "Londra",
		  pop: "8 787 892",
		  lat: "51.507222",
		  lon: "-0.1275"
		}]

		ixmaps.waitForMap("map", function(map) {

		  map.setView([47.03270271408684, 9.5361328125], 5);
		  map.setData(data, {
		    type: "json",
		    name: "theme_data"
		  });
		  map.newTheme('title', tema, 'clear');
		  map.setOptions({
		    autoSwitchInfo: true
		  });

		});