search

inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
272 stars 54 forks source link

Heatmap Layer support #76

Closed JoseGoncalves closed 1 year ago

JoseGoncalves commented 2 years ago

Do you have any plans to add a component for the Heatmap Layer?

HusamElbashir commented 2 years ago

Hey @JoseGoncalves

Can't say I have plans for that at the moment. There are a couple of other issues that I'd like to prioritize when I have some free time. If someone wants to take a stab at a PR I'll be happy to provide support. Otherwise will look into this when I'm done with the higher priority items on my list.

JoseGoncalves commented 2 years ago

No TS skills here, so I'll not be capable of doing a PR... I'm going to add that support in JS for my current needs and (eagerly) wait for a proper implementation from your side...

chemeng commented 2 years ago

Hi @JoseGoncalves, did you get this working using the package (accessing some underlying component/reference) or through the plain vanilla JS implementation?

JoseGoncalves commented 2 years ago

Hi @chemeng, still did not hat time to address this... nevertheless, my idea is simply to use the Advanced Usage's third pattern as a base to initialize and use the Google's Heatmap Layer.

JoseGoncalves commented 2 years ago

@HusamIbrahim Any idea when you'll have time to implement this feature?

HusamElbashir commented 2 years ago

Hello @JoseGoncalves

Apologies for the late response. Things were quite busy at work and in my personal life these last couple of weeks. I'll take a stab at this soon hopefully.

HusamElbashir commented 1 year ago

Added in v0.14.0. Documentation to be added soon but basic syntax is:

  <GoogleMap
    api-key="API_KEY"
    :libraries="['visualization']"
    style="width: 100%; height: 500px"
    :center="center"
  >
    <HeatmapLayer :options="{ data: heatmapData }" />
  </GoogleMap>

Note that for convenience you can pass an array of plain lat/lng object literals instead of LatLng class instances (you can pass those too or mix object literals with LatLng instances in the data array if you wish).

Let me know if you notice any bugs.

JoseGoncalves commented 1 year ago

Hi @HusamIbrahim. Thanks, I'll test that in the next week.

JoseGoncalves commented 1 year ago

Hi @HusamIbrahim. I've tested this and, while it's working, I get some warnings on the browser console:

Screenshot from 2022-08-30 14-25-10

You can check a demo project were these warnings occur at:

HusamElbashir commented 1 year ago

Thanks for reporting @JoseGoncalves. Will look into it. Feel free to create an issue if you wish.

HusamElbashir commented 1 year ago

Fixed in v0.14.1

chemeng commented 1 year ago

Got it, makes sense. Will probably try the same thing in the next few days.

On Jun 6, 2022, at 11:34 AM, José Miguel Gonçalves @.**@.>> wrote:

Hi @chemenghttps://github.com/chemeng, still did not hat time to address this... nevertheless, my idea is simply to use the Advanced Usagehttps://vue3-google-map.netlify.app/advanced-usage/ third pattern as a base to initialize and use the Google's Heatmap Layerhttps://developers.google.com/maps/documentation/javascript/heatmaplayer.

— Reply to this email directly, view it on GitHubhttps://github.com/inocan-group/vue3-google-map/issues/76#issuecomment-1147192193, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AAJ2XGPQQHRN6E2JANUQYX3VNWZ3FANCNFSM5W4M3RNQ. You are receiving this because you were mentioned.Message ID: @.***>

JoseGoncalves commented 1 year ago

@chemeng This feature is already implemented in the library. Please check https://github.com/inocan-group/vue3-google-map/issues/76#issuecomment-1226371053

chemeng commented 1 year ago

Yes, thank you, we've started using it.