https://vltava2025.cz/cache-buster-1750120515/static/js/lib/maps.js

1var npuSMaps = {}
2
3$(document).ready(function($){
4    initSmaps()
5})
6
7function initSmaps() {
8    $('.leaflet-map').each(function() {
9        var wrapper = $(this)
10        if (wrapper.is(':visible')) {
11            initLeafletMap(wrapper.attr('id'))
12        }
13    })
14}
15
16function initLeafletMap(id) {
17  if (npuSMaps[id]) {
18    if ($('#' + id).hasClass('leaflet-container')) {
19      npuSMaps[id].invalidateSize()
20        
21      const markers = []
22      npuSMaps[id].eachLayer(layer => layer instanceof L.Marker && markers.push(layer))
23      npuSMaps[id].fitBounds(L.featureGroup(markers).getBounds())
24      return
25    } else {
26      delete npuSMaps[id]
27    }
28  }
29
30  const el = $(`#${id}`)
31  if (!el.length) return
32
33  let lat = parseFloat(el.attr('data-lat'))
34  if (!lat) lat = 49.8285742
35  let lng = parseFloat(el.attr('data-lng'))
36  if (!lng) lng = 15.4804057
37  let zoom = parseInt(el.attr('data-zoom'))
38  if (!zoom) zoom = 8
39  let scrollWheelZoom = true
40  if (el.attr('data-scroll-wheel-zoom-disabled') !== undefined) {
41    scrollWheelZoom = false
42  }
43
44  const map = L.map(id, { scrollWheelZoom: scrollWheelZoom, zoomControl: false, dragging: !L.Browser.mobile, tap: !L.Browser.mobile }).setView([lat, lng], zoom)
45  map.attributionControl.setPrefix(false)
46  L.tileLayer('https://api.mapy.cz/v1/maptiles/outdoor/256/{z}/{x}/{y}?apikey=JI34Swbs2zrsAnnYBswzcOCxwc4fdqFr5yOqP7dboGQ', { minZoom: 0, maxZoom: 19, attribution: '<a href="https://api.mapy.cz/copyright" target="_blank" class="no-after-icon">&copy; Seznam.cz a.s. a další</a>' }).addTo(map)
47  const markerIcon = L.icon({
48    iconUrl: '/static/images/map/marker-icon.png',
49    iconSize: [25, 41],
50    iconAnchor: [12, 40]
51  })
52  L.control.zoom({ position: 'topright' }).addTo(map)
53  const LogoControl = L.Control.extend({
54    options: { position: 'bottomright' },
55    onAdd: function (map) {
56      const container = L.DomUtil.create('div')
57      const link = L.DomUtil.create('a', '', container)
58
59      link.setAttribute('href', 'http://mapy.cz/')
60      link.setAttribute('target', '_blank')
61      link.innerHTML = '<img src="https://api.mapy.cz/img/api/logo.svg" />'
62      L.DomEvent.disableClickPropagation(link)
63
64      return container
65    }
66  })
67  new LogoControl().addTo(map)
68
69  if (el.attr('data-markers')) {
70    const markers = JSON.parse(el.attr('data-markers'))
71    const points = []
72    if (markers) {
73      for (const i in markers) {
74        if (Object.prototype.hasOwnProperty.call(markers, i)) {
75          const marker = L.marker([markers[i].latitude, markers[i].longitude], { icon: markerIcon })
76          points.push([markers[i].latitude, markers[i].longitude])
77          if (markers[i].title) {
78            let html = ''
79            html += '<div class="card" style="width: 312px;">'
80            html += '<div class="card-header">'
81            html += '<div class="card-header--content">'
82            if (markers[i].previewImage) {
83              if (markers[i].popupUrl) {
84                html += '<div class="img"><a class="ajax" href="' + markers[i].popupUrl + '">

84' + markers[i].previewImage + '</a></div>'
85              } else if (markers[i].url) {
86                html += '<div class="img"><a href="' + markers[i].url + '">' + markers[i].previewImage + '</a></div>'
87              } else {
88                html += '<div class="img">' + markers[i].previewImage + '</div>'
89              }
90            }
91            if (markers[i].popupUrl) {
92              html += `<p class="title"><a class="ajax" href="${markers[i].popupUrl}">${markers[i].title}</a></p>`
93            } else if (markers[i].url) {
94              html += `<p class="title"><a href="${markers[i].url}">${markers[i].title}</a></p>`
95            } else {
96              html += `<p class="title">${markers[i].title}</p>`
97            }
98            html += '</div>'
99            if (markers[i].regionName || markers[i].sightTypeName || markers[i].ticketsUrl) {
100              html += '<div class="text">'
101              html += '<div class="text--info">'
102              html += `<span class="region">${markers[i].regionName}</span>`
103              if (markers[i].sightTypeDetail) {
104                for (const x in markers[i].sightTypeDetail) {
105                  html += `<span class="type type-${markers[i].sightTypeDetail[x].icon}">${markers[i].sightTypeDetail[x].name}</span>`
106                }
107              }
108              html += '</div>'
109              if (markers[i].ticketsUrl) {
110                html += `<a href="${markers[i].ticketsUrl}" role="button" class="btn btn-secondary">Vstupenky</a>`
111              }
112              html += '</div>'
113            }
114            html += '<div class="close close-map-popup-button"></div>'
115            html += '</div>'
116            html += '</div>'
117            marker.bindPopup(html)
118          }
119          marker.addTo(map)
120        }
121      }
122      const bounds = new L.LatLngBounds(points)
123      map.fitBounds(bounds)
124    }
125
126    // Use Leaflet's 'popupopen' event to bind the button click AFTER the popup is added to the DOM
127    map.on('popupopen', function (e) {
128      for (const button of document.getElementsByClassName('close-map-popup-button')) {
129        button.addEventListener('click', () => {
130          map.closePopup(e.popup)
131        })
132      }
133    })
134  } else {
135    L.marker([lat, lng], { icon: markerIcon }).addTo(map)
136  }
137
138  if (el.attr('data-gpx-input')) {
139    new L.GPX(el.attr('data-gpx-input').trim(), {
140      async: true,
141      polyline_options: { color: 'red' },
142      markers: {
143        startIcon: null,
144        endIcon: null
145      }
146    }).on('loaded', function (e) {
147      map.fitBounds(e.target.getBounds())
148    }).addTo(map)
149  }
150
151  npuSMaps[id] = map
152}