# 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.1.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 using the
[IO.loadJSON](../api/IO.html#loadJSON) method.
```js
// Create the viewer
cgv = new CGV.Viewer('#my-viewer', {
height: 500,
width: 500,
});
// Load the JSON
cgv.io.loadJSON(json);
```
## Draw the Map ##
```js
cgv.draw();
```
The resulting Viewer (id='my-viewer') is below. You can move the map around by clicking and dragging.
You can zoom, using your mouse scroll wheel. The Lenged colors can be changed by clicking on the swatches in the Legend.
If you want play around with the viewer object, open your browser web inspector. In the console, you can access the viewer as *cgv*.