A Vue.js component for Mapbox GL JS

Last update: Mar 21, 2022

Mapbox GL JS Vue.js

A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component.

Demo

Installation

Yarn

yarn add mapbox-gl-vue

NPM

npm install mapbox-gl-vue --save

Vue CDN

Download latest vue-mapbox-gl.min.js from https://github.com/phegman/vue-mapbox-gl/releases

Include using a <script> tag

<script src="vue-mapbox-gl.min.js"></script>

Including Mapbox GL JS

This package does not include the Mapbox GL JS and CSS files. See Mapbox GL JS installation guide here: https://www.mapbox.com/install/js/

Importing Mapbox GL JS with Webpack

If you decide to include Mapbox GL JS by installing it with Yarn/NPM you should use Shimming for it to work correctly.

webpack.config.js

const webpack = require('webpack')

plugins: [
  new webpack.ProvidePlugin({
    mapboxgl: 'mapbox-gl',
  }),
]

Projects setup with Vue CLI 3:

vue.config.js

const webpack = require('webpack')

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        mapboxgl: 'mapbox-gl',
      }),
    ],
  },
}

Setup

In the file you will be including the component:

<script>
import Mapbox from 'mapbox-gl-vue'

export default {
  components: { Mapbox },
}
</script>

In your template block:

<template>
  <div id="app">
    <mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
    />
  </div>
</template>

CSS

CSS needs to be added for the map to show up. The #map container needs a height and a width. Example:

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

Props

Vue.js Documentation https://vuejs.org/v2/guide/components.html#Props

access-token
Type: string
Required: true

Your access token is required for Mapbox to work. It can be obtained in the Mapbox Studio dashboard


map-options
Type: MapboxOptions
Required: true

Overview of available Mapbox options can be found here: https://www.mapbox.com/mapbox-gl-js/api/#map

container will default to map (giving the container an id of map). If you want to change this or use multiple map components on the same page simply set the container property.


nav-control
Type: NavigationControlOptions
Required: false
Default: { show: true, position: 'top-right' }

More information about navigation control here: https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol


geolocate-control
Type: GeolocateControlOptions
Required: false
Default: { show: false, position: 'top-left', options: {} }

More information about geolocate control here: https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol


scale-control
Type: ScaleControlOptions
Required: false
Default: { show: false, position: 'top-left', options: {} }

More information about scale control here: https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol


fullscreen-control
Type: FullscreenControlOptions
Required: false
Default: { show: false, position: 'top-right' }

More information about full screen control here: https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol


attribution-control
Type: AttributionControlOptions
Required: false
Default: { show: false, position: 'top-right' }

More information about full screen control here: https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol

Example

<template>
  <div id="app">
    <mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
      :geolocate-control="{
        show: true,
        position: 'top-left',
      }"
      :scale-control="{
        show: true,
        position: 'top-left',
      }"
      :fullscreen-control="{
        show: true,
        position: 'top-left',
      }"
    />
  </div>
</template>

Map Events

@map-init : This event is fired when the map is initialized. It can be used to integrate plugins.

All Mapbox GL JS events are available for use. List of events here: https://docs.mapbox.com/mapbox-gl-js/api/#map.event:resize

Map events can be used by adding the @map- prefix to the beginning of the Mapbox event name. For example for the click event @map-click can be used. All events are passed the mapboxgl Map instance as the first parameter and, if the event has one, the MapboxEvent as the second parameter.

For events that support specifying a layerId as documented here https://docs.mapbox.com/mapbox-gl-js/api/#map#on the layerId can be specified by using a colon to separate the event from the layerId. For example if you have a layer with an id of points the click event can be registered like so: @map-click:points

Geolocation Events

Geolocation events are available for use by adding the @geolocate- prefix to the beginning of the Mapbox event name. A list of Geolocation events can be found here: https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol.event:geolocate

Example

App.vue

<template>
  <div id="app">
    <mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
      :geolocate-control="{
        show: true,
        position: 'top-left',
      }"
      @map-load="loaded"
      @map-zoomend="zoomend"
      @map-click:points="clicked"
      @geolocate-error="geolocateError"
      @geolocate-geolocate="geolocate"
    />
  </div>
