Integration of the trail grooming map to a web page

This guide explains how to integrate the trail grooming map into your website using an iframe.

Prerequisites

  • A website where you want to embed the map
  • Ability to edit HTML and JavaScript on your site

Integration Steps

1. Add the Required HTML Code

First, create a container element for the map on your page:

<!-- Create container for the map --> <div id="mapWrapper"></div>

2. Include the Integration Script

Download the map-integration.js_.zip file attached to this page, extract it using a zip program, and add the extracted JavaScript to your page. You can either host it on your server or include it from your preferred CDN:

<script src="path/to/map-integration.js"></script>

3. Initialize the Map

Add the following JavaScript code to initialize the map:

document . addEventListener ( 'DOMContentLoaded' , function () { NaBezkyMap. init( { containerId : 'mapWrapper' , // ID of your container element mapUrl : 'https://nabezky.sk/groominregion' , // Production URL region : 'region-code', ski_center : 'ski center-code' }) ; });

4. Add Required CSS

Add the following CSS to style the map container and iframe:

#mapWrapper { width: 100%; height: 600px; /* Adjust height as needed */ position: relative; } .map-iframe { width: 100%; height: 100%; border: none; }

Configuration Options

The init() function accepts the following parameters:

  • containerId (required): ID of the HTML element where the map will be embedded
  • mapUrl (required): Na Bezky service URL: https://nabezky.sk/groominregion
  • region (required): Region code for displaying a specific area. Find it in the list of regions
  • ski_center (required): Identifier of the specific ski center, which can be found through the ski centers list

Map Access Using Coupons

  1. The system automatically handles authentication communication between nabezky.sk and your website
  2. Verified coupons create a cookie named nb_access_token in the user's browser (in your domain)

Troubleshooting

Common issues and their solutions:

  1. If the map isn't displaying:
    • Check if the container ID matches your initialization code (step 3 above)
    • Verify that the container has the correct dimensions set in CSS
    • Check the browser console for any error messages
  2. If coupon validation isn't working:
    • Check if cookies are enabled in the browser
    • Verify that SSL/HTTPS is properly configured

Implementation Example

Here's a complete example:

<!DOCTYPE html> <html> <head> <title>Integrácia mapy Na Bežky</title> <style> #mapWrapper { width: 100%; height: 600px; position: relative; } .map-iframe { width: 100%; height: 100%; border: none; } </style> </head> <body> <div id="mapWrapper"></div> <script src="cesta/k/map-integration.js"></script> <script> document . addEventListener ( 'DOMContentLoaded' , function () { NaBezkyMap. init( { containerId : 'mapWrapper' , mapUrl : 'https://nabezky.sk/groominregion' , region :' 27', ski_center : '805'}) ; }); </script> </body> </html>
 

Support

For additional support or questions regarding integration, contact us via email or by phone.

 

AttachmentSize
Package icon map-integration.js_.zip2.55 KB