2016-11-25 15:59:04 +00:00
|
|
|
var mapDivs=document.querySelectorAll(".map");mapboxgl.accessToken="pk.eyJ1Ijoiam9ubnliYXJuZXMiLCJhIjoiY2l2cDhjYW04MDAwcjJ0cG1uZnhqcm82ayJ9.qA2zeVA-nsoMh9IFrd5KQw";for(var i=0;i<mapDivs.length;i++){var mapDiv=mapDivs[i],latitude=mapDiv.dataset.latitude,longitude=mapDiv.dataset.longitude,el=document.createElement("div");el.classList.add("marker");var mapMenu=document.createElement("div");mapMenu.classList.add("map-menu");var streetsInput=document.createElement("input");streetsInput.setAttribute("id","streets"),streetsInput.setAttribute("type","radio"),streetsInput.setAttribute("name","toggle"),streetsInput.setAttribute("value","streets"),streetsInput.setAttribute("checked","checked"),streetsInput.addEventListener("click",function(){map.setStyle("mapbox://styles/mapbox/streets-v9")});var streetsLabel=document.createElement("label");streetsLabel.setAttribute("for","streets"),streetsLabel.appendChild(document.createTextNode("Streets"));var satelliteInput=document.createElement("input");satelliteInput.setAttribute("id","satellite"),satelliteInput.setAttribute("type","radio"),satelliteInput.setAttribute("name","toggle"),satelliteInput.setAttribute("value","streets"),satelliteInput.addEventListener("click",function(){map.setStyle("mapbox://styles/mapbox/satellite-v9")});var satelliteLabel=document.createElement("label");satelliteLabel.setAttribute("for","satellite"),satelliteLabel.appendChild(document.createTextNode("Satellite")),mapMenu.appendChild(streetsInput),mapMenu.appendChild(streetsLabel),mapMenu.appendChild(satelliteInput),mapMenu.appendChild(satelliteLabel);var map=new mapboxgl.Map({container:mapDiv,style:"mapbox://styles/mapbox/streets-v9",center:[longitude,latitude],zoom:15,scrollZoom:!1});map.addControl(new mapboxgl.NavigationControl),new mapboxgl.Marker(el,{offset:[-10,-20]}).setLngLat([longitude,latitude]).addTo(map),mapDiv.appendChild(mapMenu)}
|
