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?
Related
I have a Leaflet map with a geoJSON containing contour lines. The elevation corresponding to each line is located in feature.properties.Elevation of the geoJSON. I want to achieve the following:
What I've tried to achieve this in leaflet is to calculate the center of each polyline and then add a marker to that position containing the data from feature.properties.Elevation.
L.geoJson(contourJSON, {
onEachFeature: function(feature, layer) {
var label = L.marker(layer.getBounds().getCenter(), {
icon: L.divIcon({
className: 'label',
html: feature.properties.Elevation,
iconSize: [100, 40]
})
}).addTo(map);
}
});
Which kind of works, but does not have a nice styling and it's not really clear which value belongs to a specific line:
What would be a better method of adding the elevation labels in such a way that it is readable and maybe dynamic to the current zoom level? I'm using Leaflet 1.0.3 so maybe Tooltip could offer a solution? Thanks!
You might be interested in those Leaflet plugins, possibly combined: (not sure how easy it would be to combine them)
Leaflet.LabelTextCollision (demo)
…display[s] labels on vector data while avoiding label collisions.
Leaflet.TextPath (demo)
Shows a text along a Polyline.
You might also want to check out the rest of Leaflet plugins.
BTW, I am not sure placing your label / marker at the polyline "center" is appropriate. You might just pick one of its vertices, or for example the farthest to the right / East to have an effect similar to the example you provide.
Im using Leaflet & Geojson-vt to visualize a large dataset (GeoJSON with 70,000 polylines features)
Is there any way to show smoothly a popup (it contains the polyline data) on click event on one of the multiple polylines ?
I am using geojson-vt and the example from here to add the tiles to the leaflet map.
i tried this
function onEachFeature(feature, layer) {
layer.on('click', function(e) {
layer.bindPopup(feature.properties.NUMERO);
});
}
L.geoJson($scope.dataOfFile.data, {
onEachFeature: onEachFeature
}).addTo(map);
but the map keep freezing.
Not sure I'm understanding... That example draws a canvas layer from vector tiles, this has no interaction method. If it were polygons you could use point in polygon from the original data. Since it's lines you may want to experiment with the almost over plugin using 0 weight (transparent) lines.
I had a similar issue with popups on Markers. If I added the popup before the marker was added to the map then the map would briefly freeze when all the markers were added to the map.
So instead I added the Markers to the map first. I maintained an array of all the markers then added the popups afterwards to each marker and I no longer experienced the map locking up.
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
});
Using gmaps.js and having an issue with marker clustering... it works perfectly fine although in my case I may have markers with the exact same location (lat/lng).
What happens is when you zoom to the highest level the cluster disappears and there are no markers shown at all (I thought they would be layered over each other so at lease one is viewable, but that is not the case for me). I have found some solutions on here which change the lat/lng values slightly so each marker has a different location, but in reality like 100 meters difference or something. I think this would work find in my situation, but I do not know how to implement these solutions since I am using gmaps.js.
Current working code, but the problem mentioned above :
response.results in an array of my location data retrieve with ajax...
//create the map
map = new GMaps({
el: '#map_canvas_main',
lat: response.results[0].lat,
lng: response.results[0].lng,
panControl : false,
markerClusterer: function(map) {
return new MarkerClusterer(map);
}
});
//loop through array
for(var i = 0; i < response.results.length; i++)
{
//add marker
map.addMarker({
lat: response.results[i].lat,
lng: response.results[i].lng,
title: response.results[i].ip_address,
infoWindow: {
content: '<p>'+response.results[i].ip_address+'</p>'
}
});
}
EDIT :
I added a fiddle mimicking multiple markers at the same location. Strangely in the fiddle the 'cluster marker' does not disappear yet in my site it does. What happens on my site is you can zoom in on the marker any way you want... when you reach the highest zoom level and click on it... it disappears. You need to zoom out or pan around for the image to come back. This does not happen in the fiddle though.
Regardless of that though - I still need a method in which to show the information for all the markers in the same location... most of the solution I found here on SO change the lat/lng ever so slightly to avoid this...
so link
fiddle
I have this map, which I show some red markers over and whenever a location is chosen from a list the current marker is painted blue and the map centers around it.
I achieve this by having 2 layers - one for the red markers which is drawn at the beginning and one which is redrawn whenever a point is chosen from the list.
I would like to define that the red marker layer will always appear above the blue marker layer. Effectively hiding the "current marker" indication. (The reason for this is complicated)
This link is to a page that works the way I don't want. The blue layer is on top of the red layer.
I tried to reverse the order by defining the graphicZIndex property for both the vector and in the layers.addFeature function.
I'm obviously doing something wrong and maybe someone can point me to what it is.
The way I define the z-axis:
currentPointLayer = new OpenLayers.Layer.Vector("Selected Point Layer", {
style : {
externalGraphic : 'marker-blue.png',
graphicHeight : 15,
graphicWidth : 15,
graphicZIndex : 1
},
rendererOptions: { zIndexing: true }
});
Again, I want to hide the blue marker behind the red markers layer.
You can either change the order of your layers as ilia choly stated.
Or, if you want to use zIndexing, you have to put all features into one layer, because zIndexing is only done within a single layer.
Have a look at this simple example about styling, that also uses zIndexing. It randomly creates some points in the map. If you zoom out, chances are good that two circles overlap and if you hoover over one, it will be highlighted and put on top.
So you want highlight a marker with different color whenever a point is selected? Managing it with 2 layers is really an overkill. You should be able to define a vector layer with style like this:
var currentPointLayer = new OpenLayers.Layer.Vector("Selected Point Layer", {
styleMap: new OpenLayers.StyleMap({
externalGraphic : '${markerUrl}',
pointRadius: 20
})});
map.addLayer(currentPointLayer);
Then you have to set attribute 'markerUrl' of every feature(i.e. feature.attributes.markerUrl) to 'marker-red.png' - that would be initial state of all features.
Then whenever feature is selected you change markerUrl attribute of selected feature to 'marker-blue.png' and(important) call
currentPointLayer.redraw();
Obviously you'll also have to set previously selected feature to 'marker-red.png' when new feature is selected.
in your init_map() function you're adding the red marker layer before the blue ones. Try switching them.
preparePointsOnMap(map, points); //red marker
if (!map.getCenter()) {
map_set_center(lon, lat, mZoom); //blue marker
}