Is there a way to click a Google Maps overlay with capybara-webkit? What about Capybara using Selenium? I want to test the content of the info window once the marker is selected. I also want to test that there are n markers on the page.
To test that there are n markers on the page:
expect(find('.gmap_container')['data-markers'].split('},{').count).to eq(n)
This can be done, but requires a change to how you create your markers. You must instruct them to render as images rather than canvas elements:
new google.maps.Marker({
position: latLng,
animation: google.maps.Animation.DROP,
name: business.get('name'),
id: business.get('id'),
optimized: false, // <-- this is the stuff
title: business.get('name')
});
Then in your test, you can find('div[title="Business\ Title"]').click
If possible, you might want to consider doing this just for a test environment, but that's up to you and your needs.
Credit: http://blog.mojotech.com/selecting-google-maps-v3-markers-with-selenium-or-jquery/
Hope this helps!
Related
Is there any way to highlight the node on search in network chart when using highcharts in angular application
I have filtered the node from the group of nodes on search. Now i have the pillar data and node data. how can I highlight them.?
I don't find any documentation so for for this. also am new to high charts.
Any inputs or references are highly appreciated..!
You can change state of the selected points to select:
selectedPoints.forEach(p => {
p.fromNode.setState('select')
});
Live demo: https://jsfiddle.net/BlackLabel/ufmxpz6L/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#setState
Or just change their appearance, for example:
selectedPoints.forEach(p => {
p.fromNode.graphic.css({
fill: 'red'
});
});
Live demo: https://jsfiddle.net/BlackLabel/0hL34rvx/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#css
Consider the following toy example: jsfiddle
chart: {
events: {
render: myfunc
}
},
...
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
The intended behavior is to set the state of the first series as hover while setting all other series as inactive after load and redraw events.
The code works as intended after load
However, it doesn't work after redraw (via the select box). After selecting an option in the box, the series are rendered as normal instead of as inactive UNLESS any series had been previously hovered. That is, the code works if you interact with any series AND THEN select an option in the box, but it doesn't work if you select an option in the box immediately after the loading without interacting on the series.
Surprisingly, after some inspection in the console, I noted that in any case the intended states are properly passed to the series object. So, why the states are not properly rendered?
*NOTE: In my actual application the hovered series is not necessarily the first one, but it varies depending on the output of other function. I'm aware that "myfunc" could be simplified in the current example, but for general purposes please suggest an answer keeping the basic structure if possible.
This seems to be related to this issue from HighChart's GitHub. In your case, HighCharts is correctly updating the series' state. However, while rendering it fails to set the proper opacity value associated with the 'inactive' state. The workaround is to explicitly set the opacity of the series to the same value it should have in the 'inactive' state.
// F U N C T I O N S E T S T A T E
function myfunc() {
var chart = this;
chart.series.forEach(function(s) {
//explicit opacity
s.opacity = 0.2;
s.setState('inactive', true);
});
chart.series[0].setState('hover');
}
Thank you for sharing this issue, it seems that it is a regression after the last release.
In the previous version it used to work fine: https://jsfiddle.net/BlackLabel/Lbpvdwam/
<script src="https://code.highcharts.com/8.1.0/highcharts.js"></script>
<script src="https://code.highcharts.com/8.1.0/highcharts-more.js"></script>
I reported it on Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/13719
If you don't need any new features/bugfixes use the previous version as a temporary workaround.
I am having a problem showing a few points on the map where the geojson file is loaded from the server. The geojson file changes so I want a good way to refresh the map layer. To do this, I created the source.Vector (Version 3.17.1 of OpenLayers)
var locationSource = new ol.source.Vector({
format: new ol.format.GeoJSON({
defaultDataProjection :'EPSG:4326'
}),
loader: vectorLoader,
strategy: ol.loadingstrategy.all
});
function vectorLoader which executes a XHR call to retrieve the latest version of the geojson file. This has been simulated in the jsfiddle below
jsfiddle
The geojson file has valid json because the points on the map show if I use a source.Vector object which uses the url property instead of a loader like this:
var locationSource = new ol.source.Vector({
url: '/openlayers/location.geojson',
format: new ol.format.GeoJSON({
defaultDataProjection :'EPSG:4326'
})
});
I would use this but it is horrible about using cached versions of the geojson file when a new file is available. I want something that is more reliable which is why I'm trying to get this to work with a loader.
The jsfiddle link above has all the code and it seems to run fine but the the points never show up on the map after addFeatures, located here:
onSuccess: function(response) {
var format = new ol.format.GeoJSON();
var features = format.readFeatures(response, {
featureProjection: 'EPSG:4326'
});
source.addFeatures(features);
console.info(source.getFeatures());
map.updateSize();
source.changed();
You will see that no points show on the map for the data provided in the jsfiddle. I feel like I am missing something basic here but after finding many solutions, none work..I seems like the style function needs to be executed again after the 'addFeatures` load completes. This can be seen in the console log for the jsfiddle above.
Indeed this is just a minor issue you were missing.
First of all radius was not defined, this is probably pulled from a variable which you haven't copied to your fiddle.
The main issue though is the wrong projection used when you read your features featureProjection: 'EPSG:4326', it should be changed to featureProjection: 'EPSG:3857', since the default projection in an OpenLayers view is Web Mercator. It could also be the case, that you wanted to define the data projection explicitly while reading your GeoJSON, for this you should set dataProjection: 'EPSG:4326'.
A working example can be found in this fiddle: https://jsfiddle.net/9oukr51t/
I using gmaps4rails v2 in my app. I have multiple markers which I send in as a hash. I want to clear the default info window and use a different function on click and hover for each marker. This is what I found from other questions on this site, but it isn't working for me.
markers = handler.addMarkers(<%=raw #hash.to_json %>);
for (var marker in markers) {
google.maps.event.clearListeners(marker, 'click');
}
The other answers on this site mixed code from v1 and v2 of gmaps4rails.
Use:
google.maps.event.clearListeners(marker.getServiceObject(), 'click');
It works fine, see live example: http://plnkr.co/edit/8Eci6H6NQWUvbkAvcDdc?p=preview
Infowindows dont appear anymore on click.
I have Markers setup with gmaps4rails.
Now I want to implement a classic search function.
If I find one object, it should directly show the marker.infowindow
How do I open it directly?
I tried:
function focusSearch() {
handler.map.centerOn({ lat: <%=#searchy.latitude %>, lng: <%=#searchy.longitude %>});
handler.getMap().setZoom(16);
marker = <%=#searchy.id%>
marker.infowindow.open(map, marker.serviceObject);
}
But I guess I am going wrong there...
Anyone can help?
If you have an Idea how to directly use the #search:params, I am happy!
Thanks for helping out!
I've created a plunkr with working code here.
Basically steps are:
associate the marker to the original json data where ids are available
search the marker list for the id you expect
trigger the 'click' google map event on the marker which triggers pan + infowindow