function custom() { var userLang = navigator.language || navigator.userLanguage; console.log ("User language is: " + userLang); if (userLang != 'pt-BR') { strings_dict = strings_dict_en; countries = countries_en; } document.title = user_info["name"].concat(" | ").concat(strings_dict['MAP_TITLE']); countries_list = [] for (var country_code in countries_dict) { countries_list.push([country_code, countries_dict[country_code][0], countries_dict[country_code][1], countries_dict[country_code][2]]) } addFavicon(); addFooter(); // construct menu on full window map var input_streets = document.createElement('INPUT'); input_streets.setAttribute('id', 'streets-v11'); input_streets.setAttribute('type', 'radio'); input_streets.setAttribute('name', 'rtoggle'); input_streets.setAttribute('value', 'streets'); input_streets.setAttribute('checked', 'checked'); var label_streets = document.createElement('LABEL'); label_streets.setAttribute('for', 'streets-v11'); label_streets.innerText = strings_dict['MAP_LAYER_1']; var input_outdoors = document.createElement('INPUT'); input_outdoors.setAttribute('id', 'outdoors-v11'); input_outdoors.setAttribute('type', 'radio'); input_outdoors.setAttribute('name', 'rtoggle'); input_outdoors.setAttribute('value', 'outdoors'); var label_outdoors = document.createElement('LABEL'); label_outdoors.setAttribute('for', 'outdoors-v11'); label_outdoors.innerText = strings_dict['MAP_LAYER_2']; var input_satellite = document.createElement('INPUT'); input_satellite.setAttribute('id', 'satellite-v9'); input_satellite.setAttribute('type', 'radio'); input_satellite.setAttribute('name', 'rtoggle'); input_satellite.setAttribute('value', 'satellite'); var label_satellite = document.createElement('LABEL'); label_satellite.setAttribute('for', 'satellite-v9'); label_satellite.innerText = strings_dict['MAP_LAYER_3']; layerList.appendChild(input_streets); layerList.appendChild(label_streets); layerList.appendChild(input_outdoors); layerList.appendChild(label_outdoors); layerList.appendChild(input_satellite); layerList.appendChild(label_satellite); for (var i = 0; i < inputs.length; i++) { inputs[i].onclick = switchLayer; } var div_sw_photos = document.createElement("DIV"); div_sw_photos.setAttribute("class", "selected-photos"); div_sw_photos.innerText = strings_dict['MAP_PHOTOS']; var div_sw_exhibits = document.createElement("DIV"); div_sw_exhibits.setAttribute("class", "unselected-exhibits"); div_sw_exhibits.addEventListener('click', function () { openExhibits() }) div_sw_exhibits.innerText = strings_dict['MAP_EXHIBITS']; var div_map_switcher = document.createElement("DIV"); div_map_switcher.setAttribute("class", "map-switcher"); div_map_switcher.appendChild(div_sw_photos); div_map_switcher.appendChild(div_sw_exhibits); document.body.appendChild(div_map_switcher); var div_panel = document.createElement("DIV"); div_panel.setAttribute("id", "panel"); div_panel.setAttribute("class", "countries-panel"); countries_list.sort(function(a,b) { var delta = (a[3]-b[3]); if (delta == 0) { return (a[2]-b[2]); } return delta; }); addIcon('WW', div_panel); // addIcon('EU', div_panel); var separator = document.createElement('HR'); separator.setAttribute('class', 'separator'); div_panel.appendChild(separator); for (var i = countries_list.length-1; i >= 0; i--) { var country_code = countries_list[i][0]; addIcon(country_code, div_panel); } document.body.appendChild(div_panel); document.getElementById('WW').addEventListener('click', function() { fitRegion('WW') }); // document.getElementById('EU').addEventListener('click', function() { fitRegion('EU') }); countries_list.forEach(addListener); // Functions function addFavicon() { var favicon = document.createElement("LINK"); favicon.setAttribute("rel", "shortcut icon"); favicon.setAttribute("type", "image/x-icon"); favicon.setAttribute("href", "../icons/favicon.ico"); document.head.append(favicon); } function addIcon(country_code, panel) { var country_name = countries[country_code]; console.log(country_name); var elem = document.createElement("IMG"); elem.setAttribute("id", country_code); elem.setAttribute("class", "icon"); elem.setAttribute("src", getIconSrc(countries_en[country_code])); elem.setAttribute("title", country_name); elem.setAttribute("alt", country_name); var div_icon = document.createElement("DIV"); div_icon.setAttribute("class", "flag-icon"); div_icon.appendChild(elem); panel.appendChild(div_icon); } function getIconSrc(name) { return "icons/".concat(name.replace(" ", "-").toLowerCase()).concat(".svg"); } function addListener(country) { var country_code = country[0]; document.getElementById(country_code).addEventListener('click', function() { fitRegion(country_code) }); } function fitRegion(region) { var fitMarkers = true; var bboxes = []; var padding = 50; if (fitMarkers && region != 'WW') { bboxes = getCountryMarkersBbox(region); padding += 100; } else { bboxes = countries_bbox[region][1]; } var west = bboxes[0]; var south = bboxes[1]; var east = bboxes[2]; var north = bboxes[3]; map.fitBounds([ [west, south], [east, north]], {padding: padding} ); }; function getCountryMarkersBbox(country_code) { var west = 180; var south = 90; var east = -180; var north = -90; var country_markers = locations_dict[country_code]; var country_bbox = []; for (var i = 0; i < country_markers.length; i++) { if (country_markers[i][0][0] < west) { west = country_markers[i][0][0]; } if (country_markers[i][0][0] > east) { east = country_markers[i][0][0]; } if (country_markers[i][0][1] < south) { south = country_markers[i][0][1]; } if (country_markers[i][0][1] > north) { north = country_markers[i][0][1]; } country_bbox = [west, south, east, north]; } return country_bbox; } function openExhibits() { window.location.replace("https://haraldoalbergaria.page/map/exhibits/") } function addFooter() { var footer = document.createElement("DIV"); footer.setAttribute("class", "footer"); footer.innerHTML = "Icons made by turkkub (World) and Freepik (Countries) from www.flaticon.com"; document.body.append(footer); } }