Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<script src="https://cdn.amcharts.com/lib/editor/map/5/viewer.js"></script>
<div id="chartdiv"></div>
              
            
!

CSS

              
                body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: 12px;
	padding: 0;
	margin: 0;
}

#chartdiv {
	width: 100vw;
	height: 100vh;
}
              
            
!

JS

              
                
/**
 * -----------------------------------------------
 * This map was created using amCharts Map Editor.
 *
 * To create your own map visit:
 * https://pixelmap.amcharts.com/
 *
 * For more information on amCharts visit:
 * https://www.amcharts.com/
 * -----------------------------------------------
 */

am5viewer.create("chartdiv", {
  "settings": {
    "editor": {
      "theme": "dark",
      "themeTags": [
        "dark"
      ],
      "userData": {
        "projection": "geoMercator",
        "geodata": "worldLow"
      },
      "pointTypeKey": "Plane",
      "pointLabelText": ""
    },
    "editor.map": {
      "minZoomLevel": 0.8,
      "projection": "geoMercator",
      "panX": "rotateX",
      "zoomControl": {
        "type": "ZoomControl",
        "settings": {
          "visible": true,
          "position": "absolute",
          "layout": {
            "type": "VerticalLayout"
          },
          "themeTags": [
            "zoomcontrol"
          ],
          "layer": 30
        }
      },
      "background": {
        "type": "Rectangle",
        "settings": {
          "fill": {
            "type": "Color",
            "value": "#1a1a1a"
          },
          "fillOpacity": 1,
          "width": 1205,
          "height": 852,
          "x": 0,
          "y": 0,
          "fillPattern": {
            "type": "GrainPattern",
            "settings": {
              "maxOpacity": 0.08,
              "density": 0.2,
              "colors": [
                {
                  "type": "Color",
                  "value": "#aaaaaa"
                }
              ]
            }
          },
          "isMeasured": false
        }
      },
      "themeTags": [
        "map"
      ],
      "translateX": 602.5,
      "translateY": 590.3332330331325
    },
    "editor.pointTemplate": {
      "toggleKey": "active",
      "centerX": {
        "type": "Percent",
        "value": 50
      },
      "centerY": {
        "type": "Percent",
        "value": 50
      },
      "tooltipText": "{name}"
    },
    "editor.bubbleTemplate": {
      "toggleKey": "active",
      "tooltipText": "{name}: {value}"
    },
    "editor.pixelTemplate": {
      "tooltipText": "{name}",
      "toggleKey": "active"
    },
    "editor.linePointTemplate": {
      "toggleKey": "active",
      "centerX": {
        "type": "Percent",
        "value": 50
      },
      "centerY": {
        "type": "Percent",
        "value": 50
      },
      "tooltipText": "{name}"
    },
    "editor.labelTemplate": {
      "toggleKey": "active",
      "tooltipText": "{name}"
    },
    "editor.polygonSeries": {
      "valueField": "value",
      "calculateAggregates": true,
      "id": "polygonseries",
      "exclude": [
        "AQ"
      ],
      "geometryField": "geometry",
      "geometryTypeField": "geometryType",
      "idField": "id"
    },
    "editor.lineSeries": {
      "layer": 30,
      "id": "lineseries",
      "lineTypeField": "lineType",
      "geometryField": "geometry",
      "geometryTypeField": "geometryType",
      "idField": "id"
    },
    "editor.pointSeries": {
      "fixedField": "fixed",
      "id": "pointseries",
      "geometryField": "geometry",
      "geometryTypeField": "geometryType",
      "idField": "id"
    },
    "editor.labelSeries": {
      "fixedField": "fixed",
      "id": "labelseries",
      "geometryField": "geometry",
      "geometryTypeField": "geometryType",
      "idField": "id"
    },
    "editor.bubbleSeries": {
      "calculateAggregates": true,
      "valueField": "value",
      "polygonIdField": "id",
      "id": "bubbleseries",
      "geometryField": "geometry",
      "geometryTypeField": "geometryType",
      "idField": "id"
    },
    "editor.gridSeries": {
      "themeTags": [
        "grid"
      ],
      "affectsBounds": false,
      "lineTypeField": "lineType",
      "geometryField": "geometry",
      "geometryTypeField": "geometryType",
      "idField": "id",
      "clipExtent": true
    },
    "editor.backgroundSeries": {
      "visible": false,
      "themeTags": [
        "polygon",
        "background"
      ],
      "affectsBounds": false,
      "geometryField": "geometry",
      "geometryTypeField": "geometryType",
      "idField": "id"
    },
    "editor.backgroundSeries.mapPolygons.template": {
      "forceInactive": true,
      "fill": {
        "type": "Color",
        "value": "#222222"
      },
      "stroke": {
        "type": "Color",
        "value": "#222222"
      }
    },
    "editor.gridSeries.mapLines.template": {
      "forceInactive": true,
      "stroke": {
        "type": "Color",
        "value": "#ffffff"
      },
      "strokeOpacity": 0.04
    }
  },
  "data": {
    "editor.polygonSeries": [],
    "editor.lineSeries": [
      {
        "settings": {
          "type": "Template",
          "settings": {
            "stroke": {
              "type": "Color",
              "value": "#ffffff"
            },
            "strokeOpacity": 0.5,
            "strokeWidth": 1
          }
        },
        "linePointSeries": {
          "type": "MapPointSeries",
          "settings": {
            "geometryField": "geometry",
            "geometryTypeField": "geometryType",
            "idField": "id",
            "id": "linepointseries_0"
          },
          "properties": {
            "data": [
              {
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    -76.43153,
                    41.06439
                  ],
                  "__parse": false
                },
                "id": "linepoint_1",
                "name": "Point 1",
                "settings": {
                  "type": "Template",
                  "settings": {
                    "fillOpacity": 1,
                    "fill": {
                      "type": "Color",
                      "value": "#fbad26"
                    },
                    "stroke": {
                      "type": "Color",
                      "value": "#000000"
                    },
                    "strokeOpacity": 0.5,
                    "scale": 0.7,
                    "strokeWidth": 0.5
                  }
                },
                "pointType": "Target",
                "labelId": "label_1",
                "__parse": true
              },
              {
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    3.43568,
                    47.06719
                  ],
                  "__parse": false
                },
                "id": "linepoint_2",
                "name": "Point 2",
                "settings": {
                  "type": "Template",
                  "settings": {
                    "fillOpacity": 1,
                    "fill": {
                      "type": "Color",
                      "value": "#fbad26"
                    },
                    "stroke": {
                      "type": "Color",
                      "value": "#000000"
                    },
                    "strokeOpacity": 0.5,
                    "scale": 0.7,
                    "strokeWidth": 0.5
                  }
                },
                "pointType": "Target",
                "labelId": "label_2",
                "__parse": true
              },
              {
                "geometry": {
                  "type": "Point",
                  "coordinates": [
                    117.75934,
                    40.76337
                  ],
                  "__parse": false
                },
                "id": "linepoint_3",
                "name": "Point 3",
                "settings": {
                  "type": "Template",
                  "settings": {
                    "fillOpacity": 1,
                    "fill": {
                      "type": "Color",
                      "value": "#fbad26"
                    },
                    "stroke": {
                      "type": "Color",
                      "value": "#000000"
                    },
                    "strokeOpacity": 0.5,
                    "scale": 0.7,
                    "strokeWidth": 0.5
                  }
                },
                "pointType": "Target",
                "labelId": "label_3",
                "__parse": true
              }
            ]
          }
        },
        "geometry": {
          "type": "Line",
          "__parse": false
        },
        "id": "line_1",
        "name": "Line 1",
        "__parse": true
      }
    ],
    "editor.pointSeries": [
      {
        "fixed": false,
        "geometry": {
          "type": "Point",
          "coordinates": [
            -37.19502,
            24.05695
          ],
          "__parse": false
        },
        "id": "point_1",
        "name": "Point 1",
        "settings": {
          "type": "Template",
          "settings": {
            "fillOpacity": 0.7,
            "fill": {
              "type": "Color",
              "value": "#e03f35"
            },
            "stroke": {
              "type": "Color",
              "value": "#000000"
            },
            "strokeOpacity": 0.5,
            "scale": 0.7,
            "strokeWidth": 0.5,
            "x": {
              "type": "Percent",
              "value": 39.66804979253112
            },
            "y": {
              "type": "Percent",
              "value": 59.546170660027876
            }
          }
        },
        "pointType": "Plane",
        "lineId": "line_1",
        "positionOnLine": 0.8,
        "autoRotate": true,
        "animationDuration": 8300,
        "animationFlip": true,
        "prevPosition": 0.8835662650602522,
        "__parse": true
      }
    ],
    "editor.labelSeries": [
      {
        "fixed": false,
        "geometry": {
          "type": "Point",
          "coordinates": [
            -76.43152919151972,
            41.06439038362484
          ],
          "__parse": false
        },
        "id": "label_1",
        "name": "New York",
        "populateText": true,
        "settings": {
          "type": "Template",
          "settings": {
            "text": "{name}",
            "fill": {
              "type": "Color",
              "value": "#ffffff"
            },
            "fillOpacity": 1,
            "fontSize": "1em",
            "fontWeight": "normal",
            "textAlign": "left"
          }
        },
        "pointId": "linepoint_1",
        "pointSeries": "linepointseries_0",
        "labelPosition": "right",
        "__parse": true
      },
      {
        "fixed": false,
        "geometry": {
          "type": "Point",
          "coordinates": [
            3.4356846473029043,
            47.06718686377132
          ],
          "__parse": false
        },
        "id": "label_2",
        "name": "Paris",
        "populateText": true,
        "settings": {
          "type": "Template",
          "settings": {
            "text": "{name}",
            "fill": {
              "type": "Color",
              "value": "#ffffff"
            },
            "fillOpacity": 1,
            "fontSize": "1em",
            "fontWeight": "normal",
            "textAlign": "left"
          }
        },
        "pointId": "linepoint_2",
        "pointSeries": "linepointseries_0",
        "labelPosition": "right",
        "__parse": true
      },
      {
        "fixed": false,
        "geometry": {
          "type": "Point",
          "coordinates": [
            117.75934217777488,
            40.763372180283774
          ],
          "__parse": false
        },
        "id": "label_3",
        "name": "Beijing",
        "populateText": true,
        "settings": {
          "type": "Template",
          "settings": {
            "text": "{name}",
            "fill": {
              "type": "Color",
              "value": "#ffffff"
            },
            "fillOpacity": 1,
            "fontSize": "1em",
            "fontWeight": "normal",
            "textAlign": "left"
          }
        },
        "pointId": "linepoint_3",
        "pointSeries": "linepointseries_0",
        "labelPosition": "right",
        "__parse": true
      }
    ],
    "editor.bubbleSeries": [],
    "editor.gridSeries": []
  }
});

              
            
!
999px

Console