Meteor/Autoform-maps/Google-maps package error? - google-maps

I am using both the yogiben:autoform-map and the dburles:google-maps packages in my application. It seems that they dont work well together. The code that uses dburles:google-maps works fine, but the autoform map is throwing this error:
Exception from Tracker afterFlush function:
TypeError: undefined is not a function
at t.afMap.rendered (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:210)
at p (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:154)
at a (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:154)
at d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66
at Function.e._withTemplateInstanceFunc (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66)
at n (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66)
at null.<anonymous> (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:66)
at d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:65
at Object.c._withCurrentView (d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:65)
at d56467d85b9f586916cc49f2dba3c180bfed1ddc.js:65
My html:
{{#autoForm class="add" id="add" collection="ServiceProviders" type="insert"}}
{{> afQuickField name="businessname"}}
{{> afQuickField name="officelocation"}}
<button type="submit" class="btn">Create!</button>
{{/autoForm}}
My collection:
officelocation: {
type: String,
label: 'Location of Office',
autoform: {
type: 'map',
afFieldInput: {
type: 'map',
geolocation: true,
searchBox: true,
autolocate: true
}
} }
Also, this autoform was working perfectly fine till I added the dburles:google-maps package. It seems that "GoogleMaps" is not ready yet when this code is being called in autoform-map.coffee
GoogleMaps.init { libraries: 'places' }, () =>
mapOptions =
zoom: 0
mapTypeId: google.maps.MapTypeId[#data.options.mapType]
streetViewControl: false
This seems weird because I am already doing on meteor startup:
Meteor.startup(function() {
if (GoogleMaps.loaded()?false:true) {
GoogleMaps.load();
}
});

There is a conflict between these two packages as noted by yogiben here: https://github.com/yogiben/meteor-autoform-map/issues/9

Related

Advanced Custom Fields - Issue with Slick Slider in ACF v6

I'm having an issue with Slick Slider in the admin preview with ACF 6 using the new block.json way to set up blocks.
I followed an ACF tutorial by Elliot here: https://www.advancedcustomfields.com/blog/building-a-custom-slider-block-in-30-minutes-with-acf/
In ACF v5 using the old method to add blocks this worked fine, but after updating to ACF 6 and using block.json the block crashes and says 'This block has encountered an error and cannot be previewed.' if I try to edit it. If I inspect and look in the console console I get this:
react-dom.min.js?ver=17.0.1:9 TypeError: Cannot read properties of null (reading 'add')
at e.initADA (slick.min.js?ver=6.1.1:1:19335)
at e.init (slick.min.js?ver=6.1.1:1:19101)
at new <anonymous> (slick.min.js?ver=6.1.1:1:2832)
at i.fn.slick (slick.min.js?ver=6.1.1:1:42781)
at initializeBlock (home-slider.js?ver=6.1.1:19:39)
at o (acf.min.js?ver=6.0.5:1:1417)
at Object.doAction (acf.min.js?ver=6.0.5:1:587)
at n.doAction (acf.min.js?ver=6.0.5:1:18745)
at G.renderBlockPreviewEvent (acf-pro-blocks.min.js?ver=6.0.5:1:31066)
at G.componentDidAppend (acf-pro-blocks.min.js?ver=6.0.5:1:30504)
I'm using very similar code to the example in the tutorial to inisialise the slider, and it worked fine before I updated from ACF 5 to 6. The code looks like this:
(function($){
var initializeBlock = function( $block ) {
// $block.find('img').doSomething();
$block.find('.home_banner_content').slick({
fade: true,
infinite: true,
dots: false,
prevArrow: $('.nav_prev'),
nextArrow: $('.nav_next'),
autoplay: true,
autoplaySpeed: 8000,
speed: 1500,
pauseOnHover: false,
pauseOnFocus: false,
});
}
// Initialize each block on page load (front end).
$(document).ready(function(){
$('.home_slider_block').each(function(){
initializeBlock( $(this) );
});
});
// Initialize dynamic block preview (editor).
if( window.acf ) {
window.acf.addAction( 'render_block_preview/type=home-slider-block', initializeBlock );
}
})(jQuery);

is there a way to tell which markers are being clustered using vue2-google-maps and marker-clusterer-plus

Hello Everyone I would like to find out if there is a way to tell what custom markers are being clustered and also if there is a way to listen to the change of the markers being declustered on zoom in?
<template>
<gmap-map
ref="gmap"
:options="{
disableDefaultUi: true,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
scrollwheel: false,
clickableIcons: false
}"
:center="center.hasOwnProperty('lat') ? center : markers[0].position"
:zoom="10"
:style="{ width: width, height: height }"
>
<gmap-cluster
:gridSize="30"
:zoomOnClick="true"
:enableRetinaIcons="true"
:minimumClusterSize="3"
ref="cluster"
#click="clusteredMarkers($event)"
>
<gmap-custom-marker
v-for="(m, index) in markers"
:key="index"
:id="index"
:marker="m.position"
ref="marker"
>
<v-avatar color="primary" size="25">
<span
#click="center = m.position"
#mouseover="$emit('changeEl', index + 1)"
#mouseleave="$emit('changeEl', '')"
size="15"
:class="
hoveringEl - 1 === index ? 'white--text' : 'white--text'
"
>{{ index + 1 }}</span
>
</v-avatar>
</gmap-custom-marker>
</gmap-cluster>
</gmap-map>
</template>
My Script looks like this:
<script>
import GmapCustomMarker from 'vue2-gmap-custom-marker';
import GmapCluster from 'vue2-google-maps/dist/components/cluster';
export default {
name: 'GoogleMap',
components: {
GmapCustomMarker,
GmapCluster
},
props: {
markers: {
type: [Object, Array],
required: false
},
},
data() {
return {
center: {},
places: [],
currentPlace: null
};
},
methods: {
clusteredMarkers(event) {
console.log(event.getMarkers());
}
}
};
</script>
I had to remove sensitive information and left what I think is required to see the full scope of the issue. Please let me know if you need additional information.
On my console I get the right amount of markers when I click on the cluster but not sure how to identify them within my markers. Also I added an Id to the gmap-custom-marker and when I console.log(this.$refs.marker) I get access to that Id but not sure how to identify if is on the cluster or not. Any ideas on how to proceed?
I solved the problem for gmap-marker - this is what worked for me, might be relevant to custom marker component too.
In method at #click event of cluster object - the handler method receives Cluster object, which contains function getMarkers that returns list of markers in some obscure format, rather than actual list of markers. But those markers have getTitle method, which pulls info that was set as title prop of gmap-marker component in the template. So, by setting some sort of id at that prop plus for each marker, it's possible to map cluster's "markers" to your markers.
Script example:
toggleClusterInfo(cluster: Cluster) {
//* Extract markers id list from cluster
const markersIdList: string[] = []
const gmapMarkers: { getTitle: () => string }[] = cluster.getMarkers()
gmapMarkers.forEach((m) => markersIdList.push(m.getTitle()))
// TODO: markersIdList contains list of values at `title` prop for each marker
// use it to map to objects itself.
}
And template example (important to set title prop to marker):
<GmapCluster #click="toggleClusterInfo">
<GmapMarker
v-for="m in markers"
:key="m.id"
:title="m.id"
:position="m.position"
:clickable="true"
></GmapMarker>
</GmapCluster>
Relevant info at this SO question:
how to find the markers in the individual clusters in a marker cluster object in google maps api v3?

How to display timestamped data with PrimeFaces and ChartJs?

Since the public 7.0 release of PrimeFaces includes ChartJs, I thought I'd give it a try.
It works fine, however so far I have not been able to properly display data with values changing over time in a line chart.
chart.js has cartesian time axes for this purpose, however in PrimeFaces , only CartesianLinearAxes is available.
Feeding date objects (instead of String labels) to ChartData simply results in no x-axis being drawn.
Am I missing something or did they just skip this functionality when including chart.js in Primefaces?
OK great questions.
First, PF knows they did not implement time yet but there is an open ticket: https://github.com/primefaces/primefaces/issues/4564
Second, have no fear you can use the Extender feature to make it work. Here is an example we used.
In your Java model for your chart set the Extender feature on.
chartModel.setExtender("chartExtender");
In your XHTML add this JavaScript code function to match when you set in #1 Java bean.
function chartExtender() {
//copy the config options into a variable
var options = $.extend(true, {}, this.cfg.config);
options = {
//remove the legend
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
type: "time",
time: {
parser: 'h:mm:ss a',
tooltipFormat: 'h:mm:ss a',
unit: 'hour',
displayFormats: {
'hour': 'h:mm:ss a'
}
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Your Y Axis',
fontSize: 13,
}
}]
}
};
//merge all options into the main chart options
$.extend(true, this.cfg.config, options);
};
You can see the different time formats available from ChartsJS using MomentJS.
Just a complement to do the extender works, use this.cfg.config.options = {...
for exemple:
function extName() {
this.cfg.config.options = {
legend: {
display: false
}
};
};

Sencha Touch 2 Google Map does nothing

I have a sencha touch 1 app I've just upgraded to sencha touch 2, and I've got everything to work except the google map.
In ST1, I added this line to index.html:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
Then I added this to a panel:
{
xtype: 'map',
useCurrentLocation: false,
fullscreen: false,
layout: 'auto',
id: 'jobmap',
height: 400,
mapOptions: {
zoom: 12,
navigationControl: true,
navigationControlOptions:
{
style: google.maps.NavigationControlStyle.DEFAULT
}
}
}
In ST2, the docs say to still add the reference to index.html, though their forums also seem to say to use app.json. I've tried both using the above code and nothing appears on the panel. The controls before and after it appear adjacent to each other.
I've even just tried:
{
xtype: 'map',
useCurrentLocation: true
}
and I still get nothing.
Any ideas?
The panel which contains your map should be set layout: 'card'.
Also, it's not necessary (or may cause errors) to set fullscreen: false or layout: 'auto', just remove them from your map config.
Hope it helps.

Using fancy upload, trying to trigger file browser

I am using this module: http://digitarald.de/project/fancyupload/
Say for example my initialization code as follows:
this.uploader = new FancyUpload2(this.uploader_element, this.list, {
limitSize: _config.upload_max_filesize,
verbose: false,
url: this.form.action,
path: this.options.root_dir + 'libraries/fancyupload/source/Swiff.Uploader.swf',
typeFilter: {
//'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
},
target: 'assets-browse',
Is this possible to invoke opening browse window, the same when I press element with id 'assets-browse'? I tried $('assets-browse').call('click') with no luck.
You can call a opening window's functions through opener. Use it like parent:
<script type="text/javascript">
window.opener.foo();
</script>