Icons Map

Quckstart with 2GIS Map API

by Michel Beloshitsky

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="Quckstart with 2GIS Map API">
        <style>
        html,
body,
#container {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script src="https://jakarta.web-staging.2gis.ru/sdk/index.js"></script>
    </body>
</html>

JavaScript

const map = new mapgl.Map('container', {
              center: [55.318741534766254, 25.268316835105836],
              zoom: 16,
              key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
              style: {
                  version: 1,
                  name: '',
                  background: {
                      color: '#f5f2e0',
                  },
                  labelingGroups: [],
                  icons: {
                  	foo: {
                    	url: 'poi_hotel',
                      height: 16,
                      width: 16
                    }
                  },
                  layers: [{
                    type: 'point',
                    id: 'point-test',
                    filter: ["all",["match",["get","sublayer"],["Medium_zoom_poi"],true,false],["match",["get","objectClass"],["poi_hotel"],true,false]],
                    style: {
                        iconImage: 'foo',
                        iconWidth: 24,
                        textFont: 'Noto_Sans',
                        textFontSize: 8
                    },
                }],
              },
              styleOptions: {
              	fontsPath: 'https://mapgl.2gis.com/api/fonts',
                iconsPath: 'https://disk.2gis.com/styles/c080bb6a-8134-4993-93a1-5b4d8c36a59b'
              }
          });