I face a problem with slowdowns when I try to drag the map on my Samsung Galaxy A5 Chrome browser. Map is rendered by OpenLayers 4.6.5 version. So I've made a Leaflet version with the same source link and... everything works just great, there is no slowdowns and other holds... You can check it by yourself on your mobile.

Here is the OL version code:

<!DOCTYPE html>
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch,Promise"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
    <script src="https://cdn.klokantech.com/ol-mapbox-style/v2.11.0-pre/olms.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css">
        #map {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    <div id="map"></div>
    <p><a href="https://carto.com/" target="_blank">© CARTO</a> <a href="http://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a></p>
        var layers = [
        new ol.layer.Tile({
            source: new ol.source.OSM({
                url: 'https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png',
                crossOrigin: null

var view = new ol.View({
    center: ol.proj.transform([36.587147, 50.598299], 'EPSG:4326', 'EPSG:3857'),
    zoom: 10,
    minZoom: 2,
    maxZoom: 18

var map = new ol.Map({
    controls: ol.control.defaults().extend([
        new ol.control.ScaleLine({
            units: 'degrees'
    layers: layers,
    target: 'map',
    view: view


Here is the Leaflet version code:

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<link rel="stylesheet" type="text/css" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js'></script>
<script type='text/javascript' src='http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js'></script>

    <h1>Leaflet Example</h1>
    <p>Here's a map of the countries I've either lived in or travelled through for a month or more.

    <div id="map" style="height: 440px; border: 1px solid #AAA;"></div>

    <script type='text/javascript' src='maps/markers.json'></script>
    <script type='text/javascript' src='maps/leaf-demo.js'></script>

        var map = L.map( 'map', {
            center: [50.598299, 36.587147],
            minZoom: 2,
            zoom: 10

    L.tileLayer( 'https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
        attribution: '&copy; <a                                                 href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a','b','c']
    }).addTo( map );


What is this? Is it means that OL is very unproductive? Or it has to be some special setting?

  • 1
    try with Android via the "More > Desktop version" is there an improvement?
    – Mapperz
    Commented Jun 4, 2018 at 15:16
  • @Mapperz hm... I can't find this kind of setting in my mobile chrome browser. Commented Jun 4, 2018 at 15:44
  • @Mapperz it feels like in Opera it works a little bit faster Commented Jun 4, 2018 at 15:46
  • for chrome techbout.com/…
    – Mapperz
    Commented Jun 4, 2018 at 16:04
  • 1
    @Mapperz Thank you for this hint, but if it helped then quite a bit... still Leaflet version is much smoother pans than OpenLayers. Commented Jun 4, 2018 at 18:03


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.