3

I'm working on a website now for a neighborhood. They have a drawn map of their community that is simply a .png image. I can get the users lat/lon, how can I place a marker on the map showing the user their general location? Basically, when the user hits that page, I'll show the .png image of the map but want to overlay another market in their general location.

Thanks!

user989557
  • 929
  • 2
  • 11
  • 18
  • You could use the Google Maps api for this. http://stackoverflow.com/questions/16356543/google-maps-tool-for-accurately-positioning-image-overlay – Seano666 Dec 01 '13 at 22:02
  • See https://developers.google.com/maps/documentation/javascript/maptypes#CustomMapTypes – bfavaretto Dec 01 '13 at 22:02

2 Answers2

4

If you don't want to use Google maps, then you will need the coordinates of some points from the image. Ideally if you know the coordinates of the top left and bottom right points of the PNG image then you can consider that the earth surface is a rectangle. Since this is a neighborhood then the error will be unnoticeable. Then you can easily convert coordinates into percentages of the image height, width.

For example if:

  • the top left corner is 42.685085,23.321373
  • the lower right corner is 42.68029,23.329784
  • the image width is 1000px and the image height is 1000px
  • the the user is located at: 42.683571,23.324978

Then you can easily do the math - your pin needs to be placed at: [31.57455683%, 42.8605397693%], provided that top left is [0%, 0%] and bottom right is [100%, 100%]. This means that in this example the pin is pointing [316px, 429px].

It is very important that you have the coordinates of the top left and bottom right corner of the image so that you can calculate the positions accurately on this improvised map. Also it's very important that the sizes of the objects on the map are the same proportions as the real objects - otherwise although your calculations are correct, the pin may seem as if it's misplaced. You cannot do much if their map is totally wrong.

Tip: You can make their map semi-transparent and place it over google maps or some other map of the same area so that you can see if roads and buildings match. It would be waste of time to try to do it with a wrong map.

Pavel Nikolov
  • 9,401
  • 5
  • 43
  • 55
  • Pavel, thanks you for the info! What calculation did you use? – user989557 Dec 17 '13 at 19:36
  • This is a simple math. You need to be able to calculate % like this `a * x/100 = b`. Where `a` is the width of the map and `b` is the distance between your point and the map border. You calculate this for both `x` and `y` coordinates and you are good to go – Pavel Nikolov Dec 18 '13 at 16:40
  • Hello in my case I have this values, width of image = 800 and heigth = 600, the (x, y) coordenates on the click event of image, and the upper left coordenates and the lower right coordenates, I need to transform the (x, y) image coordenates into gps coordenates, I know is more a math problem but I´m confused, I will apreciate your help. from ya thanks! – Mitch3091 Aug 03 '17 at 22:26
  • Well, Fernando, in your case this is a reverse process. You will need to convert from pixels to coordinates, but the method is the same. You just have to know what GPS coordinates correspond to the the top left and bottom right of your image. Then, when you click on the image and extracts the X and Y offset in pixels you can easily translate these pixels to % values. Then caclulate the GPS offset (again assuming the map is rectangular - for small maps the error will be negligible). – Pavel Nikolov Aug 04 '17 at 00:09
  • 1
    A way to solve the problem https://i.stack.imgur.com/TFEQ9.jpg w=((42.683571-42.685085)/(42.68029-42.685085)) * 1000 h=((23.324978-23.321373)/(23.329784-23.321373)) * 1000 the image is made by @karelg – Dimo Doncheff Mar 12 '19 at 06:19
0

Example from https://developer.mozilla.org

<p><button onclick="geoFindMe()">Show my location</button></p>
<div id="out"></div>


<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
function geoFindMe() {
  var output = document.getElementById("out");

  if (!navigator.geolocation){
    output.innerHTML = "<p>Geolocation is not supported by your browser</p>";
    return;
  }

  function success(position) {
    var latitude  = position.coords.latitude;
    var longitude = position.coords.longitude;

    output.innerHTML = '<p>Latitude is ' + latitude + '° <br>Longitude is ' + longitude + '°</p>';

    var img = new Image();
    img.src = "http://maps.googleapis.com/maps/api/staticmap?center=" + latitude + "," + longitude + "&zoom=13&size=300x300&sensor=false";

    output.appendChild(img);
  };

  function error() {
    output.innerHTML = "Unable to retrieve your location";
  };

  output.innerHTML = "<p>Locating…</p>";

  navigator.geolocation.getCurrentPosition(success, error);
}
</script>
zloctb
  • 10,592
  • 8
  • 70
  • 89