Product Viewer Example

This example show all of possible methods to show the navionics products with the Web API V2

Load manually the product on map

This is an example of how manually load a catalog and showing it on Boating Map



var productViewer = new JNC.Views.ProductViewer({
    tagId: '#test_map_ProductViewer',
    navKey: '*****'
});

productViewer.productListCreated('HotMapsPlatinum');
productViewer.productItemCreated('HMPT-C6', 'HotMapsPlatinum', '/examples/data/kml/HMPT-C6.kml', '#990234');
productViewer.productItemCreated('HMPT-E6', 'HotMapsPlatinum', '/examples/data/kml/HMPT-E6.kml', '#0165ff');
productViewer.productItemCreated('HMPT-N6', 'HotMapsPlatinum', '/examples/data/kml/HMPT-N6.kml', '#979900');
productViewer.productItemCreated('HMPT-S6', 'HotMapsPlatinum', '/examples/data/kml/HMPT-S6.kml', '#0204F6');
productViewer.productItemCreated('HMPT-W6', 'HotMapsPlatinum', '/examples/data/kml/HMPT-W6.kml', '#0B9C06');
productViewer.showProductList('HotMapsPlatinum')

Load the product on map by Navionics server

This example show how to load the product on map but the information of product is retrieved directly from Navionics servers



var productViewer1 = new JNC.Views.CatalogProductViewer({
    tagId: '.test_map_CatalogProductViewer',
    url: '//webapp.navionics.com',
    navKey: '*****'
});

productViewer1.showChartProduct('HotMapsPlatinum');

Show the product as the catalog of Navionics site

This example show the products on map (the product is retrieved directly from Navionics servers) and it have the same behavior of Product Catalog present on Navionics site.

You can show/hide the description of product and you can add one custom link for the button "Get it". In this example we hidden the description and we attach a custom link for the purchase.



var productViewer3 = new JNC.Views.LightCatalogProductViewer({
    containerSelector: '.test_map_LightCatalogProductViewer',
    url: '//webapp.navionics.com',
    navKey: '****'
});

productViewer3.showProduct('HotMapsPlatinum', false, '//www.mysite.com/getIt');