Merge branch 'master' of https://github.com/fable-compiler/fable-react

Author: forki

src/Fable.ReactGoogleMaps/README.md

@@ -4,33 +4,39 @@ Fable bindings and helpers for [react-google-map](https://github.com/tomchentw/r
 
 ## Installation
 
-    npm install --save react-google-maps # or
-    yarn add react-google-maps
+```
+npm install --save react-google-maps # or
+yarn add react-google-maps
 
-    paket add Fable.ReactGoogleMap --project [yourproject]
+paket add Fable.ReactGoogleMap --project [yourproject]
+```
 
 ## Usage
 
 In your css add the following:
 
-    .maploadercontainer,
-    .mapcontainer {
-        height: calc(100vh - 18rem);
-        width: 100%;
-    }
+```css
+.maploadercontainer,
+.mapcontainer {
+    height: calc(100vh - 18rem);
+    width: 100%;
+}
+```
 
 and in your F# code you can create the map like this:
 
-    let defaultCenter:Position = { lat = 40.6892494 ; lng = -74.0445004 }
+```fs
+let defaultCenter:Position = { lat = 40.6892494 ; lng = -74.0445004 }
 
-    let myMap =
-        googleMap [ 
-            MapProperties.ApiKey googleMapApiKey
-            MapProperties.MapLoadingContainer "maploadercontainer"
-            MapProperties.MapContainer "mapcontainer"
-            MapProperties.DefaultZoom 9
-            MapProperties.DefaultCenter defaultCenter
-            MapProperties.Center defaultCenter ]
+let myMap =
+    googleMap [ 
+        MapProperties.ApiKey googleMapApiKey
+        MapProperties.MapLoadingContainer "maploadercontainer"
+        MapProperties.MapContainer "mapcontainer"
+        MapProperties.DefaultZoom 9
+        MapProperties.DefaultCenter defaultCenter
+        MapProperties.Center defaultCenter ]
+```
 
 ## Traffic Layer
 
@@ -46,36 +52,40 @@ Google Maps allows you to activate the traffic layer. The map component has a si
 
 If you want to show markers on the map then you can create them like this:
 
-    let markers =
-        locations
-        |> Array.map (fun location ->
-            marker [
-                MarkerProperties.Key location.ID
-                MarkerProperties.Position (Coordinates.newPos location.X location.Y)
-                MarkerProperties.Icon (sprintf "Images/markers/%s.png" location.Color)
-                MarkerProperties.Title location.Title] []))
+```fs
+let markers =
+    locations
+    |> Array.map (fun location ->
+        marker [
+            MarkerProperties.Key location.ID
+            MarkerProperties.Position (Coordinates.newPos location.X location.Y)
+            MarkerProperties.Icon (sprintf "Images/markers/%s.png" location.Color)
+            MarkerProperties.Title location.Title] []))
 
 
-    let myMap =
-        googleMap [ 
-            MapProperties.ApiKey googleMapApiKey
-            // ..
-            MapProperties.Markers (unbox markers) ]
+let myMap =
+    googleMap [ 
+        MapProperties.ApiKey googleMapApiKey
+        // ..
+        MapProperties.Markers (unbox markers) ]
+```
 
 ## MarkerClusterer
 
 The map component allows you to use a [MarkerClusterer](https://tomchentw.github.io/react-google-maps/#markerclusterer):
 
-    let clustered =
-        markers
-        |> markerClusterer [
-            MarkerClustererProperties.AverageCenter true
-            MarkerClustererProperties.MaxZoom 15
-            MarkerClustererProperties.EnableRetinaIcons true
-            MarkerClustererProperties.GridSize 60.]
-
-    let myMap =
-        googleMap [ 
-            MapProperties.ApiKey googleMapApiKey
-            // ..
-            MapProperties.Markers clustered ]
+```fs
+let clustered =
+    markers
+    |> markerClusterer [
+        MarkerClustererProperties.AverageCenter true
+        MarkerClustererProperties.MaxZoom 15
+        MarkerClustererProperties.EnableRetinaIcons true
+        MarkerClustererProperties.GridSize 60.]
+
+let myMap =
+    googleMap [ 
+        MapProperties.ApiKey googleMapApiKey
+        // ..
+        MapProperties.Markers clustered ]
+```