<!DOCTYPE html>
<html>
<head>
<title>i-Boating : Style geojson points using custom icon and text.</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');
addImagesToMap(map);
});
}
function addImagesToMap(map) {
map.loadImage('https://fishing-app.gpsnauticalcharts.com/i-boating-fishing-marine-navigation-sdk/5.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/5.5/examples/test.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-perc": [0, -0.5],
"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>
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 -