diff --git a/dune-project b/dune-project index 896dd1a..41f5cea 100644 --- a/dune-project +++ b/dune-project @@ -1,6 +1,7 @@ (lang dune 2.9) - -(implicit_transitive_deps false) +(using dune_site 0.1) +;uncomment when fixed: https://github.com/ocaml/dune/issues/9661 +;(implicit_transitive_deps false) (name leaflet) @@ -31,5 +32,7 @@ (depends brr js_of_ocaml + dune-site (ocaml - (>= 4.08)))) + (>= 4.08))) + (sites (share css) (share images))) diff --git a/example/css_path.ml b/example/css_path.ml new file mode 100644 index 0000000..96a5634 --- /dev/null +++ b/example/css_path.ml @@ -0,0 +1,14 @@ +(* get leaflet.css path from dune-site *) + +let dune_site = List.filter Sys.file_exists Mysites.Sites.css + +let lookup_file filename = + List.find_map + (fun dir -> + let filename' = Filename.concat dir filename in + if Sys.file_exists filename' then Some filename' else None ) + dune_site + +let leaflet_css = lookup_file "leaflet.css" |> Option.get + +let () = Format.printf "%s@." leaflet_css diff --git a/example/dune b/example/dune index b868e46..1e537ac 100644 --- a/example/dune +++ b/example/dune @@ -1,5 +1,14 @@ (executable - (name main) - (modules main) + (name css_path) + (modules css_path mysites) + (libraries dune-site)) + +(generate_sites_module + (module mysites) + (sites leaflet)) + +(executable + (name script) + (modules script) (libraries brr leaflet) (modes js)) diff --git a/example/map.html b/example/map.html index 341173f..053dd17 100644 --- a/example/map.html +++ b/example/map.html @@ -1,12 +1,15 @@ + - +
-
+ +
diff --git a/example/main.ml b/example/script.ml similarity index 72% rename from example/main.ml rename to example/script.ml index 5fbe7c4..4dfe92f 100644 --- a/example/main.ml +++ b/example/script.ml @@ -1,3 +1,7 @@ +(* this file will be compiled to js + you can then open map.html to see a simple page with a map loaded + by this script *) + (* create map *) let map = Leaflet.Map.create_on "map" diff --git a/leaflet.opam b/leaflet.opam index 1b6ae70..d4db64e 100644 --- a/leaflet.opam +++ b/leaflet.opam @@ -18,6 +18,7 @@ depends: [ "dune" {>= "2.9"} "brr" "js_of_ocaml" + "dune-site" "ocaml" {>= "4.08"} "odoc" {with-doc} ] diff --git a/src/dune b/src/dune index c29d930..e34b390 100644 --- a/src/dune +++ b/src/dune @@ -4,4 +4,22 @@ (private_modules global) (libraries brr) (js_of_ocaml - (javascript_files leaflet.js))) + (javascript_files vendor/leaflet.js))) + +(install + (section + (site + (leaflet css))) + (files + (vendor/leaflet.css as leaflet.css))) + +(install + (section + (site + (leaflet images))) + (files + (vendor/images/layers-2x.png as images/layers-2x.png) + (vendor/images/layers.png as images/layers.png) + (vendor/images/marker-icon-2x.png as images/marker-icon-2x.png) + (vendor/images/marker-icon.png as images/marker-icon.png) + (vendor/images/marker-shadow.png as images/marker-shadow.png))) diff --git a/src/vendor/images/layers-2x.png b/src/vendor/images/layers-2x.png new file mode 100644 index 0000000..200c333 Binary files /dev/null and b/src/vendor/images/layers-2x.png differ diff --git a/src/vendor/images/layers.png b/src/vendor/images/layers.png new file mode 100644 index 0000000..1a72e57 Binary files /dev/null and b/src/vendor/images/layers.png differ diff --git a/src/vendor/images/marker-icon-2x.png b/src/vendor/images/marker-icon-2x.png new file mode 100644 index 0000000..88f9e50 Binary files /dev/null and b/src/vendor/images/marker-icon-2x.png differ diff --git a/src/vendor/images/marker-icon.png b/src/vendor/images/marker-icon.png new file mode 100644 index 0000000..950edf2 Binary files /dev/null and b/src/vendor/images/marker-icon.png differ diff --git a/src/vendor/images/marker-shadow.png b/src/vendor/images/marker-shadow.png new file mode 100644 index 0000000..9fd2979 Binary files /dev/null and b/src/vendor/images/marker-shadow.png differ diff --git a/example/leaflet.css b/src/vendor/leaflet.css similarity index 83% rename from example/leaflet.css rename to src/vendor/leaflet.css index 3385b5e..2961b76 100644 --- a/example/leaflet.css +++ b/src/vendor/leaflet.css @@ -45,7 +45,10 @@ } /* .leaflet-container svg: reset svg max-width decleration shipped in Joomla! (joomla.org) 3.x */ /* .leaflet-container img: map is broken in FF if you have max-width: 100% on tiles */ -.leaflet-container .leaflet-overlay-pane svg, +.leaflet-container .leaflet-overlay-pane svg { + max-width: none !important; + max-height: none !important; + } .leaflet-container .leaflet-marker-pane img, .leaflet-container .leaflet-shadow-pane img, .leaflet-container .leaflet-tile-pane img, @@ -53,8 +56,15 @@ .leaflet-container .leaflet-tile { max-width: none !important; max-height: none !important; + width: auto; + padding: 0; } +.leaflet-container img.leaflet-tile { + /* See: https://bugs.chromium.org/p/chromium/issues/detail?id=600120 */ + mix-blend-mode: plus-lighter; +} + .leaflet-container.leaflet-touch-zoom { -ms-touch-action: pan-x pan-y; touch-action: pan-x pan-y; @@ -166,9 +176,6 @@ /* zoom and fade animations */ -.leaflet-fade-anim .leaflet-tile { - will-change: opacity; - } .leaflet-fade-anim .leaflet-popup { opacity: 0; -webkit-transition: opacity 0.2s linear; @@ -183,9 +190,10 @@ -ms-transform-origin: 0 0; transform-origin: 0 0; } -.leaflet-zoom-anim .leaflet-zoom-animated { +svg.leaflet-zoom-animated { will-change: transform; - } +} + .leaflet-zoom-anim .leaflet-zoom-animated { -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1); -moz-transition: -moz-transform 0.25s cubic-bezier(0,0,0.25,1); @@ -251,14 +259,11 @@ svg.leaflet-image-layer.leaflet-interactive path { .leaflet-container { background: #ddd; - outline: 0; + outline-offset: 1px; } .leaflet-container a { color: #0078A8; } -.leaflet-container a.leaflet-active { - outline: 2px solid orange; - } .leaflet-zoom-box { border: 2px dotted #38f; background: rgba(255,255,255,0.5); @@ -267,7 +272,10 @@ svg.leaflet-image-layer.leaflet-interactive path { /* general typography */ .leaflet-container { - font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif; + font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; + font-size: 12px; + font-size: 0.75rem; + line-height: 1.5; } @@ -277,8 +285,7 @@ svg.leaflet-image-layer.leaflet-interactive path { box-shadow: 0 1px 5px rgba(0,0,0,0.65); border-radius: 4px; } -.leaflet-bar a, -.leaflet-bar a:hover { +.leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; width: 26px; @@ -295,7 +302,8 @@ svg.leaflet-image-layer.leaflet-interactive path { background-repeat: no-repeat; display: block; } -.leaflet-bar a:hover { +.leaflet-bar a:hover, +.leaflet-bar a:focus { background-color: #f4f4f4; } .leaflet-bar a:first-child { @@ -348,12 +356,12 @@ svg.leaflet-image-layer.leaflet-interactive path { border-radius: 5px; } .leaflet-control-layers-toggle { - background-image: url(/assets/img/layers.png); + background-image: url(images/layers.png); width: 36px; height: 36px; } .leaflet-retina .leaflet-control-layers-toggle { - background-image: url(/assets/img/layers-2x.png); + background-image: url(images/layers-2x.png); background-size: 26px 26px; } .leaflet-touch .leaflet-control-layers-toggle { @@ -385,6 +393,8 @@ svg.leaflet-image-layer.leaflet-interactive path { } .leaflet-control-layers label { display: block; + font-size: 13px; + font-size: 1.08333em; } .leaflet-control-layers-separator { height: 0; @@ -393,8 +403,8 @@ svg.leaflet-image-layer.leaflet-interactive path { } /* Default icon URLs */ -.leaflet-default-icon-path { - background-image: url(/assets/img/marker-icon.png); +.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */ + background-image: url(images/marker-icon.png); } @@ -402,23 +412,27 @@ svg.leaflet-image-layer.leaflet-interactive path { .leaflet-container .leaflet-control-attribution { background: #fff; - background: rgba(255, 255, 255, 0.7); + background: rgba(255, 255, 255, 0.8); margin: 0; } .leaflet-control-attribution, .leaflet-control-scale-line { padding: 0 5px; color: #333; + line-height: 1.4; } .leaflet-control-attribution a { text-decoration: none; } -.leaflet-control-attribution a:hover { +.leaflet-control-attribution a:hover, +.leaflet-control-attribution a:focus { text-decoration: underline; } -.leaflet-container .leaflet-control-attribution, -.leaflet-container .leaflet-control-scale { - font-size: 11px; +.leaflet-attribution-flag { + display: inline !important; + vertical-align: baseline !important; + width: 1em; + height: 0.6669em; } .leaflet-left .leaflet-control-scale { margin-left: 5px; @@ -431,14 +445,11 @@ svg.leaflet-image-layer.leaflet-interactive path { border-top: none; line-height: 1.1; padding: 2px 5px 1px; - font-size: 11px; white-space: nowrap; - overflow: hidden; -moz-box-sizing: border-box; box-sizing: border-box; - - background: #fff; - background: rgba(255, 255, 255, 0.5); + background: rgba(255, 255, 255, 0.8); + text-shadow: 1px 1px #fff; } .leaflet-control-scale-line:not(:first-child) { border-top: 2px solid #777; @@ -474,17 +485,22 @@ svg.leaflet-image-layer.leaflet-interactive path { border-radius: 12px; } .leaflet-popup-content { - margin: 13px 19px; - line-height: 1.4; + margin: 13px 24px 13px 20px; + line-height: 1.3; + font-size: 13px; + font-size: 1.08333em; + min-height: 1px; } .leaflet-popup-content p { - margin: 18px 0; + margin: 17px 0; + margin: 1.3em 0; } .leaflet-popup-tip-container { width: 40px; height: 20px; position: absolute; left: 50%; + margin-top: -1px; margin-left: -20px; overflow: hidden; pointer-events: none; @@ -495,6 +511,7 @@ svg.leaflet-image-layer.leaflet-interactive path { padding: 1px; margin: -10px auto 0; + pointer-events: auto; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); @@ -511,24 +528,21 @@ svg.leaflet-image-layer.leaflet-interactive path { position: absolute; top: 0; right: 0; - padding: 4px 4px 0 0; border: none; text-align: center; - width: 18px; - height: 14px; - font: 16px/14px Tahoma, Verdana, sans-serif; - color: #c3c3c3; + width: 24px; + height: 24px; + font: 16px/24px Tahoma, Verdana, sans-serif; + color: #757575; text-decoration: none; - font-weight: bold; background: transparent; } -.leaflet-container a.leaflet-popup-close-button:hover { - color: #999; +.leaflet-container a.leaflet-popup-close-button:hover, +.leaflet-container a.leaflet-popup-close-button:focus { + color: #585858; } .leaflet-popup-scrolled { overflow: auto; - border-bottom: 1px solid #ddd; - border-top: 1px solid #ddd; } .leaflet-oldie .leaflet-popup-content-wrapper { @@ -541,9 +555,6 @@ svg.leaflet-image-layer.leaflet-interactive path { -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)"; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678); } -.leaflet-oldie .leaflet-popup-tip-container { - margin-top: -1px; - } .leaflet-oldie .leaflet-control-zoom, .leaflet-oldie .leaflet-control-layers, @@ -578,7 +589,7 @@ svg.leaflet-image-layer.leaflet-interactive path { pointer-events: none; box-shadow: 0 1px 3px rgba(0,0,0,0.4); } -.leaflet-tooltip.leaflet-clickable { +.leaflet-tooltip.leaflet-interactive { cursor: pointer; pointer-events: auto; } @@ -638,3 +649,13 @@ svg.leaflet-image-layer.leaflet-interactive path { margin-left: -12px; border-right-color: #fff; } + +/* Printing */ + +@media print { + /* Prevent printers from removing background-images of controls. */ + .leaflet-control { + -webkit-print-color-adjust: exact; + print-color-adjust: exact; + } + } diff --git a/src/leaflet.js b/src/vendor/leaflet.js similarity index 100% rename from src/leaflet.js rename to src/vendor/leaflet.js