@@ -4,68 +4,78 @@ Fable bindings and helpers for [react-google-map](https://github.com/tomchentw/r
44
55## Installation
66
7- npm install --save react-google-maps # or
8- yarn add react-google-maps
7+ ```
8+ npm install --save react-google-maps # or
9+ yarn add react-google-maps
910
10- paket add Fable.ReactGoogleMap --project [yourproject]
11+ paket add Fable.ReactGoogleMap --project [yourproject]
12+ ```
1113
1214## Usage
1315
1416In your css add the following:
1517
16- .maploadercontainer,
17- .mapcontainer {
18- height: calc(100vh - 18rem);
19- width: 100%;
20- }
18+ ``` css
19+ .maploadercontainer ,
20+ .mapcontainer {
21+ height : calc (100vh - 18rem );
22+ width : 100% ;
23+ }
24+ ```
2125
2226and in your F# code you can create the map like this:
2327
24- let defaultCenter:Position = { lat = 40.6892494 ; lng = -74.0445004 }
28+ ``` fs
29+ let defaultCenter:Position = { lat = 40.6892494 ; lng = -74.0445004 }
2530
26- let myMap =
27- googleMap [
28- MapProperties.ApiKey googleMapApiKey
29- MapProperties.MapLoadingContainer "maploadercontainer"
30- MapProperties.MapContainer "mapcontainer"
31- MapProperties.DefaultZoom 9
32- MapProperties.DefaultCenter defaultCenter
33- MapProperties.Center defaultCenter ]
31+ let myMap =
32+ googleMap [
33+ MapProperties.ApiKey googleMapApiKey
34+ MapProperties.MapLoadingContainer "maploadercontainer"
35+ MapProperties.MapContainer "mapcontainer"
36+ MapProperties.DefaultZoom 9
37+ MapProperties.DefaultCenter defaultCenter
38+ MapProperties.Center defaultCenter ]
39+ ```
3440
3541## Markers
3642
3743If you want to show markers on the map then you can create them like this:
3844
39- let markers =
40- locations
41- |> Array.map (fun location ->
42- marker [
43- MarkerProperties.Key location.ID
44- MarkerProperties.Position (Coordinates.newPos location.X location.Y)
45- MarkerProperties.Icon (sprintf "Images/markers/%s.png" location.Color)
46- MarkerProperties.Title location.Title] []))
45+ ``` fs
46+ let markers =
47+ locations
48+ |> Array.map (fun location ->
49+ marker [
50+ MarkerProperties.Key location.ID
51+ MarkerProperties.Position (Coordinates.newPos location.X location.Y)
52+ MarkerProperties.Icon (sprintf "Images/markers/%s.png" location.Color)
53+ MarkerProperties.Title location.Title] []))
4754
4855
49- let myMap =
50- googleMap [
51- MapProperties.ApiKey googleMapApiKey
52- // ..
53- MapProperties.Markers (unbox markers) ]
56+ let myMap =
57+ googleMap [
58+ MapProperties.ApiKey googleMapApiKey
59+ // ..
60+ MapProperties.Markers (unbox markers) ]
61+ ```
5462
5563## MarkerClusterer
5664
5765The map component allows you to use a [ MarkerClusterer] ( https://tomchentw.github.io/react-google-maps/#markerclusterer ) :
5866
59- let clustered =
60- markers
61- |> markerClusterer [
62- MarkerClustererProperties.AverageCenter true
63- MarkerClustererProperties.MaxZoom 15
64- MarkerClustererProperties.EnableRetinaIcons true
65- MarkerClustererProperties.GridSize 60.]
66-
67- let myMap =
68- googleMap [
69- MapProperties.ApiKey googleMapApiKey
70- // ..
71- MapProperties.Markers clustered ]
67+ ``` fs
68+ let clustered =
69+ markers
70+ |> markerClusterer [
71+ MarkerClustererProperties.AverageCenter true
72+ MarkerClustererProperties.MaxZoom 15
73+ MarkerClustererProperties.EnableRetinaIcons true
74+ MarkerClustererProperties.GridSize 60.]
75+
76+ let myMap =
77+ googleMap [
78+ MapProperties.ApiKey googleMapApiKey
79+ // ..
80+ MapProperties.Markers clustered ]
81+ ```
0 commit comments