i-Boating : Specify icon offset in geojson



<!DOCTYPE html>
<html>
<head>
    <title>i-Boating : Specify icon offset in geojson</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');
	addImagesToMap(map);
});
}

function addImagesToMap(map) {
    map.loadImage('https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/2.5/examples/black_marker.png', (error, image) => {
        if (error) throw error;
        map.addImage('black_marker', image);
	addPointsToMap(map);
    }
    );
}
function addPointsToMap(map) {
	var geojsonSourceName = 'marinestation-geojson';
	var geojsonTideLayerName = 'hltide-points';
    var geojsonUrl = 'https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/2.5/examples/test-offset-in-file.geojson';
    map.blcAddSource(geojsonSourceName, {
        "type": "geojson",
        "data": geojsonUrl
    });

        map.blcAddLayer({
            "id": 'pin_icons_layer',
            "type": "symbol",
            "source": geojsonSourceName,
            "layout": {
		    "icon-image":"black_marker" ,
            	     "icon-allow-overlap" : true,
            	     "icon-ignore-placement" : true,
		    "icon-offset-x-perc" : "{xperc}",
		    "icon-offset-y-perc" : "{yperc}",
       		    "text-field": "{t}",
       		    "text-font": ["osb"],
                    "text-offset": [0.0, 1.0],
                    "text-allow-overlap" : false,
            	     "text-optional" : true,
                    "text-size": 12,
		    "icon-size":0.25
            },
           "paint": {
               "text-color": "#ffffff",
               "text-halo-color": "#000000",
               "text-halo-width": 1
           },
        });

    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) {
			var index = features[0].properties.id;
			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>