Open Street Map tool for accurately positioning image overlay? [closed] - google-maps

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 6 years ago.
Improve this question
First of all, I am totally aware that a similar question has been asked here
I used the JSFiddle proposed in the accepted answer - JsFiddle
The code provides me both markers coordinates as expected
google.maps.event.addListener(markerA, 'dragend', function () {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1"+ newPointA);
console.log("point2"+ newPointB);
});
google.maps.event.addListener(markerB, 'dragend', function () {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1"+ newPointA);
console.log("point2"+ newPointB);
});
My problem is that I am using Open Street Map and after positioning my image and using the coordinates in my application, the image is not correctly positioned as in the JSFiddle.
I found that both Google Maps and Open Street Map have a significant difference with their coordinates.
How can I find the correct position for the overlay?

Answer 1

There are tutorials on the web to display OSM tiles on Google Maps, one in the OSM documentation from a quick search: Google Maps Example
Combining that with the Google Maps example yields this fiddle
code snippet:
var overlay;
var map;
DebugOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(40.743388, -74.007592),
mapTypeId: "OSM",
mapTypeControl: false,
streetViewControl: false
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// 40.674018,-74.251324,40.788664,-74.116993
var swBound = new google.maps.LatLng(40.674018, -74.251324);
var neBound = new google.maps.LatLng(40.788664, -74.116993);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
map.fitBounds(bounds);
var srcImage = 'https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg';
overlay = new DebugOverlay(bounds, srcImage, map);
var markerA = new google.maps.Marker({
position: swBound,
map: map,
draggable: true
});
var markerB = new google.maps.Marker({
position: neBound,
map: map,
draggable: true
});
google.maps.event.addListener(markerA, 'drag', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
overlay.updateBounds(newBounds);
});
google.maps.event.addListener(markerB, 'drag', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
var newBounds = new google.maps.LatLngBounds(newPointA, newPointB);
overlay.updateBounds(newBounds);
});
google.maps.event.addListener(markerA, 'dragend', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1" + newPointA);
console.log("point2" + newPointB);
});
google.maps.event.addListener(markerB, 'dragend', function() {
var newPointA = markerA.getPosition();
var newPointB = markerB.getPosition();
console.log("point1" + newPointA);
console.log("point2" + newPointB);
});
}
function DebugOverlay(bounds, image, map) {
this.bounds_ = bounds;
this.image_ = image;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
DebugOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
var img = document.createElement('img');
img.src = this.image_;
img.style.width = '100%';
img.style.height = '100%';
img.style.opacity = '0.5';
img.style.position = 'absolute';
div.appendChild(img);
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
DebugOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
DebugOverlay.prototype.updateBounds = function(bounds) {
this.bounds_ = bounds;
this.draw();
};
DebugOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
initialize();
//google.maps.event.addDomListener(window, 'load', initialize);
//Define OSM map type pointing at the OpenStreetMap tile server
map.mapTypes.set("OSM", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// "Wrap" x (logitude) at 180th meridian properly
// NB: Don't touch coord.x because coord param is by reference, and changing its x property breakes something in Google's lib
var tilesPerGlobe = 1 << zoom;
var x = coord.x % tilesPerGlobe;
if (x < 0) {
x = tilesPerGlobe + x;
}
// Wrap y (latitude) in a like manner if you want to enable vertical infinite scroll
return "http://tile.openstreetmap.org/" + zoom + "/" + x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "OpenStreetMap",
maxZoom: 18
}));
html,
body,
#map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<div id="footer">© OpenStreetMap contributors</div>