We Keep Coding

How to use zoomFactor on ZoomControls in AmCharts V4

Hello I want to use larger zooming factors via the ZoomControl Buttons.
How is that possible in AmCharts (Maps) Version 4?
I could find an old documentation which describes my wanted feature:
https://docs.amcharts.com/javascriptmaps/ZoomControl (zoomFactor)
In the new docs I can only find it in "components".
The only way I think I could make it work is listening into the "hit" event on the zoomControl Button, then determine if it was a positive(zoomIn) or negative(zoomOut) event and zoom manually the Chart because the Chart extends the Component which contains the zoomFactor im looking for.

amCharts 4.0.14+: chart.zoomStep
With amCharts 4.0.14+ a MapChart.zoomStep has been implemented which is precisely what you're looking for. As of this writing (January 2, 2019), it is not yet documented except in the changelog.
All you would have to do is:
chart.zoomStep = 3;
Our Zooming to Countries Map demo's default zoomStep is 2. Here's a fork where it's 3:
https://codepen.io/team/amcharts/pen/d454553836da95fe2345a608e1a0efbd
amCharts <= 4.0.13: custom "zoom factor"
If you're referring to Component.zoomFactor, then all charts have this property. Even though it's called zoomFactor, it's not what you're thinking, also, it's read-only anyway.
Unfortunately what you describe as a "zooming factor" cannot be overridden, the buttons basically zoomIn() and zoomOut(), within those methods a zooming factor of 2 is hardcoded. Listening in on the "hit" event wouldn't work because you'd have competing zoom events. If you disabled the original "hit" event and made your own, there is still additional helper logic for keyboards for accessibility purposes, so your custom event and these helpers will have inconsistent zoom factors. So what can be done is to kill the default plusButton and minusButton and roll your own.
To disable them just set their .disabled property to true:
chart.zoomControl.plusButton.disabled = true;
chart.zoomControl.minusButton.disabled = true;
Then we'll make our own versions of the buttons also as children of the ZoomControl container and place them before/after its slider to simulate the original buttons:
var plusButton = chart.zoomControl.createChild(am4core.Button);
plusButton.shouldClone = false;
plusButton.label.text = "+";
plusButton.width = am4core.percent(100);
plusButton.padding(5, 5, 5, 5);
plusButton.marginBottom = 2;
plusButton.insertBefore(chart.zoomControl.slider);
var minusButton = chart.zoomControl.createChild(am4core.Button);
minusButton.shouldClone = false;
minusButton.label.text = "-";
minusButton.width = am4core.percent(100);
minusButton.padding(5, 5, 5, 5);
minusButton.marginTop = 1;
minusButton.insertAfter(chart.zoomControl.slider);
Then we'll provide "hit" events on the buttons that zoom in/out with our own zooming factor (customZoomFactor below):
var customZoomFactor = 3; // default: 2
plusButton.events.on("hit", function() {
chart.zoomToGeoPoint(
chart.zoomGeoPoint,
chart.zoomLevel * customZoomFactor,
false
);
});
minusButton.events.on("hit", function() {
chart.zoomToGeoPoint(
chart.zoomGeoPoint,
chart.zoomLevel / customZoomFactor,
false
);
});
Here's a fork of our Zooming to Countries Map demo that incorporates all of the above code:
https://codepen.io/team/amcharts/pen/f358095c9ea00d875049b67a7bd13df4

html2canvas is not capturing true google map on chrome [duplicate]

I'm using html2canvas to save my online map as an image (See the Save as Image link). I've tried it in Firefox, Chrome and Opera.
It tends to work more often if you do not alter the default map. If you zoom and then pan the map, it is less likely to work. The map will pan, but html2canvas will use the old center point and map bounds. And html2canvas will fail to load map tiles for the new map bounds.
The map pans correctly, but html2canvas uses the old center point and map bounds. Why is this?
To support getting images from different domains I have the setting:
useCors: true;
I have tried the following solutions
-Manually changing the map type. Sometimes this fixes it.
-Triggering the browser resize event - not useful.
-Using setTimeout() to wait 2000 ms to ensure the tiles are loaded - not useful
-Using a proxy (html2canvas_proxy_php.php) - not useful
-Using the google maps idle event to wait for the map to be idle before saving - not useful

