Commit d859588a authored by Michael Underwood's avatar Michael Underwood
Browse files

Playground code cleanup

parent 88eab3cd

README.md

+13 −2
Original line number Diff line number Diff line
@@ -6,7 +6,7 @@ This is a Beta version! And may yet be unstable! If you want to help, please rea 
[issue](https://github.com/vue-leaflet/vue-leaflet/issues) or on [discord](https://discord.gg/uVZAfUf),

or join the [discussions](https://github.com/vue-leaflet/vue-leaflet/discussions).



## What Works

## What works



- LCircle

- LCircleMarker
@@ -85,7 +85,18 @@ export default { 
<style></style>

```



### Server-side Rendering (SSR)

### Component playground



To see the [component playground](https://github.com/vue-leaflet/vue-leaflet/tree/master/src/playground/views) in action,

clone this repo and run the local devserver, then visit localhost:8080,

```bash

git clone https://github.com/vue-leaflet/vue-leaflet.git

cd vue-leaflet

yarn

yarn serve

```



### Server-side rendering (SSR)



Note that while the vue-leaflet library has the option of enabling SSR, **Leaflet itself does not**.

src/playground/views/ControlCustomMessage.vue

+6 −2
Original line number Diff line number Diff line
@@ -5,7 +5,9 @@ 
      layer-type="base"

      name="OpenStreetMap"

    ></l-tile-layer>

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

    <l-control

      class="leaflet-control leaflet-demo-control"

      position="bottomleft"

      >Hello, Map!</l-control

    >

  </l-map>
@@ -27,6 +29,8 @@ export default { 
  background: white;

  border: 1px solid steelblue;

  border-radius: 0.6em;

  padding: 0.5em;

  padding: 1em;

  font-size: large;

  font-style: italic;

}

</style>

src/playground/views/Icon.vue

+1 −1
Original line number Diff line number Diff line 
<template>

  <div style="width: 100%; height: 100%;">

  <div style="width: 100%; height: 100%">

    <l-map ref="map" v-model:zoom="zoom" :center="[47.41322, -1.219482]">

      <l-tile-layer

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

src/playground/views/Popups.vue

+7 −21
Original line number Diff line number Diff line
@@ -7,16 +7,12 @@ 
    ></l-tile-layer>



    <l-marker :lat-lng="[41.8329, -87.7327]">

      <l-popup>

        Hi! I'm staying here on this location!

      </l-popup>

      <l-popup> Hi! I'm staying here on this location! </l-popup>

    </l-marker>



    <l-layer-group>

      <l-marker :lat-lng="coordinates" draggable>

        <l-popup>

          Hi! You can drag me around!

        </l-popup>

        <l-popup> Hi! You can drag me around! </l-popup>

      </l-marker>

    </l-layer-group>
@@ -32,9 +28,7 @@ 
      :fillOpacity="0.5"

      fillColor="#41b782"

    >

      <l-popup>

        Hi! I'm a polygon, nice to meet you!

      </l-popup>

      <l-popup> Hi! I'm a polygon, nice to meet you! </l-popup>

    </l-polygon>



    <l-polyline
@@ -44,9 +38,7 @@ 
      ]"

      color="green"

    >

      <l-popup>

        Hey! Polyline here, at your service!

      </l-popup>

      <l-popup> Hey! Polyline here, at your service! </l-popup>

    </l-polyline>



    <l-rectangle
@@ -59,21 +51,15 @@ 
      :fill="true"

      color="#35495d"

    >

      <l-popup>

        Good day! Rectangle is my name!

      </l-popup>

      <l-popup> Good day! Rectangle is my name! </l-popup>

    </l-rectangle>



    <l-circle :lat-lng="[41.4329, -87.7327]" :radius="10000" color="green">

      <l-popup>

        Hi! I'm a green Circle!

      </l-popup>

      <l-popup> Hi! I'm a green Circle! </l-popup>

    </l-circle>



    <l-circle-marker :lat-lng="[41.4329, -87.95]" :radius="20">

      <l-popup>

        Hi! You can call me Circle Marker!

      </l-popup>

      <l-popup> Hi! You can call me Circle Marker! </l-popup>

    </l-circle-marker>

  </l-map>

</template>

src/playground/views/Tooltips.vue

+7 −21
Original line number Diff line number Diff line
@@ -7,16 +7,12 @@ 
    ></l-tile-layer>



    <l-marker :lat-lng="[41.8329, -87.7327]">

      <l-tooltip>

        Hi! I'm staying here on this location!

      </l-tooltip>

      <l-tooltip> Hi! I'm staying here on this location! </l-tooltip>

    </l-marker>



    <l-layer-group>

      <l-marker :lat-lng="coordinates" draggable>

        <l-tooltip>

          Hi! You can drag me around!

        </l-tooltip>

        <l-tooltip> Hi! You can drag me around! </l-tooltip>

      </l-marker>

    </l-layer-group>
@@ -32,9 +28,7 @@ 
      :fillOpacity="0.5"

      fillColor="#41b782"

    >

      <l-tooltip>

        Hi! I'm a polygon, nice to meet you!

      </l-tooltip>

      <l-tooltip> Hi! I'm a polygon, nice to meet you! </l-tooltip>

    </l-polygon>



    <l-polyline
@@ -44,9 +38,7 @@ 
      ]"

      color="green"

    >

      <l-tooltip>

        Hey! Polyline here, at your service!

      </l-tooltip>

      <l-tooltip> Hey! Polyline here, at your service! </l-tooltip>

    </l-polyline>



    <l-rectangle
@@ -59,21 +51,15 @@ 
      :fill="true"

      color="#35495d"

    >

      <l-tooltip>

        Good day! Rectangle is my name!

      </l-tooltip>

      <l-tooltip> Good day! Rectangle is my name! </l-tooltip>

    </l-rectangle>



    <l-circle :lat-lng="[41.4329, -87.7327]" :radius="10000" color="green">

      <l-tooltip>

        Hi! I'm a green Circle!

      </l-tooltip>

      <l-tooltip> Hi! I'm a green Circle! </l-tooltip>

    </l-circle>



    <l-circle-marker :lat-lng="[41.4329, -87.95]" :radius="20">

      <l-tooltip>

        Hi! You can call me Circle Marker!

      </l-tooltip>

      <l-tooltip> Hi! You can call me Circle Marker! </l-tooltip>

    </l-circle-marker>

  </l-map>

</template>