Back to Questions
5.7k
views9
comments
Availability of Google's MarkerClusterer in WebSharper
websharpergoogle maps

Hi,
Is the MarkerClusterer [link:gmaps-utility-library.googlecode.com] available in WebSharper? It seems it isn't, so how to import it?

Thanks,
Tomas

.

Hi Tomas,

I have created a WebSharper extension for MarkerClusterer for Google Maps v3, which we will make available as an installer shortly. The API mapping is almost identical, so you can easily adapt the original MarkerClusterer examples. Just create a map using the Google Maps WebSharper binding, then pass the created map to MarkerClusterer constructor.

Here is the extension code itself:

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

namespace IntelliFactory.WebSharper.MarkerClusterer

module Definition =
    open IntelliFactory.WebSharper.InterfaceGenerator
    open IntelliFactory.WebSharper.InterfaceGenerator.Type
    open IntelliFactory.WebSharper.Google.Maps

    let resource = Resource "Js" "markerclusterer_compiled.js"

    let CalculatorResult =
        Pattern.Config "CalculatorResult" {
            Required =
                [
                    "text",     T<string>
                    "index",    T<int>
                ]
            Optional = []
        }

    let MarkerClustererOptions =
        Pattern.Config "MarkerClustererOptions" {
            Required = []
            Optional =
                [
                    "gridSize",             T<int>
                    "maxZoom",              T<float>
                    "zoomOnClick",          T<bool>
                    "averageCenter",        T<bool>
                    "minimumClusterSize",   T<int>
                ]
        }

    let Style =
        Pattern.Config "Style" {
            Required =
                [
                    "url",                  T<string>
                    "height",               T<int>
                    "width",                T<int>
                    "anchor",               (Type.ArrayOf T<int>)
                    "textColor",            T<string>
                    "textSize",             T<float>
                    "backgroundPosition",   T<string>
                ]
            Optional = []
        }

    let MarkerClusterer =
        Class "MarkerClusterer"
        |+> [
                Constructor (T<Map>?map * (!? (Type.ArrayOf T<Marker>)?opt_markers) * (!? MarkerClustererOptions?opt_options))
            ]
        |+> Protocol [
                "addMarker"         => T<Marker>?marker * (!? T<bool>?opt_nodraw) ^-> T<unit>
                "addMarkers"        => (Type.ArrayOf T<Marker>)?markers * (!? T<bool>?opt_nodraw) ^-> T<unit>
                "clearMarkers"      => T<unit> ^-> T<unit>
                "getCalculator"     => T<unit> ^-> (T<Marker> * T<int> ^-> CalculatorResult)
                "getExtendedBounds" => T<LatLngBounds>?bounds ^-> T<LatLngBounds>
                "getGridSize"       => T<unit> ^-> T<float>
                "getMap"            => T<unit> ^-> T<Map>
                "getMarkers"        => T<unit> ^-> Type.ArrayOf T<Marker>
                "getMaxZoom"        => T<unit> ^-> T<float>
                "getStyles"         => T<unit> ^-> Type.ArrayOf Style
                "getTotalClusters"  => T<unit> ^-> T<int>
                "getTotalMarkers"   => T<unit> ^-> T<int>
                "isZoomOnClick"     => T<unit> ^-> T<bool>
                "redraw"            => T<unit> ^-> T<unit>
                "removeMarker"      => T<Marker>?marker ^-> T<bool>
                "resetViewport"     => T<unit> ^-> T<unit>
                "setCalculator"     => (T<Marker> * T<int> ^-> CalculatorResult)?calculator ^-> T<unit>
                "setGridSize"       => T<float>?size ^-> T<unit>
                "setMap"            => T<Map>?map ^-> T<unit>
                "setMaxZoom"        => T<float>?maxZoom ^-> T<unit>
                "setStyles"         => Type.ArrayOf Style ^-> T<unit>
            ]
        |> Requires [resource]

    let Assembly =
        Assembly [
            Namespace "IntelliFactory.WebSharper.MarkerClusterer.Resources" [
                resource
            ]
            Namespace "IntelliFactory.WebSharper.MarkerClusterer" [
                 Style
                 MarkerClustererOptions
                 CalculatorResult
                 MarkerClusterer
            ]
        ]

module Main =
    open IntelliFactory.WebSharper.InterfaceGenerator

    do Compiler.Compile stdout Definition.Assembly

Hope this helps.
Csaba.

By on 11/8/2012 2:17 AM ()

Hi Csaba,

Thank you very much, works well. Perhaps I would need some tuning. - How to use MarkerClustererOptions when it has not constructor?

Thanks again,
Tomas

By on 11/9/2012 6:26 AM ()

Hi Tomas,

You are right, MarkerClustererOptions needs a constructor. I have updated the binding code, now MarkerClustererOptions has proper definiton with a constructor.

Cheers,
Csaba

By on 11/10/2012 12:51 AM ()

Hi Tomas - you can integrate any JavaScript library into WebSharper through an extension. MarkerClusterer seems like an excellent addition to the growing number of extensions available, and it's so tiny that it wouldn't take much time to bind as an extension - in fact, we might just get to this shortly and post it for support customers.

Now, in general about extensions: we haven't released an extensive documentation with larger examples (but it's coming!) for this, however, there are already numerous places to turn to for examples (there are more but these are the most obvious ones):

  1. The WebSharper PDF - see the section on the WebSharper Interface Generator for the operators and functions you can use to describe extensions.
  2. The WebSharper Extension project in Visual Studio - this shows the general structure of an extension project. You can add such project to your existing solution and adapt it to the library you need.
  3. The WebSharper Community sources, most notably the parts for EcmaScript or jQuery. These provide actual examples for WebSharper extensions.
  4. The upcoming Expert F# 3.0 book - this has major additions to the earlier editions, in particular it has a new chapter for doing mobile programming with F# and WebSharper, and shows how to develop an extension to a small part of the Facebook API.

Hope this helps.
Adam.

By on 10/7/2012 4:09 AM ()

Hi Adam,
So can I wait for support here, instead of writing that binding myself? - How long can it take, when you say shortly?
Maybe, this could also be a good candidate for any type provider, instead of writing binding manually, although there will be problem with types, I think.

Thank you,
Tomas

By on 10/8/2012 11:53 AM ()

Hi Adam,

could you please say more to this?

Thanks

By on 10/16/2012 12:48 PM ()

The Expert F# bit - very cool! I don't remember seeing any serious book discussing WebSharper (and I hope you're doing it great!).

By on 10/7/2012 6:12 AM ()

Also, as far as I know, Dan's upcoming book Building Web, Cloud, and Mobile Solutions with F# also has a good amount of WebSharper content.

By on 10/7/2012 4:00 PM ()

Well, Expert F# 2.0 has ~15 pages on WebSharper (and it was published two years ago). Expert F# 3.0 now has ~80 pages covering various topics on web and mobile programming - all with WebSharper.

By on 10/7/2012 11:16 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper