We Keep Coding

OpenLayers 3 can´t use Tile and Vector layer class

Im having this problem.
Im making a map with openlayers 3. I have a layerswitcher with a group of tile class layers, and it works perfectly until I try to remark with a mousover the diferent layers, so the user can know that he can click on them to get feature info. Something like this https://openlayersbook.github.io/ch06-styling-vector-layers/example-08.html.
The problem is I need the layers in ol.layer.Vector class, and i was using ol.layer.Tile, so I had to update the ol3 that i was using v3.7.0 to the v3.16.0, and if I use only ol.layer.Vector class works, but I need both of them, and using both, the layers appear, but such for a moment.. then the background covers it.. like a load problem. I thought it was a ccs problem, but no, its the new js.
Summarizing, my problem is that the layers in tile class overlap with the layers in vector class, and the map only show me one, or none.
If anybody can help me I will be greatful.
Thanks!

The example you linked above only works with OpenLayers < v3.7.0, because it uses ol.FeatureOverlay. You have to replace that with ol.layer.Vetcor. See the v3.7.0 release notes for upgrade instructions. Once you have that, it should be easy to add tile layers. Just make sure that you add them to the map before you add a vector layer. Something like
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
}),
countries
],
view: view
});

External SVG as Google maps api marker - Yes or No

Let's say I've got a map app and I'm creating markers out of some external user data. Users are able to define paths to their custom images which they want to use as marker icons. My problem is svg files. After reading through related stackoverflow threads and trying suggested solutions I still can not make that work on Firefox and IE.
Some say that Google Maps API doesn't support external svg files as icons and the only way to make it work is to use path notation, but some said it's possible to use external file, but using a google.maps.Icon object.
Question:
At that point of time do we have exact yes or no answer to whether we can use external svg as a marker icons and how.
Here is link to my fiddle with a simple example.
I'm creating marker like below
marker = new google.maps.Marker({
position: {
lat: -34.397,
lng: 150.644
},
title: 'SVG Marker',
icon: {
url: 'https://cdn.shopify.com/s/files/1/0250/8090/files/R_final.svg',
anchor: new google.maps.Point(10, 10),
//scaledSize: new google.maps.Size(20, 20),
size: new google.maps.Size(50, 50)
},
map: map
});
Chrome - works.
Firefox , IE - markers do not show.
If I uncomment scaleSize property , I've got weird scaling on IE . Firefox still doesn't display.
Path notation doesn't seem like an option for me, as long as you can point me to the way of extracting it from the files.
Appreciate your input on this.

At least for Firefox, uncomment scaledSize, and add this property to the marker :
optimized:false
This still works on Chrome, but I had no way to test it on IE.
You can see it on my fiddle.
Note : I tweaked yours (no callback/async/defer, and immediate call of initMap) because it didn't even show the map on Firefox.

Single marker stuck beneath polygon in Fusion Tables layer

So this strikes me as, perhaps, a really obscure bug.
I'm working on a map for the upcoming Quebec election. You can see it here
So I built a fusion table with all the riding polygons, and I've begun adding points for ridings of interest. They all work fine - except one. If you zoom in on the area around Montreal (Laval, specifically) there's one blue dot that is stuck behind a red polygon and it simply isn't clickable.
I've tried screwing around with the zindex for all the markers, but haven't had much luck. Here's what I'm doing:
var layer = new google.maps.FusionTablesLayer({
query:
{
select: 'Geocodable address',
from: '4722124'
},
styles:
[
{
markeroptions: { zindex: 1, }
},
{
polygonOptions: { zindex: 2, }
}
]
});
layer.setMap(map);
Beyond that, I'm not entirely sure what to do. The rest of the markers work fine.
Currently, I'm just plugging the points manually into the fusion table. Should I drop them using CSS and edit the zindex that way? (Assuming this is just a glitch and there's no other solution.)
Thanks!

