soal / vue-mapbox

Vuejs 2 components for interacting with mapbox-gl-js
https://soal.github.io/vue-mapbox
MIT License
474 stars 147 forks source link

Provide a minimum and complete sample of MglGeojsonLayer #211

Open getJv opened 4 years ago

getJv commented 4 years ago

Hello guys, someone here has a minimal sample of you to use the MglGeojsonLayer?

The sample provided at MglGeojsonLayer it's incomplete .the geoJsonSource and geoJsonLayer data properties are missing and I can't figure out the correct format.

Thanks in advance.

cmoine commented 3 years ago

I have found a working example with a URL (this is for French area...):

<template>
    <div id="mapid">
        <MglMap accessToken="..."
                mapStyle="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"
                :center="[3, 47]"
                :zoom="5"
        :minZoom="1"
        :maxZoom="19"
                container="mapid">
            <MglGeojsonLayer
                type="fill"
                sourceId="departements"
                :source="departementsSource"
                layerId="departements-contours-layer"
                :layer="departementsContoursLayer"
            />
        </MglMap>
    </div>
</template>

<script>
import Mapbox from "mapbox-gl";
import { MglMap, MglGeojsonLayer } from "vue-mapbox";

export default {
  components: {
    MglMap,
    MglGeojsonLayer
  },
  data() {
    return {
        height: 0,
        departementsSource: {
          data: "/departements-100m.geojson"
        },
        departementsContoursLayer: {
          id: 'departements-contours-layer',
          source: 'departements',
          type: 'line',
          maxzoom: 9,
          paint: {
            "line-width": [
              'case',
              ["boolean", ["feature-state", "hover"], false],
              3,
              1
            ]
          }
        }
    };
  },
  created() {
    // We need to set mapbox-gl library here in order to use it in template
    this.mapbox = Mapbox;
  }
};
</script>

You can find "geojson" file here: https://github.com/etalab/DVF-app/tree/master/static/donneesgeo

I hope this can help!