Apparently, the problem seems to stem from html2canvas not being able to render css transforms, at least in chrome (I could only reproduce the problem in chrome, on OSX). The container that holds the tiles, is translated using -webkit-transform. So what we could do is to grab the values that the container is shifted, remove the transform, assign left and top from the values we got off transform then use html2canvas. Then so the map doesn't break, we reset the map's css values when html2canvas is done.
So I pasted this into the javascript console at your site and at it seemed to work
//get transform value
var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5]) //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
"transform":"none",
"left":mapleft,
"top":maptop,
})
html2canvas($('#map-canvas'),
{
useCORS: true,
onrendered: function(canvas)
{
var dataUrl= canvas.toDataURL('image/png');
location.href=dataUrl //for testing I never get window.open to work
$(".gm-style>div:first>div").css({
left:0,
top:0,
"transform":transform
})
}
});

After a Google Maps update the solution of mfirdaus stop working, the new solution is this:
var transform = $(".gm-style>div:first>div:first>div:last>div").css("transform")
var comp = transform.split(",") //split up the transform matrix
var mapleft = parseFloat(comp[4]) //get left value
var maptop = parseFloat(comp[5]) //get top value
$(".gm-style>div:first>div:first>div:last>div").css({ //get the map container. not sure if stable
"transform": "none",
"left": mapleft,
"top": maptop,
})
is the same but u need to change de selector from
.gm-style>div:first>div
to
.gm-style>div:first>div:first>div:last>div
Hands up 🙂

