i-Boating : Style a geojson line



<!DOCTYPE html>
<html>
<head>
    <title>i-Boating : Style a geojson line</title>
    <meta charset='utf-8'>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <link rel='stylesheet' href='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/2.5/blc-maps.css?rand=1588351015' />
    <style>
        body { margin: 0; padding: 0; }
        html, body, #map { height: 100%; touch-action:none;}
    </style>
</head>

<body>
<div id='map'></div>
<script src='https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/2.5/blc-maps.js?rand=1588351015'></script>


<script>

var _map = null;
window.onload = function() {
var options =
{
    container: 'map',
    zoom: 12.5,
    blc_access_token:'YOUR_ACCESS_TOKEN_HERE',
    center: [-122.3889607,37.8115202]
}
var map = blcgl.external_to_js.blcCreateMapObject(options);

map.on('load', function() {
	_map = map;
	console.log('map loaded. Now add points');
	addPointsToMap(map);
});
}

function addPointsToMap(map) {
var geojson = {
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"geometry": {
				"type": "LineString",
				"coordinates": [
					[-122.417, 37.8267], [-122.413, 37.81]
				]
			},
			"properties":{"id":0, "t":"Test Line"}
		}
	]
};
	var geojsonSourceName = 'marinestation-geojson';
	var geojsonTideLayerName = 'hltide-points';
    map.blcAddSource(geojsonSourceName, {
        "type": "geojson",
        "data": geojson
    });

    map.blcAddLayer({
        id: geojsonTideLayerName,
        type: 'line',
        source: geojsonSourceName,
        layout: {
            "line-join": "round",
            "line-cap": "round"
		
        },
        paint: {
            "line-color": "#1A012C",
            "line-width": 5.0
        }
    }); 

	map.getSource(geojsonSourceName).setData(geojson);
}



</script>
</body>
</html>