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>

asked 26 Mar, 14:42

Treklov's gravatar image

Treklov
10112
accept rate: 0%

One general suggestion, not just limited to uMap, might be to enable magnification on the phone (accessibility / Magnification) and triple-tap to enlarge. Whether that's available on your antique version of Android I'm not sure, but it is present in more recent ones.

(26 Mar, 15:02) SomeoneElse ♦
1

Try a different map style. Some tile servers have support for so-called retina tiles for displays with a high DPI value. I'm not sure if uMap supports them at all, though.

(27 Mar, 07:01) scai ♦

On a side note: By saying "I want to embed the map in my code for the whole world to use" do you mean to share your website/app for others to use? Then you need to check the tile usage policies of the tile layers you want to use. I would say that most if not all of the layers available in uMap don't allow for mass usage without any preconditions.

(27 Mar, 07:54) TZorn

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.

permanent link

answered 26 Mar, 17:39

H_mlet's gravatar image

H_mlet
1.7k732
accept rate: 13%

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

permanent link

answered 27 Mar, 09:41

Treklov's gravatar image

Treklov
10112
accept rate: 0%

Please use the comment button. Answers are reserved for solving a question.

(27 Mar, 09:58) scai ♦

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, 09:48

Treklov's gravatar image

Treklov
10112
accept rate: 0%

-1

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">

<script> // This example adds a search box to a map, using the Google Place Autocomplete // feature. People can enter geographical searches. The search box will return a // pick list containing a mix of places and predicted search terms.

  // 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>

permanent link

answered 29 Mar, 17:20

Treklov's gravatar image

Treklov
10112
accept rate: 0%

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Markdown Basics

  • *italic* or _italic_
  • **bold** or __bold__
  • link:[text](http://url.com/ "title")
  • image?![alt text](/path/img.jpg "title")
  • numbered list: 1. Foo 2. Bar
  • to add a line break simply add two spaces to where you would like the new line to be.
  • basic HTML tags are also supported

Question tags:

×172
×28
×9

question asked: 26 Mar, 14:42

question was seen: 390 times

last updated: 29 Mar, 17:20

powered by OSQA