2. i-Boating SDK Examples
  3. i-Boating : Add Points from inlined geojson and style them with clickable circles

i-Boating : Add Points from inlined geojson and style them with clickable circles 



<!DOCTYPE html>
<html>
<head>
    <title>i-Boating : Add Points from inlined geojson and style them with clickable circles </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: 10.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');
var geojson = {
	"type": "FeatureCollection",
	"features": [
		{
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [-122.417, 37.8267]
			},
			"properties":{"id":0, "t":"Alcatraz Island"}
		},
		{
			"type": "Feature",
			"geometry": {
				"type": "Point",
				"coordinates": [-122.413, 37.81]
			},
			"properties":{"id":0, "t":"San Francisco, North Point, Pier 41"}
		}
	]
};
    var geojsonSourceName = 'marinestation-geojson';
    var geojsonTideLayerName = 'hltide-points';
    map.blcAddSource(geojsonSourceName, {
        "type": "geojson",
        "data": geojson
    });

    map.blcAddLayer({
        id: geojsonTideLayerName,
        type: 'circle',
        source: geojsonSourceName,
        paint: {
            'circle-radius': 7,
	    'circle-stroke-width':3,
            'circle-color': '#800517' 
        }
    }); 
    map.getSource(geojsonSourceName).setData(geojson);

    map.on('click', interactionClick);
});
}


var _popup = null;
function interactionClick(e) {
	if(_popup != null) {
		_popup.remove();
		_popup = null;
	}
	var width = 32;
	var height = 32;
	var point = e.point;
	var geojsonTideLayerName = 'hltide-points';
        var features = _map.queryRenderedFeatures(
		[
			[point.x - width / 2, point.y - height / 2],
			[point.x + width / 2, point.y + height / 2]
  		], 
		{ layers: [geojsonTideLayerName] }
	);
	if(features.length > 0) {
		if(features[0].properties.id !== undefined) {
			tappedOnPoint(features[0]);
		}
	}
}
function tappedOnPoint(feature) {
	if(feature) {
		var coordinates = feature.geometry.coordinates;
		var name;
		if(feature.properties.t !== undefined) {
			name = feature.properties.t;
		}
		else {
			//'Name Not specified';
	    		var lng = coordinates[1];
	    		var lat = coordinates[0];
	    		name = lat + ','  + lng;
		}
		if(_popup == null) {
			_popup = new blcgl.Popup({closeOnClick: false, closeButton:false, anchor:'bottom'})
				.setLngLat(coordinates)
				.setHTML('<h1>'+name+'</h1>')
				.addTo(_map);
		}
		_popup.setLngLat(coordinates); 
		_popup.setHTML('<h1>'+name+'</h1>')
	}
}


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