New StackOverflow Question: Circles disappear on mobile, when map is zoomed

[stacko...@mg.bodar.com]

Circles disappear on mobile, when map is zoomed

Asked by Kristian Vybiral on 2017-02-24T12:23:28Z

Reply on StackOverflow

When I zoom the map on PC the circles render well, and are fully functional. However, when I attempt to view the map on mobile (iOS) the circles render well initally, but if I zoom or pan the screen, they eventually disappear (after several interactions). Some circles do not render at all. Furthermore, the tooltip does not appear on touch. Is there something I am missing? While searching for a solution I could not find anything that would explain this behaviour.

Thanks in advance for any tips or solutions. Code is on codepen - http://codepen.io/kvyb/pen/VPqWNR?editors=0010

HTML

<!--D3 -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js'></script>
<!--Leaflet / Mapbox -->
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet' />

<!--Div to hold the map. Inline styling is horrible I know, it's just for demo purpose... -->
<div id="map" style="position: absolute; height: 100%; width: 100%;"></div>

CSS

div.tooltip {   
    position: absolute;         
    text-align: center;         
    width: 60px;                    
    height: 28px;                   
    padding: 2px;               
    font: 12px sans-serif;      
    background: lightsteelblue; 
    border: 0px;        
    border-radius: 8px;         
    pointer-events: none;           
}

JS

// Map details
// Define the div for the tooltip
var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);

L.mapbox.accessToken = 'pk.eyJ1Ijoic3RlbmluamEiLCJhIjoiSjg5eTMtcyJ9.g_O2emQF6X9RV69ibEsaIw';
var map = L.mapbox.map('map', 'mapbox.streets').setView([53.4072, -2.9821], 14);

// Sample Data
var data = [
    {"coords": [53.3942, -2.9785]}, 
    {"coords": [53.4082, -2.9837]},
    {"coords": [54.4082, -2.9837]},
];

// Loop through data and create d.LatLng 
data.forEach(function(d) {
    d.LatLng = new L.LatLng(d.coords[0], d.coords[1]);
  //blue rings around circles:
   map.addLayer(L.circle([d.coords[0], d.coords[1]], 0));

});

// Append <svg> to #map
var svg = d3.select(map.getPanes().overlayPane).append("svg")
    .attr("class", "leaflet-zoom-animated")
    .attr("width", window.innerWidth)
    .attr("height", window.innerHeight);

// Append <g> to <svg>
var g = svg.append("g").attr("class", "leaflet-zoom-hide");

// Append <circle> to <g>
var circles = g.selectAll("circle")
    .data(data)
    .enter()
  .append("circle")
    .style("fill", "rgba(255, 255, 255, .7)")
.on("mouseover", function(d) {  
            d3.select(this).style("cursor", "default")
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html("formatTime(d.date) ++ d.close")  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })  
.on("touchstart",function(d) {  
            d3.select(this).style("cursor", "default")
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html("formatTime(d.date) ++ d.close")  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })  
    .on("touchend", function(d) {       
                div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        })
        .on("mouseout", function(d) {       
                div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });


function update() {
    translateSVG()
    circles.style("stroke", "gray")
    circles.attr("cx", function(d) { return map.latLngToLayerPoint(d.LatLng).x; })
    circles.attr("cy", function(d) { return map.latLngToLayerPoint(d.LatLng).y; })
    circles.attr("r", "30")
}

// Adjust the circles when the map is moved
function translateSVG() {
    var viewBoxLeft = document.querySelector("svg.leaflet-zoom-animated").viewBox.animVal.x;
    var viewBoxTop = document.querySelector("svg.leaflet-zoom-animated").viewBox.animVal.y;
    // Reszing width and height incase of window resize
    svg.attr("width", window.innerWidth)
    svg.attr("height", window.innerHeight)
      // Adding the ViewBox attribute to our SVG to contain it
    svg.attr("viewBox", function() {
      return "" + viewBoxLeft + " " + viewBoxTop + " " + window.innerWidth + " " + window.innerHeight;
    });
    // Adding the style attribute to our SVG to transkate it
    svg.attr("style", function() {
      return "transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);";
    });
}

// Re-draw on reset, this keeps the markers where they should be on reset/zoom
map.on("moveend", update);
update();

Reply on StackOverflow