I have the problem that my Bing Maps should zoom to the given Locations. So I calculate the LocationRect with fromLocations, then I pass this to the Map. This works for all medium/bigger displays but does not work for smaller width like you find on mobiles.
I created a CodePen where one can see this. In the end both create a map with (but the result is different):
var map = new Microsoft.Maps.Map($map[0], {
// credentials: apikey,
enableClickableLogo: false,
bounds: getBounds()
});
Is this a Bing Maps bug? Any ideas for workarounds?
This is a known bug with large LocationRect's. There is a fix in the works for this and it should be in the experimental branch in the next month or two.
Related
I'd like to move/drag geojson features on map so that the distance to each other stays the same.
Choose geojsons by clicking them and then dragging them together. How should I make this?
Thanks!
I read about syncLayersOnDrag but can not get it to work.
If you set syncLayersOnDrag after adding the layer, it works
// data are coming from smaple-geojson.js
const geoLayer = L.geoJSON([bicycleRental, campus]).addTo(map)
map.fitBounds(geoLayer.getBounds())
map.pm.setGlobalOptions({
syncLayersOnDrag: true
});
https://jsfiddle.net/zba1ogjL/
I'm trying to add clustering and layer control to filter markers on my map. After reading older posts on this issue, the code that was marked as the right answer looks like this. However, no matter how I change it, it does not work on my map.
var parent= new L.MarkerClusterGroup().addTo(map);
var overlay={}
overlay["Markers A"]=L.featureGroup.subGroup(parent,aPoints).addTo(map);
overlay["Markers B"]=L.featureGroup.subGroup(parent,bPoints).addTo(map);
control = L.control.layers(null, overlay, {collapsed: false });
control.addTo(map);
What am I doing wrong?
The issue that I was having was that L.featureGroup.subGroup takes in an array of markers as it's second parameters therefore, aPoints needed to be [aPoints].
I'm reading an imageOverlay URL from an ArcGIS webserver that uses the leaflet getBound() coordinates as part of the URL (we have large maps that are filtered for the current window 'extent'). Apologies for not including the actual path (I'm working with sensitive client data). Eg:
http://myarcgiswebserver.com/MapServer/export/dpi=96&format=png32&bbox=27.119750976562504%2C-31.194007509998823%2C32.39044189453126%2C-29.692824739380754&size=1719%2C434
[bbox] = current imageBounds
When dragging my map the imageOverlay url is updated correctly but my leaflet window is no longer aligned to the imageBound values that were set when first adding the imageOverlay which results in a skewed output (this is my assumption):
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Am i approaching this problem incorrectly or would the introduction of a function to update the current imageBounds resolve this? Perhaps not a new function but the expansion of setUrl with additional parameters...?
Many thanks for any feedback...
As #ghybs pointed out, your use case might be better served by using the WMS
interface of your ArcGIS server.
Anyway, you say
The only workaround is to remove the existing imageOverlay and add a new one (which ruins the user experience as the map disappears then reappears each time the window is dragged or zoomed).
Well, that glitch is due to you probably doing something like:
Remove old overlay
Add new overlay
Wait until the image is received from the network
Wait one frame so the new overlay is shown
and instead you should be doing something like:
Add new overlay
Wait until the image is received from the network
Remove old overlay
Wait one frame so the new overlay is shown
The problem is just the async wait and the possible race conditions there, but should be easy to hack together, e.g.:
var activeOverlay = null;
var overlayInRequest = null;
map.on('moveend zoomend', {
// If we are already requesting a new overlay, ignore it.
// This might need some additional debouncing logic to prevent
// lots of concurrent requests
if (overlayInRequest) {
overlayInRequest.off('load', showOverlay);
}
overlayInRequest = L.imageOverlay( computeUrl( map.getBounds() ), myOverlayOptions );
overlayInRequest.on('load', showOverlay);
});
function showOverlay(ev) {
activeOverlay.remove();
activeOverlay = overlayInRequest;
activeOverlay.addTo(map);
overlayInRequest = undefined;
}
If you use an ImageOverlay but change its url dynamically, with a new image that reflects a new bounding box, then indeed that is the reason for the behaviour you describe: you display an image that has been generated using a new bbox, but positioned in the initial bbox, since the image overlay remains at the same geographical position on the map.
Instead, it sounds to me that you should use a TileLayer.WMS.
It would automatically manage the bounding box update for you. You may need to find the correct options to fit your service provider required URL syntax, though.
Example: http://playground-leaflet.rhcloud.com/yel/1/edit?html,output
In Leaflet, is it possible to define a marker or polyline with {clickable:false}, so that a click is passed through to whatever lies beneath - be it the map or a clickable geometry object?
At the moment I solve this problem by making the marker/polyline clickable and passing the event onwards myself. But this leads to the mouse cursor always showing as the hand symbol. Ideally, the mouse cursor should look like the normal pointer or the hand, depending on whether what is beneath the marker/polyline is clickable.
This may not be the answer you are looking for, but you can use featureGroups to have all of your clickable polylines come to the front so that the actions are surfaced.
var lg_noclick = new L.FeatureGroup().addTo(map);
var lg_click = new L.FeatureGroup().addTo(map);
// Add lines
lg_click.bringToFront();
updated fiddle
Also if you can afford to know your lines before hand, correct ordering of when you add the lines it will work as well.
I know this is not ideal but it suited my situation just fine, so it might be good for you as well.
This hides the icon and brings it back after a second using mouseenter and mouseleave events:
$('.leaflet-marker-icon').mouseenter(function() {
$(this).hide();
});
$('.leaflet-marker-icon').mouseleave(function() {
$(this).delay(1000).show(0);
});
Created a Virtual Earth (Bing) map to show a simple pin at a particular point. Everything works right now - the pin shows up, the title and description pop up on hover.
The map is initially fully zoomed into the pin, but the STRANGE problem is that when I zoom out it moves slightly lower on the map. So if I started with the pin pointing somewhere in Toronto, if I zoom out enough the pin ends up i the middle of Lake Ontario! If I pan the map, the pin correctly stays in its proper location. When I zoom back in, it moves slightly up until it's back to its original correct position!
I've looked around for a solution for a while, but I can't understand it at all. Please help!!
Thanks a lot!
import with javascript: http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2
$(window).ready(function(){
GetMap();
});
map = new VEMap('birdEye');
map.SetCredentials("hash key from Bing website");
map.LoadMap(new VELatLong(43.640144 ,-79.392593), 1 , VEMapStyle.BirdseyeHybrid, false, VEMapMode.Mode2D, true, null);
var pin = new VEShape(VEShapeType.Pushpin, new VELatLong(43.640144 ,-79.392593));
pin.SetTitle("Goes to Title of the Pushpin");
pin.SetDescription("Goes as Description.");
map.AddShape(pin);
I had the same problem. However, my code looks to be using the Microsoft.Maps AJAX methods.
I set locations of events on a bing map that I got from querying facebook's api for user_events and friend_events. An event was returned to me with the latitude and longitude.
I used those coordinates to place a custom styled pin for single pins and clustered pins.
When I zoomed out the potions would move and an un-realistic representation was provided about the location of the event.
ANSWER:
I found out you have to set the "anchor" property for the pushpin.
Here is what I found that works well.
var pushpinOption = {
icon : 'images/cluster_custom.png',
text : ''+ clusterInfo.dataIndices.length + '',
textOffset:offset,
anchor : new Microsoft.Maps.Point(8, 8)
};
Resources :
Example of using anchor pushpinoption
Note* Look at the "Load Module Clustering"
You will need to click the first link in the "Load modules section"
http://www.bingmapsportal.com/isdk/ajaxv7#LoadingDynamicModule2
documentat ion of pushpin option "anchor"
http://msdn.microsoft.com/en-us/library/gg427629.aspx
Not exactly the/an answer you're looking for but, I have the exact problem and found that the "move" happens on my pins that I have declared a scale transform for.
StoreEditPushPin pin = new StoreEditPushPin(Colors.Red);
pin.Location = new Location(43.640144 ,-79.392593);
ScaleTransform st = new ScaleTransform();
st.ScaleX = 0.55;
st.ScaleY = 0.55;
pin.RenderTransform = st;
PushPinLayer.AddChild(pin, d);
When you zoom out, the scale factor is applied to the pin and the location is shifted. I would take a look at your Pushpin class to see if the transform exists.
Try adding PositionOrigin to the pushpin, set it to "Center" or whatever.