rickyruiz / vue-azure-maps Goto Github PK

Is there a way to add a custom Image Sprite as a map marker with this library?

for example: this.map.imageSprite.add('plane', 'assets/plane.png');

see here for reference.

@rickyruiz Love the project keep up the good work. You should make some issues and label them help wanted so others can start to plugin.

I'm getting a weird issue where the Microsoft logo and anything else I add to the map renders outside of the top right corner. I'm not entirely sure if it is something I'm doing or not but any help would be appreciated.

Here is the same issue in a stripped down codesandbox https://codesandbox.io/s/vue-azure-map-render-error-ys4vt

How to allow clustering of the data source ?
I don't see anything about this in your DataSource component.

example (AzureMapCodeSamples):

// Create a data source and add it to the map.
datasource = new atlas.source.DataSource (null, {
    // Tell the data source to cluster point data.
    cluster: true,
    // The radius in pixels to cluster points together.
    clusterRadius: 45,
    // The maximium zoom level in which clustering occurs.
    // If you zoom in on this, all points are rendered as symbols.
    clusterMaxZoom: 15
});

Is this support typescript? If it is can you provide some sample app that you created with it

Our package.json includes both azure-maps-control and vue-azure-maps.

When inspecting our decency graph via "webpack bundle analyzer" I noticed that vue-azure-maps was quite sizable (larger than azure-maps-control even).

After digging into the files generated in the build for this project, it seems that azure-maps-control in it's entirety is included in the bundle.

My suspicion is that this is caused by import * as atlasJs from 'azure-maps-control/dist/atlas.min.js' in install.ts.

Why was this method of importing used vs import * as atlas from 'azure-maps-control'?

Additionally, the application imports azure-maps-control's CSS. Which results in duplicated CSS.

Any thoughts on this?

Thanks for this project, It looks really promising. But when I try to integrate the plugin in a project that uses TypeScript I get a strange error.

I am following the instructions for implementing the plugin from the documentation
(https://rickyruiz.github.io/vue-azure-maps/).

But when I try to load a view which has the AzureMap component in it I get an error saying:
Error in mounted hook: "TypeError: Cannot read property 'atlas' of undefined"

It seems like it's something that has with TypeScript to do. Because if I set up a new default test project with the Vue CLI that doesn't use TypeScript it works as expected. But if I set up the same test project and tell it to use TypeScript I get the error.

It seems strange though because the error does not appear to me to be a typical error you would get if it was TypeScript that was the problem. So maybe there is something obvious that I am missing?

Hi @rickyruiz,

This is superb work, really good, please keep it up. 👍

I'm trying to create a Route from the co-ords in to another long/lat so I need to get the co-ords out of these components to pass to the Route REST API. Is there a nice, clean way to get the co-ords from the components, maybe through the $_azureMap injection?

Many thanks,

Jon.

TypeError: Cannot read property 'atlas' of undefined at VueComponent.initializeMap

// app.js
import VueAzureMaps from 'vue-azure-maps'
import 'vue-azure-maps/dist/vue-azure-maps.css'

Vue.use(VueAzureMaps, {
key: '#############################',
});

// my-component-map.vue

Hello @rickyruiz ,

I'm trying to use the component AzureMapPopup, but the map keep being displayed as an inline resource.

The message displayed on the console suggest using an injection for this, but i couldn't find an example

This is how I'm using the components:

Hi,
I would like to know on which browser you are testing your plugin?
Because at first I was only testing on chrome and I had no problem.
But recently I wanted to test on Firefox but I have errors with the promises.
I removed all my dependencies to see which one was making this mistake.
It seems to be yours.
A polyfills story, apparently.
It is natively supported by Firefox since its version 58.
https://caniuse.com/#search=promise

Can you give me the compatibility of the browsers with your plugin please
and make a correction if you find the same thing as me?

If we use import { AzureMap } from 'vue-azure-map'
Can't resolve 'vue-azure-map' in our component : Module not found

I tried to clone this repo and did npm i and changed key but it is not working
error in console
Error: Failed to retrieve the style definitions: TypeError: Failed to fetch
at eval (webpack-internal:///./node_modules/azure-maps-control/dist/atlas.min.js:3844)
at async Promise.all (:8080/index 1)

webpack-internal:///./node_modules/azure-maps-control/dist/atlas.min.js:3766

It's not a bug, but I'm not sure how to add multiple layers to the map. I've got a working example in js and html that I'm trying to convert to vuejs.

I've added a AzureMapDataSource & AzureMapBubbleLayer component to the map, and can add points to the map ok. But in my previous example, we were grouping datapoints together based on a category, and changing the colour of the markers.

Is this possible in this projects current state?