Unverified Commit 915e05c0 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by GitHub
Browse files

Merge branch 'master' into l-feature-group

parents 6574a160 215dcc9d

package.json

+1 −2
Original line number Diff line number Diff line
@@ -17,8 +17,7 @@ 
    "url": "git@github.com:vue-leaflet/vue-leaflet.git"

  },

  "scripts": {

    "serve": "vue-cli-service serve ./src/playground.js",

    "playground": "vue-cli-service serve ./src/playground/index.js",

    "serve": "vue-cli-service serve ./src/playground/index.js",

    "build": "rollup -c rollup.config.js",

    "lint": "vue-cli-service lint",

    "prepublishOnly": "npm run lint && npm run build",

src/Playground.vue

deleted100644 → 0
+0 −254
Original line number Diff line number Diff line 
<template>

  <div style="display: flex;">

    <div style="height: 75vh; width: 50vw;">

      <l-map

        ref="map"

        v-model="zoom"

        v-model:zoom="zoom"

        :center="[47.41322, -1.219482]"

        @move="log('move')"

        @ready="onMapReady"

      >

        <l-tile-layer

          url="http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"

          layer-type="base"

          name="Stamen Watercolor"

          attribution="Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://creativecommons.org/licenses/by-sa/3.0'>CC BY SA</a>."

        />

        <l-tile-layer

          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

          layer-type="base"

          name="OpenStreetMap"

        ></l-tile-layer>



        <l-control-layers />



        <l-control-zoom

          position="bottomright"

          zoom-in-text="*"

          zoom-out-text="/"

        />

        <l-control-attribution

          position="topleft"

          :prefix="customAttributionPrefix"

        />

        <l-control-scale position="bottomleft" />



        <l-control class="leaflet-control leaflet-demo-control"

          >Hello, Map!</l-control

        >



        <l-marker

          :lat-lng="[50, 50]"

          draggable

          @moveend="log('moveend')"

          :options="{ riseOnHover: true, riseOffset: 300 }"

        >

          <l-tooltip>

            options

          </l-tooltip>

        </l-marker>

        <l-marker :lat-lng="[51, 51]"/>

        <l-marker :lat-lng="[51, 49]"/>

        <l-marker :lat-lng="[49, 51]"/>

        <l-marker :lat-lng="[49, 49]"/>



        <l-layer-group>

          <l-marker :lat-lng="[0, 0]" draggable @moveend="log('moveend')">

            <l-tooltip>

              lol

            </l-tooltip>

          </l-marker>



          <l-marker :lat-lng="[47.41322, -1.219482]">

            <l-icon :icon-url="iconUrl" :icon-size="iconSize" />

          </l-marker>

        </l-layer-group>



        <l-polyline

          :lat-lngs="[

            [47.334852, -1.509485],

            [47.342596, -1.328731],

            [47.241487, -1.190568],

            [47.234787, -1.358337],

          ]"

          color="green"

        />



        <l-polygon

          :lat-lngs="[

            [46.334852, -1.509485],

            [46.342596, -1.328731],

            [46.241487, -1.190568],

            [46.234787, -1.358337],

          ]"

          color="#41b782"

          :fill="true"

          :fillOpacity="0.5"

          fillColor="#41b782"

        />

        <l-rectangle

          :lat-lngs="[

            [46.334852, -1.509485],

            [46.342596, -1.328731],

            [46.241487, -1.190568],

            [46.234787, -1.358337],

          ]"

          :fill="true"

          color="#35495d"

        />

        <l-rectangle

          :bounds="[

            [46.334852, -1.190568],

            [46.241487, -1.090357],

          ]"

        >

          <l-popup>

            lol

          </l-popup>

        </l-rectangle>



        <l-polyline

          :lat-lngs="[

            [47.334852, -1.509485],

            [47.342596, -1.328731],

            [47.241487, -1.190568],

            [47.234787, -1.358337],

          ]"

          color="green"

        ></l-polyline>

        <l-circle-marker :lat-lng="[35.865, 12.865]" :radius="10" />



        <l-circle :lat-lng="[35.865, 12.865]" :radius="10000" color="green" />

        <l-geo-json :geojson="geojson"></l-geo-json>

      </l-map>

      <button @click="changeIcon">New kitten icon</button>

      <label for="attributionPrefix">Attribution prefix:</label>

      <input name="attributionPrefix" v-model="customAttributionPrefix" />

    </div>

    <div style="height: 75vh; width: 50vw;">

      <l-map

        v-model="zoom"

        v-model:zoom="zoom"

        :center="[47.41322, -1.219482]"

        @move="log('move')"

      >

        <l-wms-tile-layer

          v-for="layer in wmsLayers"

          :key="layer.name"

          :base-url="baseUrl"

          :layers="layer.layers"

          :visible="layer.visible"

          :format="layer.format"

          :transparent="layer.transparent"

          :name="layer.name"

          layer-type="base"

        ></l-wms-tile-layer>

      </l-map>

    </div>

  </div>

</template>

<script>

