There is an issue on a site I have been working on that for some reason the SVG image markers are not showing up in IE 11.
I have two sets of markers:
the default zoomed out has PNG markers for the suburbs
zoomed in has address specific numbered SVG ones
I use a fallback for older browsers that don't support SVG (testing it with modernizr). I am using the old Google Chart markers for IE 11 to get it to work (testing the user agent string to id it).
I want to know if anyone has an idea as to:
the cause
whether it is something screwed up with IE11 Edge mode (switch the document mode to 10 to get it to work)
or something that is failing with Google.
The site is:
http://artstrail.org.au/arts-trail.php
You can see it fail if you change the user agent string in IE 11 while leaving it in Edge Document mode.
It seems that Google Maps doesn't really support using SVG images for markers at the moment. This fact is easy to overlook, because it turns out that SVG marker images do actually work in, eg. Chrome and Opera.
However, the Google Maps API (v3) specifically provides Symbol objects for displaying vector paths in map markers. I found that specifying the vector image in SVG path notation allowed it to work in IE and other browsers.
Example (from Google Maps docs, here):
var goldStar = {
path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z',
fillColor: 'yellow',
fillOpacity: 0.8,
scale: 1,
strokeColor: 'gold',
strokeWeight: 14
};
var marker = new google.maps.Marker({
position: map.getCenter(),
icon: goldStar,
map: map
});
(Thanks to this answer too)
Actually, for me adding marker optimized: false and icon scaledSize: new google.maps.Size(25, 25) does it for me. So even if what Nick F says is true (that it's not officially supported), it works.
SVG markers start showing up in IE11. It seems that the scaledSize adds a style width and height on the <img> element, unsure what optimized does in this case.
Example:
var marker = new google.maps.Marker({
map: map,
position: poi.geometry.location,
title: poi.name,
zIndex: 99,
optimized: false,
icon: {
url: 'loremipsum.svg',
scaledSize: new google.maps.Size(25, 25),
size: new google.maps.Size(25, 25),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(12.5, 12.5)
}
});
Credit: Google Maps SVG marker doesn't display on IE 11
The IE implementation deviates from the SVG standard in the following ways:
Properties of a marker element inherit at the point of reference, not from the ancestors of the marker element.
References
MS-SVG: The 'marker' element
Add meta to emulate IE10/IE9 if the SVG supports in lower IE versions.
ie) for IE-10 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
Related
I need to implement a plotly.js chart on a page with a very restricted width. As a result, a tooltip is partially cut. Is it possible to cause tooltip not to be limited by plotly.js container size?
My code example at codepen: https://codepen.io/anatoly314/pen/gOavXzZ?editors=1111
//my single trace defined as following but it's better to see example at codepen
const yValue1 = [1000];
const trace1 = {
x: [1],
y: yValue1,
name: `Model 1`,
text: yValue1.map(value => Math.abs(value)),
type: 'bar',
textposition: 'outside'
};
It is, by design, not possible for any part of the chart to overflow its container.
I would say it is wrong to say that by design this is not possible! It is a bit hacky, but when you add the following lines, it shows the label outside of svg:
svg.main-svg,svg.main-svg *
{
overflow:visible !important;
}
The answer given by rokdd works. However the css selector should be more specific, otherwise it's natural that you will introduce subtle bugs (particularly if you need to scroll the content where the plotly chart is contained).
If we look at the DOM tree constructed by Plotly, we find that the tooltips are created inside the <g class="hoverlayer"></g> element (which is a direct child of one of the three <svg class="main-svg"></svg>). So that parent (that svg.main-svg element) is only one that needs to affected.
The ideal css selector in this case would be the :has selector. However it's still not supported (as of 2022): https://css-tricks.com/the-css-has-selector/
So the next simplest thing is to use a little bit of javascript right after we call Plotly.newPlot:
// get the correct svg element
var mainSvgEl = document.querySelector('#positive g.hoverlayer').parentElement;
mainSvgEl.style['overflow'] = 'visible';
Or in a more generic way (works for any chart):
Array.from(document.querySelectorAll('g.hoverlayer')).forEach(hoverEl => {
let mainSvgEl = hoverEl.parentElement;
mainSvgEl.style['overflow'] = 'visible';
});
I am using google map in my angular2 app. I have also used MarkerCluster as below.
for (let marker of this._markers) {
let lat = +marker.latitude;
let long = +marker.longitude;
let markerobj = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
title: marker.name,
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: 6,
fillOpacity: 0.8,
fillColor: '#5A7793',
strokeColor: '#FFFFFF',
strokeWeight: 2,
},
map: this.map,
visible: true,
});
this.markerLayer.push(markerobj);
latlngbounds.extend(markerOnMap.getPosition());
markerList.push(markerOnMap);
}
let markerCluster = new MarkerClusterer(this.map, markerList, { imagePath: '../assets/images' });
I want to show around 100000 markers on google map. I am facing lot of performance issues when i tried to plot 100000 markers.
As per client requirement I can not use other map libraries. I need to stick with Google Map.
Do you have any suggestion which help me to improve the performance.
You don't plot 100,000 markers at once. What you need to do is reduce the amount of data you are displaying at a time. Only display individual markers when you are zoomed in so there are not so many markers in the view.
So what I would suggest is that load the markers from the server based on the bounds of your google map. So that would be the coordinates at the top left and bottom right.
So lets say you have 100,000 markers spread all over the world. At the world view it would be best not to show anything and ask the user to zoom in. Once you are at a lower zoom level use the bounds of the map to get markers from the server which lie inside those bounds. This should reduce the number of markers you have to display substantially. I don't know the coverage of your data but you can figure out what zoom levels work best for you.
I'm facing a very odd issue here using Raphael.js to draw using SVG. If I set opacity on a triangle I've drawn, it cuts off the corners. It appears fine in Chrome and IE however. Using the same triangle drawing, if I change opacity to 1 or if I alter fill-opacity instead of just opacity, it renders correctly. Even more strange, creating a demo in jsFiddle using the same exact code and libraries renders fine. I double checked versions of Raphael.js, updated mine again just in case, etc.
Does anyone have any idea how this could be happening?
Here's the code I'm using:
var paper = Raphael(0,0, 800, 800);
var triangle1 = paper.path('M295,738 l0,-738 l500,0 Z')
var triangle2 = paper.path('M200,200 l0,-100 l100,0 Z')
triangle1.attr({
fill: '#fff',
'opacity': '0.5'
});
triangle2.attr({
fill: '#fff',
opacity: 1,
stroke: 'red'
});
Here is the jsFiddle: http://jsfiddle.net/crisp330/26PaS/
And here is what this looks like on my FF version 16.0.2: http://grab.by/hBWK
I even directly copied the iFrame source from jsFiddle (which looks correct in FF for me), and pasted it into a new HTML page... nope! Corners get cutoff again.
Any ideas as to whats going on?
I am trying to set up Google map (v3) inside Joomla tabs but there is display problems on map.
If i move away from tab where the map is and change back map canvas is grey and map is displayed only partially on left corner of map canvas.
Image with screen capture:
I get this worked on other site by setting map size on map parameters but there was used Google map version 2 and i could not find correct syntax for setting map size on version 3 map.
Map options are set in global variable.
var mapoptions = {
zoom: 6,
center: new google.maps.LatLng(60, 50),
mapTypeId: google.maps.MapTypeId.ROADMAP,
gridSize: 50,
size(600, 700, 'px', 'px')
}
What is the correct syntax of map size or is there other solution for this?
I have tested resize function and playing with zoom but those was not helped.
I got this solved by adding short delay (100ms) before map initializing function call.
Maybe map canvas did not get fully rendered before google map was accessing it.
I am brand new to Raphael and am really stuck, I would like to rotate a div and its contents, using a button, with Raphael.
Ideally, I would like to have a smooth animation that goes from 0 degrees to -90 degrees when the button is clicked, then when the button is clicked again, the animation would reverse. I think I will change the id or class on mouse click so that I can use the same button for both animations. Would that be wise?
I really would like some help please, my Sandbox is at http://jsbin.com/isijo/ and you can edit it at http://jsbin.com/isijo/edit
Many thanks in advance for any help.
Hello and welcome to Raphael!
I have been looking at Raphael for more than a few months and although the documentation is not very comprehensive the software is brilliant.
I have been mixing Divs with Raphael objects in many ways and have got a "feel" for what works and what does not work.
I am recommending that you do not try rotating divs but (instead) Raphael objects.
First of all you could make a shiney set of Raphael buttons using this "tweakable" code below..
var bcontrols = new Array();
var yheight = 300;
for (var i = 0; i < 3; i++) {
bcontrols[i] = paper.circle(15 + (35 * i), yheight, 15).attr({
fill: "r(.5,.9)#39c-#036",
stroke: "none"
});
bcontrols[i].shine = paper.ellipse(15 + (35 * i), yheight, 14, 14).attr({
fill: "r(.5,.1)#ccc-#ccc",
stroke: "none",
opacity: 0
});
bcontrols[i].index = i;
bcontrols[i].shine.index = i;
bcontrols[i].shine.mouseover(function (e) {
this.insertBefore(bcontrols[this.index]);
});
bcontrols[i].mouseout(function () {
this.insertBefore(bcontrols[this.index].shine);
});
/* Called from Raphael buttons */
bcontrols[i].click(function () {
alert("Hello you just clicked " + this.index);
});
}
Next you need to know more about rotating Sets:
var s = paper.set();
s.push(paper.rect(10, 10, 30, 30, 10).attr({fill:'red'}));
s.push(paper.rect(50, 10, 30, 30, 5).attr({fill:'blue'}));
s.push(paper.rect(90, 10, 30, 30).attr({fill:'orange'}));
s.animate({rotation: "360 65 25"}, 2000);
This shows the degree of rotation and the centre of rotation of the "set" on the last line.
My additional Raphael resources website which aims to supplement documentation (Amongst other things):
http://www.irunmywebsite.com/raphael/raphaelsource.html
Heres where you can run the above 2 code examples without alteration:
http://raphaeljs.com/playground.html
I'm hoping this helped...
To my knowledge, there is no way to convert a div into a Raphael object. Since the Raphael rotate command is only defined for Raphael objects, your best bet is to create the major elements of your div (images, text, buttons and all) in Raphael instead of HTML, put them together in a single set, and, as the set is a Raphael object, rotate the set.
Consult Rotate a div in CSS and in IE filters. This is not the same as SVG, so if you need more layout magic, Raphael shapes are likely the way to go. You should be able to used JQuery in concert with Raphael to manipulate both in your window, but I am brand new to Raphael and have never done so.