Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lvisei/leaflet-demo

Getting started with Leaflet's small demo
https://github.com/lvisei/leaflet-demo

demo-map esri-leaflet javascript leaflet leaflet-api leaflet-arcgis leaflet-demo web-map

Last synced: 2 months ago
JSON representation

Getting started with Leaflet's small demo

Awesome Lists containing this project

README 

        



  

    

    

    

      body {

        max-width: 980px;

        border: 1px solid #ddd;

        outline: 1300px solid #fff;

        margin: 16px auto;

      }



      body .markdown-body {

        padding: 45px;

      }



      @font-face {

        font-family: fontawesome-mini;

        src: url(data:font/woff;charset=utf-8;base64,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)

          format('woff');

      }



      .markdown-body {

        font-family: sans-serif;

        -ms-text-size-adjust: 100%;

        -webkit-text-size-adjust: 100%;

        color: #333333;

        overflow: hidden;

        font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, freesans, sans-serif;

        font-size: 16px;

        line-height: 1.6;

        word-wrap: break-word;

      }



      .markdown-body a {

        background: transparent;

      }



      .markdown-body a:active,

      .markdown-body a:hover {

        outline: 0;

      }



      .markdown-body b,

      .markdown-body strong {

        font-weight: bold;

      }



      .markdown-body mark {

        background: #ff0;

        color: #000;

        font-style: italic;

        font-weight: bold;

      }



      .markdown-body sub,

      .markdown-body sup {

        font-size: 75%;

        line-height: 0;

        position: relative;

        vertical-align: baseline;

      }

      .markdown-body sup {

        top: -0.5em;

      }

      .markdown-body sub {

        bottom: -0.25em;

      }



      .markdown-body h1 {

        font-size: 2em;

        margin: 0.67em 0;

      }



      .markdown-body img {

        border: 0;

      }



      .markdown-body hr {

        -moz-box-sizing: content-box;

        box-sizing: content-box;

        height: 0;

      }



      .markdown-body pre {

        overflow: auto;

      }



      .markdown-body code,

      .markdown-body kbd,

      .markdown-body pre,

      .markdown-body samp {

        font-family: monospace, monospace;

        font-size: 1em;

      }



      .markdown-body input {

        color: inherit;

        font: inherit;

        margin: 0;

      }



      .markdown-body html input[disabled] {

        cursor: default;

      }



      .markdown-body input {

        line-height: normal;

      }



      .markdown-body input[type='checkbox'] {

        box-sizing: border-box;

        padding: 0;

      }



      .markdown-body table {

        border-collapse: collapse;

        border-spacing: 0;

      }



      .markdown-body td,

      .markdown-body th {

        padding: 0;

      }



      .markdown-body .codehilitetable {

        border: 0;

        border-spacing: 0;

      }



      .markdown-body .codehilitetable tr {

        border: 0;

      }



      .markdown-body .codehilitetable pre,

      .markdown-body .codehilitetable div.codehilite {

        margin: 0;

      }



      .markdown-body .linenos,

      .markdown-body .code,

      .markdown-body .codehilitetable td {

        border: 0;

        padding: 0;

      }



      .markdown-body td:not(.linenos) .linenodiv {

        padding: 0 !important;

      }



      .markdown-body .code {

        width: 100%;

      }



      .markdown-body .linenos div pre,

      .markdown-body .linenodiv pre,

      .markdown-body .linenodiv {

        border: 0;

        -webkit-border-radius: 0;

        -moz-border-radius: 0;

        border-radius: 0;

        -webkit-border-top-left-radius: 3px;

        -webkit-border-bottom-left-radius: 3px;

        -moz-border-radius-topleft: 3px;

        -moz-border-radius-bottomleft: 3px;

        border-top-left-radius: 3px;

        border-bottom-left-radius: 3px;

      }



      .markdown-body .code div pre,

      .markdown-body .code div {

        border: 0;

        -webkit-border-radius: 0;

        -moz-border-radius: 0;

        border-radius: 0;

        -webkit-border-top-right-radius: 3px;

        -webkit-border-bottom-right-radius: 3px;

        -moz-border-radius-topright: 3px;

        -moz-border-radius-bottomright: 3px;

        border-top-right-radius: 3px;

        border-bottom-right-radius: 3px;

      }



      .markdown-body * {

        -moz-box-sizing: border-box;

        box-sizing: border-box;

      }



      .markdown-body input {

        font: 13px Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';

        line-height: 1.4;

      }



      .markdown-body a {

        color: #4183c4;

        text-decoration: none;

      }



      .markdown-body a:hover,

      .markdown-body a:focus,

      .markdown-body a:active {

        text-decoration: underline;

      }



      .markdown-body hr {

        height: 0;

        margin: 15px 0;

        overflow: hidden;

        background: transparent;

        border: 0;

        border-bottom: 1px solid #ddd;

      }



      .markdown-body hr:before,

      .markdown-body hr:after {

        display: table;

        content: ' ';

      }



      .markdown-body hr:after {

        clear: both;

      }



      .markdown-body h1,

      .markdown-body h2,

      .markdown-body h3,

      .markdown-body h4,

      .markdown-body h5,

      .markdown-body h6 {

        margin-top: 15px;

        margin-bottom: 15px;

        line-height: 1.1;

      }



      .markdown-body h1 {

        font-size: 30px;

      }



      .markdown-body h2 {

        font-size: 21px;

      }



      .markdown-body h3 {

        font-size: 16px;

      }



      .markdown-body h4 {

        font-size: 14px;

      }



      .markdown-body h5 {

        font-size: 12px;

      }



      .markdown-body h6 {

        font-size: 11px;

      }



      .markdown-body blockquote {

        margin: 0;

      }



      .markdown-body ul,

      .markdown-body ol {

        padding: 0;

        margin-top: 0;

        margin-bottom: 0;

      }



      .markdown-body ol ol,

      .markdown-body ul ol {

        list-style-type: lower-roman;

      }



      .markdown-body ul ul ol,

      .markdown-body ul ol ol,

      .markdown-body ol ul ol,

      .markdown-body ol ol ol {

        list-style-type: lower-alpha;

      }



      .markdown-body dd {

        margin-left: 0;

      }



      .markdown-body code,

      .markdown-body pre,

      .markdown-body samp {

        font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;

        font-size: 12px;

      }



      .markdown-body pre {

        margin-top: 0;

        margin-bottom: 0;

      }



      .markdown-body kbd {

        background-color: #e7e7e7;

        background-image: -moz-linear-gradient(#fefefe, #e7e7e7);

        background-image: -webkit-linear-gradient(#fefefe, #e7e7e7);

        background-image: linear-gradient(#fefefe, #e7e7e7);

        background-repeat: repeat-x;

        border-radius: 2px;

        border: 1px solid #cfcfcf;

        color: #000;

        padding: 3px 5px;

        line-height: 10px;

        font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;

        display: inline-block;

      }



      .markdown-body > *:first-child {

        margin-top: 0 !important;

      }



      .markdown-body > *:last-child {

        margin-bottom: 0 !important;

      }



      .markdown-body .headerlink {

        font: normal 400 16px fontawesome-mini;

        vertical-align: middle;

        margin-left: -16px;

        float: left;

        display: inline-block;

        text-decoration: none;

        opacity: 0;

        color: #333;

      }



      .markdown-body .headerlink:focus {

        outline: none;

      }



      .markdown-body h1 .headerlink {

        margin-top: 0.8rem;

      }



      .markdown-body h2 .headerlink,

      .markdown-body h3 .headerlink {

        margin-top: 0.6rem;

      }



      .markdown-body h4 .headerlink {

        margin-top: 0.2rem;

      }



      .markdown-body h5 .headerlink,

      .markdown-body h6 .headerlink {

        margin-top: 0;

      }



      .markdown-body .headerlink:hover,

      .markdown-body h1:hover .headerlink,

      .markdown-body h2:hover .headerlink,

      .markdown-body h3:hover .headerlink,

      .markdown-body h4:hover .headerlink,

      .markdown-body h5:hover .headerlink,

      .markdown-body h6:hover .headerlink {

        opacity: 1;

        text-decoration: none;

      }



      .markdown-body h1 {

        padding-bottom: 0.3em;

        font-size: 2.25em;

        line-height: 1.2;

        border-bottom: 1px solid #eee;

      }



      .markdown-body h2 {

        padding-bottom: 0.3em;

        font-size: 1.75em;

        line-height: 1.225;

        border-bottom: 1px solid #eee;

      }



      .markdown-body h3 {

        font-size: 1.5em;

        line-height: 1.43;

      }



      .markdown-body h4 {

        font-size: 1.25em;

      }



      .markdown-body h5 {

        font-size: 1em;

      }



      .markdown-body h6 {

        font-size: 1em;

        color: #777;

      }



      .markdown-body p,

      .markdown-body blockquote,

      .markdown-body ul,

      .markdown-body ol,

      .markdown-body dl,

      .markdown-body table,

      .markdown-body pre,

      .markdown-body .admonition {

        margin-top: 0;

        margin-bottom: 16px;

      }



      .markdown-body hr {

        height: 4px;

        padding: 0;

        margin: 16px 0;

        background-color: #e7e7e7;

        border: 0 none;

      }



      .markdown-body ul,

      .markdown-body ol {

        padding-left: 2em;

      }



      .markdown-body ul ul,

      .markdown-body ul ol,

      .markdown-body ol ol,

      .markdown-body ol ul {

        margin-top: 0;

        margin-bottom: 0;

      }



      .markdown-body li > p {

        margin-top: 16px;

      }



      .markdown-body dl {

        padding: 0;

      }



      .markdown-body dl dt {

        padding: 0;

        margin-top: 16px;

        font-size: 1em;

        font-style: italic;

        font-weight: bold;

      }



      .markdown-body dl dd {

        padding: 0 16px;

        margin-bottom: 16px;

      }



      .markdown-body blockquote {

        padding: 0 15px;

        color: #777;

        border-left: 4px solid #ddd;

      }



      .markdown-body blockquote > :first-child {

        margin-top: 0;

      }



      .markdown-body blockquote > :last-child {

        margin-bottom: 0;

      }



      .markdown-body table {

        display: block;

        width: 100%;

        overflow: auto;

        word-break: normal;

        word-break: keep-all;

      }



      .markdown-body table th {

        font-weight: bold;

      }



      .markdown-body table th,

      .markdown-body table td {

        padding: 6px 13px;

        border: 1px solid #ddd;

      }



      .markdown-body table tr {

        background-color: #fff;

        border-top: 1px solid #ccc;

      }



      .markdown-body table tr:nth-child(2n) {

        background-color: #f8f8f8;

      }



      .markdown-body img {

        max-width: 100%;

        -moz-box-sizing: border-box;

        box-sizing: border-box;

      }



      .markdown-body code,

      .markdown-body samp {

        padding: 0;

        padding-top: 0.2em;

        padding-bottom: 0.2em;

        margin: 0;

        font-size: 85%;

        background-color: rgba(0, 0, 0, 0.04);

        border-radius: 3px;

      }



      .markdown-body code:before,

      .markdown-body code:after {

        letter-spacing: -0.2em;

        content: '\00a0';

      }



      .markdown-body pre > code {

        padding: 0;

        margin: 0;

        font-size: 100%;

        word-break: normal;

        white-space: pre;

        background: transparent;

        border: 0;

      }



      .markdown-body .codehilite {

        margin-bottom: 16px;

      }



      .markdown-body .codehilite pre,

      .markdown-body pre {

        padding: 16px;

        overflow: auto;

        font-size: 85%;

        line-height: 1.45;

        background-color: #f7f7f7;

        border-radius: 3px;

      }



      .markdown-body .codehilite pre {

        margin-bottom: 0;

        word-break: normal;

      }



      .markdown-body pre {

        word-wrap: normal;

      }



      .markdown-body pre code {

        display: inline;

        max-width: initial;

        padding: 0;

        margin: 0;

        overflow: initial;

        line-height: inherit;

        word-wrap: normal;

        background-color: transparent;

        border: 0;

      }



      .markdown-body pre code:before,

      .markdown-body pre code:after {

        content: normal;

      }



      /* Admonition */

      .markdown-body .admonition {

        -webkit-border-radius: 3px;

        -moz-border-radius: 3px;

        position: relative;

        border-radius: 3px;

        border: 1px solid #e0e0e0;

        border-left: 6px solid #333;

        padding: 10px 10px 10px 30px;

      }



      .markdown-body .admonition table {

        color: #333;

      }



      .markdown-body .admonition p {

        padding: 0;

      }



      .markdown-body .admonition-title {

        font-weight: bold;

        margin: 0;

      }



      .markdown-body .admonition > .admonition-title {

        color: #333;

      }



      .markdown-body .attention > .admonition-title {

        color: #a6d796;

      }



      .markdown-body .caution > .admonition-title {

        color: #d7a796;

      }



      .markdown-body .hint > .admonition-title {

        color: #96c6d7;

      }



      .markdown-body .danger > .admonition-title {

        color: #c25f77;

      }



      .markdown-body .question > .admonition-title {

        color: #96a6d7;

      }



      .markdown-body .note > .admonition-title {

        color: #d7c896;

      }



      .markdown-body .admonition:before,

      .markdown-body .attention:before,

      .markdown-body .caution:before,

      .markdown-body .hint:before,

      .markdown-body .danger:before,

      .markdown-body .question:before,

      .markdown-body .note:before {

        font: normal normal 16px fontawesome-mini;

        -moz-osx-font-smoothing: grayscale;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

        line-height: 1.5;

        color: #333;

        position: absolute;

        left: 0;

        top: 0;

        padding-top: 10px;

        padding-left: 10px;

      }



      .markdown-body .admonition:before {

        content: '\f056\00a0';

        color: 333;

      }



      .markdown-body .attention:before {

        content: '\f058\00a0';

        color: #a6d796;

      }



      .markdown-body .caution:before {

        content: '\f06a\00a0';

        color: #d7a796;

      }



      .markdown-body .hint:before {

        content: '\f05a\00a0';

        color: #96c6d7;

      }



      .markdown-body .danger:before {

        content: '\f057\00a0';

        color: #c25f77;

      }



      .markdown-body .question:before {

        content: '\f059\00a0';

        color: #96a6d7;

      }



      .markdown-body .note:before {

        content: '\f040\00a0';

        color: #d7c896;

      }



      .markdown-body .admonition::after {

        content: normal;

      }



      .markdown-body .attention {

        border-left: 6px solid #a6d796;

      }



      .markdown-body .caution {

        border-left: 6px solid #d7a796;

      }



      .markdown-body .hint {

        border-left: 6px solid #96c6d7;

      }



      .markdown-body .danger {

        border-left: 6px solid #c25f77;

      }



      .markdown-body .question {

        border-left: 6px solid #96a6d7;

      }



      .markdown-body .note {

        border-left: 6px solid #d7c896;

      }



      .markdown-body .admonition > *:first-child {

        margin-top: 0 !important;

      }



      .markdown-body .admonition > *:last-child {

        margin-bottom: 0 !important;

      }



      /* progress bar*/

      .markdown-body .progress {

        display: block;

        width: 300px;

        margin: 10px 0;

        height: 24px;

        -webkit-border-radius: 3px;

        -moz-border-radius: 3px;

        border-radius: 3px;

        background-color: #ededed;

        position: relative;

        box-shadow: inset -1px 1px 3px rgba(0, 0, 0, 0.1);

      }



      .markdown-body .progress-label {

        position: absolute;

        text-align: center;

        font-weight: bold;

        width: 100%;

        margin: 0;

        line-height: 24px;

        color: #333;

        text-shadow: 1px 1px 0 #fefefe, -1px -1px 0 #fefefe, -1px 1px 0 #fefefe, 1px -1px 0 #fefefe, 0 1px 0 #fefefe,

          0 -1px 0 #fefefe, 1px 0 0 #fefefe, -1px 0 0 #fefefe, 1px 1px 2px #000;

        -webkit-font-smoothing: antialiased !important;

        white-space: nowrap;

        overflow: hidden;

      }



      .markdown-body .progress-bar {

        height: 24px;

        float: left;

        -webkit-border-radius: 3px;

        -moz-border-radius: 3px;

        border-radius: 3px;

        background-color: #96c6d7;

        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(0, 0, 0, 0.1);

        background-size: 30px 30px;

        background-image: -webkit-linear-gradient(

          135deg,

          rgba(255, 255, 255, 0.4) 27%,

          transparent 27%,

          transparent 52%,

          rgba(255, 255, 255, 0.4) 52%,

          rgba(255, 255, 255, 0.4) 77%,

          transparent 77%,

          transparent

        );

        background-image: -moz-linear-gradient(

          135deg,

          rgba(255, 255, 255, 0.4) 27%,

          transparent 27%,

          transparent 52%,

          rgba(255, 255, 255, 0.4) 52%,

          rgba(255, 255, 255, 0.4) 77%,

          transparent 77%,

          transparent

        );

        background-image: -ms-linear-gradient(

          135deg,

          rgba(255, 255, 255, 0.4) 27%,

          transparent 27%,

          transparent 52%,

          rgba(255, 255, 255, 0.4) 52%,

          rgba(255, 255, 255, 0.4) 77%,

          transparent 77%,

          transparent

        );

        background-image: -o-linear-gradient(

          135deg,

          rgba(255, 255, 255, 0.4) 27%,

          transparent 27%,

          transparent 52%,

          rgba(255, 255, 255, 0.4) 52%,

          rgba(255, 255, 255, 0.4) 77%,

          transparent 77%,

          transparent

        );

        background-image: linear-gradient(

          135deg,

          rgba(255, 255, 255, 0.4) 27%,

          transparent 27%,

          transparent 52%,

          rgba(255, 255, 255, 0.4) 52%,

          rgba(255, 255, 255, 0.4) 77%,

          transparent 77%,

          transparent

        );

      }



      .markdown-body .progress-100plus .progress-bar {

        background-color: #a6d796;

      }



      .markdown-body .progress-80plus .progress-bar {

        background-color: #c6d796;

      }



      .markdown-body .progress-60plus .progress-bar {

        background-color: #d7c896;

      }



      .markdown-body .progress-40plus .progress-bar {

        background-color: #d7a796;

      }



      .markdown-body .progress-20plus .progress-bar {

        background-color: #d796a6;

      }



      .markdown-body .progress-0plus .progress-bar {

        background-color: #c25f77;

      }



      .markdown-body .candystripe-animate .progress-bar {

        -webkit-animation: animate-stripes 3s linear infinite;

        -moz-animation: animate-stripes 3s linear infinite;

        animation: animate-stripes 3s linear infinite;

      }



      @-webkit-keyframes animate-stripes {

        0% {

          background-position: 0 0;

        }



        100% {

          background-position: 60px 0;

        }

      }



      @-moz-keyframes animate-stripes {

        0% {

          background-position: 0 0;

        }



        100% {

          background-position: 60px 0;

        }

      }



      @keyframes animate-stripes {

        0% {

          background-position: 0 0;

        }



        100% {

          background-position: 60px 0;

        }

      }



      .markdown-body .gloss .progress-bar {

        box-shadow: inset 0 4px 12px rgba(255, 255, 255, 0.7), inset 0 -12px 0 rgba(0, 0, 0, 0.05);

      }



      /* MultiMarkdown Critic Blocks */

      .markdown-body .critic_mark {

        background: #ff0;

      }



      .markdown-body .critic_delete {

        color: #c82829;

        text-decoration: line-through;

      }



      .markdown-body .critic_insert {

        color: #718c00;

        text-decoration: underline;

      }



      .markdown-body .critic_comment {

        color: #8e908c;

        font-style: italic;

      }



      .markdown-body .headeranchor {

        font: normal normal 16px fontawesome-mini;

        line-height: 1;

        display: inline-block;

        text-decoration: none;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;

        -webkit-user-select: none;

        -moz-user-select: none;

        -ms-user-select: none;

        user-select: none;

      }



      .headeranchor:before {

        content: '\e157';

      }



      .markdown-body .task-list-item {

        list-style-type: none;

      }



      .markdown-body .task-list-item + .task-list-item {

        margin-top: 3px;

      }



      .markdown-body .task-list-item input {

        margin: 0 4px 0.25em -20px;

        vertical-align: middle;

      }



      /* Media */

      @media only screen and (min-width: 480px) {

        .markdown-body {

          font-size: 14px;

        }

      }



      @media only screen and (min-width: 768px) {

        .markdown-body {

          font-size: 16px;

        }

      }



      @media print {

        .markdown-body * {

          background: transparent !important;

          color: black !important;

          filter: none !important;

          -ms-filter: none !important;

        }



        .markdown-body {

          font-size: 12pt;

          max-width: 100%;

          outline: none;

          border: 0;

        }



        .markdown-body a,

        .markdown-body a:visited {

          text-decoration: underline;

        }



        .markdown-body .headeranchor-link {

          display: none;

        }



        .markdown-body a[href]:after {

          content: ' (' attr(href) ')';

        }



        .markdown-body abbr[title]:after {

          content: ' (' attr(title) ')';

        }



        .markdown-body .ir a:after,

        .markdown-body a[href^='javascript:']:after,

        .markdown-body a[href^='#']:after {

          content: '';

        }



        .markdown-body pre {

          white-space: pre;

          white-space: pre-wrap;

          word-wrap: break-word;

        }



        .markdown-body pre,

        .markdown-body blockquote {

          border: 1px solid #999;

          padding-right: 1em;

          page-break-inside: avoid;

        }



        .markdown-body .progress,

        .markdown-body .progress-bar {

          -moz-box-shadow: none;

          -webkit-box-shadow: none;

          box-shadow: none;

        }



        .markdown-body .progress {

          border: 1px solid #ddd;

        }



        .markdown-body .progress-bar {

          height: 22px;

          border-right: 1px solid #ddd;

        }



        .markdown-body tr,

        .markdown-body img {

          page-break-inside: avoid;

        }



        .markdown-body img {

          max-width: 100% !important;

        }



        .markdown-body p,

        .markdown-body h2,

        .markdown-body h3 {

          orphans: 3;

          widows: 3;

        }



        .markdown-body h2,

        .markdown-body h3 {

          page-break-after: avoid;

        }

      }

    

    

      /*GitHub*/

      .codehilite {

        background-color: #fff;

        color: #333333;

      }

      .codehilite .hll {

        background-color: #ffffcc;

      }

      .codehilite .c {

        color: #999988;

        font-style: italic;

      }

      .codehilite .err {

        color: #a61717;

        background-color: #e3d2d2;

      }

      .codehilite .k {

        font-weight: bold;

      }

      .codehilite .o {

        font-weight: bold;

      }

      .codehilite .cm {

        color: #999988;

        font-style: italic;

      }

      .codehilite .cp {

        color: #999999;

        font-weight: bold;

      }

      .codehilite .c1 {

        color: #999988;

        font-style: italic;

      }

      .codehilite .cs {

        color: #999999;

        font-weight: bold;

        font-style: italic;

      }

      .codehilite .gd {

        color: #000000;

        background-color: #ffdddd;

      }

      .codehilite .ge {

        font-style: italic;

      }

      .codehilite .gr {

        color: #aa0000;

      }

      .codehilite .gh {

        color: #999999;

      }

      .codehilite .gi {

        color: #000000;

        background-color: #ddffdd;

      }

      .codehilite .go {

        color: #888888;

      }

      .codehilite .gp {

        color: #555555;

      }

      .codehilite .gs {

        font-weight: bold;

      }

      .codehilite .gu {

        color: #800080;

        font-weight: bold;

      }

      .codehilite .gt {

        color: #aa0000;

      }

      .codehilite .kc {

        font-weight: bold;

      }

      .codehilite .kd {

        font-weight: bold;

      }

      .codehilite .kn {

        font-weight: bold;

      }

      .codehilite .kp {

        font-weight: bold;

      }

      .codehilite .kr {

        font-weight: bold;

      }

      .codehilite .kt {

        color: #445588;

        font-weight: bold;

      }

      .codehilite .m {

        color: #009999;

      }

      .codehilite .s {

        color: #dd1144;

      }

      .codehilite .n {

        color: #333333;

      }

      .codehilite .na {

        color: teal;

      }

      .codehilite .nb {

        color: #0086b3;

      }

      .codehilite .nc {

        color: #445588;

        font-weight: bold;

      }

      .codehilite .no {

        color: teal;

      }

      .codehilite .ni {

        color: purple;

      }

      .codehilite .ne {

        color: #990000;

        font-weight: bold;

      }

      .codehilite .nf {

        color: #990000;

        font-weight: bold;

      }

      .codehilite .nn {

        color: #555555;

      }

      .codehilite .nt {

        color: navy;

      }

      .codehilite .nv {

        color: teal;

      }

      .codehilite .ow {

        font-weight: bold;

      }

      .codehilite .w {

        color: #bbbbbb;

      }

      .codehilite .mf {

        color: #009999;

      }

      .codehilite .mh {

        color: #009999;

      }

      .codehilite .mi {

        color: #009999;

      }

      .codehilite .mo {

        color: #009999;

      }

      .codehilite .sb {

        color: #dd1144;

      }

      .codehilite .sc {

        color: #dd1144;

      }

      .codehilite .sd {

        color: #dd1144;

      }

      .codehilite .s2 {

        color: #dd1144;

      }

      .codehilite .se {

        color: #dd1144;

      }

      .codehilite .sh {

        color: #dd1144;

      }

      .codehilite .si {

        color: #dd1144;

      }

      .codehilite .sx {

        color: #dd1144;

      }

      .codehilite .sr {

        color: #009926;

      }

      .codehilite .s1 {

        color: #dd1144;

      }

      .codehilite .ss {

        color: #990073;

      }

      .codehilite .bp {

        color: #999999;

      }

      .codehilite .vc {

        color: teal;

      }

      .codehilite .vg {

        color: teal;

      }

      .codehilite .vi {

        color: teal;

      }

      .codehilite .il {

        color: #009999;

      }

      .codehilite .gc {

        color: #999;

        background-color: #eaf2f5;

      }

    

    README

  

  

    

      


        入门 Leaflet 之小 Demo

      


      


      


        
写在前面 ---- WebGIS 开发基础之 Leaflet


        
    

              
  1. 

                GIS

                基本概念：GIS、Map、Layer、Feature、Geometry、Symbol、Data（Point、Polyline、Polygon）、Renderer、Scale、Project、Coordinates；

              
    2. 

              
  2. GIS 开发概述：架构模式、常用平台和 SDK、二维三维
    3. 

              
  3. 使用 Leaflet 开发常用功能
    4. 

            


        
    

              
  • 地图加载（底图类型、切换）：
    • 

              
  • 地图操作（缩放、平移、定位/书签、动画）：
    • 

              
  • 图层管理（加载、移除、调整顺序）：
    • 

              
  • 要素标绘（点/聚簇、线、面，符号化/静态动态）：
    • 

              
  • 属性标注（字段可选、样式定制）：
    • 

              
  • 专题地图（点、线、面，渲染）：
    • 

              
  • 查询定位（属性查询、空间查询/周边搜索/缓冲区/面查点线面/点线查面、图属互查、综合查询）：
    • 

              
  • 信息窗口（入口、Popup、定制）：
    • 

              
  • 坐标转换（地理与投影、不同地理坐标系）：
    • 

              
  • 空间运算（长度面积测量、点取坐标、缓冲区、相交包含关系）：
    • 

              
  • 

                动态监控（固定点状态切换、车辆监控）：

                

              
    • 

            


        
    

              
  1. 

                Leaflet API

              
    2. 

            


      


      


      
Demo 用到的库



      

      


      


        PART 1： 地图加载（底图类型、切换）

        Demo 1 

      


      


        

      


      
    

            
  • 库引用
    • 

          


      


        
<link rel="stylesheet" type="text/css" href="./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css"

    />

<link rel="stylesheet" href="./lib/Flat-UI-master/dist/css/flat-ui.min.css">

<link rel="stylesheet" href="./lib/leaflet/leaflet.css">



      



      


        
<script src="./lib/Flat-UI-master/dist/js/vendor/jquery.min.js"></script>

<script src="./lib/Flat-UI-master/dist/js/flat-ui.js"></script>

<script src="./lib/leaflet/leaflet.js"></script>

<script src="./js/urlTemplate.js"></script>



      



      
    

            
  • 地图加载与切换
    • 

          


      


        
const map = L.map("mapDiv", {

        crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系,互联网地图主流坐标系

        // crs: L.CRS.EPSG4326, //WGS 84坐标系，GPS默认坐标系

        zoomControl: true,

        // minZoom: 1,

        attributionControl: true,

    }).setView([30.6268660000, 104.1528940000], 18);//定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″

    let Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {

       maxZoom: 17, //最大视图

        minZoom: 2, //最小视图

        attribution: '[email protected]  &copy; <a href="https://github.com/liuvigongzuoshi/WebGIS-for-learnning/tree/master/Leaflet_Demo">WebGIS-for-learnning</a>'

    }).addTo(map);



const setLayer = (ele) => {

    map.removeLayer(Baselayer)

    if (ele == "mapbox_Image") {

        Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {

            maxZoom: 17,

            minZoom: 2

        }).addTo(map);

    } else if (ele == "mapbox_Vector") {

        Baselayer = L.tileLayer(urlTemplate.mapbox_Vector, {

            maxZoom: 17,

            // minZoom: 2

        }).addTo(map);

        console.log(Baselayer)

    }

}



      



      


        基于 Demo 1 利用 H5 Geolocation API 定位到当前位置

        Demo 1.1 

      


      


        

      


      
    

            
  • 库引用 如上 Demo 1
    • 

          


      


        
<!-- marker高亮显示库引用 -->

<link rel="stylesheet" href="./lib/leaflet.marker.highlight/leaflet.marker.highlight.css">

<script src="./lib/leaflet.marker.highlight/leaflet.marker.highlight.js"></script>



      



      
    

            
  • 判断浏览器是否支持
    • 

          


      


        
    let map;

    let Baselayer;

    // 使用H5 API定位 定位在当前位置

    if (navigator.geolocation) {

        console.log('/* 地理位置服务可用 */')

        navigator.geolocation.getCurrentPosition(h5ApiSuccess, h5ApiError);

    } else {

        console.log('/* 地理位置服务不可用 */')

        mapInit([30.374558, 104.09144]);//指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″

    }



      



      
    

            
  • 定位成功或失败
    • 

          


      


        
    const h5ApiSuccess = (position) => {

        let latitude = position.coords.latitude; //纬度

        let longitude = position.coords.longitude; //经度

        console.log('你的经度纬度分别为' + longitude + ',' + latitude + '。')

        return mapInit([latitude, longitude]);

    };



    const h5ApiError = () => {

        console.log('/* 地理位置请求失败 */')

        mapInit([30.374558, 104.09144]);//指定一个数据 定位在成都北纬N30°37′45.58″ 东经E104°09′1.44″

    };



      



      
    

            
  • 成功后初始化底图
    • 

          


      


        
    const mapInit = (LatLng) => {

        map = L.map("mapDiv", {

            crs: L.CRS.EPSG3857, //要使用的坐标参考系统，默认的坐标参考系

            // crs: L.CRS.EPSG4326, //国内的坐标参考系

            zoomControl: true,

            // minZoom: 1,

            attributionControl: true,

        }).setView(LatLng, 18);//定位在当前位置

        Baselayer = L.tileLayer(urlTemplate.mapbox_Image, {

            maxZoom: 17, //最大视图

            minZoom: 2, //最小视图

            attribution: '[email protected]  &copy; <a href="https://github.com/liuvigongzuoshi/WebGIS-for-learnning/tree/master/Leaflet_Demo">WebGIS-for-learnning</a>'

        }).addTo(map);



        L.marker(LatLng, {

            highlight: "permanent" //永久高亮显示

        }).addTo(map);

    }



      



      


        
    

              
  • 

                更多了解 geolocation 对象，可参考MDN Web 文档

              
    • 

              
  • 

                更多了解使用 marker 高亮显示，可参考leaflet.marker.highlight插件

              
    • 

              
  • 

                基于 Demo 1 利用 leaflet 封装好的 H5 定位 API,定位到当前位置

                Demo

              
    • 

            


      


      


        PART 2： 地图操作（缩放、平移、定位/书签、动画）

        Demo 2 

      


      


        

      


      
    

            
  • 

              
    库引用 如上 Demo 1
    

            
    • 

            
  • 

              
    设置地图缩放到指定图层
    

            
    • 

          


      


        
map.setZoom(10, {

  // animate: false

})  //设置地图缩放到



      



      
    

            
  • 图层往里进一个图层，放大
    • 

          


      


        
map.zoomIn() //图层往里进一个图层，放大

//map.zoomOut()  //图层往里出一个图层，缩小



      



      
    

            
  • 地图平移至中心点
    • 

          


      


        
map.panTo([37.91082, 128.73583], {

    animate: true

}) //地图平移，默认就是true，将地图平移到给定的中心。如果新的中心点在屏幕内与现有的中心点不同则产生平移动作。



      



      
    

            
  • 地图飞到中心点
    • 

          


      


        
map.flyTo([36.52, 120.31]); // 点到点的抛物线动画，平移加缩放动画



      



      


        


          注意：尽量避免 setZoom()等地图缩放方法与 flyTo、flyToBounds

          一起合用，因为这两类地图操作方法都有各自的缩放值，造成动画不流畅、不能定位到目的点。

        


      


      
    

            
  • 地图飞到边界的合适的位置
    • 

          


      


        
map.flyToBounds(polygon.getBounds());   //getBounds（获取边界）：返回地图视图的经纬度边界。

    //飞到这个多变形区域上面，自动判断区域块的大小，合适缩放图层，将地图视图尽可能大地设定在给定的地理边界内。



let polygon = L.polygon(

          [[37, -109.05],

          [41, -109.03],

          [41, -102.05],

          [37, -102.04]],

     [40.774, -74.125], {

       color: 'green',

       fillColor: '#f03',

       fillOpacity: 0.5

    }).addTo(map);  //地图上绘制一个多形



      



      
    

            
  • 地图定位到边界的合适的位置
    • 

          


      


        
map.fitBounds(polygon.getBounds());  //getBounds（获取边界）：返回地图视图的经纬度边界。

  //平移到一个区域上面，自动判断区域块的大小，合适缩放图层



let polygon = L.polygon(

          [[37, -109.05],

          [41, -109.03],

          [41, -102.05],

          [37, -102.04]],

     [40.774, -74.125], {

       color: 'green',

       fillColor: '#f03',

       fillOpacity: 0.5

    }).addTo(map);  //地图上绘制一个多边形



      



      


        PART 3： 图层管理（加载、移除、调整顺序）：

        Demo 3 

      


      


        

      


      
    

            
  • 库引用
    • 

          


      


        
<link rel="stylesheet" type="text/css"  href="./lib/Flat-UI-master/dist/css/vendor/bootstrap/css/bootstrap.min.css"

    />

<link rel="stylesheet" href="./lib/Flat-UI-master/dist/css/flat-ui.min.css">

<link rel="stylesheet" href="./lib/leaflet/leaflet.css">



      



      


        
<script src="./lib/Flat-UI-master/dist/js/vendor/jquery.min.js"></script>

<script src="./lib/Flat-UI-master/dist/js/flat-ui.js"></script>

<script src="./lib/leaflet/leaflet.js"></script>

<script src="./lib/esri-leaflet-v2.1.2/dist/esri-leaflet.js"></script> <!-- esri-leafleat插件 -->

<script src="./js/urlTemplate.js"></script>



      



      
    

            
  • 使用 esri-leaflet 插件加载 ArcGIS 底图服务
    • 

          


      


        
let oMap = null;

    let oLayer = [];



    oMap = L.map('mapDiv', {

        crs: L.CRS.EPSG4326,

        zoomControl: false,

        minZoom: 7,

        attributionControl: false

    }).setView([29.59, 106.59], 12); //定位在重庆



    oLayer.push(L.esri.tiledMapLayer({

        url: urlTemplate.SYS_IMG_MAPSERVER_PATH,

        maxZoom: 17,

        minZoom: 0,

        useCors: false, //是否浏览器在跨域的情况下使用GET请求。

    }).addTo(oMap)); //加载第一个底图



    oLayer.push(L.esri.tiledMapLayer({

        url: urlTemplate.SYS_IMG_LABEL_MAPSERVER_PATH,

        maxZoom: 17,

        minZoom: 0,

        useCors: false,

    }).addTo(oMap));  //加载第二个底图



      



      
    

            
  • 切换底图(移除及加载)
    • 

          


      


        
const setLayer = (layerUrls, maxZoom) => {

        for (let i = 0; i < oLayer.length; i++) {

            oMap.removeLayer(oLayer[i]) //将图层在地图上移除

        }

        oLayer = [] //制空数组

        layerUrls.map((item) => {

            oLayer.push(L.esri.tiledMapLayer({

                url: item,

                useCors: false,

                maxZoom: maxZoom, // 设置最大放大图层值

            }).addTo(oMap));

        })

    }



      



      


        


          不同的底图可能图层数不一样，就可能造成浏览器去请求不存在的图层，以及给用户展示出空白区域的不好体验，所以切换图层时候应注意设置最大及最小缩放值。

        


      


      


        PART 4： 要素标绘（点、线、面，符号化/静态动态）

        Demo 4 

      


      


        

      


      
    

            
  • 库引用 如上 Demo 1
    • 

            
  • 画一个圆
    • 

          


      


        
// 画一个circle

const circle = L.circle([36.52, 120.31], {

  color: 'green', //描边色

  fillColor: '#f03',  //填充色

  fillOpacity: 0.5, //透明度

  radius: 10000 //半径，单位米

}).addTo(map);

// 绑定一个提示标签

circle.bindTooltip('我是个圆');



      



      
    

            
  • Maker 及自定义 Maker
    • 

          


      


        
// 做一个maker

const marker = L.marker([36.52, 120.31]).addTo(map);

// 绑定一个提示标签

marker.bindTooltip('这是个Marker', { direction: 'left' }).openTooltip();



//自定义一个maker

const greenIcon = L.icon({

  iconUrl: './icon/logo.png',

  iconSize: [300, 79], // size of the icon

  popupAnchor: [0, -10] // point from which the popup should open relative to the iconAnchor

});



const oMarker = L.marker([36.52, 124.31], { icon: greenIcon }).addTo(map);

// 绑定一个提示标签

oMarker.bindTooltip('这是个自定义Marker', { direction: 'left', offset: [-150, 0] });



      



      
    

            
  • 画一根线
    • 

          


      


        
//画一根线

const polyline = L.polyline([[45.51, -122.68], [37.77, -122.43], [34.04, -118.2]], { color: 'red' }).addTo(map);

// 飞到这个线的位置

// map.fitBounds(polyline.getBounds());



      



      
    

            
  • 画一个多边形
    • 

          


      


        
// 画一个polygon

const polygon = L.polygon([

  [[37, -109.05], [41, -109.03], [41, -102.05], [37, -102.04]], // outer ring

  [[37.29, -108.58], [40.71, -108.58], [40.71, -102.50], [37.29, -102.50]] // hole

], {

    color: 'green',

    fillColor: '#f03',

    fillOpacity: 0.5

  }).addTo(map);

// 绑定一个提示标签

polygon.bindTooltip('this is 个多边形');

// 飞到这个多边形的位置

// map.fitBounds(polygon.getBounds());



      



      


        PART 5： 信息窗口（入口、Popup、定制）

        Demo 5 

      


      


        

      


      
    

            
  • 库引用 如上 Demo 1
    • 

            
  • 画一个 circle 并绑定一个 Popup
    • 

          


      


        
// 画一个circle

const circle = L.circle([36.92, 121.31], {

 color: 'green', //描边色

 fillColor: '#f03',  //填充色

 fillOpacity: 0.5, //透明度

 radius: 10000 //半径，单位米

}).addTo(map);



// 绑定一个弹窗

circle.bindPopup('我是个圆');



      



      
    

            
  • 定位一个 marker，绑定一个自定义 Popup
    • 

          


      


        
// 定位一个maker

const marker = L.marker([36.52, 120.31]).addTo(map);



//maker上自定义一个popup

const html = '<p>Hello world!<br />This is a nice popup.</p>';



const popup = marker.bindPopup(html, { maxHeight: 250, maxWidth: 490, className: 'content', offset: [0, 0] }).on('popupopen', function (params) {

  console.log(params)

});



      



      
    

            
  • 实现动态改变 Popup 的内容
    • 

          


      


        
const mypop = L.popup();



map.on('click', function (e) {

  mypop.setLatLng(e.latlng)

    .setContent('你临幸了这个点：<br>' + e.latlng.toString())

    .openOn(map);

});



      



      


        PART 6： geojson 数据绘制边界(坐标转换、渲染)

        Demo 6 

      


      


        

      


      
    

            
  • 

              
    库引用 如上 Demo 1
    

            
    • 

            
  • 

              
    获得 geojson 并处理数据
    

            
    • 

          


      


        
// 请求geojson并处理数据

const population = () => {

    $.get("./js/geojson.json", function (response) {

        const poplData = response.data

        const PolygonsCenter = response.geopoint

        drawPolygons(poplData, PolygonsCenter)

    });

}



      



      


        


          模拟后台返回的数据geojson

        


      


      
    

            
  • 绘制边界并添加图例
    • 

          


      


        
let oPolygon_VilPop = [];



const legend = L.control({

    position: 'bottomright'

 });



const drawPolygons = (poplData, PolygonsCenter) => {

    for (const i in poplData) {

        poplData[i].geoJson = JSON.parse(poplData[i].geoJson)

        oPolygon_VilPop[i] = L.geoJSON(poplData[i].geoJson, {

            style: function () {

                return {

                    color: 'white',

                    fillColor: getBgColor(poplData[i].population), //获取边界的填充色

                    fillOpacity: 0.6,

                    weight: 3,

                    dashArray: '10'

                };

            }

        }).bindTooltip(poplData[i].villageName + '<br><br>人口' + poplData[i].population + '人', {

            direction: 'top'

        }).on({

            mouseover: highlight, //鼠标移动上去高亮

            mouseout: resetHighlight, //鼠标移出恢复原样式

            click: zoomTo //点击最大化

        }).addTo(oMap);

    }



    // 添加图例

    legend.onAdd = legendHtml;

    legend.addTo(oMap);



    // 定位到该界限的中心位置

    oMap.flyToBounds(PolygonsCenter);

}



// 添加图例

legend.onAdd = legendHtml;

legend.addTo(oMap);



// 定位到该界限的中心位置

oMap.flyToBounds(PolygonsCenter);

}



      



      
    

            
  • 返回边界的填充色及图列的样式
    • 

          


      


        
