use leaflet for rendering

app.py

@@ -25,8 +25,6 @@ def draw_map():
     commit_sha = commit.hexsha[:7]
     link = 'https://github.com/zapret-info/z-i/commit/' + commit.hexsha
     return render_template('index.html',
-                           app_id=app.app_id,
-                           app_code=app.app_code,
                            last_updated_time=commit_time,
                            last_updated_sha=commit_sha,
                            last_updated_link=link)
@@ -61,14 +59,5 @@ def make_info():
     return jsonify(data)
 
 
-try:
-    with open('credentials.json') as fin:
-        credentials = json.loads(fin.read())
-        app.app_id, app.app_code = credentials['app_id'], credentials['app_code']
-except (KeyError, FileNotFoundError, json.decoder.JSONDecodeError) as e:
-    print("Error while reading HERE API credentials, proceed on your own risk!")
-    print(e)
-
-
 if __name__ == '__main__':
     app.run()

static/js/circles.js

@@ -1,9 +1,6 @@
 var mapContainer = document.getElementById('map-container');
 
-var RknCoordinates = {
-  lat: 55.75155,
-  lng: 37.6365
-};
+var RknCoordinates = [55.75155, 37.6365];
 
 var mapOptions = {
   zoom: 2,
@@ -12,42 +9,24 @@ var mapOptions = {
   noWrap: true
 };
 
-var defaultLayers = platform.createDefaultLayers();
+var map = L.map('map-container').setView([20, 0], 2);
 
-var map = new H.Map(
-  mapContainer,
-  defaultLayers.normal.map,
-  mapOptions);
+L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
+  maxZoom: 18,
+  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
+    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
+  id: 'mapbox.streets'
+}).addTo(map);
 
 var circles = []
 
-var iconOptions = {
-  size: new H.math.Size(81, 50),
-  anchor: new H.math.Point(25, 25)
-};
-
-var markerOptions = {
-  icon: new H.map.Icon(iconUrl, iconOptions)
-};
-
-var marker = new H.map.Marker(RknCoordinates, markerOptions);
-map.addObject(marker);
-
-var mapTileService = platform.getMapTileService({
-    type: 'base'
-  }),
-  russianMapLayer = mapTileService.createTileLayer(
-    'maptile',
-    'normal.day',
-    256,
-    'png8',
-    {lg: 'RUS'}
-  );
-map.setBaseLayer(russianMapLayer);
-
+var RKNIcon = L.icon({
+  iconUrl: iconUrl,
 
-var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
-var ui = H.ui.UI.createDefault(map, defaultLayers, 'ru-RU');
+  iconSize:     [81, 50], // size of the icon
+  iconAnchor:   [25, 25], // point of the icon which will correspond to marker's location
+});
 
 function prettyScaling(size, zoom) {
   threshold = 32
@@ -57,19 +36,24 @@ function prettyScaling(size, zoom) {
   } else {
     radius = (threshold + Math.pow(size - threshold + 1, 0.25)) / zoom;
   }
-  return base + radius * (2 ** 20 / threshold);
+  scaled_size = base + radius * (2 ** 20 / threshold);
+  if (scaled_size < 0) {
+    // this doesn't help
+    scaled_size = scaled_size * -1;
+  }
+  return scaled_size;
 }
 
 setInterval(function() {
   for (var i = 0; i < circles.length; ++i) {
-    var lat = circles[i].geom.getCenter().lat;
+    var lat = circles[i].getCenter().lat;
     circles[i].geom.setRadius(prettyScaling(circles[i].size, 2 << map.getZoom())*Math.cos((180 / Math.PI)*lat));
   }
 }, 500);
 
 
 window.addEventListener('resize', function () {
-  map.getViewPort().resize();
+  map.invalidateSize();
 });
 
 Highcharts.Axis.prototype.log2lin = function (num) {
@@ -89,54 +73,65 @@ $('#submitform').submit(function(e){
     data: $('#submitform').serialize(),
     success: function(data) {
       for (var i = 0; i < circles.length; ++i) {
-        map.removeObject(circles[i].geom);
+        map.removeLayer(circles[i].geom);
       }
 
       var points = data['gps'];
       circles = [];
 
       for (var i = 0; i < points.length; ++i) {
-        var circle = new H.map.Circle(
-          { lat: points[i].lat, lng: points[i].lng },
-          prettyScaling(points[i].count, 2 << map.getZoom())*Math.cos((180 / Math.PI)*points[i].lat),
-          {style: {fillColor: points[i].fill_color, strokeColor: 'black', lineWidth: 0}})
-
-        circle.setData(points[i].lat.toString() + ' ' + points[i].lng.toString());
+        var radius = prettyScaling(points[i].count, 2 << map.getZoom())*Math.cos((180 / Math.PI)*points[i].lat);
+        if (radius < 0) {
+          // hotfix wtf is going on here
+          radius = radius * -1;
+        }
+        var circle = new L.Circle(
+          [points[i].lat, points[i].lng],
+          {radius: radius,
+          color: 'black', fillColor: points[i].fill_color, 
+          fillOpacity: '0.7', weight: 0})
 
-        circle.addEventListener('tap', function (evt) {
-          var bubble =  new H.ui.InfoBubble(evt.target.getCenter(), {
-            content: evt.target.getData()
-          });
-          ui.addBubble(bubble);
-        }, false);
+        circle.bindPopup(points[i].lat.toString() + ' ' + points[i].lng.toString() + ' ' + circle.getRadius().toString());
 
         circles.push({size: points[i].count, geom: circle});
 
-        map.addObject(circle);
+        circle.addTo(map);
       }
 
       for (var i = 0; i < points.length; ++i) {
-        var circle = new H.map.Circle(
-          { lat: points[i].lat, lng: points[i].lng },
-          prettyScaling(points[i].count, 2 << map.getZoom())*Math.cos((180 / Math.PI)*points[i].lat),
-          {style: {fillColor: 'rgba(0, 0, 0, 0)', strokeColor: 'black', lineWidth: 2.0}})
+        var radius = prettyScaling(points[i].count, 2 << map.getZoom())*Math.cos((180 / Math.PI)*points[i].lat);
+        if (radius < 0) {
+          // hotfix wtf is going on here
+          radius = radius * -1;
+        }
+        var circle = new L.Circle(
+          [points[i].lat, points[i].lng],
+          {radius: radius,
+          color: 'black', weight: 2.0})
 
         circles.push({size: points[i].count, geom: circle});
 
-        map.addObject(circle);
+        circle.addTo(map);
       }
 
       for (var i = 0; i < points.length; ++i) {
-        var circle = new H.map.Circle(
-          { lat: points[i].lat, lng: points[i].lng },
-          prettyScaling(points[i].count, 2 << map.getZoom())*Math.cos((180 / Math.PI)*points[i].lat),
-          {style: {fillColor: 'rgba(0, 0, 0, 0)', strokeColor: points[i].fill_color, lineWidth: 1.0}})
+        var radius = prettyScaling(points[i].count, 2 << map.getZoom())*Math.cos((180 / Math.PI)*points[i].lat);
+        if (radius < 0) {
+          // hotfix wtf is going on here
+          radius = radius * -1;
+        }
+        var circle = new L.Circle(
+          [points[i].lat, points[i].lng],
+          {radius: radius,
+          color: points[i].fill_color, weight: 1.0})
 
         circles.push({size: points[i].count, geom: circle});
 
-        map.addObject(circle);
+        circle.addTo(map);
       }
 
+      L.marker(RknCoordinates, {icon: RKNIcon}).addTo(map);
+
       var stats = data['stats'];
         Highcharts.chart('chart-container', {
         chart: {