1
comment
on 5/22/2014 10:57 AM

We are happy to announce the release of a WebSharper binding for Leafletjs, a library that makes it easy to display and work with maps such as OpenStreetMap. It is available on NuGet, and the sources are on Github.

Here is a sample to show you how easy it is to work with Leaflet in WebSharper:

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
Div [Attr.Style "height: 600px;"]
|>! OnAfterRender (fun div ->

    // Create the map
    let map = Leaflet.Map(div.Body)

    // Add the tiles from OpenStreetMap.
    // We provide the URL templates and copyright attributions for OpenStreetMap
    // and Mapbox as constants, so you don't waste time looking them up.
    map.AddLayer(
        Leaflet.TileLayer(
            Leaflet.TileLayer.OpenStreetMap.UrlTemplate,
            Leaflet.TileLayer.Options(
                Attribution = Leaflet.TileLayer.OpenStreetMap.Attribution)))

    // Set the initial view (latitude, longitude and zoom).
    map.SetView((47.49883, 19.0582), 14)

    // Add a marker at the position of our office.
    map.AddLayer(
        let m = Leaflet.Marker((47.4952, 19.07114))
        // Show a popup when the marker is clicked.
        m.BindPopup("IntelliFactory")
        m)

    // Add events to show the mouse position in another div named `coordinates'.
    map.On_mousemove(fun map ev ->
        coordinates.Text <- "Position: " + ev.Latlng.ToString())
    map.On_mouseout(fun map ev ->
        coordinates.Text <- "")
)

A meatier sample on the WebSharper website will follow soon. Happy coding!

.

This is great! Might we see a binding for Director next? ;)

By on 5/22/2014 12:35 PM ()
IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us
Built with WebSharper