https://rainbowmountainperu.net/wp-content/themes/traveler/v2/js/mapbox/custom.js

1var initRtlMapbox = null;
2function initHalfMapBox(mapEl, mapData, mapLat, mapLng, mapZoom, mapIcon) {
3    var popupPos = mapEl.data('popup-position');
4    if (mapData.length <= 0)
5        mapData = mapEl.data('data_show');
6    if (mapLat.length <= 0)
7        mapLat = mapEl.data('lat');
8    if (mapLng.length <= 0)
9        mapLng = mapEl.data('lng');
10    if (mapZoom.length <= 0)
11        mapZoom = mapEl.data('zoom');
12    if (mapIcon.length <= 0)
13        mapIcon = mapEl.data('icon');
14    mapboxgl.accessToken = st_params.token_mapbox;
15    var icon_mapbox = st_params.st_icon_mapbox;
16    if(typeof icon_mapbox !== 'underfind' ){
17        icon_map = icon_mapbox;
18    } else {
19        icon_map = "https://i.imgur.com/MK4NUzI.png";
20    }
21    mapboxgl.accessToken = st_params.token_mapbox;
22    if(typeof st_params.text_rtl_mapbox !== 'underfind' && initRtlMapbox == null){
23        mapboxgl.setRTLTextPlugin(st_params.text_rtl_mapbox);
24        initRtlMapbox = 1;
25    }
26    var map = new mapboxgl.Map({
27      container: 'map-search-form',
28      style: 'mapbox://styles/mapbox/light-v10?optimize=true',
29      center: [mapLng, mapLat],
30      zoom: 6,
31    });
32    var listOfObjects = [];
33    jQuery.map(mapData, function (location, i) {
34        var item_map = InitItemmap(location,i);
35        listOfObjects.push(item_map);
36    });
37    map.on("load", function() {
38        map.loadImage(icon_map, function(error, image) {
39            if (error) throw error;
40            map.addImage("custom-marker", image);
41            /* Style layer: A style layer ties together the source and image and specifies how they are displayed on the map. */
42            map.addLayer({
43                id: "markers",
44                type: "symbol",
45                source: {
46                    type: "geojson",
47                    data: {
48                        type: 'FeatureCollection',
49                        features:listOfObjects
50                    }
51                },
52                layout: {
53                    "icon-image": "custom-marker",
54                }
55            });
56        });
57         map.on('click', 'markers', function (e) {
58            map.flyTo({center: e.features[0].geometry.coordinates});
59            var coordinates = e.features[0].geometry.coordinates.slice();
60            var description = e.features[0].properties.description;
61
62            // Ensure that if the map is zoomed out such that multiple
63            // copies of the feature are visible, the popup appears
64            // over the copy being pointed to.
65            while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
66            coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
67            }
68
69            new mapboxgl.Popup({ offset: [150,150] })
70            .setLngLat(coordinates)
71            .setHTML(description)
72            .addTo(map);
73        });
74    });
75
76
77
78}
79function InitItemmap(item_map,key){
80    var singleObj = {};
81    singleObj['type'] = 'Feature';
82    singleObj['geometry'] = {
83        type: 'Point',
84        coordinates: [item_map.lng, item_map.lat]
85    };
86    singleObj['properties'] = {
87        title: item_map.name,
88        description: item_map.content_html
89    };
90    return singleObj;
91
92}
93function clickPoup(mapLng,mapLat) {
94    var map = new mapboxgl.Map({
95      container: 'map-search-form',
96      style: 'mapbox://styles/mapbox/light-v10?optimize=true',
97      center: [mapLng, mapLat],
98      zoom: 6,
99    });
100}