I have the same problem, but I used Leaflet Map instead of Google Map.
The code is below
var transform=$(".leaflet-map-pane").css("transform");
if (transform) {
var c = transform.split(",");
var d = parseFloat(c[4]);
var h = parseFloat(c[5]);
$(".leaflet-map-pane").css({
"transform": "none",
"left": d,
"top": h
})
}
html2canvas(document.body).then(function(canvas){
$(".leaflet-map-pane").css({
left: 0,
top: 0,
"transform": transform
})
}
// Here is used html2canvas 1.0.0-alpha.9

In my case i just allowed Cross Origin Resource Sharing (CORS) in the html2Canvas configuration and it worked for me.
useCORS:true,
For more info you can refer to the html2Canvas Documentation:
http://html2canvas.hertzen.com/configuration

Use this code for updated Google Maps.
// #ts-ignore html2canvas defined via script
html2canvas($('#shareScreen')[0], {
useCORS: true,
allowTaint: false,
backgroundColor: null,
ignoreElements: (node) => {
return node.nodeName === 'IFRAME';
}
}).then((canvas) => {
var dataUrl = canvas.toDataURL('image/png');
console.log(dataUrl)
this.shareLoader = false;
});

Hide layer or features on zooming in openlayers 3?

Is it possible to hide all features on a layer when zooming occurs? I've tried to set both the visible and opacity properties on the layer itself to now show when zooming. Also i've tried to set style on each feature to 'none' but it dosen't seem to work. I've tried with these two alternatives:
1.
function hideGraphicsFeatures(hide) {
if(hide) {
graphicsLayer.setVisible(false);
} else {
graphicsLayer.setVisible(true);
}
map.render();
}
2.
function hideGraphicsFeatures(hide) {
var features = graphicsLayer.getFeatures();
if(hide) {
for (var i = features.length - 1; i >= 0; i--) {
features[i].style.display = 'none';
};
} else {
for (var i = features.length - 1; i >= 0; i--) {
features[i].style.display = ''; // show. Set to anything but 'none'
};
}
map.render();
}

I believe I know what you are looking for. I had to do something similar to improve the zoom/pan performance when tens of thousands of features on many layers were displayed on the map. For panning I set the layers' visibility to false when the first map 'pointerdrag' event is triggered and set them back to visible in the 'moveend' event (you may need some additional handling to avoid redundant actions and data reloads).
For zooming it is a bit trickier but fortunately you can override the ol.interaction.MouseWheelZoom handler by using a custom function:
ol.interaction.MouseWheelZoom.handleEvent = myFunction(evt){
// here you set the layers to invisible and set the new map zoom level
// based on the event's wheel value...
}
After that in the 'zoomend' event handler you make the layers visible. If you just use buttons to zoom in/out then it's easy to hide/show the layers.
It worked for me and it is a good workaround in some situations.

Try:
function zoomChanged() {
zoom = map.getZoom();
if (zoom >=15) {
graphicsLayer.setVisibility(true);
}
else if (zoom < 15) {
graphicsLayer.setVisibility(false);
}
}
And then call that function using:
map.events.register("zoomend", map, zoomChanged);
Where "map" is the variable of your map initialization. Combined, these toggle a layer's visibility on and off based on your zoom level. If that's not exactly what you're going for, you could use a different indicator in the if/else block. I think you were just missing the event handler.

maybe you can do this one.
But, sorry if this can't help you.
function showGraphic () {
$('#Graphic1').hide();
$('#Graphic2').show(2000);
$('#Graphic3').hide();
$('#Graphic4').hide();
}

Move marker dynamically

I am using Openlayers.Layer and OpenLayers.Marker to display a marker on the map.
It is positioned correctly and I can successfuly show it and hide it doing:
marker.display(boolean);
But I try to change its position before displaying it but with no success. I already tried this:
var projections = {
g: new OpenLayers.Projection("EPSG:4326"),
p: new OpenLayers.Projection("EPSG:900913")
};
var newlonlat = new OpenLayers.LonLat(newlon, newlat).transform(projections.g, projections.p);
marker.lonlat = newlonlat
layer.redraw();
(no errors triggered but position does not change)
and also tried this:
var px = map.getPixelFromLonLat(newlonlat);
marker.moveTo(px);
layer.redraw();
(it throws an error inside getPixelFromLonLat function. Error: c is null)
Why can't I move markers dynamically and what is the best way to do it?
Edit:
Maybe the problem resides in my position projection transformation when using second option:
new OpenLayers.LonLat(newlon, newlat).transform(projections.g, projections.p);
Edit 2
So, going deeper I found that marker.map property was null, so after its initialization I did:
var marker = new OpenLayers.Marker(lonlat, icon);
marker.map = map;
where map is an OpenLayers.Map object and now its working fine. Don't know why but it fixed it.

marker.moveTo works fine for me:
var px = map.getPixelFromLonLat(new OpenLayers.LonLat(newLon,newLat));
marker.moveTo(px);
Hope this helps :-)

To workaround the problem I did:
marker.lonlat = new OpenLayers.LonLat(newlon, newlat);
layer.removeMarker(marker);
layer.addMarker(marker);
layer.redraw();
It seems stupid removing and adding the same marker to just update its position but it works. It may be slower when doing this to a large group of markers though.

Try:
marker.lonlat = new OpenLayers.LonLat(newlon, newlat);
layer.drawMarker(marker);
(not testet)

How can I overlay SVG diagrams on Google Maps?

I would like to add an overlay image on a Google Map. The image is a SVG file I have generated (Python with SVGFig).
I am using the following code:
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(48.8, 2.4), 12);
    // ground overlay
    var boundaries = new GLatLngBounds(new GLatLng(48.283188032632829, 1.9675270369830129), new GLatLng(49.187215000000002, 2.7771877478303999));
    var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.addOverlay(oldmap);
}
Surprisingly, it works with Safari 4, but it doesn't work with Firefox (with Safari 3, the background is not transparent).
Does anyone have an idea on how I could overlay an SVG?
PS1: I read some works like this or the source code of swa.ethz.ch/googlemaps, but it seems that they have to use JavaScript code to parse the SVG and add one by one all the elements (but I did not understand all the source...).
PS2: The SVG is composed of different filled paths and circles, with transparency.
If there is no solution to overlay my SVG, I can use 2 alternative solutions:
rasterize the SVG
convert the paths and circles in GPolygons
But I do not really like the 1st solution because of the poor quality of the bitmap and the time to generate it with antialiasing.
And for the 2nd solution, the arcs, ellipses and circles will have to be decomposed into small polylines. A lot of them will be necessary for a good result. But I have around 3000 arcs and circles to draw, so...

