Browse Source

better icon

trunk
Swrup 11 months ago
parent
commit
c69d8a9d75
  1. 11
      src/content/assets/css/style.css
  2. 10
      src/js/client.ml
  3. 2
      src/js/dune

11
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;
}

10
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

2
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

Loading…
Cancel
Save