🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

Related tags

vue mapbox-gl-js
Overview

🗺 Vue Mapbox GL

NPM Version Dependency Status devDependency Status

A small components library to use Mapbox GL in Vue.

Installation & usage

Have a look at the small guide for information on how to setup a simple map.

Components

The following components are available:

Component Description Doc.
MapboxMap Display a map with the given style.
MapboxMarker Display a simple or custom marker.
MapboxCluster Display a GeoJSON as clusters.
MapboxGeocoder Display a geocoder search input with the @mapbox/mapbox-gl-geocoder plugin.
MapboxImage Load an image to be used on the map.
MapboxImages Load multiple images to be used on the map.
MapboxLayer Display a layer on the map.
MapboxNavigationControl Display the map's navigation controls
MapboxPopup Display a popup on the map
MapboxSource Load a source of data to be used on the map

To do

  • Add tests for each component
  • Write a detailed documentation

Contributing

Installation

# Clone the project
git clone [email protected]:studiometa/vue-mapbox-gl.git
# Cd in the repository
cd vue-mapbox-gl
# Install dependencies
npm i

Useful commands

# Build for deployment
npm run build
# Test before deployment
npm run test
# Lint files
npm run lint
# Fix linting errors
npm run fix

Note

This project is a rewrite of a fork of openearth/vue2mapbox-gl and is published under the GNU GPL 3 license.

