# Using CGParse.js
[CGParse.js](https://github.com/sciguy/cgview-parse) is a JavaScript
library that converts a sequence file (e.g. GenBank, EMBL, FASTA) into JSON that
can be loaded into CGView.js.
This tutorial will create a map for the _Mycoplasma pneumoniae_ FH genome from a GenBank file.
## Setting up CGParse.js
### Install CGParse.js
Add the CGParse.js library as as script tag in your HTML file:
<script src="https://cdn.jsdelivr.net/npm/cgparse/dist/cgparse.min.js"></script>
This will load the CGParse.js library as the global variable `CGParse`. For more installation options, see [CGParse.js on GitHub](https://github.com/sciguy/cgview-parse#installation).
## Create a new [Viewer](../api/Viewer.html) ##
```js
// Frist create the viewer
cgv = new CGView.Viewer('#my-viewer', {
height: 500,
width: 500,
});
```
## CGParse.js Configuration File
An optional config object can be provided to CGParse.CGViewBuilder.
The config is a JSON object with options that are added to the [CGView JSON](https://js.cgview.ca/json.html).
They can be any settings available for the following components:
[settings](https://js.cgview.ca/docs.html#s.Settings),
[backbone](https://js.cgview.ca/docs.html#s.Backbone),
[ruler](https://js.cgview.ca/docs.html#s.Ruler),
[dividers](https://js.cgview.ca/docs.html#s.Divider),
[annotation](https://js.cgview.ca/docs.html#s.Annotation),
[sequence](https://js.cgview.ca/docs.html#s.Sequence),
[legend](https://js.cgview.ca/docs.html#s.Legend),
[track](https://js.cgview.ca/docs.html#s.Track),
[captions](https://js.cgview.ca/docs.html#s.Caption)
```js
config = {
"settings": {
"backgroundColor": "white",
"showShading": true,
"arrowHeadLength": 0.3
},
"ruler": {
"font": "sans-serif, plain, 10",
"color": "black"
},
"legend": {
"position": "top-right",
"defaultFont": "sans-serif, plain, 14",
"items": [
{
"name": "CDS",
"swatchColor": "rgba(0,0,153,0.5)",
"decoration": "arrow"
},
{
"name": "tRNA",
"swatchColor": "rgba(153,0,153,0.5)"
},
{
"name": "rRNA",
"swatchColor": "rgba(0,153,53,0.5)"
}
]
},
"tracks": [
{
"name": "CG Content",
"thicknessRatio": 2,
"position": "inside",
"dataType": "plot",
"dataMethod": "sequence",
"dataKeys": "gc-content"
},
{
"name": "CG Skew",
"thicknessRatio": 2,
"position": "inside",
"dataType": "plot",
"dataMethod": "sequence",
"dataKeys": "gc-skew"
}
]
}
```
## Parse GenBank file with CGParse.js and load it with CGView.js
GenBank file: _Mycoplasma pneumoniae_ FH (NZ_CP010546) [[NCBI](https://www.ncbi.nlm.nih.gov/nuccore/NZ_CP010546.1),
Download]
```js
// Download the GenBank file
var request = new XMLHttpRequest();
request.open('GET', '../data/seq/NZ_CP010546.gbk', true);
request.onload = function() {
// Get the GenBank file text
var genbankText = request.response;
// Parse GenBank
var seqFile = new CGParse.SequenceFile(genbankText);
var cgvJSON = seqFile.toCGViewJSON({
// Config defined above
config: config,
// Common settings for parsing bacterial genomes
excludeFeatures: ['source', 'gene', 'exon'],
excludeQualifiers: ['translation'],
});
// Load the JSON into CGView.js
cgv.io.loadJSON(cgvJSON);
// Draw the map
cgv.draw()
};
request.send();
```
## More Examples
See the CGView.js [examples](../examples/index.html) for more maps created by
CGParse.js.
## Map
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*.