---
title: "Display line that crosses 180th meridian | JavaScript maps SDK"
description: "Draw a line across the 180th meridian using a GeoJSON source."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Display line that crosses 180th meridian
Draw a line across the 180th meridian using a [GeoJSON source](https://docs.maptiler.com/gl-style-specification/sources/#geojson).
### NPM module setup
```bash
npm install --save @maptiler/sdk
```
#### main.js
```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
container: 'map',
style: MapStyle.STREETS,
center: [-41.62667, 26.11598],
zoom: 0
});
map.on('load', function () {
map.addLayer({
'id': 'route',
'type': 'line',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': createGeometry(false)
}
},
'layout': { 'line-cap': 'round' },
'paint': {
'line-color': '#007296',
'line-width': 4
}
});
map.addLayer({
'id': 'route-label',
'type': 'symbol',
'source': 'route',
'layout': {
'symbol-placement': 'line-center',
'text-field': 'Crosses the world'
}
});
map.addLayer({
'id': 'route-two',
'type': 'line',
'source': {
'type': 'geojson',
'data': {
'type': 'Feature',
'properties': {},
'geometry': createGeometry(true)
}
},
'layout': { 'line-cap': 'round' },
'paint': {
'line-color': '#F06317',
'line-width': 4
}
});
map.addLayer({
'id': 'route-two-label',
'type': 'symbol',
'source': 'route-two',
'layout': {
'symbol-placement': 'line-center',
'text-field': 'Crosses 180th meridian'
}
});
function createGeometry(doesCrossAntimeridian) {
const geometry = {
'type': 'LineString',
'coordinates': [
[-72.42187, -16.59408],
[140.27343, 35.67514]
]
};
// To draw a line across the 180th meridian,
// if the longitude of the second point minus
// the longitude of original (or previous) point is >= 180,
// subtract 360 from the longitude of the second point.
// If it is less than 180, add 360 to the second point.
if (doesCrossAntimeridian) {
const startLng = geometry.coordinates[0][0];
const endLng = geometry.coordinates[1][0];
if (endLng - startLng >= 180) {
geometry.coordinates[1][0] -= 360;
} else if (endLng - startLng < 180) {
geometry.coordinates[1][0] += 360;
}
}
return geometry;
}
});
```
#### index.html
```html
Display line that crosses 180th meridian
```
#### style.css
```css
body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}
```
### Basic JavaScript setup
```html
Display line that crosses 180th meridian
```
## Related examples
### [Render world copies](https://docs.maptiler.com/sdk-js/examples/render-world-copies/)
Examples
Toggle rendering multiple copies of the world.
### [Restrict map panning to an area](https://docs.maptiler.com/sdk-js/examples/restrict-bounds/)
Examples
Prevent map panning by setting maximum bounds.
### [GeoJSON line layer](https://docs.maptiler.com/sdk-js/examples/geojson-line/)
Tutorials
Add a GeoJSON line overlay to the map application.