</template>

<script>
import Mapbox from 'mapbox-gl-vue'

export default {
  components: { Mapbox },
  methods: {
    loaded(map) {
      map.addLayer({
        id: 'points',
        type: 'symbol',
        source: {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [-77.03238901390978, 38.913188059745586],
                },
                properties: {
                  title: 'Mapbox DC',
                  icon: 'monument',
                },
              },
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [-122.414, 37.776],
                },
                properties: {
                  title: 'Mapbox SF',
                  icon: 'harbor',
                },
              },
            ],
          },
        },
        layout: {
          'icon-image': '{icon}-15',
          'text-field': '{title}',
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 0.6],
          'text-anchor': 'top',
        },
      })
    },
    zoomend(map, e) {
      console.log('Map zoomed')
    },
    clicked(map, e) {
      const title = e.features[0].properties.title
      console.log(title)
    },
    geolocateError(control, positionError) {
      console.log(positionError)
    },
    geolocate(control, position) {
      console.log(
        `User position: ${position.coords.latitude}, ${position.coords.longitude}`
      )
    },
  },
}
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

Plugins

Plugins (https://www.mapbox.com/mapbox-gl-js/plugins/) can be integrated using the map-init event that is fired when Mapbox is initialized. Below is an example:

<template>
  <div id="app">
    <mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
      :geolocate-control="{
        show: true,
        position: 'top-left',
      }"
      :scale-control="{
        show: true,
        position: 'top-left',
      }"
      :fullscreen-control="{
        show: true,
        position: 'top-left',
      }"
      @map-init="mapInitialized"
    />
  </div>
</template>

<script>
import Mapbox from 'mapbox-gl-vue'

export default {
  components: { Mapbox },
  methods: {
    initialized(map) {
      const Draw = new MapboxDraw()
      map.addControl(Draw)
    },
  },
}
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

Popups

Popups can be a bit tricky if you are trying to use Vue directives inside the popup content. This is because the popups are added to the DOM by Mapbox and not compiled by Vue. See below for one approach to solving this problem.

App.vue

<template>
  <div id="app">
    <mapbox
      access-token="your access token"
      :map-options="{
        style: 'mapbox://styles/mapbox/light-v9',
        center: [-96, 37.8],
        zoom: 3,
      }"
      @map-load="loaded"
      @map-click:points="clicked"
      @map-mouseenter:points="mouseEntered"
      @map-mouseleave:points="mouseLeft"
    />
  </div>
</template>

<script>
import Mapbox from 'mapbox-gl-vue'
import PopupContent from './PopupContent.vue'

export default {
  components: { Mapbox },
  methods: {
    loaded(map) {
      map.addLayer({
        id: 'points',
        type: 'symbol',
        source: {
          type: 'geojson',
          data: {
            type: 'FeatureCollection',
            features: [
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [-77.03238901390978, 38.913188059745586],
                },
                properties: {
                  title: 'Mapbox DC',
                  icon: 'monument',
                },
              },
              {
                type: 'Feature',
                geometry: {
                  type: 'Point',
                  coordinates: [-122.414, 37.776],
                },
                properties: {
                  title: 'Mapbox SF',
                  icon: 'harbor',
                },
              },
            ],
          },
        },
        layout: {
          'icon-image': '{icon}-15',
          'text-field': '{title}',
          'text-font': ['Open Sans Semibold', 'Arial Unicode MS Bold'],
          'text-offset': [0, 0.6],
          'text-anchor': 'top',
        },
      })
    },
    clicked(map, e) {
      if (e.features) {
        const coordinates = e.features[0].geometry.coordinates.slice()

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
          coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360
        }

        new mapboxgl.Popup()
          .setLngLat({ lng: coordinates[0], lat: coordinates[1] })
          .setHTML('<div id="vue-popup-content"></div>')
          .addTo(map)

        new PopupContent({
          propsData: { feature: e.features[0] },
        }).$mount('#vue-popup-content')
      }
    },
    mouseEntered(map) {
      map.getCanvas().style.cursor = 'pointer'
    },
    mouseLeft(map) {
      map.getCanvas().style.cursor = ''
    },
  },
}
</script>