const getBgColor = (d) => {

    return d > 400 ? '#800026' : d > 300 ? '#BD0026' : d > 200 ? '#FC4E2A' : d > 100 ? '#FD8D3C' : d > 50 ? '#FED976' : '#FFEDA0';

}



const legendHtml = (map) => {

    let div = L.DomUtil.create('div', 'legend locateVP_legend'),

        grades = [0, 50, 100, 200, 400],

        labels = [],

        from, to;

    for (let i = 0; i < grades.length; i++) {

        from = grades[i];

        to = grades[i + 1];

        labels.push(

            '<i style="background:' + getBgColor(from + 1) + '"></i> ' +

            from + (to ? ' &sim; ' + to + '人' : '以上'));

    }

    div.innerHTML = labels.join('<br>');

    return div;

    };



      



      
    

            
  • 鼠标移动上去的事件、鼠标移出的事件、发生点击的事件
    • 

          


      


        
const highlight = (e) => {

    let layer = e.target;

    layer.setStyle({

        weight: 6,

        color: '#fff',

        fillOpacity: 0.9,

        dashArray: '0'

    })

}



const resetHighlight = (e) => {

    let layer = e.target;

    layer.setStyle({

        color: 'white',

        weight: 3,

        fillOpacity: 0.6,

        dashArray: '10'

    })

}



