2GIS styles && vk.taxi styles

by Trufi

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2GIS Map API</title>
    <meta name="description" content="">
  </head>

  <body>
    <div id="container"></div>
    <div id="theme-selector">
      Theme:
      <select name="theme" id="theme">
        <option value="default">2GIS Default</option>
        <option value="c080bb6a-8134-4993-93a1-5b4d8c36a59b">2GIS Day</option>
        <option value="e05ac437-fcc2-4845-ad74-b1de9ce07555">2GIS Night</option>
        <option value="b2b8046f-9bb0-469a-9860-9847032935cc">2GIS Grayscale</option>
        <option value="1db52c6e-66b6-4c99-9c83-5538fa962d43">2GIS Snow</option>
        <option value="9e75a94c-36f7-4254-8101-90139ead38ad">2GIS 2009</option>
        <option value="47bc18b8-7c7c-47a8-9002-76f041bf8c6e">vk.taxi Day</option>
        <option value="75eab9a7-c430-4ccf-a2d9-e2dabe7b7ef0">vk.taxi Night</option>
        
      </select>
    </div>
    <script src="https://mapgl.2gis.com/api/js/v1"></script>
  </body>

</html>

CSS

html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#theme-selector {
  position: absolute;
  top: 10px;
  left: 10px;
}

JavaScript

// API key can be used on jsfiddle.net only!
// You can get more info on https://docs.2gis.com/

const map = new mapgl.Map('container', {
    center: [82.921273,55.029661],
    //zoom: 11,
    zoomControl: true,
    key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
    style: '47bc18b8-7c7c-47a8-9002-76f041bf8c6e',
    styleZoom: 17.1,
    autoHideOSMCopyright: true
});

const themeSelector = document.getElementById('theme');
themeSelector.addEventListener('change', () => {
  if (themeSelector.value === 'default') {
	  map._impl.useOldStyles();          
  	return;
  }
  
  map.setStyleById(themeSelector.value);

  //map.setStyleZoom('17', {animate: false});
    //  map.setStyle('17');
});


const controlContent = `
    <div class="buttonRoot" id="find-me">
        <button class="button">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="32"
                height="32"
                viewBox="0 0 32 32"
            >
                <path
                    fill="currentColor"
                    d="M17.89 26.27l-2.7-9.46-9.46-2.7 18.92-6.76zm-5.62-12.38l4.54 1.3 1.3 4.54 3.24-9.08z"
                />
            </svg>
        </button>
    </div>
    <p id="status"></p>
`;
const control = new mapgl.Control(map, controlContent, {
    position: 'topRight',
});
const status = control.getContainer().querySelector('#status');
let circle;
function success(pos) {
    const center = [pos.coords.longitude, pos.coords.latitude];
    status.textContent = '';
    if (circle) {
        circle.destroy();
    }
    circle = new mapgl.CircleMarker(map, {
        coordinates: center,
        radius: 14,
        color: '#0088ff',
        strokeWidth: 4,
        strokeColor: '#ffffff',
        stroke2Width: 6,
        stroke2Color: '#0088ff55',
    });
    map.setCenter(center);
    map.setZoom(16);
}
function error() {
    status.textContent = 'Unable to retrieve your location';
}
function geoFindMe() {
    if (!navigator.geolocation) {
   ...