Bing map API stuff

[xoggoth]

Don't suppose anyone here has tried Bing maps API in jscript but worth a try.

Trying to set up a thing where local council can click on a map and see details & picture of any current footpath problems. All working fine except that the info boxes can go off top of screen, so need to scroll map down, ie centre on a more Northerly latitude, but can't get it to adjust properly.

Problem is , don't think it's my cockup, the methods just don't seem to work - see this simple bit of test code.

map.setView({center: new Microsoft.Maps.Location(lat[n],lon[n])});
alert("x");
var x = 0.5 * map.getWidth();
var y = 0.5 * map.getHeight();
var point = new Microsoft.Maps.Point(x, y);
var location = map.tryPixelToLocation(point);
map.setView({center: new Microsoft.Maps.Location(location.latitude,location.longitude)});

The map centres on the supplied lat/long in line 1. If I then get the centre of the map in pixels and convert that back to lat/long I should surely be at the same location, but it's way off, 500m or more.

Any ideas? Cheers.

 

[NickFitz]

The tryPixelToLocation method takes a second argument, reference, which specifies where the calculation should be relative to: 'control' meaning the top left corner of the map, 'page' meaning the top left corner of the HTML page, or the vaguely-specified 'viewport'; no idea from the docs what that actually is, but it's the default value: PixelReference Enumeration - Bing Maps | Microsoft Docs

So if you change that line to

var location = map.tryPixelToLocation(point, Microsoft.Maps.PixelReference.control);

so it knows to calculate from the top left of the map, it seems to work OK

 

[xoggoth]

Great, thanks NF!

I had done a botch taking y as proportional to latitude as it's only a fairly small area but nicer to do it properly.

 

[NickFitz]

FWIW, if you're using the Infobox class to display the info, there's some example code here of how to get the map to move when it's displayed so that it's fully on screen, but only if it's not: Dev Tip: Repositioning an Infobox | Maps Blog

 

[DoctorStrangelove]

Now give us an example in FORTRAN IV.

 

[xoggoth]

Now give us an example in FORTRAN IV

I can do that. But you'll have to wait while I load the operating system from paper tape on my Elliot 405.

 

[xoggoth]

As the pin has already been centred on the map and the infobox is centred above the pin by default, the solution is very simple:

var dy = info[n].getHeight() - 0.5 * map.getHeight() + 40;
if (dy>0)
{
map.setView({ centerOffset: new Microsoft.Maps.Point(0, dy), center: map.getCenter() });
}

Anyway, thanks again Fizzy Knickers.

 

[xoggoth]

Finally - code here if any use

Finally - code here if any use

Updated version of grid marked map. Uses canvas to add notation to grid sectors as Bing pushpins are a bit limited. Click on sector to zoom in on it. Again to go back out. Map type change, drag and zoom still work.

Moved see Bing/Street View Thread.

If anyone not seen comment in light relief there's also a pushpin thing here to show footpath problems. Click pin to show brief description and photo. Click box to return. Ditto map change, zoom and drag.

Moved see Bing/Street View Thread.

Can't view source of these but for anyone not that au fait with websites etc, you can copy html and included js file using browser developer's tools.

 

[xoggoth]

As a walking enthusiast I like Bing maps because they have OS map but Google Streetview is good for looking for places to park.

Grid sectors now have central marker that corresponds to my printed maps. Click on the marker brings up Google maps in a separate tab, centred on same area.

Moved see Bing/Street View Thread.

PS Seem small differences in different browsers, text moved a bit etc. Only real problems in Firefox which is rather slow to load and does not show letters on central markers. Still moves and zooms ok and opens Google though.

 

[xoggoth]

Just in case anyone has my obsession with mappy things. The above Bing map grid opens Google maps when grid marker so I can use Streetview to look for parking. Made a Chrome extension so that if I find somewhere I can then show exact location marked on Bing maps thing.

Bung 3 short files, with 2 obvious changes, in a directory with an icon:

manifest.json:

{
"manifest_version": 2,
"author": "<YOUR NAME>",
"name": "Streetview",
"version": "1.0",
"description": "Open Streetview location in Bing",
"background":
{
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon1.png"
},
"permissions": ["activeTab"]
}

background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "content.js"});
});

content.js:

var url = window.location.href;
var pos1 = url.indexOf("@",0)+1;
var pos2 = url.indexOf(",",pos1)+1;
var pos2 = url.indexOf(",",pos2);
var loc = url.substring(pos1, pos2);
url="<YOUR SITE MAP PAGE>.html?arg="+loc;
window.open(url,'_blank');

Enabling it covered here:
Getting Started Tutorial - Google Chrome

These extensions are very easy to do and best thing is they are pretty much same code in all major browsers.