I would like to make the contents of this infowindow to fit. I just fork this code from this post.
So far, I've manage to try the following links as the result of my research
The first answer on this link seems to work in the year 2010, but no longer
works in 2014, or maybe I'm just missing something.
It states that
set the maxWidth options property in the constructor. Yes, even if setting the maximum width was not what you wanted to do.
then one of the comment says that maybe this is working in year 2010 but not anymore in 2014
This may have worked in 2010, but does not help as of 2014. – Simon Aug 15 at 1:25
This link replaces the "standard" google maps infowindow with our own style, but this doesn't work also to me.
What you want to do is replace the "standard" Googlemaps infoWindow with your own, and put your content into it. Once you replace the standard GM infoWindow, you have a lot of latitude to work with.
I've also tried this, but the code doesn't fit my codes.
Below is the code that I've tried
content: $(this.infocontent)[0]
Lastly is this, which aims on resizing the infowindow but it doesn't work still.
var infowindow = new google.maps.InfoWindow({
content: ...,
maxWidth: 300
})
Something like this is the result that I want to get, when we click the marker, an infowindow that can autofit will show.
This is not the fix, but just a work around. Didn't permanently fixed the problem.
It seems that by changing the code of this
var sites = [
['American Range', 34.2737729, -118.4284391, 1, "<a href=\"http://americanrange.com/\" target='_blank'>American Range</a>"],
['Gorenje', 46.3446568, 15.0064148, 1, "<a href=\"http://www.gorenje.com/\" target='_blank'>Gorenje</a>"]
];
To this
var sites = [
['American Range', 34.2777032, -118.4238387, 1, '<p><b>American Range</b></p></br>'],
['Gorenje', 46.4906673, 15.3754774, 1, '<p><b>Gorenje</b></p></br>']
];
Specifically this
"<a href=\"http://americanrange.com/\" target='_blank'>American Range</a>"
To this
'<p><b>American Range</b></p></br>'
Fixes the problem for certain marker, but not all.
Related
I'm building a multiple series line chart using Apexcharts under Vue3, and running into an issue where chart options are not being updated. The series data updates as expected, but I have yet to see an option update successfully.
I'm using composition api with ref, which overall seems to be working great. But once the chart is assigned via lineChart.value = achart, no changes I make will update the chart. For example, the options file contains colors: ['#FFFF00', '#0000FF'], which is yellow and blue, but updating the ref with new colors changes nothing on the chart. Looking at the data using moustache syntax, I can see the new color values have been updated, but not in the chart. See attached screenshot.
I have followed every guide and post I can find, but still no luck. Does anyone know if this is a common issue, or if there is some special consideration I should be taking? If this is a larger issue I'll work on creating a codepen project.
Thanks
UPDATE: Adding a codesandbox.io project
Use updateOptions insted https://apexcharts.com/docs/methods/#updateOptions
ApexCharts.exec("chartID", "updateOptions", {
series: [
{
data: [1,2,3,2]
}
],
xaxis: {
categories: ['a', 'b', 'c','d'],
},
colors:['#00ff00']
})
I encounter the same problem, since I use async and await the data updates after a seconds but doesnt update the chart itself,
I read the docs and it said that you need to update the whole value of the chart options.
chartOptions.value.xaxis.categories = [2020, 2021, 2022]
instead
chartOptions.value = {
... charts: {}
xaxis: {
...
categories: [2022, 2021, 2022]
I am adding 325 features to 4 different maps (at different zoom levels) using map.data.addGeoJson(). Roughly half the features are markers and half are polygons. The Polygons render nearly instantaneously. But it takes another 6 full seconds for the markers to show up on the map.
If I only build one map, it still takes 0.5-2 seconds for the markers to show.
Is there anything I can do to speed things up?
Here is my code:
function addSites(map, geoJSON) {
map.data.setStyle(setSitesStyle);
map.data.addGeoJson(geoJSON)
}
function setSitesStyle(feature) {
var searchDist = getSearchDistFromListTypes(feature.getProperty('ListTypes').split('~'));
return ({
fillColor: searchDist.FontColor,
strokeColor: searchDist.FontColor,
strokeWeight: 1,
fillOpacity: .5,
clickable: false,
icon: {
url: 'images/' + searchDist.Marker + 's.png',
size: new google.maps.Size(26 , 38),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(13, 34),
label: feature.getProperty('MarkerNo')
}
});
}
Update: I tried using a simple SVG icon and the performance was no different.
The problem was the DOM was pretty darn big on this page and it took a while for Google Maps to add all of the elements to the DOM.
In my case the page was 95% Handlebars.js so what I did was compile all of the handlebars templates and remember the resulting HTML in an array. Then pushed just the map pages' HTML into the DOM and processed the map data (which was darn fast now.) And then finally loaded the rest of the HTML into the DOM which also was pretty quick.
Since multiple maps can be interspersed throughout the page it was a small challenge to figure out a simple and robust way to get it all woven back together correctly, but I am happy in the end.
I would like to make such a map that only allows checking/showing 2 layers at a time and it should show some warning if chosen more.
After searching the internet, and taking a look at these possible solutions and references: first, second, third etc.
...I still can't get my code to do this simple thing: to count the layers in a layer group and according to that, to show a message.
Here my code:
var NumbActive = new L.layerGroup();
NumbActive.addTo(map);
map.on('overlayadd',function(active){
if (active.layer===LAY1){
NumbActive.addLayer(LAY1);
}});
map.on('overlayadd',function(active){
if (active.layer===LAY2){
NumbActive.addLayer(LAY2);
}});
map.on('overlayadd',function(active){
if (active.layer===LAY3){
NumbActive.addLayer(LAY3);
}});
size = NumbActive.getLayers().length;
var options = { timeout: 5000 };
var box = L.control.messagebox(options).addTo(map);
if (size >2){
box.show( 'Please choose only 2 layers at the same time!' );
};
I am also using this plugin for showing messages, which normally works fine, but in this case not at all.
I thought that layerGroup.getLayers().length should give a number as a result (length of an array)? It should work but somehow it doesn't.
Please tell me your suggestions. It can't be that complicated. I would just like to know if I'm making some minor mistake that's possible to be corrected or should I write some new function/search for a plugin.
Thanks in advance! :)
In kendo 2012.3.1114, I ran across a numeric text box issue (see How can I have kendo NumericTextBox keep focus during highlighting in a kendo window?).
I've been unable to find a work around so in the interim I hesitantly decided (because I'm near end of the project release cycle) to try version 2012.3.1315. During my regression testing, I found that issue to be fixed but hideColumn of the grid component to be broken.
Here's a jsfiddle showing the issue
http://jsfiddle.net/e6shF/42/
Here's the code:
var grid = $("#grid").kendoGrid({
dataSource: {
data: [
{"foo": {"bar": 10, "moo": "y", "coo": 4}, "too": "test1"},
{"foo": {"bar": 20, "moo": "z", "coo": 3}, "too": "test1"}
]
},
columns: [
{
field: "foo.bar"
},
{
field: "foo.moo"
},
{
field: "foo.coo"
},
{
field: "too"
}
]
}).data("kendoGrid");
grid.hideColumn("foo.moo");
grid.hideColumn("foo.coo");
Notice that the second call to hideColumn will hide the column header but not the column data. It appears making a grid.refresh call after the second column hide will remedy the issue but this is was not necessary in the previous version (nor does the documentation indicate the call is necessary). I think this is a bug that was introduced, so I guess I'm trading one issue for a new issue (perhaps many issues).
Any thoughts on
1) how to fix this issue without a grid refresh or
2) why hideColumn is not working in the new version or
3) even better on how to fix the numeric text box issue in the other thread so I don't have to worry about hoping to catch and fix other issues in this new version prior to releasing
would be greatly appreciated?
This may not be the answer you're looking for, but I noticed that switching the order of column hiding makes the problem go away:
grid.hideColumn("foo.coo");
grid.hideColumn("foo.moo");
Here's a fiddle showing it working: http://jsfiddle.net/derickbailey/rkmqz/
I'll make the dev team aware of this, too.
I'm starting with paper.js. I like the fact that it introduces the possibility to have a script with a text/paperscript mime type, which runs in its on scope. However, scripts can become large pretty soon, so I want to be able to divide it in multiple scripts for readability. I thought I could just add more than one script tag and have them all run in the same scope, but apparently this isn't the case.
Both scripts are loaded and do run, but the second script doesn't seem to be in the paper scope.
I've set up an example here: http://barbata.nl/SO/Maps/ This example has some code, but I'll point out the important bits.
It contains two paperscripts:
Maps.js is the main script, which rasterizes the image and allows moving it around. You can ignore the code in this script, for it works fine so far.
Zoom.js is the script in which I wanted to isolate zooming functionality. It uses jq.mobi to capture the scroll wheel of the mouse, since Paper.js doesn't seem to have that event. It then translates that to a call to onMouseScroll, in a similar way Paper does it.
So far so good. The actual problem arises with the zoomIn and zoomOut functions in zoom.js.
It works if I explicity use the paper object to reference the view I want to zoom:
function zoomIn()
{
if (paper.view.zoom < 2)
{
paper.view.zoom = paper.view.zoom * 2;
}
}
But it fails when I remove paper and just reference the view:
function zoomIn()
{
if (view.zoom < 2)
{
view.zoom = view.zoom * 2;
}
}
This surprises me, as I expected the script to be a Paperscript, running in the Paperscope. It works fine if I put this code in Maps.js, so it seems that although zoom.js is loaded by Paper.js (the developer tools in the browser confirm this), it isn't run in the Paperscope.
My question is: are my findings correct? Am I doing something wrong? What is the right way to divide a Paper.js application into multiple units for readability?
Of course I can get it running, but I want to make sure I do it right.
This is indeed how it works. I've opened an issue on GitHub
I found that the "cleanest" way is to do it with this.install(window). It also makes error finding with Chrome developer tools easier since it is more adapted to reporting on the line errors in java-script than "paperscript".
in index.html (for example):
<script type="text/javascript" src='js/other_lib.js'></script>
<script type="text/paperscript" canvas="canvas">
this.install(window);
/*no code 'required' here */
</script>
<body>
<canvas id="canvas" width="1500" height="500"></canvas>
</body>
Then in the js/other_lib.js i just add code as normal:
var r = new Path.Rectangle([100,100],[200,200]);
r.fillColor = 'black';
/*more code here*/
This should generate a rectangle.
What DOES'T NOT WORK for me (as of Paper.js v0.10.2 Release Date: 9. July 2016) is the object operators. Such as adding vecrots pointc = pointa + pointb; for me this is giving a lot of NaN values.
I have had to edit a few libs to get this working, but the change is simple:
var pointc = new Point(pointa.x+pointb.x,pointa.y + pointb.y);