0

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();

1 Answer 1

1

I think your svg's are dissapearing because of css of these elements is by default set to overflow: hidden. You can try to set overflow to overlay in your js code for svg.attr:

function translateSVG() {
...
 svg.attr("style", function() {
      return "overflow: overlay;" + 
             "transform: translate3d(" + viewBoxLeft + "px, " + viewBoxTop + "px, 0px);";
 });
}

About the app's behaviour on mobile devices, did you remember to set the meta for it?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Another thing worth to debug is that if your map on mobile device even responses on clicks. In example, create function with simple alert to check if your taps on map are fireing your alert function.

I didn't have this problem, but I read that in this situation it may be helpful to add the following attribute to the div containing your map:

data-tap-disabled="true"
2
  • Thanks, not sure which one of the points, but your solutions fixed the issues for me! Mar 4, 2017 at 13:44
  • @KristianVybiral Glad to hear that it helped, you're welcome:)
    – deevee
    Mar 4, 2017 at 16:33

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.