Component JNC.Leaflet.NavionicsOverlay

"Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. See more on Leaflet Site". On this page we show how to insert Navionics Overlays inside the Leaflet Engine. "Leaflet" as default doesn't have overlay, but here we give you the opportunity to select

Navionics Overlays over Leaflet Map Engine (none-transparent)


var map = L.map('nautical-non-transparent-map-container');

var overlay=new JNC.Leaflet.NavionicsOverlay({
    navKey: 'navionics_key',
    chartType: JNC.NAVIONICS_CHARTS.NAUTICAL,
    isTransparent: false,
    // Enable Navionics logo without payoff (default behaviour)
    logoPayoff: false
    zIndex: 1
});

map.setView([36.140751,-5.353585], 14);
overlay.addTo(map);

Navionics NauticalChart base-overlay


var map = L.map('nautical-map-container');

var overlay=new JNC.Leaflet.NavionicsOverlay({
    navKey: 'navionics_key',
    chartType: JNC.NAVIONICS_CHARTS.NAUTICAL,
    isTransparent: true,
    // Enable Navionics logo with payoff
    logoPayoff: true,
    zIndex: 1
}));

map.setView([36.140751,-5.353585], 14);
overlay.addTo(map);

Navionics SonarCharts base-overlay


var map = L.map('sonar-map-container');

var overlay=new JNC.Leaflet.NavionicsOverlay({
    navKey: 'navionics_key',
    chartType: JNC.NAVIONICS_CHARTS.SONARCHART,
    isTransparent: true,
    zIndex: 1
});

map.setView([36.140751,-5.353585], 14);
overlay.addTo(map);