Skip to content

Commit 43f3be2

Browse files
author
Maxime Mangel
authored
Add lang to code blocks
1 parent 87a6035 commit 43f3be2

File tree

1 file changed

+53
-43
lines changed

1 file changed

+53
-43
lines changed

src/Fable.ReactGoogleMaps/README.md

Lines changed: 53 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -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

1416
In 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

2226
and 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

3743
If 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

5765
The 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

Comments
 (0)