The Bing Maps extension for WebSharper has been updated to version 7.0 of the library. It allows developers to use the latest features of Bing Maps, including info boxes and keyboard events. It also provides a convenient interface to the REST API for searches, routes and static map images.

The Bing Maps library has gone under a major overhaul when passing from version 6.3 to 7.0 - and so has the WebSharper Extension. It now uses our Interface Generator, which will allow us to make future updates to the API available lightning-fast to WebSharper developers.

The following is an example minimal code to display a map showing a specific location. credentials is a string containing your Bing Maps Developer key.

[<JavaScript>]
let MapElement () =
    Div []
    |>! OnAfterRender (fun el ->
	let options =
	    Bing.MapViewOptions(
		Credentials = credentials,
		Width = 400,
		Height = 400,
		MapTypeId = Bing.MapTypeId.Birdseye,
		Center = Bing.Location(48.86, 2.34),
		Zoom = 10
	    )
	Bing.Map(el.Body, options) |> ignore
    )

And here is a more complex sample showing several major features:

• Adding entities on the map, like pushpins and info boxes;
• Querying the REST service for a route between two locations, displaying it on the map and printing directions.

    [<JavaScript>]
    let MapWithRouteSearch() =
        let origin = Input [Attr.Type "text"]
        let destination = Input [Attr.Type "text"]
        let button = Button [Text "Request route"]
        let directions = Div []
        let routeCallback (map : Bing.Map) (result : Bing.RestResponse) =
            let route = result.ResourceSets.[0].Resources.[0] :?> RouteResource
            // Center the view on the route
            let corners = [| Bing.Location(route.Bbox.[0], route.Bbox.[1])
                             Bing.Location(route.Bbox.[2], route.Bbox.[3]) |]
            let viewBoundaries = Bing.LocationRect.FromLocations(corners)
            map.SetView(Bing.ViewOptions(Bounds = viewBoundaries))
            // Display the route
            let routeline = route.RoutePath.Line.Coordinates
            let routepoints = Array.init routeline.Length (fun i ->
                Bing.Location(routeline.[i].[0], routeline.[i].[1]))
            let routeshape = Bing.Polyline(routepoints)
            map.Entities.Push routeshape
            // Add a pushpin at the origin and an info box at the destination
            let originPin = Bing.Pushpin(routepoints.[0])
            map.Entities.Push originPin
            let destBox = Bing.Infobox(routepoints.[routepoints.Length-1],
                                       Bing.InfoboxOptions(
                                        Title = "Destination",
                                        Description = "You are at destination!"))
            map.Entities.Push destBox
            // Print directions under the map
            let getItems =
                Array.map (fun (inst : Bing.ItineraryItem) ->
                    TR [TD [Text inst.Instruction.Text]
                        TD [Text (string inst.TravelDistance + " " +
                                  string route.DistanceUnit)]])
            directions.Clear()
            route.RouteLegs
            |> Array.map (fun leg -> getItems leg.ItineraryItems)
            |> Array.concat
            |> Table
            |> directions.Append
        let mapContainer =
            Div []
            |>! OnAfterRender (fun el ->
                // Create the map
                let mapOptions = Bing.MapViewOptions(Credentials = credentials,
                                                     Width = 600,
                                                     Height = 500,
                                                     MapTypeId = Bing.MapTypeId.Road)
                let map = Bing.Map(el.Body, mapOptions)
                // Bind the REST request
                let callRequest (_:Element) (_:Events.MouseEvent) =
                    let waypoints = [| Bing.Waypoint origin.Value
                                       Bing.Waypoint destination.Value |]
                    let request = Bing.RouteRequest(
                                    Waypoints = waypoints,
                                    RoutePathOutput = Bing.RoutePathOutput.Points)
                    Bing.Rest.RequestRoute(credentials, request, routeCallback map)
                button |>! OnClick callRequest |> ignore
            )
        Div [
            mapContainer
            Span[Text "From:"]; origin
            Span[Text "To:"]; destination
            button
            directions
        ]

As you can see, we augmented the API with facilities to invoke the REST services. Request functions in the Bing.Rest module take a description of your request to build and call the url with all necessary parameters. Finally, the provided callback receives the response from the Bing service.

Below is a screenshot of the generated interactive map after searching for a route.

You can download the Bing Maps for WebSharper Extension at this address.