# Map Created from JSON Data
Maps can be loaded from JSON data using [IO.loadJSON](../api/IO.html#loadJSON).
Typically, the JSON data will have been created by CGView using the
[IO.downloadJSON](../api/IO.html#downloadJSON) method. Details about the format
can be found in the [CGView JSON](../json.html) section.
## Generate JSON
This tutorial uses a simple JSON object literal, however, the JSON could also
be loaded first from a file using XMLHttpRequest or the Fetch API (see [JSON
Files](details-json-files.html) for more information).
```js
// First create the JSON describing the map
json = {
"cgview": {
"version": "1.7.0",
"sequence": {
"length": 10000
},
"features": [
{
"start": 100,
"stop": 3000,
"name": "F1",
"source": "json-feature",
"legend": "CDS"
},
{
"start": 4000,
"stop": 8000,
"name": "R1",
"source": "json-feature",
"legend": "CDS",
"strand": -1
},
{
"start": 6000,
"stop": 9000,
"name": "F2",
"source": "json-feature",
"legend": "Other"
}
],
"legend": {
"items": [
{
"name": "CDS",
"swatchColor": "rgb(230, 50, 60)",
"decoration": "arrow"
},
{
"name": "Other",
"swatchColor": "rgb(60, 150, 210)",
"decoration": "arrow"
}
]
},
"tracks": [
{
"name": "Features",
"dataType": 'feature',
"dataMethod": 'source',
"dataKeys": 'json-feature'
}
]
}
}
```
## Create [Viewer](../api/Viewer.html) and Load JSON
After creating the viewer, JSON data is loaded with the
[IO.loadJSON](../api/IO.html#loadJSON) method.
```js
// Create the viewer
cgv = new CGView.Viewer('#my-viewer', {
height: 500,
width: 500,
});
// Load the JSON
cgv.io.loadJSON(json);
```
## Draw the Map ##
```js
cgv.draw();
```
The Viewer (id="my-viewer") is shown below.
You can move the map by clicking and dragging, and zoom using your mouse scroll wheel.
Legend colors can be changed by clicking the swatches in the Legend.
If you’d like to experiment with the viewer object, open your browser’s web inspector.
In the console, the viewer is available as *cgv*.