Need a microscope to read street names on android device with iframe embed

Question

Hi there, I am embedding an iframe in my html/php page and whatever I try..zooming/changeing parameters.. I cannot read the little names on the map on my android phone. It is just not possible. I have a Samsung Galaxy J3(2016), Android 5.1.1 I know how to zoom into the map on my phone but the characters remain small. And I do not want to change settings on my phone because other maps appear normal. E.g. google maps. And since I want to embed the map in my code for the whole world to use, it should work everywhere on android and iphone without a problem. On a big screen (pc/tablet/ipad) it works fine.

The iframe line from my working android page;

< iframe width="1100px" height="1100px" frameborder="0" allowfullscreen src="//umap.openstreetmap.fr/nl/map/kaart-zonder-naam_436123?scaleControl=false&miniMap=false&scrollWheelZoom=true& zoomControl=true&allowEdit=false&moreControl=true&searchControl=true&tilelayersControl=null&embedControl=null& datalayersControl=true&onLoadPanel=undefined&captionBar=false"> </iframe>

Answer 1

Did you try loading the umap itself on your phone ? On mine it looks fine (5.5 inch wrt your 5").

When I created a simple html file with only you iframe in it, the controls where smaller, and indeed the map label useless, except during zooming, before the new tiles are loaded.

I think that the iframe is messing with zoom levels. UMap might take the 1100px sizes into account, but your phone's browser must squeeze the iframe and its content to fit on your screen.

I tried with 'width="100%" height="100%"' but it's not really better. Can't you load umap directly ?

Regards.

Answer 2

Thank you all for taking your time to help me. I will try to follow the suggestions and give my results.

The magnification and triple tap on the phone is a good suggestion. Allthough I do not neeed that when watching other maps. I will try to add some screenshots here of my basic code, the map I see on my phone and a few maps like googlemaps, here (we go) and gigitravel. They are just screenshots from my phone while on wifi viewing the sites. Of course the size on a big screen doesn't correspond the mobilephone size in my examples, but it gives an idea of the size of the city names relative to the mobile screen (shot I just made). So first my code, then my result page and after that google maps, here we go and gigitravel on my phone.

I will continue the other suggestions after these screenshots loaded well.

my code

my result page

google maps

here we go

gigitravel

Answer 3

0

I can zoom my own map, but the names stay small in the same way.

I still need to investigate;

A different map style with retina tiles for displays with a high DPI value.
Tile usage policies of the tile layers for mass usage with some preconditions.
Loading the umap directly no my phone.

I will write my findings soon. Have a nice day !

permanent link

answered 27 Mar '20, 09:48

Treklov
10●2●2●3
accept rate: 0%

Answer 4

After looking around and more confusing stuff I went back to a google map platform site, got my api key again and stumbled on some code which works for me. I will adjust that to my needs.

I hope this code shows up well. My api key is still in there two times. Replace that if you want to use it too !

<!DOCTYPE html>

<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Places Search Box</title> <style> / Always set the map height explicitly to define the size of the div * element that contains the map. / #map { height: 100%; } / Optional: Makes the sample page fill the window. / html, body { height: 100%; margin: 0; padding: 0; } #description { font-family: Roboto; font-size: 15px; font-weight: 300; }

  #infowindow-content .title {
    font-weight: bold;
  }

  #infowindow-content {
    display: none;
  }

  #map #infowindow-content {
    display: inline;
  }

  .pac-card {
    margin: 10px 10px 0 0;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    font-family: Roboto;
  }

  #pac-container {
    padding-bottom: 12px;
    margin-right: 12px;
  }

  .pac-controls {
    display: inline-block;
    padding: 5px 11px;
  }

  .pac-controls label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }

  #pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 400px;
  }

  #pac-input:focus {
    border-color: #4d90fe;
  }

  #title {
    color: #fff;
    background-color: #4d90fe;
    font-size: 25px;
    font-weight: 500;
    padding: 6px 12px;
  }
  #target {
    width: 345px;
  }
</style>

</head> <body> <input id="pac-input" class="controls" type="text" placeholder="Search Box">

  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:
  // <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgnL-HwMD8ZyIMajQ9CDY-qt4hwIQO7P4&libraries=places">

  function initAutocomplete() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13,
      mapTypeId: 'roadmap'
    });

    // Create the search box and link it to the UI element.
    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

    var markers = [];
    // Listen for the event fired when the user selects a prediction and retrieve
    // more details for that place.
    searchBox.addListener('places_changed', function() {
      var places = searchBox.getPlaces();

      if (places.length == 0) {
        return;
      }

      // Clear out the old markers.
      markers.forEach(function(marker) {
        marker.setMap(null);
      });
      markers = [];

      // For each place, get the icon, name and location.
      var bounds = new google.maps.LatLngBounds();
      places.forEach(function(place) {
        if (!place.geometry) {
          console.log("Returned place contains no geometry");
          return;
        }
        var icon = {
          url: place.icon,
          size: new google.maps.Size(71, 71),
          origin: new google.maps.Point(0, 0),
          anchor: new google.maps.Point(17, 34),
          scaledSize: new google.maps.Size(25, 25)
        };

        // Create a marker for each place.
        markers.push(new google.maps.Marker({
          map: map,
          icon: icon,
          title: place.name,
          position: place.geometry.location
        }));

        if (place.geometry.viewport) {
          // Only geocodes have viewport.
          bounds.union(place.geometry.viewport);
        } else {
          bounds.extend(place.geometry.location);
        }
      });
      map.fitBounds(bounds);
    });
  }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDgnL-HwMD8ZyIMajQ9CDY-qt4hwIQO7P4&libraries=places&callback=initAutocomplete"
     async defer></script>

</body> </html>

Need a microscope to read street names on android device with iframe embed

Follow this question

Related questions