# Tutorials
Tutorial | Description
-----------------------------------------|--------------------------------------------
[Installation](tutorial-installation.html)| Learn how to install CGView.js.
[Basic Map](tutorial-basic.html) | Create a simple map with features and a plot.
[Sequence Map](tutorial-sequence.html) | Create a map with features and plots extracted from the sequence.
[JSON Map](tutorial-json.html) | Create a map by importing from JSON.
[CGParse.js](tutorial-cgparse.html) | Build CGView JSON from GenBank files using CGParse.js.
[Map Controls](tutorial-controls.html) | Add custom controls for interacting with a map.
# Details
Detail | Description
-----------------------------------------|--------------------------------------------
[JSON Files](details-json-files.html) | Learn how to load JSON data from files.
[Meta Data](details-meta-data.html) | Learn how to store extra data using the meta property.
[Map Scales](details-map-scales.html) | Learn about the different scales and layouts.
---
### Tutorial Notes
All the tutorials use script tags and local copies of D3 and CGView.js that expose the `CGView` global variable.
The [installation guide](tutorial-installation.html) explains how to install CGView.js via npm/yarn or jsDelivr CDN.
It also includes an example of a complete HTML file using jsDelivr for installation.
### Responsive Map Size
```js
// Tutorials and examples call a resize function after drawing the map,
// allowing it to adjust automatically when the window or layout changes.
function autoResizeMyViewer() {
const setHeight = 500;
const mainPadding = 20 * 2;
function myResize() {
const main = document.getElementsByTagName('main')[0];
const mainWidth = main.clientWidth - mainPadding;
const height = Math.min(mainWidth, setHeight);
cgv.resize(mainWidth, height);
}
window.onresize = myResize;
window.onload = function () {
setTimeout( () => {
myResize();
}, 100);
}
}
```