<style>
#map {
  width: 100%;
  height: 500px;
}
</style>

PopupContent.vue

<template>
  <div>
    <h3>{{ feature.properties.title }}</h3>
    <button @click="popupClicked">Learn more</button>
  </div>
</template>

<script>
import Vue from 'vue'
export default Vue.extend({
  props: {
    feature: {
      required: true,
      type: Object,
    },
  },
  methods: {
    popupClicked() {
      alert('Learn more clicked')
    },
  },
})
</script>

Development

Install dependencies

yarn install

Start development server

This will start a dev server with HMR at localhost:8080.

ACCESS_TOKEN=yourAccessToken yarn dev

Linting

Please make sure all your code passes linting before opening a PR.

yarn lint

GitHub

https://github.com/phegman/vue-mapbox-gl
Comments
  • 1. Map canvas renders on only 50% of the width of the container!

    I am trying MapBox with Vue 2 and I cannot make the map take the full width of the container. It only renders on 50% width of the container.

    I have included the files in the head of my index.html as follows:

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
    

    I want the map in a component (Map.vue, I am using vue-router), so here is the code in Map.vue:

    Script: import Mapbox from 'mapbox-gl-vue';

    export default {
      components: {
         'mapbox': Mapbox
      }
    }
    

    Template:

        <mapbox access-token="pk.eyJ1Ijoic3BlZW5pY3Q....."
        :map-options="{
          style: 'mapbox://styles/mapbox/streets-v9',
          center: [-96, 37.8],
          zoom: 3
        }"
        :geolocate-control="{
          show: true, 
          position: 'top-left'
        }"
        :scale-control="{
          show: true,
          position: 'top-left'
        }"
        :fullscreen-control="{
          show: true,
          position: 'top-left'
        }">>
      </mapbox>
    

    Style:

    #map {
     width: 100%;
     height: 600px;
     position: absolute;
     margin:0;
     z-index:1;
    }
    

    I tried everything in the CSS id but it only renders the map in the right half of the width of the container, in the left one only the logo and the controls are displayed while the rest of the area is empty.

    screen shot 2017-09-14 at 1 33 21 pm

    Reviewed by zabeehkhan at 2017-09-14 09:04
  • 2. Vue-mapbox-gl and Nuxt?

    I'm trying to get this wrapper to work with Nuxt.js. If I try to import mapbox-gl I get a Reference error: self is not defined, because Nuxt.js is trying to render it server-side (as described here: https://github.com/mapbox/mapbox-gl-js/issues/4463). There they solved it by using require in a createMap method and by making a plugin so it doesn't get server side rendered. But none of these solutions seems to be working for this wrapper. Does anyone have any idea?

    Reviewed by evanzummeren at 2018-06-17 13:41
  • 3. How to bind markers to vue components

    How can I use computed properties, or store with mounted components bound to mapbox markers?

    I am mounting components to markers in a forEach loop, but I cannot change their content dynamically after mounting.

      const makerContent = Vue.extend(Marker)
    
      features.forEach(function(feature, index) {
        var parent = document.createElement('div')
            parent.classList.add("mapboxgl-marker")
        var child = document.createElement('div')
            child.classList.add("marker")
        parent.appendChild(child)
         const marker = new mapboxgl.Marker(parent)
         .setLngLat(feature.geometry.coordinates)
         .addTo(self.map)
    
        new makerContent({
          store: store,
          propsData: {
            feature: feature, 
          }
        }).$mount(child); 
      })
    

    Any suggestions?

    Reviewed by edanweis at 2017-10-29 22:26
  • 4. ReferenceError: mapboxgl is not defined

    Hi,

    I followed the steps to setup the component but get a reference error whenever it's mounted.

    [Vue warn]: Error in mounted hook: (found in )

    vue.esm.js?65d7:1447 ReferenceError: mapboxgl is not defined at VueComponent.mapInit (eval at (app.js:2504), :69:4) at VueComponent.boundFn [as mapInit] (eval at (app.js:727), :126:12) at VueComponent.mounted (eval at (app.js:2504), :58:20) at callHook (eval at (app.js:727), :2274:21) at Object.insert (eval at (app.js:727), :2953:7) at invokeInsertHook (eval at (app.js:727), :4959:28) at Vue$3.patch [as patch] (eval at (app.js:727), :5123:5) at Vue$3.Vue._update (eval at (app.js:727), :2034:19) at Vue$3.updateComponent (eval at (app.js:727), :2157:10) at Watcher.get (eval at (app.js:727), :2468:25)

    Any idea what could be causing the issue?

    I'm using the webpack template from vue-cli.

    Thanks,

    Pyt

    Reviewed by pyttroll at 2017-04-21 15:12
  • 5. Major housekeeping

    This pull request has the following changes

    • [x] upgrade babel from 6 to 7
    • [x] upgrade webpack from 2 to 4
    • [x] add editorconfig for maintaining code standards
    • [x] update the coding style in the template, uses Vue's recommended style
    • [x] add VueLoaderPlugin() which is required in webpack 4 configuration
    • [x] upgrade dev dependencies. uses all the latest technologies.
    Reviewed by vinayakkulkarni at 2019-07-17 11:49
  • 6. The computed property "accessToken" is already defined as a prop.

    I'm using accessToken as a computed property across my app for authentication. I'm not sure if there is a way to scope accessToken to the Mapbox component?

    Reviewed by PatrickHeneise at 2019-01-25 09:46
  • 7. How to add markers to the map

    Hello, I noticed in one of the closed issues, it was possible to add markers which are connected to the Vue data field. I'm working with an app that only needs static markers created when the map loads, but I couldn't find the method to actually create these elements in the documentation for this module or through research online. Could you possibly direct me to a source that covers this process?

    Reviewed by Waidhoferj at 2018-08-31 21:38
  • 8. How do you access Geolocation (or similar) events?

    It's not clear how one would access the geolocation control's events through Vue. (https://www.mapbox.com/mapbox-gl-js/api/#geolocatecontrol.event:geolocate) I thought it would be as simple as doing @map-geolocate, @map-trackuserlocationend but neither bubbled up.

    Reviewed by toadkicker at 2018-05-14 04:42
  • 9. insert popup failed - vue as module

    I got this warning on popup. I used the module bundler way, not the cdn link.

    You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

    I tried to extract the popupcontent component in .vue component but failed to insert it into dom. It should be possible since you wrote it in doc.

    The popupContent component can also be extracted to a separate .vue file to clean things up.

    Could you show this way ? thanks for help

    Reviewed by ludoo0d0a at 2018-01-08 22:49
  • 10. RTL text not supported

    Hi, I'm having issues with RTL languages display. Mapbox docs say I should use mapbox-gl-rtl-text.js plugin, which is initialized like this:

    mapboxgl.accessToken = 'xxx';
    mapboxgl.setRTLTextPlugin('https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.0/mapbox-gl-rtl-text.js');
    
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [44.3763, 33.2788],
        zoom: 11
    });
    

    Can you please help me initialize this via vue-mapbox-gl? thanks!

    Reviewed by shaniqwa at 2018-12-24 12:21
  • 11. map.fly to

    hello, I'm having some trouble getting the map to center on new coordinates. I can't just map.flyto like the mapbox tutorials say and when I try modifying the prop I pass down it doesn't update the map. How would I go about changing the coords and zoom?
    thanks so much, Royce B.

    Reviewed by Durban-Designer at 2017-10-20 03:28
  • 12. Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-04-28 21:09
  • 13. Bump url-parse from 1.4.7 to 1.5.10

    Bumps url-parse from 1.4.7 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-26 17:19
  • 14. Bump follow-redirects from 1.9.0 to 1.14.8

    Bumps follow-redirects from 1.9.0 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-12 20:10
  • 15. Bump ajv from 6.10.2 to 6.12.6

    Bumps ajv from 6.10.2 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2022-02-12 02:43
  • 16. Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2021-08-11 04:03
  • 17. How to add custom icons with Markers?

    There is a way to add custom image for all the markers at once using

    map.loadImage("imageURL",function(error, image) {
    if (error) throw error; 
    });
    

    But what if I want different images for each geoJson data?

    Reviewed by ftahery-teleo at 2021-06-07 14:12