import {

  LMap,

  LIcon,

  LTileLayer,

  LMarker,

  LCircle,

  LCircleMarker,

  LControlAttribution,

  LControlLayers,

  LControlScale,

  LControlZoom,

  LControl,

  LTooltip,

  LPopup,

  LPolyline,

  LPolygon,

  LRectangle,

  LWmsTileLayer,

  LGeoJson,

  LLayerGroup,

} from "./components";



export default {

  components: {

    LMap,

    LIcon,

    LTileLayer,

    LMarker,

    LCircle,

    LCircleMarker,

    LControlAttribution,

    LControlLayers,

    LControlScale,

    LControlZoom,

    LControl,

    LTooltip,

    LPopup,

    LPolyline,

    LPolygon,

    LRectangle,

    LWmsTileLayer,

    LLayerGroup,

    LGeoJson,

  },

  data() {

    return {

      zoom: 2,

      iconWidth: 25,

      iconHeight: 40,

      geojson: null,

      baseUrl: "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",

      wmsLayers: [

        {

          name: "Weather Data",

          visible: true,

          format: "image/png",

          layers: "nexrad-n0r-900913",

          transparent: true,

          attribution: "Weather data © 2012 IEM Nexrad",

        },

      ],

      customAttributionPrefix: "lol",

    };

  },

  computed: {

    iconUrl() {

      return `https://placekitten.com/${this.iconWidth}/${this.iconHeight}`;

    },

    iconSize() {

      return [this.iconWidth, this.iconHeight];

    },

  },

  async created() {

    const response = await fetch(

      "https://rawgit.com/gregoiredavid/france-geojson/master/regions/pays-de-la-loire/communes-pays-de-la-loire.geojson"

    );

    this.geojson = await response.json();

  },

  methods: {

    log(a) {

      console.log(a);

    },

    changeIcon() {

      this.iconWidth += 2;

      if (this.iconWidth > this.iconHeight) {

        this.iconWidth = Math.floor(this.iconHeight / 2);

      }

    },

    onMapReady() {

      this.log(this.$refs.map);

    },

  },

};

</script>



<style>

.leaflet-demo-control {

  background: white;

  border: 1px solid steelblue;

  border-radius: 0.6em;

  padding: 0.2em;

}

</style>

src/playground.js

deleted100644 → 0
+0 −5
Original line number Diff line number Diff line 
import { createApp } from "vue";

import Playground from "./Playground.vue";

import "leaflet/dist/leaflet.css";



createApp(Playground).mount("#app");

src/playground/App.vue

+14 −0
Original line number Diff line number Diff line
@@ -3,7 +3,21 @@ 
    <div class="menu">

      <router-link to="/">Home</router-link>

      <router-link to="/feature-group">Feature Group</router-link>

      <router-link to="/circle">Circle</router-link>

      <router-link to="/circle-marker">CircleMarker</router-link>

      <router-link to="/control-attribution">Attribution</router-link>

      <router-link to="/control-custom-message">Custom Message</router-link>

      <router-link to="/control-layers">Layers</router-link>

      <router-link to="/control-scale">Scale</router-link>

      <router-link to="/control-zoom">Zoom</router-link>

      <router-link to="/geo-json">GeoJSON</router-link>

      <router-link to="/icon">Icon</router-link>

      <router-link to="/marker">Marker</router-link>

      <router-link to="/polygon">Polygon</router-link>

      <router-link to="/polyline">Polyline</router-link>

      <router-link to="/popups">Popups</router-link>

      <router-link to="/rectangle">Rectangle</router-link>

      <router-link to="/tooltips">Tooltips</router-link>

    </div>

    <div class="map-wrapper">

      <router-view />

src/playground/index.js

+29 −0
Original line number Diff line number Diff line
@@ -10,7 +10,36 @@ const routes = [ 
    path: "/feature-group",

    component: () => import("./views/FeatureGroup.vue"),

  },

  { path: "/circle", component: () => import("./views/Circle.vue") },

  {

    path: "/circle-marker",

    component: () => import("./views/CircleMarker.vue"),

  },

  {

    path: "/control-attribution",

    component: () => import("./views/ControlAttribution.vue"),

  },

  {

    path: "/control-custom-message",

    component: () => import("./views/ControlCustomMessage.vue"),

  },

  {

    path: "/control-layers",

    component: () => import("./views/ControlLayers.vue"),

  },

  {

    path: "/control-scale",

    component: () => import("./views/ControlScale.vue"),

  },

  { path: "/control-zoom", component: () => import("./views/ControlZoom.vue") },

  { path: "/geo-json", component: () => import("./views/GeoJSON.vue") },

  { path: "/icon", component: () => import("./views/Icon.vue") },

  { path: "/marker", component: () => import("./views/Marker.vue") },

  { path: "/polygon", component: () => import("./views/Polygon.vue") },

  { path: "/polyline", component: () => import("./views/Polyline.vue") },

  { path: "/popups", component: () => import("./views/Popups.vue") },

  { path: "/rectangle", component: () => import("./views/Rectangle.vue") },

  { path: "/tooltips", component: () => import("./views/Tooltips.vue") },

];



const router = createRouter({