The only way I know to force markers to be on top is to put them in a separate layer
var layer1 = new google.maps.FusionTablesLayer({
query: {
select: 'Geography',
where: "Marker does not contain '_'",
from: '4749709' // '4722124'
}});
layer1.setMap(map);
var layer2 = new google.maps.FusionTablesLayer({
query: {
select: 'Geography',
where: "Marker contains '_'",
from: '4749709' // '4722124'
}});
layer2.setMap(map);
Working example
That has the disadvantage of potentially displaying two infowindows at the same time. A work around for that is to manage the infowindow yourself.
Working example with single infowindow

I've struggled with this for a long time myself. I tried creating the markers and polygons in a different order (eg polygon first, marker second, and visa versa) but have found no way to control which item is on top of another.
My work-around was to export the fusion table to a KML file, and then manually reorganize the order of items in the file. The higher a placemark appears in the KML file, the closer to the top it will be in the item order on the map. That is -- put your markers first, and polygons second, and then you will be able to click on the markers.
Hope this helps!
Question to FUSION team -- surely you can write this logic into the Fusion Tables code?

Showing the Infobox in Bingmaps v7 above the Pins

I have a number of pins on the map and a few metheods to allow me to click on a pin and the infobox will popup. This seems to be working fine apart from the infobox itself is below the Pins. I have tried setting the zIndex of both the pins and the infobox in a number of differant ways but still the infobox is below the pins. Any thoughts on how to achieve this?

For me, setting the .Infobox style did not work, but wrapping the infobox within it's own entity collection, and setting the zIndex on that, did work. I also tried quite a number of variations on setting zIndexes on my pushpins and pushpin collection entities before trying this option. Perhaps we are seeing this behavior only because we are putting pushpins within their own entity collections, but trying to add the InfoBox seperately.
Some example code of what works for me:
var infoBox = CreateMyInfoBox(); // create the Microsoft InfoBox here.
var entityCollectionInfoBox = new Microsoft.Maps.EntityCollection({zIndex:2000});
entityCollectionInfoBox.push(infobox)
map.entities.push(entityCollectionInfoBox);
There's no obvious semantic difference between setting a high z-Index on the infobox directly, and wrapping it in an EntityCollection with a high z-Index, but apparently there is.

For me the following worked, not very nice but better than having the pins above the Infobox
<style type="text/css">
.Infobox
{
z-index:150;
}
</style>

Set these three values on the Infobox:
zIndex: google.maps.Marker.MAX_ZINDEX + 1,
pane: "floatPane",
enableEventPropagation: false
Did work for me.

I have two different types of pushpins - each type has an infobox. I set the zIndex of the first set of pushpins to -2, the second set of pushpins to -1 and left the infobox alone - since it didn't care what I set the zIndex to.

How to override or remove a control in Google Map API

I was playing with Google maps for last two days and started understanding little bit about its functionality.
I was using Large Map i.e. 700 X 300 resolution map size and i was trying to implement controls used in small maps.
eg.
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 18);
map.setMapType(G_HYBRID_MAP);
**map.setUIToDefault();**
map.enableContinuousZoom();
var customUI = map.getDefaultUI();
customUI.controls.smallzoomcontrol3d=true; //1. trying to override largezoomcontrol3d
customUI.controls.menumaptypecontrol=true; //2. trying to override largezoomcontrol3d
map.setUI(customUI);
map.enableRotation(); //3. Enabling rotation
Here in 1(a). Small zoom control is not getting visible until i remove the line map.setUIToDefault() and add one more line customUI.controls.largezoomcontrol3d=false. Although I was expecting that by writing above code those control will get overridden.
1(b). I tried to use map.removeControl(Control:GControl) where i was not able to pass the correct parameter. I wanted to remove largezoomcontrol3d from map but i was not able to make out how to refer to this control in the current map.
Same overriding problem is occuring here also. The only difference here is that both the controls are visible here menumaptypecontrol and maptypecontrol, here menumaptypecontrol is overlapping on maptypecontrol
I am trying to enable rotation on map but it is not working for me.

thinking about map.removeControl you were quite closely to solution (if I got what you need). take a look here:
Controls
so, you need just use map.addControl function to add exactly what you need instead of what you did.
sorry, forgot about map rotation. I think the following simple example of Google Map can help you (I just never played with rotation, but example looks very simple to learnt from it):
Google Map rotation example