Im sorry if this question is for dummies.
I'm using mapbox on a web development and I have "side" panels next to my map.
The thing is that I want to center the map on a location that I capture by double clicking it.
I know that map.setView([lat,lng],number) or map.panTo([lat,lng]) do the centering magic, but they do it over the actual size of the map o div width.
I want to know if anyone knows if I can do a custom centering, like using the same map size but the center "calculation" occurs on the left or right half of the map.
I dont know how to catch this "resolution" all I know is that I need the half of the width that the map uses. Here is an image of what I want to do enter image description here
(probably a duplicate question with that one on GIS StackExchange: Change the center point of leaflet)
You will probably be interested in one of those plugins:
Leaflet-active-area
This plugin allows you to use a smaller portion of the map as an active area. All positioning methods (setView, fitBounds, setZoom) will be applied on this portion instead of the all map.
Leaflet.ControlledBounds
Inspired by Leaflet-active-area, automatically detects the largest area of the map not covered by any map controls and applies setView, fitBounds, setZoom, getBounds to that area.
finally I figured out how to center the panTo() the way i wanted.
i used this
myLayer.on('click',function(e){
var vista=$('#map').width()/4;
map.setView(new L.LatLng(e.latlng.lat, e.latlng.lng),15);
map.panBy([-vista,0]);}
Related
Please see the following image. I want to be able to specify polygon/polyline so that the only area covered by it is visible. So far I have found methods to specify overlay so that specific portion on google maps is overlayed. I want the exactly opposite.
I tried adding a rectangle overlay over the current visible area to get the greyed out effect. Then I added the polygon overlay. My idea was if I add transparent polygon, it should reveal the map below it. It didn't work though. Any idea on how this can be done?
Solution to this problem could be similar to I want to create a Donut with Javascript API V3(Empty space inside like a hole).
See also example at jsbin.
You have to define two paths "in different directions". Outer path could be defined using coordinates from map.getBounds(). Inner path is your polygon.
I am currently working on a project which requires MapBox to be used. We have a persistent sidebar which is laid over the top of the map in HTML. The sidebar is 500px wide.
Everything works fine, except that when we center the map at a given co-ordinate pair, there is 500 pixels' worth of the map hidden. Essentially, I am looking for a function / formula that can be used to convert the latitude position used for centering to accommodate an extra 500 pixels, at a given zoom level.
Could anyone tell me of such an algorithm (ideally in JavaScript, but could easily be converted)? We have looked into the use node-sphericalmercator, but this doesn't quite achieve what we need.
Use L.fitBounds() and the padding options to do this with Leaflet, or if you can't use bounds, convert with latLngToPoint, move the point, and convert back.
Google Maps utility library comes with a full map canvas overlay[1] which is pretty useful to create canvas based visualizations or custom layers (instead of the tiled based ones)
The problem is that CanvasLayer is based on an OverlayView and it has to be on top of all the map layers. My questions are:
Is there a way to place an overlay in between two layers (i.e tiled layers) ?
Is there a better way to implement a full map canvas layer which can be managed in the same way other layers are? (using overlayMapTypes).
For sure there are nasty hacks that can be done changing the DOM to sort layers and overlays but I'd prefer to do in a way it won't break when the internal implementation was changed.
[1] https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/canvaslayer/src/CanvasLayer.js
I'm not sure what you mean by "map-layers" , but when you mean the mapPanes :
A CanvasLayer is not placed on top of all mapPanes, by default it's placed in the overlayLayer-pane(which is the 2nd lowest pane of the 7 mapPanes).
But it must not be placed there, you may place it where you want to by using the paneName-option of the canvasLayerOptions(set it to any valid mapPanes-name)
I'm looking for a google maps like js library just for a image. The features i need are simple: Drag, Scroll, Zoom and most important are markers (eventually vectors). But instead of a map I want to have one picture in the background.
Description of what the library should do: Think as it would be a map-similar situation. In this web app I want to have a image (e.g. a treasure map, map of a building) like the tiles in google maps. The image should be moveable and zoomable. Overlayed over the pictures should be markers. Markers can be as simple as letters (a,b,c), symbols, pointers, div elements... The markers are fixed to the image, positioned relative to its size (zoom) and position like on google maps. drag n drop support is needed for user interaction. While editing the resource a user may drop a new marker onto the map or move/delete an existing one. If the user is not in the editing mode the markers may funktion as tooltips or links. Also if clicking an link outside the "image", the image should scroll to the right position, to show the searched result on the "image"-map. The App should also work on mobile devices.
Has anyone already seen such a tool or is interessted in helping to develop it?
Regards Manuel
How about openlayers?
It has a similar interface to google maps but allows you to customize the tiles/map and markers and doesn't rely on google's servers.
You can use custom layers with Google Maps - so you could replace the entire map with your own tiles (image). Simple example is here: http://code.google.com/apis/maps/documentation/javascript/examples/groundoverlay-simple.html or something more complicated http://mapwow.com/
I'm making a subway map. The "transit" option on the official google maps shows their polyline below street/town names, but I can't figure out how to make mine do the same. Changing the zIndex to 0 (or negative numbers) doesn't work. Anyone know how to do this? Thanks.
Google Maps has several panes where the map components are being placed. Unfortunately for you the map tiles are placed below all those panes. Z-index has no effect if something is in higher pane, it only affects the order of overlays in the same pane.
Moreover map tiles are single images where all the map data are rendered. Therefore you can't place an overlay below some of the data rendered on the map tiles.
Theoretically, there might be a way to achieve this, but it's very difficult and I'm not even sure if it would work. Using styled maps you could create a base map type and an overlay map type. And then you could try to place the polylines between those two map types. Be sure there are many drawbacks:
I haven't tried to use styled map as an overlay map type so I'm not sure it would work.
Overlay map type is placed in the lowest map pane just above the base map. But polylines that are offered by Google Maps are rendered in higher pane and you can't place them into the lowest map pane.
Therefore it would be necessary to create your own special overlay layer or overlay map type containing the polylines. That is a lot of work! And then add it to the lowest map pane below the overlay map type.
OK, that's theory. Lots of hacking and uncertain outcome. I wouldn't do it that way!