OpenLayers MapGL Layer

by Trufi

HTML

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css">
<script src="https://mapgl.2gis.com/api/js/v1"></script>
<div id="mapgl-container"></div>
<div id="map"></div>

CSS

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#mapgl-container,
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

const center = [37.62992, 55.75186];

const mapglContainer = document.getElementById('mapgl-container');

const mapglMap = new mapgl.Map('mapgl-container', {
  center,
  zoom: 14,
  key: 'bfd8bbca-8abf-11ea-b033-5fa57aae2de7',
  zoomControl: false,
});

const mapglLayer = new ol.layer.Layer({
  render: function(frameState) {
    const viewState = frameState.viewState;

    mapglContainer.style.display = mapglLayer.getVisible() ? 'block' : 'none';
    mapglContainer.style.opacity = mapglLayer.getOpacity();

    const rotation = viewState.rotation;
    if (rotation) {
      mapglMap.setRotation(rotation * 180 / Math.PI, {
        animate: false
      });
    }

    mapglMap.setCenter(ol.proj.toLonLat(viewState.center), {
      animate: false,
    });

    mapglMap.setZoom(viewState.zoom, {
      animate: false,
    });
  }
});


const style = new ol.style.Style({
  stroke: new ol.style.Stroke({
    color: '#319FD3',
    width: 2
  })
});

const vectorSource = new ol.source.Vector();
vectorSource.addFeature(new ol.Feature(new ol.geom.Circle(ol.proj.fromLonLat([37.62992, 55.75186]), 1000)));

const vectorLayer = new ol.layer.Vector({
  source: vectorSource,
  style,
});

const map = new ol.Map({
  target: 'map',
  view: new ol.View({
    center: ol.proj.fromLonLat(center),
    zoom: 14
  }),
  layers: [mapglLayer, vectorLayer]
});