Here are some news (I hope it's better to put them here in an answer, instead of editing my questions or to create a new question. Please feel free to move it if needed, or to tell me, so as I can rectify):
My problem was the following:
var oldmap = new GGroundOverlay("test.svg", boundaries);
map.addOverlay(oldmap);
did not work on Safari 3, Firefox and Opera (IE is not enable to draw SVG).
In fact, this code produce the insertion (in a <div>) of the following element
<img src="test.svg" style=".....">
And Safari 4 is able to draw a SVG file as an image, but this is not the way to do for the other browser. So the idea is now to create a custom overlay for the SVG, as explained here.
That's the reason why I asked for this question (I am sorry, but HTML/javascript are not my strongest points).
And since there is a small bug with Webkit for rendering a SVG with transparent background with <object>element, I need to use <object> or <img> accordingly to the browser (I don't like this, but... for the moment, it's still the quick-and-dirty experiments)
So I started with this code (still work in progress):
// create the object
function myOverlay(SVGurl, bounds)
{
this.url_ = SVGurl;
this.bounds_ = bounds;
}
// prototype
myOverlay.prototype = new GOverlay();
// initialize
myOverlay.prototype.initialize = function(map)
{
// create the div
var div = document.createElement("div");
div.style.position = "absolute";
div.setAttribute('id',"SVGdiv");
div.setAttribute('width',"900px");
div.setAttribute('height',"900px");
// add it with the same z-index as the map
this.map_ = map;
this.div_ = div;
//create new svg root element and set attributes
var svgRoot;
if (BrowserDetect.browser=='Safari')
{
// Bug in webkit: with <objec> element, Safari put a white background... :-(
svgRoot = document.createElement("img");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px");
svgRoot.setAttribute("src", "test.svg");
}
else //if (BrowserDetect.browser=='Firefox')
{
svgRoot = document.createElement("object");
svgRoot.setAttribute("id", "SVGelement");
svgRoot.setAttribute("type", "image/svg+xml");
svgRoot.setAttribute("style","width:900px;height:900px;");
svgRoot.setAttribute("data", "test.svg");
}
div.appendChild(svgRoot);
map.getPane(G_MAP_MAP_PANE).appendChild(div);
//this.redraw(true);
}
...
The draw function is not yet written.
I still have a problem (I progress slowly, thanks to what I read/learn everywhere, and also thanks to people who answer my questions).
Now, the problem is the following : with the <object> tag, the map is not draggable. All over the <object> element, the mouse pointer is not "the hand icon" to drag the map, but just the normal pointer.
And I did not find how to correct this. Should I add a new mouse event (I just saw mouse event when a click or a double-click append, but not for dragging the map...) ?
Or is there another way to add this layer so as to preserve the drag-ability ?
Thank you for your comments and answers.
PS: I also try to add one by one the elements of my SVG, but... in fact... I don't know how to add them in the DOM tree. In this example, the SVG is read and parsed with GXml.parse(), and all the elements with a given tag name are obtained (xml.documentElement.getElementsByTagName) and added to the SVG node (svgNode.appendChild(node)). But in my case, I need to add directly the SVG/XML tree (add all its elements), and there are different tags (<defs>, <g>, <circle>, <path>, etc.). It is may be simpler, but I don't know how to do.. :(

I spend the last evening on this problem, and I finally found the solution to my problem.
It was not so difficult.
The idea is, as Chris B. said, to load the SVG file with GDownloadUrl, parse it with GXml.parse() and add in the DOM tree every SVG elements I need
To simplify, I have supposed that all the SVG elements was put in a big group called "mainGroup". I have also supposed that some elements can be in the file.
So here is the library, based on the Google Maps Custom Overlays:
// create the object
function overlaySVG( svgUrl, bounds)
{
this.svgUrl_ = svgUrl;
this.bounds_ = bounds;
}
// prototype
overlaySVG.prototype = new GOverlay();
// initialize
overlaySVG.prototype.initialize = function( map)
{
//create new div node
var svgDiv = document.createElement("div");
svgDiv.setAttribute( "id", "svgDivison");
//svgDiv.setAttribute( "style", "position:absolute");
svgDiv.style.position = "absolute";
svgDiv.style.top = 0;
svgDiv.style.left = 0;
svgDiv.style.height = 0;
svgDiv.style.width = 0;
map.getPane(G_MAP_MAP_PANE).appendChild(svgDiv);
// create new svg element and set attributes
var svgRoot = document.createElementNS( "http://www.w3.org/2000/svg", "svg");
svgRoot.setAttribute( "id", "svgRoot");
svgRoot.setAttribute( "width", "100%");
svgRoot.setAttribute( "height","100%");
svgDiv.appendChild( svgRoot);
// load the SVG file
GDownloadUrl( this.svgUrl_, function( data, responseCode)
{
var xml = GXml.parse(data);
// specify the svg attributes
svgRoot.setAttribute("viewBox", xml.documentElement.getAttribute("viewBox"));
// append the defs
var def = xml.documentElement.getElementsByTagName("defs");
//for( var int=0; i<def.length; i++)
svgRoot.appendChild(def[0].cloneNode(true));
//append the main group
var nodes = xml.documentElement.getElementsByTagName("g");
for (var i = 0; i < nodes.length; i++)
if (nodes[i].id=="mainGroup")
svgRoot.appendChild(nodes[i].cloneNode(true));
});
// keep interesting datas
this.svgDiv_ = svgDiv;
this.map_ = map;
// set position and zoom
this.redraw(true);
}
// remove from the map pane
overlaySVG.prototype.remove = function()
{
this.div_.parentNode.removeChild( this.div_);
}
// Copy our data to a new overlaySVG...
overlaySVG.prototype.copy = function()
{
return new overlaySVG( this.url_, this.bounds_, this.center_);
}
// Redraw based on the current projection and zoom level...
overlaySVG.prototype.redraw = function( force)
{
// We only need to redraw if the coordinate system has changed
if (!force) return;
// get the position in pixels of the bound
posNE = map.fromLatLngToDivPixel(this.bounds_.getNorthEast());
posSW = map.fromLatLngToDivPixel(this.bounds_.getSouthWest());
// compute the absolute position (in pixels) of the div ...
this.svgDiv_.style.left = Math.min(posNE.x,posSW.x) + "px";
this.svgDiv_.style.top = Math.min(posSW.y,posNE.y) + "px";
// ... and its size
this.svgDiv_.style.width = Math.abs(posSW.x - posNE.x) + "px";
this.svgDiv_.style.height = Math.abs(posSW.y - posNE.y) + "px";
}
And, you can use it with the following code:
if (GBrowserIsCompatible())
{
//load map
map = new GMap2(document.getElementById("map"), G_NORMAL_MAP);
// create overlay
var boundaries = new GLatLngBounds( new GLatLng(48.2831, 1.9675), new GLatLng(49.1872, 2.7774));
map.addOverlay( new overlaySVG( "test.svg", boundaries ));
//add control and set map center
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(48.8, 2.4), 12);
}
So, you can use it exactly as you use the GGroundOverlay function, except that your SVG file should be created with the Mercator projection (but if you apply it on small area, like one city or smaller, you will not see the difference).
This should work with Safari, Firefox and Opera. You can try my small example here
Tell me what do you think about it.

This question was briefly discussed on the Google Maps API Group. Here's what they said:
I've not tried it, but SVG is a subset
of XML, so you can read them with
GDownloadUrl() and analyse them with
GXml.parse(). On some wonky webservers
you may have to change the file
extension to XML.
You then have to crawl through the XML
DOM, writing the SVG that you find
with document.createElementNS() and
.setAttribute() calls...
There are also a some Google Maps SVG examples here and here.
Good luck!