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