I want to implement something similar to mapbox-compare feature. But instead of having side by side sync maps I need to show one layer over another but only inside some area(s) on map e.g.
Lets say i want to combine default lite map style with some third-party raster source
Something like this https://jsfiddle.net/e9wqdfgn/11/
function getD3() {
var bbox = document.body.getBoundingClientRect();
var center = map.getCenter();
var zoom = map.getZoom();
// 512 is hardcoded tile size, might need to be 256 or changed to suit your map config
var scale = (512) * 0.5 / Math.PI * Math.pow(2, zoom);
var d3projection = d3.geo.mercator()
.center([center.lng, center.lat])
.translate([bbox.width/2, bbox.height/2])
.scale(scale);
return d3projection;
}
but without d3.js
Is it possible? Thanks in advance!
You could probably do it like this:
Position two maps directly above each other, same dimensions.
Use mapbox-gl-sync-move to keep their positions in sync.
Use CSS clipping so that most of the top one is not shown. The code within mapbox-gl-compare might help.
You can simply use mapbox
It has very simple integration, sharing video for your reference https://youtu.be/-VQ4wheGruI
Related
So ive got a 2000x2000 image as a CRS map where i need to fit -600000 +600000 coordinates, but the image becomes so zoomed that im obviously not doing it right, i guess the program does not know how to combine and calculate that by itself to fit the units into pixels, or does it have a setting for that?
I guess it still makes each pixel of the image approx 600units big but i guess thats accurate enough for what im trying to do.
Coordinates themselves seem to be working as the center of the image is exactly spot on.
var mapOptions = {
center: [11999, 9199],
minZoom: 0,
maxZoom: 0
}
// Creating a map object
var map = L.map('bigmapleaf', {
crs: L.CRS.Simple
}, mapOptions);
var bounds = [[600000,-600000], [-600000,600000]];
var image = L.imageOverlay('../pictures/map.png', bounds).addTo(map);
// Adding layer to the map
map.fitBounds(bounds);
map.setView( center, 1);
Edit:
Now i have managed to find the math that makes the map the right size without any zooming with good precision, but i need to make the map to respond to those kind of large units which i believe requires another conversion back to the original units which does not feel right. I wish i could work with the large units and let leaflet do all the map view conversions. Maybe i try to make a script that discusses both ways with their own units.
Still waiting if someone knows easy answer for my troubles.
In addition to being easier working with them large units, i could also make the map with absolute accuracy.
I have a Mapbox with my own layers, says labels of towns and landmarks...
say I want to highlight one specific landmark and I want to move its z-index higher because otherwise, it would overlap with some other elements...
Can I use map.setLayoutProperty or is there anything else that I can do?
If I got your question correctly, you're looking for a way to change z-index of some layer above another layer. (not some feature above another feature). Here it the way:
https://www.mapbox.com/mapbox-gl-js/api/#map#movelayer
map.moveLayer(yourLandmarkLayerId, someAnotheLayerId);
If you would like just to move landmark layer to top of layer hierarchy:
map.moveLayer(yourLandmarkLayerId);
P.S. For moving layer, you should know it's ID:
var layers = map.getStyle().layers;
var layerId = layers[i].id;
For someone looking to do it on android, the simplest way to do it is to remove the layer and add it again above or below another layer. I do not find a better way:
/**
* Remove the target layer and add it again above the specific layer
*/
fun moveLayerAvobe(layer: Layer, breakpointLayerID: String, style: Style) {
// Remove Layer
style.removeLayer(layer)
// Add it again
style.addLayerAbove(layer, breakpointLayerID)
}
I'm trying to get through the learning curve of not just the mapbox api but how map applications work in general. Currently I'm having difficulty understanding the calculation used in sizing and placing tiles based on LngLat and Zoom level.
I checked out the Slippy maps wiki but it does not seem to align with how mapbox works (or more likely my understanding is incorrect).
I'm hoping someone can point me to a resource that can clearly explain the calculations for the mapbox-gl api tile placement.
Thanks!
More Specifically: I'm trying to figure out how to cover a tile with a 3D plane using threebox. To do this I need to:
get the tile's size (which changes depending on zoom level)
get the tile's position (which I can get using bbox, however I don't think my calculations are correct because at zoom level 2 the 3D plane's latitude is off by 40.97 degrees when placed using threebox)
My calculation for placing the tiles:
var offset = 40.97// temporarily used to fix placement.
var loc_x = bounds[0] + ((bounds[2] - bounds[0])/2); // this works as expected
var loc_y = bounds[1] + offset;
var loc_z = 0;
if (bounds[1] < 0) {
loc_y = bounds[3] - offset;
}
Found the reason I needed the offset property. The 3D plane's registration (0,0 coords) needed to match the tile. By default the 3D plane's registration point was in the center of the mesh, rather than the bottom left.
so i have a mapbox base map and want to load a dynamic choropleth area map over the top of it. it will cover all continents. i've looked into doing this before using geojson but the resulting file was over 9mb. is there a way to have different geojson vectors loaded at different zoom levels as to reduce the file size ?
the reason the file was so big was because it was a very detailed vector overlay. basically i'd like to replicate the vectors of 'am map' but with the performance of mapbox, with much better vector resolution at bigger zoom levels. (http://www.amcharts.com/javascript-maps/)
the only other way to do this is by using geojson markers that are loaded on top of the base map, but this doesn't give the same visual impact of the fully coloured continent vectors..
any help would be greatly appreciated!
x
Well, you could watch zoomend on the map to add/remove overlays as needed.
map.on('zoomend', function() {
var currentZoom = map.getZoom();
overlayGroup.clearLayers() //remove existing
overlayGroup.addLayer(myZoomLevelMapping[currentZoom]) //add layer for this zoom level.
})
I am working on a map where I have two feature layers.
var myFeatureGroup1 = L.featureGroup().addTo(map);
var myFeatureGroup2 = L.featureGroup().addTo(map);
I am setting bounds like:
map.fitBounds(myFeatureGroup1.getBounds());
map.fitBounds(myFeatureGroup2.getBounds());
But for obvious reasons, myFeatureGroup2 is set bounds on. Is ther a way by which I can fit bounds to multiple layerGroups? Like both of them at once? Is there a way I can merge them into a third layerGroup and fit bounds on it?
map.fitBounds(myFeatureGroup1.getBounds().extend(myFeatureGroup2.getBounds()));
See the LatLngBounds documentation, this is the first documented method.
How about using TurfJS to merge the two bounds together(convert them to geoJSON) first, then map.fitBounds(result).