Right now I am setting the bounds of my react leaflet map by passing a bounds parameter as shown below:
<div hidden={!this.props.hide && !this.props.toggle} className="map-container">
<Leaflet.Map ref='leaflet-map' bounds={ this.getBounds()} >
<Leaflet.TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
{ this.geoResults().map(this.renderMarker) }
</Leaflet.Map>
</div>
The problem is that sometimes a marker is rendered on the outermost part of the map (in view) so the marker is not even visible unless I drag the map or zoom out one spot. I was trying to fix this with a buffer or trying to plot the bounds then use zoom to zoom out once but nothing seems to work. Do you guys have any ideas?
Solution
You can use boundsOptions attribute of the Map component to pass options to the leaflet's fitBounds() method. In those options you can define padding for example to "pad" the bounds.
From react-leaflet Map documentation:
boundsOptions: object (optional): Options passed to the fitBounds() method.
From leaflet fitBounds options documentation:
padding: Equivalent of setting both top left and bottom right padding to the same value.
Example
So something like this should work (didn't test in action):
<Leaflet.Map
ref='leaflet-map'
bounds={this.getBounds()}
boundsOptions={{padding: [50, 50]}}
/>
Defining your Map element like that should pad the bounds. Tune the padding values to suite your needs.
Another approach
You could add padding to the bounds in your getBounds() function.
Related
It appears to me that Leaflet.ImageOverlay does not have a minZoom and a maxZoom option like Leaflet.TileLayer has. But I have a map image that I only want to be visible at two or three zoom leves. Is there a cunning way to circumvent this issue?
I guess, I can use gdal2tiles.py or gdal_retile.py to create a file for a tile layer, but as I'm using UTM projection (Mercator gives a horrible distortion in Norway), I'm not sure what tile numbers makes my map image fit in with the background map.
Use the zoomend event to conditionally hide/show your L.ImageOverlay.
Is it possible to display HTML instead of an image as a Google Maps Marker ?
What is the best way to do so?
I imagine that something like an invisible marker and a custom info-window might play a role in achieving this
You can use OverlayView class to create custom overlays with html elements - https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays
Simple example - http://jsfiddle.net/BCr2B/
You might want to check this out: https://github.com/jonyt/gmaps-div-overlay
DivOverlay is a very simple container for HTML to be shown over a
Google Map at any position. All it does is calculate margins from the
map bounds so its entire contents are within the map. Take a look at
the demo. The constructor takes 3 arguments: the HTML container, the
map to attach to and the position of the overlay. DivOverlay has only
two functions: show() and hide(). Should be self-explanatory.
I am using google map v3 and its drawingManager feature, I want to get the pixels of these Shapes either through Lat and Long or directly.
Here is the URL of drawingManager Shapes
https://developers.google.com/maps/documentation/javascript/examples/user-editable-shapes
I want to get the pixels as here with respect to the container of map
http://gmaps-samples-v3.googlecode.com/svn/trunk/latlng-to-coord-control/latlng-to-coord-control.html
like here, buts using overlay class and I want to use it for DrawingManager Shapes, need some help on it.
Thanks
To translate a LatLng to a Point use the method fromLatLngToPoint() of the current projection.
The current projection is returned by mapObject.getProjection()
However, a shape isn't always defined by LatLng's/Points.
For rectangles you must translate the points defined by the bounds, for a circle the center(and/or bounds), and for polylines/polygons the path.
I have a number of pins on the map and a few metheods to allow me to click on a pin and the infobox will popup. This seems to be working fine apart from the infobox itself is below the Pins. I have tried setting the zIndex of both the pins and the infobox in a number of differant ways but still the infobox is below the pins. Any thoughts on how to achieve this?
For me, setting the .Infobox style did not work, but wrapping the infobox within it's own entity collection, and setting the zIndex on that, did work. I also tried quite a number of variations on setting zIndexes on my pushpins and pushpin collection entities before trying this option. Perhaps we are seeing this behavior only because we are putting pushpins within their own entity collections, but trying to add the InfoBox seperately.
Some example code of what works for me:
var infoBox = CreateMyInfoBox(); // create the Microsoft InfoBox here.
var entityCollectionInfoBox = new Microsoft.Maps.EntityCollection({zIndex:2000});
entityCollectionInfoBox.push(infobox)
map.entities.push(entityCollectionInfoBox);
There's no obvious semantic difference between setting a high z-Index on the infobox directly, and wrapping it in an EntityCollection with a high z-Index, but apparently there is.
For me the following worked, not very nice but better than having the pins above the Infobox
<style type="text/css">
.Infobox
{
z-index:150;
}
</style>
Set these three values on the Infobox:
zIndex: google.maps.Marker.MAX_ZINDEX + 1,
pane: "floatPane",
enableEventPropagation: false
Did work for me.
I have two different types of pushpins - each type has an infobox. I set the zIndex of the first set of pushpins to -2, the second set of pushpins to -1 and left the infobox alone - since it didn't care what I set the zIndex to.
Based on samples, I can see that you can set a default view in OpenLayers by saying something along the lines of:
var bounds = new OpenLayers.Bounds(-125, 25, -65, 50);
var map = new OpenLayers.Map('map', {restrictedExtent: bounds });
However, this also (as the name implies), restricts me to be able to ONLY navigate within these bounds. I can zoom out and see things outside of these bounds, but I can't then zoom back onto them, or scroll to them.
I've tried not having any restrictedExtent (or making it the entire map), but then I can't get it to focus on the area I want. I tried using:
map.setCenter(new OpenLayers.LonLat(0,0), 3);
console.log(map.getCenter());
To set the zoom and the center...but it doesn't seem to do ANYTHING, other than set the variable "center" which I can then read from map.getCenter() (if I don't set it, it's null, if I do set it, I can see it...but the map itself stays fully extended and it's center doesn't seem to change at all...)
The Map layer I am using is:
OpenLayers.Layer.OSM.Mapnik
with displayOutsideMaxExtent set to true... I'm really at a loss here.
My goal is to have a default region of the world zoomed in to and in view (such as the United States), with the option of viewers being able to go outside the default to view things.
I think I've figured it out. For whatever reason, the zoom was never changing, but the center apparently WAS moving (it was just so zoomed out I couldn't tell). Add to the fact that I needed to transform the center to use the google projection, and it seems to work just fine.
What I ended up doing was:
var lonlat = new OpenLayers.LonLat(20,37).transform(new OpenLayers.Projection("EPSG:4326"),new OpenLayers.Projection("EPSG:900913"));
map.setCenter(lonlat);
map.zoomTo(4);