better icon

src/content/assets/css/style.css

@@ -24,3 +24,14 @@ main {
   height: 100%;
   width: 100%;
 }
+
+.marker {
+  text-decoration: none;
+  background-color: #FCE3F8;
+  padding: 3px;
+  text-align: center;
+  color: #5a5a5a;
+  font-size: 10px;
+  border-radius: 12px;
+  border: 5px solid DodgerBlue;
+}

src/js/client.ml

@@ -62,11 +62,11 @@ module Camel = struct
   let create
       pos =
     log "Camel.create@\n";
-    (* TODO size/ better icon / make it rotate on direction *)
-    let html =
-      Format.sprintf {|<div class="marker">%s</div>|} "WOOF" |> Option.some
-    in
-    let icon = Icon.create_div ~html ~bg_pos:None [] in
+    (* TODO better icon / make it rotate on direction *)
+    let size = Point.{x = 30; y = 30} in
+    let anchor = Point.{x = size.x/2; y = size.y} in
+    let icon = Icon.create_div ~html:(Some "🐪")
+    ~bg_pos:None [Icon_size size; Icon_anchor anchor; Class_name "marker" (* TODO have a css class for my-marker and others-marker; with different colors for each camel *)] in
     let layer = Layer.create_marker (latlng pos) [ Icon icon ] in
     Layer.add_to Geo.map layer;
     layer

src/js/dune

@@ -1,7 +1,7 @@
 (executable
  (name client)
  (modules client)
- (libraries brr  leaflet geo msg utils)
+ (libraries brr leaflet geo msg utils)
  (modes js))
 
 (library