A cloned & maintained version of vue-mapbox

V-Mapbox ?? Combine powers of Vue.js and Mapbox GL JS NOTE: This is a maintained version of vue-mapbox V-Mapbox is wrapper around Mapbox GL JS library

May 15, 2022
Wrapper for vue-mapbox-geocoder

v-mapbox-geocoder ?? v-mapbox plugin for mapbox-gl-geocoder support. Setup First of all you need to install mapbox-gl-geocoder and v-mapbox. See v-map

Sep 18, 2021
Vuejs 2 components for interacting with mapbox-gl-js

VueMapbox Combine powers of Vue.js and Mapbox Gl JS Vue-mapbox is wrapper around Mapbox GL JS library that provides vueish-way to interact with the ma

May 16, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Apr 24, 2022
Google maps component for vue with 2-way data binding

CONTRIBUTORS NEEDED! It's been increasingly difficult for me to make time to maintain this project. My projects at work have also gradually migrated a

May 24, 2022
Choropleth Map component for Vue.js

vue-choropleth Vue components to display a choropleth map given a certain GeoJSON and another datasource to show information from. Using Vue2Leaflet H

Feb 12, 2022
vue google map custom marker component
vue google map custom marker component

vue2-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an adaptation of the Goog

May 17, 2022
Google maps component for vue with 2-way data binding

