Mapbox can continuously wrap tile layers such that you can scroll infinitely to the left and right over a repeating map of the world.
I have added a feature layer to a world map which displays some markers and, for some reason, this feature layer does not also wrap. The markers are only present on the original iteration of the world tiles layer.
I've tried using the noWrap: false options property that controls this characteristic on the tile layer when adding a feature layer, but it doesn't seem to have any effect.
Is there any way to do this?
Use the worldCopyJump option
example:
var map = L.mapbox.map('map', 'your.mapid', {center: [lat, long],
zoom: 4,
worldCopyJump: true
});
Not sure if I understand your question...
You can use
maxBounds: [[-90,-180],[90,180]]
for example
map = L.mapbox.map('map', '<some map id>',{minZoom: 0, maxZoom: 10, maxBounds: [[-90,-180],[90,180]]});
https://www.mapbox.com/mapbox.js/example/v1.0.0/maxbounds/
Related
I want to show a single world map and wrap it around so that each area is shown only once on the screen. Please refer the fiddle http://jsfiddle.net/8m13d6vs/
var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
osm = L.tileLayer(osmUrl, {
noWrap: false,
attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
});
var map = L.map('map').setView([0, 0], 1).addLayer(osm);
In the above fiddle, wrap is on, but the world map is duplicated. I want a single world map, and on left/right mouse drag, it should wrap around. It should be responsive to the area as well. Is there any way to achieve this? Hope my problem statement is understandable.
There's the Leaflet worldCopyJump option:
var map = L.map('map', {worldCopyJump: true}).setView([0, 0], 1).addLayer(osm);
It defaults to false, but setting this to true will copy the contents of the map over as the user pans beyond the map boundaries.
This sounds like a misunderstanding of the definition of "wrap":
In the context of Leaflet's Tile Layer / Grid Layer option noWrap, it says:
Whether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels.
So it sounds like simply noWrap: true should achieve your objective.
Updated JSFiddle: http://jsfiddle.net/8m13d6vs/3/
BTW you should consider upgrading Leaflet version to 1+
For example, I have two map layers: open street maps and our own one. Both can be defined this way:
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(mapObject);
The question is in that I do not need to draw the second layer on a whole map, but only inside elements of L.FeatureGroup:
var drawnItems = new L.FeatureGroup().addTo(mapObject);
Especially inside polygons, rectangles, etc... Is that possible with leaflet? If yes, how this can be achieved?
Thanks.
One approach would be to use the bounds option of your L.TileLayer, i.e.:
var drawnItems = new L.FeatureGroup( .... );
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: ...,
bounds: drawnItems.getBounds()
}).addTo(mapObject);
Another approach would be to look at the list of plugins for tile display, and use either TileLayer.BoundaryCanvas or leaflet-tilelayer-mask (keep in mind that more plugins might be applicable, and more plugins might appear in the future).
I want to set an extend on my Openlayers 3.9.0 map.
When the page loads, I want the map to already be centered in that extend, no matter the layers. So I guess I will set an extend to the view, right?
Map contains a single OSM layer like
var layer = new ol.layer.Tile({
source: new ol.source.OSM(
{
attributions: [
new ol.Attribution({
html: 'All maps © ' +
'OpenCycleMap'
})
]
}
),
opacity: 0.8,
brightness: 0.8
});
Then I set the view
var center = ol.proj.transform([21.54967, 38.70250], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 6,
extent: [2297128.5,4618333.0 , 2459120.25,4763120.0]
});
And then the map
var map = new ol.Map({
target: 'map',
layers: [layer],
view: view,
});
I used my extend in an older project, with EPSG 900913. So to convert the extend from 900913 to default Openlayers 3 3857 I went here here and I put
2297128.5, 4618333 that convereted to 2297128.5,4618333.0
and then
2459120.25, 4763120that convereted to 2459120.25,4763120.0
my two problems
1- the converted coords look similar. Did I do something wrong?
2- the map is centered ok, but not zoomed in the extend. The coords define a county in Greece and the map does not zoom there, I see the whole Greece, along with Turkey and Italy.
What I did wrong? Thanks
Thanks everyone. What I did was
Keep the OSM layer as is.
Define the limits of the county. Turns out it was EPSG 900913
var countyLimits= ol.proj.transformExtent([2297128.5, 4618333, 2459120.25, 4763120], 'EPSG:900913', 'EPSG:3857');
View is now
var view = new ol.View({
center: center,
zoom: 6,
extent : countyLimits,
maxZoom:20
});
map is
var map = new ol.Map({
target: 'map',
layers:[layer],
view: view
});
After the map is defined, fit its view in the limits
map.getView().fit(countyLimits, map.getSize());
//get the view of the map and fit it to the limits, according to the map's size
fitExtend is now deprecated, so I used fit. It is experimental , but I guess it will become standard since it replaced fitExtend.
Thanks anyway people
Sources
OL answer
OL3 API
Several issues:
The extent [2297128.5,4618333.0, 2459120.25,4763120.0] seems to be in EPSG 3857 already and there is no need to transform it.
The extent option of ol.View is experimental and does not seem to work well. You can do the following to set the bounding box (after you declare map):
var extent = [2297128.5, 4618333.0, 2459120.25, 4763120.0];
view.fitExtent(extent, map.getSize());
The initial zoom in your example was due to the zoom level set on the view (zoom: 6). Using fitExtent() should override the initial zoom level. You can remove the zoom, center and extent options from your view declaration.
By the way, regarding the http://cs2cs.mygeodata.eu/ site, it seems that you have to specify EPSG:4326 instead of EPSG:900913 for the input coordinate, for the transformation to work correctly.
Note: ol.View.fitExtent() was renamed to ol.View.fit() in OpenLayers v3.7.0
It can be as easy as:
var min = [2297128.5, 4618333.0];
var max = [2459120.25, 4763120.0];
var extent = ol.extent.boundingExtent([min, max]);
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'osm'})
})
],
view: new ol.View({
center: ol.proj.fromLonLat([21.54967, 38.70250]),
zoom: 3,
extent: extent
})
});
http://jsfiddle.net/jonataswalker/zc3uL66q/
I've created a map in leaflet.js with multiple layers but can't work out how to toggle one layer to initially appear on the map.
Here is the link
I'm sure it's fairly straightforward but just can't figure it out.
After declaring your layers you need to add one to the map, just like you did with your tilelayer. See the code below. That should work. The layercontrol will work out that the layer is visible/added to the map and check it in the list.
var map = L.map('map').setView([52.814172, -2.079479], 9);
L.tileLayer('http://{s}.tile.stamen.com/toner/{z}/{x}/{y}.jpg', {
maxZoom: 18,
attribution: 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.'
}).addTo(map);
// Left out layer-declarations, they are HUGE
anti_soc.addTo(map); // here it is
var overlayMaps = {
"Anti-social behaviour" :anti_soc,
"Criminal damage and arson": crim_dam,
"Burglary": burg,
"Violence and sexual offences": viol,
"Other theft": other_theft,
"Vehicle crime": veh_crime,
"Shoplifting": shoplift,
"Public order": pub_ord,
"Robbery": robb,
"Bicycle theft": bikes,
"Drugs": drugs,
"Theft from the person": theft_person,
"Other crime": other_crime,
"Possession of weapons": weap
};
L.control.layers(null, overlayMaps).addTo(map);
I have two geoJson layers being loaded - both layers are the same data for testing purposes, but being drawn from two different json files. When I turn the layers on and off in the layer controller, the draw order of the layers change.
Any ideas why this is happening?
I have put my code into a JSFiddle: http://jsfiddle.net/lprashad/ph5y9/10/ and the JS is below:
//styling for watersheds_copy
var Orange = {
"color": "#ff7800",
"weight": 5,
"opacity": 0.65
};
var Water_Orange = L.geoJson(watersheds_copy, {
style: Orange
});
Water_Orange.addData(watersheds_copy);
//these are blue
var Water_blue = L.geoJson(watersheds, {});
Water_blue.addData(watersheds);
//This sets the inital order - last in layer list being on top. Except minimal - tile layer is always on bottom
var map = L.map('map', {
center: [41.609, -74.028],
zoom: 8,
layers: [minimal, Water_Orange, Water_blue]
});
var baseLayers = {
"Minimal": minimal,
"Night View": midnight
};
//This controls the order in the layer switcher. This does not change draw order
var overlays = {
"Water_Orange": Water_Orange,
"Water_blue": Water_blue
};
L.control.layers(baseLayers, overlays).addTo(map);
LP
While searching I happened upon this site that shows some of the Leaflet code:
http://ruby-doc.org/gems/docs/l/leaflet-js-0.7.0.3/lib/leaflet/src/control/Control_Layers_js.html
In it I found this condition for the application of autoZIndex:
if (this.options.autoZIndex && layer.setZIndex) {
this._lastZIndex++;
layer.setZIndex(this._lastZIndex);
}
TileLayer is the only layer type that has a setZIndex function, so apparently autoZIndex only works there.
I'm not sure which annoys me more. This incredible limitation or the fact that Leafet documentation doesn't point it out.
At least on 0.7.2, I had to use bringToFront in the callback of map.on('overlayadd'). autoZIndex: false did not work in my case neither. A comment on this issue may explain the reason.
It's not specific to L.GeoJson layers. As far as I can tell, it's true of all Leaflet layers with layer control. The last layer turned on is simply on top. I don't think this is a bug either. It's predictable behavior which I use and depend on when I'm designing maps with layer control...