none
Overlaying an arbitrary image RRS feed

  • Question

  • I'm evaluating the Bing Maps AJAX API to see whether my team should use it instead of the equivalent Google API, which we've already done a little work with. One thing we're doing is overlaying an image on top of the map, specifying the image URL and the lat/long of the corners. After quite a bit of searching, I can't find a way to do this using the Bing API. There are plenty of tutorials over how to do this using MapCruncher, but unless I'm misunderstanding, this isn't a workable solution for us, because we're generating the images on the fly in response to user actions.

    In our Google Maps code we're using the GroundOverlay class, which we use by doing something like this: 

    var overlay = new google.maps.GroundOverlay(
       
    "http://server.com/image.jpg",
        latlongBounds
    );

    Tuesday, November 27, 2012 12:17 AM

Answers

  • Hi there,

    I'm not familiar with Google's GroundOverlay feature, but here's some thoughts based on the description of your situation:

    When you say you're trying to overlay an "arbitrary" image, do you mean that it's not georeferenced at all to a particular area? If so, it sounds a bit like what you want is simply to create a pushpin and assign the image as the pushpin "icon". That will cause the image to float above a certain location on the map.

    If instead you do want to overlay a georeferenced image, and that image should render at different levels of detail in response to different zoom levels of the map, note that you don't have to use MapCruncher to pre-render static .PNG/.JPG tiles - you can have a dynamic tile handler that generates and serves tiles on the fly. e.g. Create a tile layer that requests an image from a server-side script (.NET/PHP/whatever), and pass in the parameters for the quadkey and whatever extra parameters you want based on user actions. The script takes these parameters, generates the appropriate tile image, and sends it back to the map where it is placed in the correct position. The only issues you need to be aware of is if your data is *really* dynamic you need to take precautions to make sure tiles aren't cached on the client (which is the usual behaviour) so that users don't see "out of date" images.

    Finally, rather than creating individual tile images, you can also create a single large image and overlay it over the entire map display using CSS. By listening to the onmapviewchange event on the map, you can then redraw this image every time the user pans/zooms the map to reflect whatever is underneath it.

    Not sure if that answers your question, but let us know more information if you need more help


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Tuesday, November 27, 2012 12:29 PM
    Moderator

All replies

  • Hi there,

    I'm not familiar with Google's GroundOverlay feature, but here's some thoughts based on the description of your situation:

    When you say you're trying to overlay an "arbitrary" image, do you mean that it's not georeferenced at all to a particular area? If so, it sounds a bit like what you want is simply to create a pushpin and assign the image as the pushpin "icon". That will cause the image to float above a certain location on the map.

    If instead you do want to overlay a georeferenced image, and that image should render at different levels of detail in response to different zoom levels of the map, note that you don't have to use MapCruncher to pre-render static .PNG/.JPG tiles - you can have a dynamic tile handler that generates and serves tiles on the fly. e.g. Create a tile layer that requests an image from a server-side script (.NET/PHP/whatever), and pass in the parameters for the quadkey and whatever extra parameters you want based on user actions. The script takes these parameters, generates the appropriate tile image, and sends it back to the map where it is placed in the correct position. The only issues you need to be aware of is if your data is *really* dynamic you need to take precautions to make sure tiles aren't cached on the client (which is the usual behaviour) so that users don't see "out of date" images.

    Finally, rather than creating individual tile images, you can also create a single large image and overlay it over the entire map display using CSS. By listening to the onmapviewchange event on the map, you can then redraw this image every time the user pans/zooms the map to reflect whatever is underneath it.

    Not sure if that answers your question, but let us know more information if you need more help


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Tuesday, November 27, 2012 12:29 PM
    Moderator
  • The last option describes best what we're currently doing. By "arbitrary" I mean the image dimensions, not the geospatial dimensions. We know the northwest and southeast lat/long coordinates of the rectangle the image covers, and the single image gets stretched to cover that area, with the API handling panning and zooming. The lat/long coordinates change depending on the area that the user is requesting data for, along with the dimensions of the image. Since we're using SVG, detail level isn't an issue, but our server can also present it as PNG or JPEG and live with the pixelation for now. Using shapes via the API isn't really an option for us, since the shapes that make up the image are all generated by a computationally-intensive process at the server, and would probably be too slow if done in the browser.

    I'm attaching an image of what we currently wind up with, in case that makes things clearer.


    • Edited by David Emami Tuesday, November 27, 2012 9:33 PM
    Tuesday, November 27, 2012 9:02 PM
  • I've created heatmaps not dissimilar to that using the basic approach in "option 3" I described above - rather than an image file, it's actually a HTML5 <canvas> element placed over the map that is regenerated on the client side every time the map view changes, based on an underlying dataset.

    Description here: http://alastaira.wordpress.com/2011/02/23/heat-mapping-crime-data-with-bing-maps-and-html5-canvas/

    Demo here: http://localhost:4970/BingMaps/v7/v7HeatMap/basicheatmapexample.html

    Download code from here: http://bingmapsv7modules.codeplex.com/wikipage?title=Client%20Side%20Heatmap


    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Tuesday, November 27, 2012 9:50 PM
    Moderator
  • Thanks, I will take a look at that. We were looking at moving to something like that eventually, but we were hoping to be able to quickly port over, using the image generation server we have now, and then move to a client-side heatmap later. I'll definitely look at your example, though. I take it that the precise thing I was wanting to do (stretch a single image across a given lat/long area) isn't possible, at least not directly via the API?
    Tuesday, November 27, 2012 9:56 PM
  • I don't think there's anything that will automatically stretch an image, no.

    twitter: @alastaira blog: http://alastaira.wordpress.com/ | Pro Spatial with SQL Server 2012

    Tuesday, November 27, 2012 10:50 PM
    Moderator
  • Thanks very much for the help. Your heat maps look very cool (pun intended).
    Tuesday, November 27, 2012 11:25 PM
  • Hi,
    I need help on converting from Route Direction, Locations Maps to Imagery Map (image format).
    Here is the scenario. The user going to design map with number of selected locations with pushpins. At the end Used wanted to have same map in image format. How is it possible to build Route URL and along with Imagery URL internally.
    For Example. If user selected list of hotels in Seattle(see the Map below). It internally create "ttp://dev.virtualearth.net/REST/v1/Routes/Locations?key=BingKey.........."
    After user designing the map, there is a option to SaveMap as Image format. In that case i wanted to build diyanic Imagery URL i.e. "ttp://dev.virtualearth.net/REST/v1/Imagery/Map............"
    Appreciate your help.

    Tuesday, December 4, 2012 8:54 PM
  • Hi,
    I need help on converting from Route Direction, Locations Maps toImagery Map (image format).
    Here is the scenario. The user going to design map with number of selected locations with pushpins. At the end Used wanted to have same map in image format. How is it possible to build Route URL and along with Imagery URL internally.
    For Example. If user selected list of hotels in Seattle(see the Map below). It internally create "ttp://dev.virtualearth.net/REST/v1/Routes/Locations?key=BingKey.........."
    After user designing the map, there is a option to SaveMap as Image format. In that case i wanted to build diyanic Imagery URL i.e. "ttp://dev.virtualearth.net/REST/v1/Imagery/Map............"
    Appreciate your help.

    Tuesday, December 4, 2012 8:56 PM