vue-google-maps Demo: Demo in production Showcase with a lot of features Presentation If you want to write google map this way : <map :center="{lat:

May 10, 2022
A Vue JS component for displaying dynamic data on a world map.

This is no longer being maintained, please do not open issues or PRs. Vue World Map A Vue JS Component for displaying dynamic data on a world map. Map

May 10, 2022
Yandex Maps Component for VueJS
Yandex Maps Component for VueJS

vue-yandex-maps Documentation: RU, EN Contributors ✨ Thanks goes to these wonderful people (emoji key): Wormaster ?? Nikitenko Andrey ?? Kamil ?? Alex

May 21, 2022
a simple component to generate an static google map
a simple component to generate an static google map

vue-static-map a simple component to generate an static google map Google Documentation Demo SandBox JSBin example Requirements Vue 2.X.X Usage Instal

May 17, 2022
A wrapper component for consuming Google Maps API built on top of VueJs v2.

A wrapper component for consuming Google Maps API built on top of VueJs v2. Fork of the popular vue-google-maps plugin.

May 14, 2022
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...
🔍 Google Place Autocomplete Search - Renderless component + Wrappers for Bulma, Bootstrap and more...

vue-custom-google-autocomplete Installation You need Vue.js version 2.0+ and an Google PLACE API key. This plugin is a renderless component. It comes

Apr 11, 2022
This component allows you to display custom HTML content on the map using Overlay
This component allows you to display custom HTML content on the map using Overlay

vue3-gmap-custom-marker This component allows you to display custom HTML content on the map using Overlay. This component is an update (a fork) from e

Apr 1, 2022
vue2 component for tf-leaflet-editable-polyline

vue2 component for tf-leaflet-editable-polyline

Oct 10, 2021
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

office-map Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable загрузка из JSON информации о

May 9, 2022
Vue 2 components for Leaflet maps
Vue 2 components for Leaflet maps

Vue2Leaflet Vue2Leaflet is a JavaScript library for the Vue framework that wraps Leaflet making it easy to create reactive maps. How to install npm in

May 24, 2022
Baidu Map components for Vue 2.x
Baidu Map components for Vue 2.x

VUE BAIDU MAP Baidu Map components for Vue 2.x Languages 中文 English Documentation https://dafrok.github.io/vue-baidu-map Get Start Installation npm i

May 24, 2022
Web map Vue components with the power of OpenLayers

VueLayers Web map Vue components with the power of OpenLayers Overview VueLayers is components library that brings the powerful OpenLayers API to the

May 19, 2022