We Keep Coding

Openlayers zoom-based object visibility not working

I would like to have my element zoom-based. I don't need it visible when zooming out of 19, because my map doesn't look nice.
I tried to use the maxResolution method derived from the layers.js file, when it was found, as a whole map was generated by the QGIS2web plugin.
Unfortunately it wasn't working
I tried also the minZoom feature, but in vain.
All the reasonable examples I found here:
https://openlayers.org/en/latest/apidoc/module-ol_View.html
https://openlayers.org/en/latest/examples/layer-zoom-limits.html
https://github.com/Viglino/ol-ext/issues/51
Another thread says about changing the maxResolution value, but it didn't work either.
https://gis.stackexchange.com/questions/160725/vector-layer-visibility-using-min-maxresolution-is-not-working-in-openlayers-2
Finally, my code looks as follows:
var tekst2 = new ol.Overlay({
position: pos3,
minZoom: 19,
element: document.getElementsByClassName('tekscio')[1],
});
map.addOverlay(tekst2);
I see, that the minZoom refers mostly for the lower zoom limit of the map canvas.
But this configuration:
var tekst2 = new ol.Overlay({
position: pos3,
element: document.getElementsByClassName('tekscio')[1],
maxResolution:0.42006699228392946,
});
map.addOverlay(tekst2);
didn't work either.
I also found some methods here:
http://dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/deprecated-js.html
http://dev.openlayers.org/docs/files/OpenLayers/Layer/FixedZoomLevels-js.html#OpenLayers.Layer.FixedZoomLevels.getOLZoomFromMapObjectZoom
but it looks like they have been deprecated.
What should I do in this code? Is there another thing to provide here, which I am missing?
I want to have this text based on the zoom level.
Just in case I am sending the JS fiddle with the javascript code here:
https://jsfiddle.net/uxkcyomf/

I would like to have my element zoom-based. I don't need it visible when zooming out of 19, because my map doesn't look nice.
You can simply show/hide an element depending on the current zoom level in a way similar to this (the zoom change handler was taken from https://gis.stackexchange.com/a/309404/70847):
var currZoom = map.getView().getZoom();
map.on("moveend", function(e) {
var newZoom = map.getView().getZoom();
if (currZoom != newZoom) {
if (newZoom > 19) {
document.getElementById("vienna").style.display = "none";
} else {
document.getElementById("vienna").style.display = "unset";
}
currZoom = newZoom;
}
});

jVectorMap - setFocus error - jQuery

I understand that the minified file from the zip is only the base code, and does not include libraries. Therefore I ran the build.sh file and it produced another minified file that I have included in my scripts.
Expectation:
I am attempting to zoom in on a marker when clicked. I have a function that runs on the event, onMarkerClick.
The problem:
I have looked at (2) different posts:
Jvector map, how to focus on a marker?
https://github.com/bjornd/jvectormap/issues/157
Both posts produce the same exact error.
The error:
Error: <g> attribute transform: Expected number, "scale(NaN) translate(N…". jquery.jvectormap.min.js:733
line 733 - this.rootElement.node.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');
Apparently +scale+ is not a number (NaN)

I had a bunch of errors, but finally narrowed it down. First I thought that c had markers[c].latitude and markers[c].longitude, but it did not. Next mistake was not passing the configuration to the setFocus function
onMarkerClick: function (e, c) {
setFocusLatLng(5, markers[c].latLng[0], markers[c].latLng[1]);
}
// sets focus on marker clicked
function setFocusLatLng(scale, lat, lng) {
var mapObj = $('#map').vectorMap('get', 'mapObject');
var config = {
animate: true,
lat: lat,
lng: lng,
scale: scale
}
mapObj.setFocus(config)
}
Update:
In case you ever need to pan back out to full map and set the focus on the center of the map:
// sets focus on center of map and zooms back out to full view
function setFocusMapCenter() {
var mapObj = $('#map').vectorMap('get', 'mapObject'),
center = mapObj.pointToLatLng(mapObj.width / 2, mapObj.height / 2);
var config = {
animate: true,
lat: center.lat,
lng: center.lng,
scale: 1
}
mapObj.setFocus(config)
}

I have fought with this issue today and I'll leave my fix here in case I might help someone.
I was having the same error while trying to focus passing the id like this:
$('#world-map').vectorMap('get', 'mapObject');
map.setFocus(regionId)
But you have to pass an object as written below and it works perfectly. The documentation says it, but it is not that clear, with an example it would work better
$('#world-map').vectorMap('get', 'mapObject');
map.setFocus({region: regionId})

Late to the party but I had this issue myself and these solutions are not the best. Im using jquery-3.5.1.js with jvectormap multimap and it seems to work just fine except this issue occurs if the size of the viewport is changed
The problem is in the file svg-canvas-element.js in the function
jvm.SVGCanvasElement.prototype.applyTransformParams
The solution is to wrapping the setAttribute line with a numeric check on the value for the scale variable.
e.g.)
if($.isNumeric( scale )){
this.rootElement.node.setAttribute('transform', 'scale('+scale+') translate('+transX+', '+transY+')');
}
Make the change, Save, then test by opening the drill-down.html example. The intial map is the United States. Select a region it loads the State map. Now open developer tools ( im doing this in chrome ) then click the back button on the map ( not in the browser ). Now click on a different state it should throw the error in console and the new state may not even appear in the #map1 div if it is still broken. If it is fixed everything will work as expected.

