AnyChart Demo

author(s): Alice

HTML

<script src='https://cdn.anychart.com/js/latest/anychart-bundle.min.js'></script>
<div id='container'></div>
<textarea id="geojson" placeholder="Paste your GeoJSON here to test your map" style="height:100px;width:100%">{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::102003" } },
                                                                                
"features": [
{ "type": "Feature", "properties": { "labelrank": 4.000000, "name": "Bahamas", "abbrev": "Bhs.", "iso_a2": "BS", "iso_a3": "BHS", "continent": "North America", "region_un": "Americas", "subregion": "Caribbean", "region_wb": "Latin America & Caribbean", "WOE_ID": 23424758.000000 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 748521.97954353492, -1547128.1775138457 ], [ 723436.07309143094, -1554424.8303114963 ], [ 692615.35201482067, -1493748.126287356 ], [ 651837.65984262677, -1464902.4181289007 ], [ 669481.67908004497, -1394229.0273294197 ], [ 700556.59744724352, -1396455.5123883421 ], [ 743192.1879287546, -1484161.7997558375 ], [ 748521.97954353492, -1547128.1775138457 ] ] ], [ [ [ 696492.89932154014, -1241839.2358290495 ], [ 587828.55503698636, -1266733.1627459559 ], [ 578308.67388872872, -1226599.7609785364 ], [ 691407.91554678115, -1213567.6934508896 ], [ 696492.89932154014, -1241839.2358290495 ] ] ], [ [ [ 778900.22508494533, -1234378.9187151894 ], [ 767741.00278395985, -1313512.0210288446 ], [ 748008.86381279735, -1300973.5877700711 ], [ 745216.70886892686, -1243673.5731762634 ], [ 695824.20208542212, -1191198.8701277394 ], [ 778900.22508494533, -1234378.9187151894 ] ] ] ] } },
{ "type": "Feature", "properties": { "labelrank": 6.000000, "name": "Belize", "abbrev": "Belize", "iso_a2": "BZ", "iso_a3": "BLZ", "continent": "North America", "region_un": "Americas", "subregion": "Central America", "region_wb": "Latin America & Caribbean", "WOE_ID": 23424760.000000 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [...

CSS

html, body {
	height: 100%; 
	width: 100%; 
	margin: 0;    
	padding: 0;   
}

JavaScript

$('#run').click(function () {     
  var geojson = $.parseJSON($('#geojson').val());

    var map = anychart.map();
    map.geoData(geojson);
    map.title('Custom title');
    map.container('container');
    map.draw();
    document.getElementById('container').style.height = '100%';
    document.getElementById('container').style.width = '100%';
});