Breaking News: Grepper is joining You.com. Read the official announcement!

vue 3 leaflet

Nodir Beshimov answered on November 8, 2023 Popularity 9/10 Helpfulness 2/10

answer vue 3 leaflet

vue 3 leaflet

Comment

<template>
  <div style="height:600px; width:800px">
    <p>vue-leaflet SSR Demo</p>
    <l-map :useGlobalLeaflet="false">
      <l-geo-json :geojson="geojson" :options="geojsonOptions" />
    </l-map>
  </div>
</template>

<script>
// DON'T load Leaflet components here!
// Its CSS is needed though, if not imported elsewhere in your application.
import "leaflet/dist/leaflet.css"
import { LMap, LGeoJson } from "@vue-leaflet/vue-leaflet";

export default {
  components: {
    LMap,
    LGeoJson,
  },
  data() {
    return {
      geojson: {
        type: "FeatureCollection",
        features: [
          // ...
        ],
      },
      geojsonOptions: {
        // Options that don't rely on Leaflet methods.
      },
    };
  },
  async beforeMount() {
    // HERE is where to load Leaflet components!
    const { circleMarker } = await import("leaflet/dist/leaflet-src.esm");

    // And now the Leaflet circleMarker function can be used by the options:
    this.geojsonOptions.pointToLayer = (feature, latLng) =>
      circleMarker(latLng, { radius: 8 });
    this.mapIsReady = true;
  },
};
</script>

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: www.npmjs.com

Tags: javascript leaflet

Link to this answer
Share Copy Link

Contributed on Nov 08 2023

Nodir Beshimov

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

vue 3 leaflet

Contents

More Related Answers

vue 3 leaflet

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.