add leaflet
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 696 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,656 @@
|
||||
/* required styles */
|
||||
|
||||
.leaflet-pane,
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-tile-container,
|
||||
.leaflet-pane > svg,
|
||||
.leaflet-pane > canvas,
|
||||
.leaflet-zoom-box,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
.leaflet-tile,
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-user-drag: none;
|
||||
}
|
||||
/* Prevents IE11 from highlighting tiles in blue */
|
||||
.leaflet-tile::selection {
|
||||
background: transparent;
|
||||
}
|
||||
/* Safari renders non-retina tile on retina better with this, but Chrome is worse */
|
||||
.leaflet-safari .leaflet-tile {
|
||||
image-rendering: -webkit-optimize-contrast;
|
||||
}
|
||||
/* hack that prevents hw layers "stretching" when loading new tiles */
|
||||
.leaflet-safari .leaflet-tile-container {
|
||||
width: 1600px;
|
||||
height: 1600px;
|
||||
-webkit-transform-origin: 0 0;
|
||||
}
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow {
|
||||
display: block;
|
||||
}
|
||||
/* .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 {
|
||||
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,
|
||||
.leaflet-container img.leaflet-image-layer,
|
||||
.leaflet-container .leaflet-tile {
|
||||
max-width: none !important;
|
||||
max-height: none !important;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.leaflet-container.leaflet-touch-zoom {
|
||||
-ms-touch-action: pan-x pan-y;
|
||||
touch-action: pan-x pan-y;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag {
|
||||
-ms-touch-action: pinch-zoom;
|
||||
/* Fallback for FF which doesn't support pinch-zoom */
|
||||
touch-action: none;
|
||||
touch-action: pinch-zoom;
|
||||
}
|
||||
.leaflet-container.leaflet-touch-drag.leaflet-touch-zoom {
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
}
|
||||
.leaflet-container {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.leaflet-container a {
|
||||
-webkit-tap-highlight-color: rgba(51, 181, 229, 0.4);
|
||||
}
|
||||
.leaflet-tile {
|
||||
filter: inherit;
|
||||
visibility: hidden;
|
||||
}
|
||||
.leaflet-tile-loaded {
|
||||
visibility: inherit;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
width: 0;
|
||||
height: 0;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
z-index: 800;
|
||||
}
|
||||
/* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
|
||||
.leaflet-overlay-pane svg {
|
||||
-moz-user-select: none;
|
||||
}
|
||||
|
||||
.leaflet-pane { z-index: 400; }
|
||||
|
||||
.leaflet-tile-pane { z-index: 200; }
|
||||
.leaflet-overlay-pane { z-index: 400; }
|
||||
.leaflet-shadow-pane { z-index: 500; }
|
||||
.leaflet-marker-pane { z-index: 600; }
|
||||
.leaflet-tooltip-pane { z-index: 650; }
|
||||
.leaflet-popup-pane { z-index: 700; }
|
||||
|
||||
.leaflet-map-pane canvas { z-index: 100; }
|
||||
.leaflet-map-pane svg { z-index: 200; }
|
||||
|
||||
.leaflet-vml-shape {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
}
|
||||
.lvml {
|
||||
behavior: url(#default#VML);
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
|
||||
/* control positioning */
|
||||
|
||||
.leaflet-control {
|
||||
position: relative;
|
||||
z-index: 800;
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-top,
|
||||
.leaflet-bottom {
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
.leaflet-top {
|
||||
top: 0;
|
||||
}
|
||||
.leaflet-right {
|
||||
right: 0;
|
||||
}
|
||||
.leaflet-bottom {
|
||||
bottom: 0;
|
||||
}
|
||||
.leaflet-left {
|
||||
left: 0;
|
||||
}
|
||||
.leaflet-control {
|
||||
float: left;
|
||||
clear: both;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
float: right;
|
||||
}
|
||||
.leaflet-top .leaflet-control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.leaflet-left .leaflet-control {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.leaflet-right .leaflet-control {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
|
||||
/* zoom and fade animations */
|
||||
|
||||
.leaflet-fade-anim .leaflet-popup {
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
-moz-transition: opacity 0.2s linear;
|
||||
transition: opacity 0.2s linear;
|
||||
}
|
||||
.leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
|
||||
opacity: 1;
|
||||
}
|
||||
.leaflet-zoom-animated {
|
||||
-webkit-transform-origin: 0 0;
|
||||
-ms-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
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);
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.leaflet-zoom-anim .leaflet-zoom-hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* cursors */
|
||||
|
||||
.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
}
|
||||
.leaflet-grab {
|
||||
cursor: -webkit-grab;
|
||||
cursor: -moz-grab;
|
||||
cursor: grab;
|
||||
}
|
||||
.leaflet-crosshair,
|
||||
.leaflet-crosshair .leaflet-interactive {
|
||||
cursor: crosshair;
|
||||
}
|
||||
.leaflet-popup-pane,
|
||||
.leaflet-control {
|
||||
cursor: auto;
|
||||
}
|
||||
.leaflet-dragging .leaflet-grab,
|
||||
.leaflet-dragging .leaflet-grab .leaflet-interactive,
|
||||
.leaflet-dragging .leaflet-marker-draggable {
|
||||
cursor: move;
|
||||
cursor: -webkit-grabbing;
|
||||
cursor: -moz-grabbing;
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* marker & overlays interactivity */
|
||||
.leaflet-marker-icon,
|
||||
.leaflet-marker-shadow,
|
||||
.leaflet-image-layer,
|
||||
.leaflet-pane > svg path,
|
||||
.leaflet-tile-container {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-marker-icon.leaflet-interactive,
|
||||
.leaflet-image-layer.leaflet-interactive,
|
||||
.leaflet-pane > svg path.leaflet-interactive,
|
||||
svg.leaflet-image-layer.leaflet-interactive path {
|
||||
pointer-events: visiblePainted; /* IE 9-10 doesn't have auto */
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* visual tweaks */
|
||||
|
||||
.leaflet-container {
|
||||
background: #ddd;
|
||||
outline-offset: 1px;
|
||||
}
|
||||
.leaflet-container a {
|
||||
color: #0078A8;
|
||||
}
|
||||
.leaflet-zoom-box {
|
||||
border: 2px dotted #38f;
|
||||
background: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
|
||||
/* general typography */
|
||||
.leaflet-container {
|
||||
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
/* general toolbar styles */
|
||||
|
||||
.leaflet-bar {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a {
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ccc;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
.leaflet-bar a,
|
||||
.leaflet-control-layers-toggle {
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
display: block;
|
||||
}
|
||||
.leaflet-bar a:hover,
|
||||
.leaflet-bar a:focus {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
.leaflet-bar a:first-child {
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.leaflet-bar a.leaflet-disabled {
|
||||
cursor: default;
|
||||
background-color: #f4f4f4;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-bar a {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:first-child {
|
||||
border-top-left-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
.leaflet-touch .leaflet-bar a:last-child {
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
/* zoom control */
|
||||
|
||||
.leaflet-control-zoom-in,
|
||||
.leaflet-control-zoom-out {
|
||||
font: bold 18px 'Lucida Console', Monaco, monospace;
|
||||
text-indent: 1px;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-zoom-in, .leaflet-touch .leaflet-control-zoom-out {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
|
||||
/* layers control */
|
||||
|
||||
.leaflet-control-layers {
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers.png);
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.leaflet-retina .leaflet-control-layers-toggle {
|
||||
background-image: url(images/layers-2x.png);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers-toggle {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.leaflet-control-layers .leaflet-control-layers-list,
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
|
||||
display: none;
|
||||
}
|
||||
.leaflet-control-layers-expanded .leaflet-control-layers-list {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 6px 10px 6px 6px;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
.leaflet-control-layers-scrollbar {
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.leaflet-control-layers-selector {
|
||||
margin-top: 2px;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
.leaflet-control-layers label {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
}
|
||||
.leaflet-control-layers-separator {
|
||||
height: 0;
|
||||
border-top: 1px solid #ddd;
|
||||
margin: 5px -10px 5px -6px;
|
||||
}
|
||||
|
||||
/* Default icon URLs */
|
||||
.leaflet-default-icon-path { /* used only in path-guessing heuristic, see L.Icon.Default */
|
||||
background-image: url(images/marker-icon.png);
|
||||
}
|
||||
|
||||
|
||||
/* attribution and scale controls */
|
||||
|
||||
.leaflet-container .leaflet-control-attribution {
|
||||
background: #fff;
|
||||
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:focus {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.leaflet-attribution-flag {
|
||||
display: inline !important;
|
||||
vertical-align: baseline !important;
|
||||
width: 1em;
|
||||
height: 0.6669em;
|
||||
}
|
||||
.leaflet-left .leaflet-control-scale {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.leaflet-bottom .leaflet-control-scale {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.leaflet-control-scale-line {
|
||||
border: 2px solid #777;
|
||||
border-top: none;
|
||||
line-height: 1.1;
|
||||
padding: 2px 5px 1px;
|
||||
white-space: nowrap;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
text-shadow: 1px 1px #fff;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child) {
|
||||
border-top: 2px solid #777;
|
||||
border-bottom: none;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.leaflet-control-scale-line:not(:first-child):not(:last-child) {
|
||||
border-bottom: 2px solid #777;
|
||||
}
|
||||
|
||||
.leaflet-touch .leaflet-control-attribution,
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
box-shadow: none;
|
||||
}
|
||||
.leaflet-touch .leaflet-control-layers,
|
||||
.leaflet-touch .leaflet-bar {
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
/* popup */
|
||||
|
||||
.leaflet-popup {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 1px;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 13px 24px 13px 20px;
|
||||
line-height: 1.3;
|
||||
font-size: 13px;
|
||||
font-size: 1.08333em;
|
||||
min-height: 1px;
|
||||
}
|
||||
.leaflet-popup-content p {
|
||||
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;
|
||||
}
|
||||
.leaflet-popup-tip {
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 1px;
|
||||
|
||||
margin: -10px auto 0;
|
||||
pointer-events: auto;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.leaflet-popup-content-wrapper,
|
||||
.leaflet-popup-tip {
|
||||
background: white;
|
||||
color: #333;
|
||||
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
border: none;
|
||||
text-align: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font: 16px/24px Tahoma, Verdana, sans-serif;
|
||||
color: #757575;
|
||||
text-decoration: none;
|
||||
background: transparent;
|
||||
}
|
||||
.leaflet-container a.leaflet-popup-close-button:hover,
|
||||
.leaflet-container a.leaflet-popup-close-button:focus {
|
||||
color: #585858;
|
||||
}
|
||||
.leaflet-popup-scrolled {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper {
|
||||
-ms-zoom: 1;
|
||||
}
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
width: 24px;
|
||||
margin: 0 auto;
|
||||
|
||||
-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-control-zoom,
|
||||
.leaflet-oldie .leaflet-control-layers,
|
||||
.leaflet-oldie .leaflet-popup-content-wrapper,
|
||||
.leaflet-oldie .leaflet-popup-tip {
|
||||
border: 1px solid #999;
|
||||
}
|
||||
|
||||
|
||||
/* div icon */
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: #fff;
|
||||
border: 1px solid #666;
|
||||
}
|
||||
|
||||
|
||||
/* Tooltip */
|
||||
/* Base styles for the element that has a tooltip */
|
||||
.leaflet-tooltip {
|
||||
position: absolute;
|
||||
padding: 6px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 3px;
|
||||
color: #222;
|
||||
white-space: nowrap;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
|
||||
}
|
||||
.leaflet-tooltip.leaflet-interactive {
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
.leaflet-tooltip-top:before,
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
border: 6px solid transparent;
|
||||
background: transparent;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Directions */
|
||||
|
||||
.leaflet-tooltip-bottom {
|
||||
margin-top: 6px;
|
||||
}
|
||||
.leaflet-tooltip-top {
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before,
|
||||
.leaflet-tooltip-top:before {
|
||||
left: 50%;
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-top:before {
|
||||
bottom: 0;
|
||||
margin-bottom: -12px;
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-bottom:before {
|
||||
top: 0;
|
||||
margin-top: -12px;
|
||||
margin-left: -6px;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-left {
|
||||
margin-left: -6px;
|
||||
}
|
||||
.leaflet-tooltip-right {
|
||||
margin-left: 6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before,
|
||||
.leaflet-tooltip-right:before {
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
}
|
||||
.leaflet-tooltip-left:before {
|
||||
right: 0;
|
||||
margin-right: -12px;
|
||||
border-left-color: #fff;
|
||||
}
|
||||
.leaflet-tooltip-right:before {
|
||||
left: 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,13 @@
|
||||
|
||||
/*
|
||||
.leaflet-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
} */
|
||||
.map {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
//弹出提示
|
||||
const popup = L.popup();
|
||||
// .setLatLng([39.92, 116.46])
|
||||
// .setContent('I am a standalone popup.');
|
||||
// .openOn(map);
|
||||
|
||||
function onMapClick(e) {
|
||||
// popup
|
||||
// .setLatLng(e.latlng)
|
||||
// .setContent(`You clicked the map at ${e.latlng.toString()}`)
|
||||
// .openOn(map);
|
||||
L.marker(e.latlng).addTo(map).bindPopup('<b>' + e.latlng + '</b>').openPopup();
|
||||
routes.push(e.latlng);
|
||||
// current = lines.push(L.polyline(routes, { color: 'red' }).addTo(map).bindPopup("这是折线"));
|
||||
// map.removeLayer(last);
|
||||
// last = current;
|
||||
if(lines.length>0)
|
||||
{
|
||||
map.removeLayer(lines[0]);
|
||||
// lines.shift();
|
||||
}
|
||||
|
||||
lines.push(L.polyline(routes, { color: 'red' }).addTo(map).bindPopup("这是折线"));
|
||||
}
|
||||
|
||||
|
||||
function printInformation(information) {
|
||||
alert(information);
|
||||
}
|
||||
|
||||
function clearOneLine(a)
|
||||
{
|
||||
map.removeLayer(lines[a]);
|
||||
// lines.pop();
|
||||
}
|
||||
|
||||
// function addOnePoint(lng, lat)
|
||||
// {
|
||||
|
||||
// }
|
||||
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<base target="_top">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Quick Start - Leaflet</title>
|
||||
|
||||
<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="./leaflet/leaflet.css" />
|
||||
<script src="./leaflet/leaflet.js"></script>
|
||||
|
||||
<!-- css -->
|
||||
<link rel="stylesheet" href="./control.css">
|
||||
<!-- wmts -->
|
||||
<script src="./leaflet.TileLayer.WMTS/leaflet-tilelayer-wmts.js"></script>
|
||||
<!-- script -->
|
||||
<script src="./control.js"></script>
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div id="map" style="width: 100%; height: 100%;"></div>
|
||||
<script>
|
||||
|
||||
let map = L.map('map', {
|
||||
center: [39.910362, 116.397378],
|
||||
zoom: 5
|
||||
});
|
||||
|
||||
// 地图切换
|
||||
var baseLayers = {
|
||||
'天地图影像-wmts': L.tileLayer('http://127.0.0.1:21133/wmts/tianditu?x={x}&y={y}&z={z}', {
|
||||
maxZoom: 19,
|
||||
attribution: "天地图影像-wmts"
|
||||
}),
|
||||
|
||||
"高德矢量": L.tileLayer('http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}', {
|
||||
attribution: "高德矢量"
|
||||
}).addTo(map),
|
||||
|
||||
'影像底图': L.tileLayer('https://t3.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
|
||||
maxZoom: 19,
|
||||
attribution: "影像底图"
|
||||
}),
|
||||
|
||||
'矢量底图': L.tileLayer('https://t3.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
|
||||
maxZoom: 19,
|
||||
attribution: "矢量底图"
|
||||
}),
|
||||
|
||||
'地形晕渲': L.tileLayer('https://t4.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
|
||||
maxZoom: 19, attribution: "地形晕渲"
|
||||
}),
|
||||
|
||||
'全球境界': L.tileLayer('https://t4.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=1457e59df27f2d4ba3547aa27152f2ae', {
|
||||
maxZoom: 19, attribution: "全球境界"
|
||||
}),
|
||||
|
||||
"CartoDB Positron": L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18,
|
||||
attribution: "CartoDB Positron"
|
||||
}),
|
||||
|
||||
"OpenTopoMap": L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
|
||||
maxZoom: 18,
|
||||
attribution: "OpenTopoMap"
|
||||
}),
|
||||
}
|
||||
|
||||
var layerControl = L.control.layers(baseLayers, {}, {
|
||||
position: 'topleft',
|
||||
collapsed: true
|
||||
});
|
||||
layerControl.addTo(map);
|
||||
|
||||
//比例尺
|
||||
var scale = L.control.scale({
|
||||
maxWidth: 200,
|
||||
metric: true,
|
||||
imperial: false
|
||||
}).addTo(map);
|
||||
|
||||
// icon
|
||||
let starIcon = L.icon(
|
||||
{
|
||||
iconUrl: './icon/star-red.svg',
|
||||
shadowUrl: './icon/star.png',
|
||||
iconSize: [36, 36],
|
||||
shadowSize: [48, 48]
|
||||
}
|
||||
)
|
||||
let starMarker = L.marker([39.910362, 116.397378],
|
||||
{
|
||||
icon: starIcon,
|
||||
// zIndexOffset: 0 // 防止标签与图标相互遮挡
|
||||
}).addTo(map);
|
||||
var customLabel = L.divIcon({
|
||||
html: '<div class="my-label">丽水市</div>',
|
||||
className: 'custom-marker-label'
|
||||
});
|
||||
let label = L.marker([39.910362, 116.397378],
|
||||
{
|
||||
icon: customLabel,
|
||||
zIndexOffset: 0 // 防止标签与图标相互遮挡
|
||||
}).addTo(map);
|
||||
|
||||
// 标记
|
||||
// var marker = L.marker([51.5, -0.09]).addTo(map)
|
||||
// .bindPopup('<b>Hello world!</b><br />I am a popup.').openPopup();
|
||||
|
||||
//圆
|
||||
// const circle = L.circle([51.508, -0.11], {
|
||||
// color: 'red',
|
||||
// fillColor: '#f03',
|
||||
// fillOpacity: 0.5,
|
||||
// radius: 500
|
||||
// }).addTo(map).bindPopup('I am a circle.');
|
||||
|
||||
//三角形
|
||||
// const polygon = L.polygon([
|
||||
// [51.509, -0.08],
|
||||
// [51.503, -0.06],
|
||||
// [51.51, -0.047]
|
||||
// ]).addTo(map).bindPopup('I am a polygon.');
|
||||
|
||||
// var bj = L.marker([39.92, 116.46]).bindPopup('这里是北京');
|
||||
// sh = L.marker([31.213, 121.445]).bindPopup('这里是上海');
|
||||
// gz = L.marker([23.16, 113.23]).bindPopup('这里是广州');
|
||||
// var cities = L.layerGroup([bj, sh, gz]).addTo(map);
|
||||
|
||||
// var route = [[39.910362, 116.397378], [38.474558, 112.851563]];
|
||||
var routes = [];
|
||||
var lines = [];
|
||||
var last;
|
||||
var current;
|
||||
// L.polyline(route, { color: 'red'}).addTo(map).bindPopup("这是折线");
|
||||
map.on('click', onMapClick);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,147 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet">
|
||||
<script src="https://cdn.bootcdn.net/ajax/libs/leaflet/1.6.0/leaflet.js"></script>
|
||||
<style>
|
||||
#map{
|
||||
position:absolute;
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id='map'>
|
||||
</div>
|
||||
<script>
|
||||
var map = L.map('map',
|
||||
{
|
||||
zoomSnap: 0.1, // 地图的有效缩放级别
|
||||
maxZoom: 13,
|
||||
// crs: L.CRS.EPSG4326, // 高德不是这个坐标系
|
||||
zoomControl: true,
|
||||
editable:true,
|
||||
// wheelPxPerZoomLevel: 60 // 鼠标滚轮缩放 较小的值将使滚轮轮缩放更快
|
||||
}).setView([29.592024,106.231126], 13); // 重庆璧山区经纬度
|
||||
let baseLayer=L.tileLayer("http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",{
|
||||
attribution: '© 高德地图',
|
||||
maxZoom: 13,
|
||||
minZoom: 3,
|
||||
subdomains: "1234",
|
||||
zoom: 3
|
||||
});
|
||||
map.addLayer(baseLayer);
|
||||
// map.on('layeradd',function() {
|
||||
// console.log(layeradd)
|
||||
|
||||
// })
|
||||
map.on('click',function(event) {
|
||||
console.log(event) // 返回当前点击的经纬度，及当前容器的坐标
|
||||
let {lat, lng} = event.latlng
|
||||
// map.setZoomAround([lat, lng],3)
|
||||
|
||||
// console.log(map.attributionControl._map._layers) // 获取当前图层的比例尺
|
||||
// map.setZoom(6) // 指定到对应的缩放级别
|
||||
// shapingba = [29.554000,106.468590]
|
||||
// // panTo 平移到指定位置，flyTo平移到指定位置 并可设置缩放级别
|
||||
// map.panTo(shapingba)
|
||||
// map.flyTo(shapingba, 3)
|
||||
|
||||
})
|
||||
let arr1 = [
|
||||
[107.577716172645609, 29.796720709302502],
|
||||
[107.577592225094861, 29.796914526276193],
|
||||
[107.577507323359043, 29.797142144209456],
|
||||
[107.577454631178185, 29.797393608354824]
|
||||
]
|
||||
console.log(arr1)
|
||||
var polygon = L.polygon(arr1);
|
||||
// fitBounds 把所有点位放在合适的位置
|
||||
console.log(polygon.getBounds().getCenter()) // 获取中心点 {lat: 107.5775854019119, lng: 29.797057158828665}
|
||||
|
||||
|
||||
// 动态加载
|
||||
function getMarkerIcon(item) {
|
||||
let zoom = map.getZoom();//缩放等级
|
||||
console.log(zoom)
|
||||
let icon = null;
|
||||
/*let value = item[this.airType];
|
||||
let bgcolor = getPollLevelColor(this.airType, value, this.timeType);//污染物背景颜色
|
||||
let txtcolor = getPollLevelTextColor(this.airType, value, this.timeType);//污染物字体颜色 */
|
||||
let value, bgcolor, txtcolor;
|
||||
let namelength = item.length;
|
||||
if (value === -999 || value === 0) {
|
||||
bgcolor = "#a1a3a6";
|
||||
value = "-";
|
||||
}
|
||||
|
||||
if (zoom < 6) {
|
||||
icon = L.divIcon({
|
||||
html: "<div class='smallCircleMarker' style='background-color: " + bgcolor + ";'></div>",
|
||||
className: 'ss',
|
||||
iconSize: [7, 15],
|
||||
iconAnchor: [7, 7]
|
||||
});
|
||||
} else if (zoom >= 6 && zoom < 8)//6,7
|
||||
{
|
||||
icon = L.divIcon({
|
||||
html: "<div style='width: " + namelength * 14 + "px;'><div class='rectangleMarker' style='background-color: " + bgcolor + ";color:" + txtcolor + ";margin: 0 auto'>" + item + "</div></div>",
|
||||
className: 'ss',
|
||||
iconSize: [12, 19],
|
||||
iconAnchor: [12, 9]
|
||||
});
|
||||
} else if (zoom >= 8 && zoom < 10)//8,9
|
||||
{
|
||||
icon = L.divIcon({
|
||||
html: "<div class='smallCircleMarker' style='background-color: " + bgcolor + ";'></div>",
|
||||
className: 'ss',
|
||||
iconSize: [7, 15],
|
||||
iconAnchor: [7, 7]
|
||||
});
|
||||
} else if (zoom >= 10) {
|
||||
icon = L.divIcon({
|
||||
html: "<div style='width: " + namelength * 14 + "px;'><div class='rectangleMarker' style='background-color: " + bgcolor + ";color:" + txtcolor + ";margin: 0 auto'>" + item + "</div></div>",
|
||||
className: 'ss',
|
||||
iconSize: [12, 19],
|
||||
iconAnchor: [12, 9]
|
||||
});
|
||||
}
|
||||
return icon;
|
||||
}
|
||||
L.marker([29.592024, 106.231126], { icon: getMarkerIcon(name) }).addTo(map);
|
||||
map.on('zoomstart', function () {
|
||||
var zoomLevel = map.getZoom();
|
||||
console.log(zoomLevel)
|
||||
|
||||
/* var tooltip = $('.leaflet-tooltip');
|
||||
|
||||
switch (zoomLevel) {
|
||||
case -2:
|
||||
tooltip.css('font-size', 7);
|
||||
break;
|
||||
case -1:
|
||||
tooltip.css('font-size', 10);
|
||||
break;
|
||||
case 0:
|
||||
tooltip.css('font-size', 12);
|
||||
break;
|
||||
case 1:
|
||||
tooltip.css('font-size', 14);
|
||||
break;
|
||||
case 2:
|
||||
tooltip.css('font-size', 16);
|
||||
break;
|
||||
case 3:
|
||||
tooltip.css('font-size', 18);
|
||||
break;
|
||||
default:
|
||||
tooltip.css('font-size', 14);
|
||||
} */
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684490613533" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3187" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" p-id="3188" fill="#d81e06"></path></svg>
|
||||
|
After Width: | Height: | Size: 765 B |
Binary file not shown.
|
After Width: | Height: | Size: 778 B |
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1684492642819" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7486" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M377.6 145.066667c-70.4 23.466667-132.266667 76.8-132.266667 76.8l104.533334 44.8 138.666666-66.133334 21.333334-66.133333s-70.4-8.533333-132.266667 10.666667z m0 0" fill="#333333" p-id="7487"></path><path d="M475.733333 458.666667l-125.866666-110.933334-177.066667-6.4 17.066667 219.733334 93.866666 55.466666 72.533334 230.4 241.066666-256 6.4-132.266666h-128z m0 0" fill="#5C6BC0" p-id="7488"></path><path d="M827.733333 283.733333l-153.6-104.533333L618.666667 234.666667l21.333333 93.866666 104.533333 38.4 59.733334 59.733334 66.133333 49.066666-49.066667 59.733334-93.866666 281.6 149.333333-149.333334 21.333333-198.4-70.4-185.6z m0 0" fill="#333333" p-id="7489"></path><path d="M512 151.466667c198.4 0 360.533333 162.133333 360.533333 360.533333 0 198.4-162.133333 360.533333-360.533333 360.533333-198.4 0-360.533333-162.133333-360.533333-360.533333 0-198.4 162.133333-360.533333 360.533333-360.533333M512 85.333333C277.333333 85.333333 85.333333 277.333333 85.333333 512s192 426.666667 426.666667 426.666667 426.666667-192 426.666667-426.666667S746.666667 85.333333 512 85.333333z m0 0" fill="#333333" p-id="7490"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
Submodule
+1
Submodule Leaflet/leaflet.TileLayer.WMTS added at d5d162d60c
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Qt WebSocket Demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<input type="text" id="edit_url" value="ws://localhost:12345" />
|
||||
<input type="button" id="btn_open" value="Open" onclick="doOpen()" />
|
||||
<br />
|
||||
<p>Recv:</p>
|
||||
<br />
|
||||
<textarea id="edit_recv" cols="50" rows="10"></textarea>
|
||||
<br />
|
||||
<p>Send:</p>
|
||||
<br />
|
||||
<textarea id="edit_send" cols="50" rows="10">Hello</textarea>
|
||||
<br />
|
||||
<input type="button" value="Send" onclick="doSend()" />
|
||||
<script>
|
||||
var edit_url = document.getElementById("edit_url");
|
||||
var btn_open = document.getElementById("btn_open");
|
||||
var edit_recv = document.getElementById("edit_recv");
|
||||
var edit_send = document.getElementById("edit_send");
|
||||
|
||||
var client = null;
|
||||
|
||||
function doOpen() {
|
||||
console.log("open")
|
||||
if (!("WebSocket" in window)) {
|
||||
//不支持WebSocket
|
||||
return;
|
||||
}
|
||||
if (client === null) {
|
||||
client = new WebSocket(edit_url.value);
|
||||
|
||||
client.onopen = function () {
|
||||
btn_open.value = "Close";
|
||||
}
|
||||
//收到数据后追加到尾巴上
|
||||
client.onmessage = function (event) {
|
||||
edit_recv.value += String(event.data);
|
||||
}
|
||||
client.onclose = function () {
|
||||
client = null;
|
||||
btn_open.value = "Open";
|
||||
}
|
||||
} else {
|
||||
client.close();
|
||||
client = null;
|
||||
}
|
||||
}
|
||||
|
||||
function doSend() {
|
||||
console.log("send")
|
||||
if (client === null)
|
||||
return;
|
||||
client.send(edit_send.value);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user