<!DOCTYPE html>
<html>
<head>
<title>i-Boating :Style a geojson polygon</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/5.5/blc-maps.css?rand=1695425337' />
<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/5.5/blc-maps.js?rand=1695425337'></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": "Polygon",
"coordinates": [
[
[-122.417, 37.8267], [-122.413, 37.81], [-122.4429, 37.8183]
]
]
},
"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: 'fill',
source: geojsonSourceName,
layout: {
},
paint: {
"fill-color": "#1A012C",
"fill-opacity": 0.5
}
});
map.getSource(geojsonSourceName).setData(geojson);
}
</script>
</body>
</html>
New! i-Hunting Topo Maps now available -
iPhone / iPad Marine Navigation App and WMTS App are now available -
New! Macbook ChartPlotter, and Windows Marine Navigation App now available -