OpenLayers 3 can´t use Tile and Vector layer class - javascript

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

Related

Style with Leaflet and Mapbox

I'm new to leaflet.js and mapbox and I'm trying to work out how to add a custom style to a map. It should be straightforward only I don't know where I'm going wrong.
This works but I can't seem to add a custom style to it.
var mymap = L.map('mapid')
.setView(latLong, 13)
This works with mapbox style 11, only it seem to be in a container format
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // style URL
});
You have to login to your mapbox account and go to mapbox studio, there click on new style, then customize.
After you're done click on the share button top right and you'll get a style url looking something like this:
mapbox://styles/<username>/oxpbfqo2peepoo3phxl7010cm paste this into your code.
for styling leaflet maps you are limited to choose styles from one these providers: here
I worked out where I was going wrong! I needed to added a style layer.
To my future self, for reference:
L.mapbox.accessToken = 'pk.mytokenstring';
var map = L.mapbox.map('map').setView([51.483728, 0.00], 15);
L.mapbox.styleLayer('mapbox://styles/[username]/[mystyleid').addTo(map);

OpenLayers 3 Map Visualization

Sorry if it is not the right place to ask this, but I couldn't find a answer anywhere and this have been bugging me.
I'm using openLayers 3.8.2 to create a map, and when I zoom out, the maps shows repeatedly... If I zoom out I can see many Americas, many Europes... etc
Does anyone know if there is a way to stop it from happening (besides defining a min zoom), because when I drag the map, sometimes, I can see the country I'm working one twice...
I saw that in a lot of OL examples, like this one.
Thanks!
You can disable this using wrapX: false:
new ol.layer.Tile({
source: new ol.source.OSM({
wrapX: false
})
})
See it in action: http://jsfiddle.net/war9k831/

combining overlays in mapbox / leaflet layers control

I'm trying to combine 2 or more overlays into one overlay checkbox. I'm using leaflet layers control with mapbox.js 1.6 to toggle my overlays. It doesn't matter to me if I combine them on mapbox.com into one data layer, or if I combine separate data layers in my JS code into one overlay checkbox, but I can't seem to do either. I'm exporting MBTiles from Tilemill to my Mapbox account.
Note that it's not an option to:
combine them in Tilemill (the single zoom level and square bounding box won't work for me across all layers)
add the various data layers to a single map project on Mapbox.com (I'd like it to be toggleabe by the user)
You can use L.layerGroup to combine layers
var group = L.LayerGroup([layer1, layer2];
// add default layers to map
map.addLayer(layer1);
// switcher
var baseLayers = {
"My Group": group,
// more layers
};
// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);
You may be interested in this thread Leaflet layer control for basemap group layers
You can use the L.control.layers with the L.layerGroup. Here is the JSFiddle I wrote for this. You can add as many base or overlay layers you want.
Once you create the L.layerGroups, define the base and the overlay layers and add them to the control like this:
var controlLayers = L.control.layers(baseLayers, overlayMaps).addTo(map);

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?

Google Maps API - Markers

I'm trying to add markers to a map on my page using Google's Javascript API. I know how to do this simply, just with little marker images in various spots on the map, however, I want this to be a little bit cooler.
I want to place transparent circles (tiny ones), on the map in place of markers, but make it so when they are crowded in one area, they layer on top of each other (obviously), and create a darkening effect, so you can kind of see where things are more crowded at a high level, not just a crazy amount of the same exact image marker (which would look really sloppy and weird).
Have any of you done anything like this before, or should I be approaching this differently?
Like a heat map?
http://code.google.com/p/gheat/ or http://www.heatmapapi.com/
Have a look on that page :
http://florent.clairambault.fr/add-a-circle-overlay-to-google-maps-api-v3
I think this is what you want.
try making it a shadow. Shadows layer on top of each other like your described. Example:
var shadow = new google.maps.MarkerImage('/images/pin_shadow.png',
new google.maps.Size(27,30),
new google.maps.Point(0,0),
new google.maps.Point(0, 19));
var marker = new google.maps.Marker({
shadow: shadow,
(otherproperties here),
});
Let me know if this works.
Kevin

Categories