const zoomTo = (e) => {

    oMap.fitBounds(e.target.getBounds());

}



      



      
写在后面



      
国内常用地图服务资源加载插件



      


        


          Leaflet.ChineseTmsProviders

          Provider for Chinese Tms Service

        


      


      
    

            
  • 

              
    

                Leaflet 调用国内各种地图的功能十分复杂，幸好有 leaflet.ChineseTmsProviders

                这个插件，这四种地图直接就可以加载进来，十分方便。

              
    

            
    • 

            
  • 

              
    

                使用方法很简单可点击上面链接去 GitHub 看使用说明，或拉这个 demo下来来瞧一瞧代码。

              
    

            
    • 

          


      
优化 marker 相关的插件



      

      
模块化开发的加载包注意的问题



      
    

            
  • 引 leaflet 包的时候不要忘记引用包里的 css import 'leaflet/dist/leaflet.css';

    • 

          


      


        关于 Leaflet 和 esri-leaflet 一起使用 L.esri.TiledMapLayer 加载 ArcGIS 服务切片底图时，控制台打印报错

        Uncaught ReferenceError: proj4 is not defined

      


      
    

            
  • 

              查看了下源码

              if (!proj4) { warn('L.esri.TiledMapLayer is using a non-mercator spatial reference. Support may be

                available through Proj4Leaflet

                http://esri.github.io/esri-leaflet/examples/non-mercator-projection.html');}    

              问题就出在这里，esri-leaflet 里的一个插件 proj4leaflet 依赖proj4，所以需要手动引入 proj4 这个包。

            
    • 

            
  • 

              这个 GitHub 上面的提问及回答

              Github esri-leaflet Issues

            
    • 

            
  • 

              如果你是模块化开发，需要再npm i proj4 然后再引入进来好了

              import * as proj4 from 'proj4'; window['proj4'] = proj4;

            
    • 

            
  • 

              如果你是常规开发，直接添加一个 script 标签引用 CDN 资源上托管的Proj4js就是了

              <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.4.4/proj4-src.js"></script>

            
    • 

          


      
Leaflet 学习资料整理



      

      
参考



      

      


        


          持续更新中 原文地址：

          https://juejin.im/post/5a658614f265da3e3f4cce0e