Cleanup

Author: forki

src/Fable.ReactGoogleMaps/Fable.Helpers.ReactGoogleMaps.fs

@@ -12,35 +12,27 @@ module Coordinates =
         abstract member lat: unit -> float
         abstract member lng: unit -> float
 
-    type [<Pojo>] Position = {
-        lat: float
-        lng: float
-    }
+     [<Emit("new window.google.maps.LatLng($0, $1)")>]
+    let newLatLng (lat: float, lng: float) : LatLng = jsNative
 
-    let newPos lat lng =
-        { lat = lat
-          lng = lng }
 
-    type [<Pojo>] Bounds = {
-        NE : Position
-        SW : Position
-    }
-    
     // https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngBounds
 
     type LatLngBounds =
-        abstract member extend : U2<LatLngBounds, Position> -> LatLngBounds
-        
-    [<Emit("new window.google.maps.LatLngBounds()")>]
-    let newLatLngBounds () : LatLngBounds = jsNative
+        abstract member extend : LatLngBounds -> LatLngBounds
+        abstract member extend : LatLng -> LatLngBounds
 
     [<Emit("new window.google.maps.LatLngBounds($0, $1)")>]
-    let newLatLngBoundsWith (sw: U2<LatLng, Position>, ne: U2<LatLng, Position>) : LatLngBounds = jsNative
+    let newLatLngBounds (sw: LatLng, ne: LatLng) : LatLngBounds = jsNative
+
+        
+    [<Emit("new window.google.maps.LatLngBounds()")>]
+    let newEmptyLatLngBounds () : LatLngBounds = jsNative
 
 module Places =
 
     type [<Pojo>] Geometry = {
-        location: Coordinates.Position
+        location: Coordinates.LatLng
     }
 
     type [<Pojo>] Place = {
@@ -55,22 +47,28 @@ type RCom = React.ComponentClass<obj>
 type MapRef(mapRef) =
 
     /// Get the current bounds of the Map
-    member __.GetBounds() : Coordinates.Bounds =
-        let bounds = mapRef?getBounds()
-        let ne = bounds?getNorthEast()
-        let sw = bounds?getSouthWest()
+    member __.GetBounds() : Coordinates.LatLngBounds option =
+        if isNull mapRef then
+            None
+        else
+            Some(mapRef?getBounds() |> unbox)
 
-        { NE = Coordinates.newPos (ne?lat() |> unbox) (ne?lng() |> unbox)
-          SW = Coordinates.newPos (sw?lat() |> unbox) (sw?lng() |> unbox) }
+    member __.GetZoom() : int option =
+        if isNull mapRef then
+            None
+        else
+            Some(mapRef?getZoom() |> unbox)
 
-    member __.GetZoom() : int =
-        mapRef?getZoom() |> unbox
 
-    member __.GetCenter() : Coordinates.Position =
-        mapRef?getCenter() |> unbox
-        
-    member __.FitBounds(bounds: U2<Coordinates.LatLngBounds, Coordinates.Bounds>, ?padding: float) : unit =
-        mapRef?fitBounds(bounds, padding)
+    member __.GetCenter() : Coordinates.LatLng option =
+        if isNull mapRef then
+            None
+        else
+            Some(mapRef?getCenter() |> unbox)
+
+    member __.FitBounds(bounds: Coordinates.LatLngBounds, ?padding: float) : unit =
+        if not(isNull mapRef) then
+            mapRef?fitBounds(bounds, padding) |> ignore
 
 module Props =
 
@@ -100,7 +98,7 @@ module Props =
     | Title of string
     | Icon of string
     | OnClick of (unit -> unit)
-    | Position of Coordinates.Position
+    | Position of Coordinates.LatLng
         interface IMarkerProperties
 
     type IMarkerClustererProperties =
@@ -124,14 +122,14 @@ module Props =
 
     [<RequireQualifiedAccess>]
     type MapProperties =
-    | SetRef of (obj -> unit)
+    | OnMapMounted of (obj -> unit)
     | ApiKey of string
     | DefaultZoom of int
     | SearchBoxText of string
     | ShowSearchBox of bool
     | ShowTrafficLayer of bool
-    | DefaultCenter of Coordinates.Position
-    | Center of Coordinates.Position
+    | DefaultCenter of Coordinates.LatLng
+    | Center of Coordinates.LatLng
     | OnCenterChanged of (unit -> unit)
     | OnPlacesChanged of (Places.Place [] -> unit)
     | OnZoomChanged of (unit -> unit)

src/Fable.ReactGoogleMaps/Fable.ReactGoogleMaps.fsproj

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project Sdk="Microsoft.NET.Sdk">
   <PropertyGroup>
-    <Version>0.3.1</Version>
+    <Version>0.4.0</Version>
     <TargetFramework>netstandard2.0</TargetFramework>
     <GenerateDocumentationFile>true</GenerateDocumentationFile>
   </PropertyGroup>

src/Fable.ReactGoogleMaps/README.md

@@ -117,7 +117,7 @@ It's possible to retrieve properties like current center or current bounds from
 ```fs
 
 let mutable mapRef = MapRef null
-let setMapRef (ref:obj) =
+let onMapMounted (ref:obj) =
     mapRef <- MapRef ref
 
 // ...
@@ -127,7 +127,7 @@ let myMap =
     googleMap [ 
         MapProperties.ApiKey googleMapApiKey
         // ..
-        MapProperties.SetRef setMapRef ]
+        MapProperties.OnMapMounted onMapMounted ]
 
 // ...
 
@@ -138,29 +138,24 @@ let bounds = mapRef.GetBounds()
 ### Set bounds of map to fit all the markers
 
 ```fs
-    // ...
-    let markerPositions: Position list = // ...
-        
-    // In some scenarios ref can be null, f.ex. slow network when the google maps isn't fully loaded yet.
-    let setRef (ref:obj) =
-        let bounds = ReactGoogleMaps.Coordinates.newLatLngBounds()
-        
-        match Option.ofObj ref with
-        | Some ref ->
-            markerPositions
-            |> List.fold (fun (acc:LatLngBounds) pos ->
-                acc.extend(!^ pos)
-            ) bounds
-            |> (MapRef ref).FitBounds
-        | _ ->
-            ()
-            
-    googleMap [ MapProperties.ApiKey googleMapApiKey
-                MapProperties.MapContainer "mapContainer"
-                MapProperties.DefaultZoom 9
-                MapProperties.DefaultCenter defaultCenter
-                MapProperties.Center defaultCenter
-                MapProperties.Options mapStyle
-                MapProperties.Markers markers
-                MapProperties.SetRef setRef ]
+// ...
+let markerPositions: Position list = // ...
+
+
+let mutable mapRef = MapRef null
+let onMapMounted (ref:obj) =
+    mapRef <- MapRef ref
+
+    let bounds = ReactGoogleMaps.Coordinates.newEmptyLatLngBounds()
+    
+    markerPositions
+    |> List.fold (fun (acc:LatLngBounds) pos -> acc.extend pos) bounds           
+
+let myMap =
+    googleMap [ 
+        MapProperties.ApiKey googleMapApiKey
+        // ..    
+        MapProperties.Markers markers
+        MapProperties.OnMapMounted onMapMounted ]
+
 ```

src/Fable.ReactGoogleMaps/RELEASE_NOTES.md

@@ -1,3 +1,7 @@
-### 0.3.1
+### 0.4.1
+
+* Cleaning up map bounds
+
+### 0.1.0
 
 * Initial release

src/Fable.ReactGoogleMaps/mapComponent.js

@@ -92,7 +92,7 @@ export class GoogleMapComponent extends React.PureComponent {
                 this.props.onPlacesChanged(this.searchBoxRef.getPlaces())
             },
             onIdle: this.props.onIdle,
-            onMapMounted: this.props.setRef,
+            onMapMounted: this.props.onMapMounted,
             onSearchBoxMounted: ref => {
                 this.searchBoxRef = ref;
             },