Add a line to a map using a GeoJSON source
Add a GeoJSON line to a map using addSource
, then style it using addLayer
’s paint properties.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Add a line to a map using a GeoJSON source</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.ndrive.com/nmapsgl/v.1.6.8/nmaps-gl.js"></script><link href="https://cdn.ndrive.com/nmapsgl/v.1.6.8/nmaps-gl.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><div id="map"></div><script> // TO MAKE THE MAP APPEAR YOU MUST ADD YOUR ACCESS TOKEN nmapsgl.accessToken = '<your access token here>'; const map = new nmapsgl.Map({container: 'map',style: 'Streets',center: [-122.486052, 37.830348],zoom: 14}); map.on('load', () => {map.addSource('route', {'type': 'geojson','data': {'type': 'Feature','properties': {},'geometry': {'type': 'LineString','coordinates': [[-122.48369693756104, 37.83381888486939],[-122.48348236083984, 37.83317489144141],[-122.48339653015138, 37.83270036637107],[-122.48356819152832, 37.832056363179625],[-122.48404026031496, 37.83114119107971],[-122.48404026031496, 37.83049717427869],[-122.48348236083984, 37.829920943955045],[-122.48356819152832, 37.82954808664175],[-122.48507022857666, 37.82944639795659],[-122.48610019683838, 37.82880236636284],[-122.48695850372314, 37.82931081282506],[-122.48700141906738, 37.83080223556934],[-122.48751640319824, 37.83168351665737],[-122.48803138732912, 37.832158048267786],[-122.48888969421387, 37.83297152392784],[-122.48987674713133, 37.83263257682617],[-122.49043464660643, 37.832937629287755],[-122.49125003814696, 37.832429207817725],[-122.49163627624512, 37.832564787218985],[-122.49223709106445, 37.83337825839438],[-122.49378204345702, 37.83368330777276]]}}});map.addLayer({'id': 'route','type': 'line','source': 'route','layout': {'line-join': 'round','line-cap': 'round'},'paint': {'line-color': '#888','line-width': 8}});});</script> </body></html>