You are not logged in.

#1 2020-05-30 09:48:29

hispanus3
New Member
Registered: 2020-05-30
Posts: 1

New to OSM... Size of text/buttons too small on smartphone browser

Hello,
I would like to show a map in a web page, to display on smartphone.
The very simple example I found works great on a Mac or PC, but as you can see on the attached screen capture, the size of text and buttons are really too small on smartphone.
Unusable.

Is there a way to modify this code to show the map properly, i.e. with readable text and icons ?
Any help would be appreciated...

the code I use :

<?php
$longitude = $_GET["lon"];
$latitude = $_GET["lat"];
?<html><body>
  <div id="mapdiv"></div>
  <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
  <script>
    map = new OpenLayers.Map("mapdiv");
    map.addLayer(new OpenLayers.Layer.OSM());
    var lonLat = new OpenLayers.LonLat(<?php echo $longitude.",".$latitude; ?> )
          .transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() );
    var zoom=16;
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
    markers.addMarker(new OpenLayers.Marker(lonLat));
    map.setCenter (lonLat, zoom);
  </script>
</body></html>

mapsmall.jpg

Offline

#2 2020-05-30 15:41:32

Spiekerooger
Member
Registered: 2019-07-09
Posts: 35

Re: New to OSM... Size of text/buttons too small on smartphone browser

It does look as if the html and css of the website where you display the map does not follow any rules for responsive webdesign. So I would start to crrect that.

Offline

#3 2020-05-31 12:05:32

SK53
Member
Registered: 2009-01-11
Posts: 534

Re: New to OSM... Size of text/buttons too small on smartphone browser

Leaflet is often a better framework for this sort of thing. I find controls on OpenLayers sites still a bit harder to use using a smartphone than Leaflet. Also leaflet is a little simpler. There are some good intros on the web.

Offline

Board footer

Powered by FluxBB