Cedarmaps vue components (map, layers, sources, controls)

Related tags

Map vue cedarmaps
Overview

Map.ir

CedarMaps SDK for Vue

What is CedarMaps?

CedarMaps is the location data platform for mobile and web applications. We provide building blocks to add location features like maps, search, and navigation into any experience you create. Use our simple and powerful APIs & SDKs and our open source libraries for interactivity and control.

Sign up for CedarMaps

Not a CedarMaps user yet? Sign up for an account here. Once you’re signed in, all you need to start building is a CedarMaps access token.


This guide will take you through the process of integrating CedarMaps into your Vue application.

This package is a wrapper over Vue Mapbox library.

Table of Contents

Installation

Npm

npm install vue-cedarmaps mapbox-gl --save

Yarn

yarn add vue-cedarmaps mapbox-gl

use global component

import CedarMaps from 'vue-cedarmaps'
import Vue from 'vue'
import 'mapbox-gl/dist/mapbox-gl.css'

Vue.use(CedarMaps) // this will add CedarMaps ... global components

manual import

import { Cedarmaps, MglMarker, MglNavigationControl, MglFullscreenControl } from 'vue-cedarmaps'
import 'mapbox-gl/dist/mapbox-gl.css'

export default {
  // ...
  components: { Cedarmaps, MglMarker, MglNavigationControl, MglFullscreenControl },
  // ...
}

Rendering Component

">
<template>
  <div id="app">
    <div class="map-container">
        <Cedarmaps
          style="height: 600px"
          :center="center"
          token="token"
          :zoom="12"
        >
          <MglMarker :coordinates="marker" color="blue"/>
          <MglNavigationControl position="top-right" />
          <MglFullscreenControl />
        </Cedarmaps>
      </div>
  </div>
</template>

<script>
import { Cedarmaps, MglMarker, MglNavigationControl } from "vue-cedarmaps";
import 'mapbox-gl/dist/mapbox-gl.css'

export default {
  name: "app",
  components: {
    Cedarmaps,
    MglNavigationControl,
    MglMarker
  },
  data() {
    return {
      center:{ lng: '51.652878', lat: '32.60999' }
      marker: [51.652878, 32.60999]
    };
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.map-container {
  height: 600px;
}
</style>

You can read more about Vue Mapbox in Vue Mapbox Documentation

Example

You can consult this example for getting acquainted with our package.

Issues
  • دریافت lat and long

    دریافت lat and long

    سلام امیدوارم که حالتون خوب باشه من از ریپازیتوری شما در حال استفاده هستم اما امکان دریافت لت و لانگ در ویو را ندارم . زمانی که از ویو مپ باکس استفاده میکنم و قسمت نمایش لت و لانگ مپ باکس جی ال به اسکریپت خودم اضافه میکنم نقشه فریز شده و امکان حرکت با ماوس به مناطق دیگر را ندارد و فقط یه محدوده مشخص را به صورت ثابت به من نمایش میدهد . آیا امکان دریافت لت و لانگ به صورت مستقیم در ویو سیدار در(ریپازیتوری شما ) وجود دارد ؟ لطفا نحوه ی استفاده از آن را توضیح دهید ،متاسفانه در داکیومنت همچین موردی را پیدا نکردم با تشکر

    opened by morteza1399 0
  • problem in MglPopup

    problem in MglPopup

    I always get the following error, initiating a MglPopup. I've tried all these different objects but they don't work. Error: LngLatLike argument must be specified as a LngLat instance, an object {lng: , lat: }, an object {lon: , lat: }, or an array of [, ]

    here is my code :

    template:

     <MglPopup :coordinates="marker">
              <VCard>
                <div>help me please,</div>
              </VCard>
            </MglPopup>
    

    data: marker: [51.389, 35.6892] marker: { lng: "51.389", lat: "35.6892" },

    opened by alisebt 0
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

Vladimir Vershinin 610 Jan 12, 2022
Web map Vue 3.x components with the power of OpenLayers

vue3-openlayers Web map Vue components with the power of OpenLayers Overview vue3-openlayers is components library that brings the powerful OpenLayers

Melih Altıntaş 223 Jan 24, 2022
A set of Vue.js components to display an interactive SVG map

vue-svg-map A set of Vue.js components to display an interactive SVG map. Demo Take a look at the live demo! Installation npm npm install --save vue-s

Victor Cazanave 64 Dec 21, 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 110 Jan 2, 2022
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 124 Jan 14, 2022
New Sayobot Map Downloader Written by [email protected], [email protected], [email protected]

SayoDownloader This software only provide in Chinese! 一个全新设计的小夜地图下载器

null 5 Nov 19, 2021
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

Gerard Burns 39 Jan 16, 2022
A quick way to start a web map application with Vue.js using MapLibre GL JS.

Vue.js map using MapLibre GL JS A quick way to start a web map application with Vue.js using MapLibre GL JS. A simple fullscreen map application is us

MapTiler 4 Dec 31, 2021
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

Eduardo P. Rivero 22 Sep 18, 2021
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

Sylvain Julé 79 Dec 12, 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 36 Nov 9, 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.8k Jan 21, 2022
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 631 Jan 15, 2022
A set of composable components for easy use of Google Maps in your Vue 3 projects.

A set of composable components for easy use of Google Maps in your Vue 3 projects.

Inocan Group 39 Jan 16, 2022
Reactive Vue 3 components for Google maps

Vue 3 Google maps Components Set of mostly used Google Maps components for Vue.js. Why this library exists? We heavily use Google Maps in our projects

Fawad Mirzad 55 Jan 12, 2022
a library of vue components used by mapping applications

phila-vue-mapping (@phila/vue-mapping in npmjs.com) phila-vue-mapping is a library of Vue components that can be used in mapping apps which use Vue.js

City of Philadelphia 48 Oct 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 399 Jan 19, 2022
Отрисовка карты офиса и круговой диаграммы Vue.js с использованием библиотек D3.js, vue-chartjs, vuedraggable

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

Zoya 0 Dec 5, 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 Jan 8, 2022