html2canvas does not work with Google Maps Pan

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;
});

Openlayers Print Function

I would like to create a print button for my Openlayers map which grabs the map image and creates a nice image file. I have tried http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/exportMapCanvas.html
but it seams like it is experimental. I have also looked at http://trac.osgeo.org/openlayers/wiki/Printing
but I don't want any server involved. I also checked out http://html2canvas.hertzen.com/ but can't get it to work. I get the following error, Uncaught TypeError: Cannot read property 'images' of undefined, html2canvas.js
<button onclick="printFunction()">Click me</button>
function printFunction() {
html2canvas(('#map'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png")
window.open(img);
}
});
};

Try
function printFunction() {
html2canvas(document.getElementById("map"), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png")
window.open(img);
}
});
This works for me. The hashtag identification only works for jQuery, took me a while to figure that out :-)
There is a slight problem though. The html2canvas did not render the background WMS layer - only the map window and markers, so some tweaking still needs to be done.
Update :
I have done some fiddling with this, and I do not think that it will work with openlayers. Since the openlayers map is a composition of many divs, it seems that the html2canvas is not capable of drawing all of them properly. Specifically a WMS layer, which, when attempted to be drawn on its own, returns an error. You can try rendering one of the children divs in the map, but that has not worked for me. Although, if you are only using simple vector graphic, it could work for you.

Ok, I've spent a few hours on this now and the best I've come up with is an enhancement on #Kenny806 's answer, which is basically this one.
It does seem to pick up WMS and Vector layers:
function exportMap() {
var mapElem = document.getElementById('map'); // the id of your map div here
// html2canvas not able to render css transformations (the container holding the image tiles uses a transform)
// so we determine the values of the transform, and then apply them to TOP and LEFT
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(mapElem, {
useCORS: true,
onrendered: function(canvas) {
mapImg = canvas.toDataURL('image/png');
// reset the map to original styling
$(".gm-style>div:first>div").css({
left:0,
top:0,
"transform":transform
});
// do something here with your mapImg
// e.g. I then use the dataURL in a pdf using jsPDF...
// createPDFObject();
}
});
}
Notes
Only tested on Chrome and Firefox
This is a hacky solution (unfortunately I am struggling to find other options for my situation)
If you have the option to use Openlayers 3, there seems to be better canvas support, and I've also seen a convincing toBlob example: http://codepen.io/barbalex/pen/raagKq

WMS draw works fine but you have to implement a Proxy for downloading WMS tiles using AJAX. See the PHP proxy example of html2canvas for the implementation details of the "proxy" (which is not a http proxy".

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!