Bing map API stuff Bing map API stuff
Posts 1 to 10 of 10
  1. #1

    Double Godlike!

    xoggoth's Avatar
    Join Date
    Jul 2005
    Location
    xoggoth towers
    Posts
    12,761

    Default Bing map API stuff

    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.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

  2. #2

    My post count is Majestic

    NickFitz's Avatar
    Join Date
    Jun 2007
    Location
    Your local branch
    Posts
    43,441

    Default

    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

    Code:
    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

  3. #3

    Double Godlike!

    xoggoth's Avatar
    Join Date
    Jul 2005
    Location
    xoggoth towers
    Posts
    12,761

    Default

    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.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

  4. #4

    My post count is Majestic

    NickFitz's Avatar
    Join Date
    Jun 2007
    Location
    Your local branch
    Posts
    43,441

    Default

    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

  5. #5

    Contractor Among Contractors

    DoctorStrangelove's Avatar
    Join Date
    Apr 2018
    Posts
    1,545

    Default

    Now give us an example in FORTRAN IV.
    Mein Fuhrer I can valk!

  6. #6

    Double Godlike!

    xoggoth's Avatar
    Join Date
    Jul 2005
    Location
    xoggoth towers
    Posts
    12,761

    Default

    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.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

  7. #7

    Double Godlike!

    xoggoth's Avatar
    Join Date
    Jul 2005
    Location
    xoggoth towers
    Posts
    12,761

    Default

    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.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

  8. #8

    Double Godlike!

    xoggoth's Avatar
    Join Date
    Jul 2005
    Location
    xoggoth towers
    Posts
    12,761

    Default 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.

    Grid

    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.

    Footpaths

    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.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

  9. #9

    Double Godlike!

    xoggoth's Avatar
    Join Date
    Jul 2005
    Location
    xoggoth towers
    Posts
    12,761

    Default

    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.

    Grid

    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.
    Last edited by xoggoth; 5th January 2019 at 18:02.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

  10. #10

    Double Godlike!

    xoggoth's Avatar
    Join Date
    Jul 2005
    Location
    xoggoth towers
    Posts
    12,761

    Default

    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(functio n(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.
    bloggoth

    If everything isn't black and white, I say, 'Why the hell not?'
    John Wayne (My guru, not to be confused with my beloved prophet Jeremy Clarkson)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •