comment
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
[<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
[<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.