diff --git a/src/content/assets/css/style.css b/src/content/assets/css/style.css
index 657db11..66e312f 100644
--- a/src/content/assets/css/style.css
+++ b/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;
+}
diff --git a/src/js/client.ml b/src/js/client.ml
index 9d45f67..0298d0f 100644
--- a/src/js/client.ml
+++ b/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 {|
%s
|} "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
diff --git a/src/js/dune b/src/js/dune
index 3975572..033e524 100644
--- a/src/js/dune
+++ b/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