Issues
  • Add support for `GeolocateControl`

    Add support for `GeolocateControl`

    Custom use it's pretty straight forward but it would be great if it was available as a component and it dealt with everything like MapboxNavigationControl does.

    https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol

    enhancement 
    opened by hacknug 5
  • get data from selected autocomplete MapboxGeocoder

    get data from selected autocomplete MapboxGeocoder

    <template>
      <mapbox-geocoder :access-token="accesstoken"
       @mb-results="onComplete" 
       />
    </template>
    
    <script>
    //import mapboxgl from 'mapbox-gl';
    import { MapboxGeocoder } from '@studiometa/vue-mapbox-gl';
    import "@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css";
    export default {
      name: "geocoder",
      components: {
      //  mapboxgl,
     MapboxGeocoder
      },
    
      data() {
        return {
           types: "country,region,place,postcode,locality,neighborhood,address,poi", 
          accesstoken: "xxx.xxx.xxx",
          
        };
      },
      methods: {
        onComplete(response) {
          console.log(response)
        },
      },
    };
    </script>
    
    good first issue question 
    opened by east87 3
  • MapboxGeolocateControl not exported into build

    MapboxGeolocateControl not exported into build

    Hello, the new MapboxGeolocateControl is not exported from the src/components/index.js file, so it is not available in the last build (1.3.1). I don't know enough Vuepress to understand why the demo is working,

    Btw, thanks for all the updates you made these last days !

    bug 
    opened by FrankySnow 3
  • Add support for

    Add support for "visualizePitch" option in MapboxNavigationControl

    Hi, the prop visualizePitch in MapboxNavigationControl is missing.

    It would be great to add it, or to provide a generic options prop to allow for options that are not yet implemented to be used (the same strategy chosen in MapboxGeocoder).

    Link : https://docs.mapbox.com/mapbox-gl-js/api/markers/#navigationcontrol

    Thanks !

    enhancement 
    opened by FrankySnow 3
  • Bump electron from 5.0.6 to 7.2.4

    Bump electron from 5.0.6 to 7.2.4

    Bumps electron from 5.0.6 to 7.2.4.

    Release notes

    Sourced from electron's releases.

    electron v7.2.4

    Release Notes for v7.2.4

    Fixes

    • Fixed Promise timeout issue when running Electron as Node. #23324
    • Fixed a use-after-free error that could happen if a Tray was destroyed while showing a custom context menu. #23182
    • Fixed an issue where windows without nativeWindowOpen: true could invoke the non-native-open path. #23224
    • Fixed memory leak when using contextBridge with sandbox=true. #23232
    • MacOS VoiceOver is now able to find its way back into web contents after it navigated "out" of an application. #23174

    electron v7.2.3

    Release Notes for v7.2.3

    Fixes

    • Security: Ensure proxy object is created in the correct context a9bead22

    electron v7.2.2

    Release Notes for v7.2.2

    Fixes

    • Fixed a potential crash on invalid zoomFactor values when setting the zoom factor of a webpage. #22710
    • Fixed an issue with maximizable state persistence of BrowserWindows on macOS. #23019
    • Fixed an issue with possible creation of a messageBox which cannot be dismissed on macOS. #23089
    • Fixed an occasional crash when closing all BrowserWindows. #23024
    • Security: Backported fix for CVE-2020-6426: inappropriate implementation in V8. #23043
    • Security: backported a fix for crbug.com/1065094. #23059
    • Security: backported fix for a potential buffer overrun in WebRTC audio encoding. #23037
    • Security: backported fix for site isolation bypass in dedicated workers. #23040
    • Security: backported the fix to CVE-2020-6452: potential container-overflow in MediaStream mojo. #23044

    Other Changes

    • Security: Backport fix for buffer underflow in DWrite. #22979
    • Security: Backported fix for use after free in file chooser. #22981
    • Security: backport fix for CVE-2020-6451: Use after free in WebAudio. #22945
    • Security: backport fix for use after free in VideoEncodeAccelerator. #22983
    • Security: backported fix for CVE-2019-20503: Out of bounds read in usersctplib. #22986
    • Security: backported fix for CVE-2020-6422: Use after free in WebGL. #23017
    • Security: backported fix for CVE-2020-6423: Use after free in audio. #23048
    • Security: backported fix for CVE-2020-6427: Use after free in audio. #23015
    • Security: backported fix for CVE-2020-6428: Use after free in audio. #23013
    • Security: backported fix for CVE-2020-6429: Use after free in audio. #23011
    • Security: backported fix for CVE-2020-6449: Use after free in audio. #23009
    • Security: backported fix for use-after-poison in WebAudio (crbug.com/1023810). #22869
    • Security: backported fix for use-after-poison in WebAudio. #22943
    Commits
    • 0552e0d Bump v7.2.4
    • c87b474 refactor: port window-setup to use ctx bridge instead of being run in the mai...
    • 69683de fix: use Node's microtasks policy in node_main.cc (#23154) (#23324)
    • 8148b76 style: use build/include_directory for NOLINT (#23266) (#23304)
    • 7dfcb5e fix: block custom window.open when nativeWindowOpen is true (#23188) (#23224)
    • 0b3bf1e fix: do not mutate ipc instances across contexts (#23239)
    • fd529ac fix: do not allow child windows to specify their own preload script (#23229)
    • 3909001 fix: ensure that functions are not retained beyond their context being releas...
    • 039be2e build: improve patch filename remembering (#23070) (#23184)
    • fb6f604 fix: heap-use-after-free in tray.popUpContextMenu (#22842) (#23182)
    • 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.

    dependencies 
    opened by dependabot[bot] 2
  • Add documentation for MapboxGeocoder

    Add documentation for MapboxGeocoder

    • Add documentation for the MapboxGeocoder component
    • Add the events of the MapboxGeocoder class to the MapboxGeocoder component
    documentation 
    opened by perruche 2
  • Vue 3 compatibilty

    Vue 3 compatibilty

    Hi, is the library already compatible with Vue 3 ? If not, are there any plans on supporting Vue 3 ? Thanks !

    opened by FrankySnow 2
  • Feature/component geolocate control

    Feature/component geolocate control

    Add the MapboxGeolocateControl component

    MapboxGL geolocateControl documentation

    Available props:

    • positionOptions : A Geolocation API PositionOptions object.
    • fitBoundsOptions: A fitBounds options object to use when the map is panned and zoomed to the user's location.
    • trackUserLocation: If true the Geolocate Control becomes a toggle button and when active the map will receive updates to the user's location as it changes.
    • showAccuracyCircle: if showUserLocation is true , a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. Always disabled when showUserLocation is false.
    • showUserLocation: By default a dot will be shown on the map at the user's location. Set to false to disable.
    • position: The position for the geolocation control button, by default top-right.

    Available events:

    • mb-trackuserlocationstart : Emitted when the geolocation is started.
    • mb-trackuserlocationend: Emitted when the geolocation is ended.
    • mb-trackuserlocationgeolocate: Emitted on each Geolocation API position update which returned as success.
    • mb-error: Emitted on each Geolocation API position update which returned as an error.
    • mb-outofmaxbounds: Emitted on each Geolocation API position update which returned as success but user position is out of map maxBounds.

    Basic usage exemple:

    <mapbox-map
      access-token="..."
      map-style="mapbox://styles/mapbox/streets-v11">
      <mapbox-geolocate-control />
    </mapbox-map>
    

    resolve #11

    documentation enhancement 
    opened by perruche 1
  • Replace @mb-ready with @mb-created in the docs for MapboxMap

    Replace @mb-ready with @mb-created in the docs for MapboxMap

    Hello, the docs for MapboxMap mention a @mb-ready event that is not fired, the right one is @mb-created.

    https://vue-mapbox-gl.meta.fr/components/MapboxMap.html#accessing-the-mapbox-instance

    documentation 
    opened by FrankySnow 1
  • Duplicate install way

    Duplicate install way

    Think you meant yarn or npm

    image

    opened by vduggen-velo 1
  • Add an exemple on how to load a custom marker image for the StoreLocator component

    Add an exemple on how to load a custom marker image for the StoreLocator component

    Add a section on the documentation on "how to load a custom marker image for the StoreLocator component"

    Add the important details:

    • image must be png
    • Adapt icon-size param if you load a png in size 2x or 3x
    • icon-image param must use the same name as in addImage fn

    Code:

    <template>
        <store-locator
          :items="items"
          :mapbox-cluster="{
            'unclustered-point-layer-type': 'circle',
            'unclustered-point-layer-type': 'symbol',
            'unclustered-point-layout': {
              'icon-image': 'pin',
              'icon-size': 1
            },
            'unclustered-point-paint': {},
          }"
          access-token="..."
          :mapbox-map="{
            mapStyle: '...',
            center: [ 2.0, 48.0 ],
            zoom: 1,
          }"
          @map-created="onMapCreated">
          <!-- template -->
        </store-locator>
    </template>
    
    <script>
      export default {
        props: {
          items: {
            type: Array,
            required: true,
          },
       },
        methods: {
          onMapCreated(map) {
           const imgPath = 'imag.png';
            map.loadImage(imagePath, (error, image) => {
              if (error) { throw error; }
              map.addImage('pin', image);
            });
          },
        },
      };
    </script>
    
    documentation enhancement 
    opened by perruche 0
  • Fix 'position' Prop on MapboxGeolocateControl

    Fix 'position' Prop on MapboxGeolocateControl

    Position-Prop won't be detected as property and so isn't passed to mapbox.

    opened by mdunisch 1
  • Prop validation fix

    Prop validation fix

    When trying to build a project using this in Gridsome getting the following error: ReferenceError: HTMLElement is not defined at Object.9YpO (node_modules/@studiometa/vue-mapbox-gl/dist/components/MapboxMarker.js:27:0)

    HTMLElement is not a valid Prop type as seen here https://vuejs.org/v2/guide/components-props.html#Prop-Validation https://v3.vuejs.org/guide/component-props.html#type-checks

    opened by Gs-Joel 2
  • Update all npm dependencies (2021-04-02)

    Update all npm dependencies (2021-04-02)

    This is your weekly update of all npm dependencies. Please take a good look at what changed and the test results before merging this pull request.

    What changed?

    ✳️ eslint-plugin-vue (7.7.0 → 7.8.0, minor) · Repo · Release · Diff

    ✳️ @babel/preset-env (7.13.9 → 7.13.12, patch) · Repo · Changelog · Release · Diff


    Depfu Status

    Depfu will only send you the next scheduled PR once you merge or close this one.

    All Depfu comment commands
    @​depfu refresh
    Rebases against your default branch and redoes this update
    @​depfu recreate
    Recreates this PR, overwriting any edits that you've made to it
    @​depfu merge
    Merges this PR once your tests are passing and conflicts are resolved
    @​depfu close
    Closes this PR and deletes the branch
    @​depfu reopen
    Restores the branch and reopens this PR (if it's closed)
    depfu 
    opened by depfu[bot] 0
  • StoreLocator component improvements

    StoreLocator component improvements

    • [x] Sort the items in the listing by their distance to the center of the map
    • [ ] Add an option to disable/enable automatic filtering of the items in view (à la Airbnb)
    • [ ] Pass the filterFeaturesInView method as a slot props in each slot to allow using it on demand
    • [ ] Add a props to pass an initial search query string to the MapboxGeocoder component
    enhancement 
    opened by titouanmathis 0
  • Add @mb-clear event in MapboxGeocoder

    Add @mb-clear event in MapboxGeocoder

    Hello, according to the docs for mapbox-gl-geooder, there is a clear event that is "Emitted when the input is cleared".

    That would translate to a @mb-clear event for this component. Could you please add it in a next release ?

    Thanks for taking this into consideration

    opened by FrankySnow 0
  • Add the ability to programmatically trigger a Geolocation with MapboxGeolocateControl

    Add the ability to programmatically trigger a Geolocation with MapboxGeolocateControl

    Hi, it would be useful to implement the trigger() method of the GeolocateControl (https://docs.mapbox.com/mapbox-gl-js/api/markers/#geolocatecontrol#trigger) in the MapboxGeolocateControl component.

    We could provide a way to access the Control instance outside of the component, just like we can access the Mapbox instance via [email protected]~~ @mb-created. Alternatively, maybe that a prop could do the job.

    Thanks in advance for taking this into consideration !

    enhancement 
    opened by FrankySnow 0
  • Display better errors when components aren't wrapped in <mapbox-map>

    Display better errors when components aren't wrapped in

    This could be usefull to have better error display, especially since all mapbox child components are supposed to be use inside the mapbox-map component :

    This exemple

    <mapbox-map>
    </mapbox-map>
    <mapbox-marker>
    </mapbox-marker>
    

    will through TypeError: "this.$map is not a function", referencing the injectMap mixin

    A type error like : "Make sure all your mapbox components are wrapped inside a " could be easier to understand.

    opened by perruche 0
Releases(1.4.7)
  • 1.4.7(Feb 22, 2021)

    Fixed

    • Fix a bug where paint and layout options could not be reset (d56e69b)
    • Fix installation instructions (#28, 1ebf41b)

    Added

    • Add examples to the MapboxCluster component documentation (3510524)
    Source code(tar.gz)
    Source code(zip)
  • 1.4.6(Jan 5, 2021)

  • 1.4.5(Jan 5, 2021)

    Fixed

    • Sort the list items by their distance to the center of the map (#27, a47ed7b)
    • Add missing event propagation from the MapboxCluster and MapboxMap components (#27, 18740e5)
    Source code(tar.gz)
    Source code(zip)
  • 1.4.4(Dec 23, 2020)

  • 1.4.3(Dec 23, 2020)

  • 1.4.2(Dec 23, 2020)

  • 1.4.1(Dec 11, 2020)

  • 1.4.0(Dec 11, 2020)

  • 1.3.3(Oct 16, 2020)

    Added

    • Add an ESM build (2ebae94, #24)
    • Add ESM builds for each components (2ebae94, #24)

    Removed

    • Remove the ResizeObserver polyfill (55407db)

    Fixed

    • Fix the doc for the mb-created event of the MapboxMap component (fd03a9f, #20)
    • Fix server-side rendering for the documentation (bb9f87a)
    Source code(tar.gz)
    Source code(zip)
  • 1.3.2(Sep 18, 2020)

  • 1.3.1(Sep 16, 2020)

  • 1.3.0(Sep 15, 2020)

    Added

    • Synchronize the components props with [email protected] (#16, 109d6f3)
    • Add documentation for the MapboxGeocode component (#13, 6b07105)
    • Add a GeolocateControl component (#12, 171c7f7)
    • Add tests and publication to NPM via Github Actions (#6, 477bb73)

    Changed

    • Update mapbox-gl in the peerDependencies to 1.12.0
    Source code(tar.gz)
    Source code(zip)
  • 1.2.1(May 18, 2020)

  • 1.2.0(Jan 23, 2020)

    Added

    • Add a renderless props to the MapboxPopup component (e2bf4e1)
    • Add the new props and examples to the doc (432142d)
    • Add missing slots documentation for the MapboxMap component (d05e4b3)
    • Add line highlights to improve lisibility (72347d5)

    Changed

    • Improve the handling of the mapbox-gl styles (68b7dde)

    Fixed

    • Fix the popup slot of the MapboxMarker component (9294430)
    • Fix a broken link to the Mapbox GL documentation (ffbc4fb)
    Source code(tar.gz)
    Source code(zip)
  • 1.1.2(Jan 23, 2020)

    Changed

    • Change mentions of yarn to npm inside the README (07df3d7)
    • Update the main README to check the newly documented components (a6d9a0c)

    Added

    • Add documentation for the MapboxPopup component (845016c)
    • Add documentation for the MapboxNavigationControl component (8596c58)
    Source code(tar.gz)
    Source code(zip)
  • 1.1.1(Nov 18, 2019)

  • 1.1.0(Nov 18, 2019)

    Added

    • Add a MapboxImages component to load multiple images at once (2de44ae)
    • Add repository informations to the package.json (943316b)

    Changed

    • Switch from Yarn to NPM (c802d5d)

    Fixed

    • Fix the MapboxImage loading management (4e7a016)
    • Remove sources tied to a layer when the layer is removed (d947404)

    Security

    • Bump eslint-utils from 1.3.1 to 1.4.3 (2be6df8)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.8(Sep 26, 2019)

  • 1.0.7(Sep 6, 2019)

  • 1.0.6(Sep 6, 2019)

    Fixed

    • Fix the ES6 → ES5 build configuration (29b3108)
    • Fix the main readme.md documentation links (ecc4d89)

    Improved

    • Add a list of components to the main readme file (ecc4d89)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.5(Jul 11, 2019)

  • 1.0.4(Jul 10, 2019)

    Fixed

    • Fix the builds requirements of external dependencies (ddb489a)
    • Fix the props binding (96e3887, cc48d39)

    Added

    • Add documentation (f4a8d8c, dd251c2)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.3(Jul 4, 2019)

  • 1.0.2(Jul 4, 2019)

    Added

    • Run tests in the pre-commit hook (9bd260b)
    • Add tests on the build files to check exports (ecb2cfb)
    • Add tests on the bind-events methods (be3952e)

    Changed

    • Rename the build files and global export name to be in PascalCase (c3a0fb5)

    Fixed

    • Fix a bug where the click on a cluster could not find the attached layer (d1594cb)
    Source code(tar.gz)
    Source code(zip)
  • 1.0.1(Jul 3, 2019)

  • 1.0.0(Jul 3, 2019)

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

GeoSpoc 8 Jul 8, 2021
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

GeoSpoc 57 Jul 18, 2021
🗺 Vue Mapbox GL - A small components library to use Mapbox GL in Vue

?? Vue Mapbox GL A small components library to use Mapbox GL in Vue. Installation & usage Have a look at the small guide for information on how to set

Studio Meta 29 Jun 27, 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

Alex 380 Jul 23, 2021
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

Daniel Sim 1.8k Jul 19, 2021
Vue 2.x components for CesiumJS.

VUE CESIUM Vue 2.x components for CesiumJS. Load Cesium built package or other third-party packages which are built on Cesium. Languages 中文 English Li

zouyaoji 530 Jul 26, 2021
A lightweight Google Maps plugin for Vue

x5-gmaps (Live Demo) This is a lightweight Google Maps plugin for Vue. Samples/examples/tutorials Tutorial creating a COVID Heatmap Address Autocomple

Keagan Chisnall 86 Jul 15, 2021
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

Vue Leaflet 1.7k Jul 23, 2021
Integrate Google Maps in your Vue application

vue-googlemaps Integrate Google Maps in your Vue application in a "Vue-way". This library is Work In Progress. More components will be available in th

Guillaume Chau 524 Jul 13, 2021
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

null 295 Jul 15, 2021
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

马金花儿 2.1k Jul 23, 2021
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:

Guillaume Leclerc 544 Jul 19, 2021
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

Guillermo Peralta Scura 107 Jun 26, 2021
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

eric regnier 121 May 29, 2021