Component JNC.Google.NavionicsOverlay

Navionics NauticalChart base-overlay


// The Google Map Engine options
var gibilterra = new google.maps.LatLng(36.140751,-5.353585);
var gMapNauticalOptions = {
    zoom: 14,
    center: gibilterra,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Creation of  Google Map Engine
var gMapNautical = new google.maps.Map(document.getElementById("nautical-map-container"), gMapNauticalOptions);

//Navionics NauticalChart
var navionics_nauticalchart_layer = new JNC.Google.NavionicsOverlay({
    navKey: "****",
    chartType: JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL,
    // Enable Navionics logo with payoff
    logoPayoff: true,
    // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
    divId: 'nautical-map-container'

});

gMapNautical.overlayMapTypes.insertAt(0, navionics_nauticalchart_layer);

Navionics SonarCharts base-overlay


// The Google Map Engine options
var gibilterra = new google.maps.LatLng(36.140751,-5.353585);
var gMapNauticalOptions = {
    zoom: 14,
    center: gibilterra,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var gMapNautical2 = new google.maps.Map(document.getElementById("sonar-map-container"), gMapNauticalOptions);

//Navionics SonarChart
var navionics_sonarchart_layer = new JNC.Google.NavionicsOverlay({
    navKey: "****",
    chartType: JNC.Google.NavionicsOverlay.CHARTS.SONAR,
    // Enable Navionics logo without payoff (Default behaviour)
    logoPayoff: false,
    // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
    divId: 'sonar-map-container'
});

gMapNautical2.overlayMapTypes.insertAt(0, navionics_sonarchart_layer);

Navionics Overlays over Google Map Engine


// The Navionics Headquarters position
var NavionicsHeadquarters = new google.maps.LatLng(43.860170,10.238238);

// The Google Map Engine options
var gMapEngineOptions = {
    zoom: 15,
    center: NavionicsHeadquarters,
    mapTypeControlOptions: {
        mapTypeIds: [
            JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL,
            JNC.Google.NavionicsOverlay.CHARTS.SONAR,
            google.maps.MapTypeId.ROADMAP,
            google.maps.MapTypeId.TERRAIN,
            google.maps.MapTypeId.HYBRID
        ],
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    }
};

// Creation of  Google Map Engine
var gMapEngine = new google.maps.Map(document.getElementById("gMapEngineContainer"), gMapEngineOptions);

// Creation of Navionics SonarChart Layer
var navionicsSonarChartOverlay = new JNC.Google.NavionicsOverlay({
    navKey: "*****",
    chartType: JNC.Google.NavionicsOverlay.CHARTS.SONAR,
    isTransparent: false,
    // Enable Navionics logo with payoff
    logoPayoff: true,
    // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
    divId: 'gMapEngineContainer'
});

// Creation of Navionics NauticalChart Layer
var navionicsNauticalChartOverlay = new JNC.Google.NavionicsOverlay({
    navKey: "****",
    chartType: JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL,
    isTransparent: false,
    // Enable Navionics logo with payoff
    logoPayoff: true,
    // Since we draw multiple NavionicsOverlay on the same page, we have to pass the id of the div containing every instance
    divId: 'gMapEngineContainer'
});

// Now attach the Navionics Overlay type to the map's registry.
gMapEngine.mapTypes.set(JNC.Google.NavionicsOverlay.CHARTS.SONAR, navionicsSonarChartOverlay);
gMapEngine.mapTypes.set(JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL, navionicsNauticalChartOverlay);

// We can now set the map to use the 'NauticalCharts' map type.
gMapEngine.setMapTypeId(JNC.Google.NavionicsOverlay.CHARTS.NAUTICAL);