Develop Reference

BIng Map V8. All the Pins are falling 2cm below than positioned on first Load

BIng Map V8. All the Pins are falling 2cm below than positioned on first Load and when I refresh the page the pins are moving back to their actual location.
here is the sample of the code that I used in the implementation.
var pin = new Microsoft.Maps.Pushpin(addressLocation, {
icon: '/img/pin.png',
width: 29,
height: 40,
showPointer: true,
subTitle: _.template(CustomTemplate, _.extend({}, addressLocation))
});
this.locations.push(addressLocation);
this.pins.push(pin);
Are there any suggested fixes for this issue? Thanks in advance.

I suspect that if you zoom the map you will notice the pushpins drift to and from the location they are meant to represent. The issue is that your pushpin is a different size from the default pushpin, and as such the anchor point (part of your image anchored to the location point on the map) of your pushpin is using incorrect and causing this effect. Here is some documentation on how to address this in your app: https://msdn.microsoft.com/en-us/library/mt712695.aspx

Leafletjs Cursor when hovering over WMS Layer

I am using Leafletjs. Currently its pretty straight forward, I have a streets view from open maps.
var streets = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
});
I also have a WMS layer that is coming from a geoserver. It has the standard getFeatureInfo and everything shows up correctly.
L.tileLayer.wms("GEOSERVERURL", {
layers: 'layers',
format: 'image/png'
,transparent: true
}).addTo(map);
The wms layer is also clickable and I use getFeatureInfo to get the info for that layer. The issue is that the user doesn't know its clickable because the cursor never changes when they hover of the wms layer. My question is how do make the cursor change when hovering over the layer?
Has anyone implemented this feature before or have an idea to implement it? The only research I have stumbled across so far has using mouseover on the map and calling getFeatureInfo to tell if its over a layer. However, that seems like it would cause a lot of chatter just to identify cursor area.
EDIT: To clarify, I want the cursor to only change when its hovered over the wms layer that is populated. Although it technically gets applied to the whole map, it only has content on a part of it. Which kind of raises the question of 'Can I limit the wms layer to only the content area and then show a cursor?' Maybe a bounding area or something along those lines?
EDIT 2: Below is an example of what it looks like. The street map parts I want to keep the normal cursor but I want a pointer when hovering over the colored wms map parts.

Set an ID on the tileLayer's container and then use CSS to change the cursor:
Javascript:
var wms = L.tileLayer.wms("GEOSERVERURL", {
layers: 'layers',
format: 'image/png',
transparent: true
}).addTo(map);
wms.getContainer().setAttribute('id', 'wmsContainer');
Stylesheet:
#wmsContainer {
cursor: grab; /* or any other cursor: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor */
}
Note: you need to do this after the layer is added to the map. Before you add it to the map the getContainer method will return undefined.
Edit after question edit and comments:
Unfortunatly that's not possible. At least not as far as i know. Because L.TileLayer.WMS is a layer of images, there is absolutely no way of deducting which tiles have features on them and which are transparent.
What you could do as a workaround is work out the boundaries of your object, use that to create a transparent polygon without stroke and put that over your WMS layer. Polygons are interactive thus you get the cursorchange included, plus as an extra bonus, you can do other fancy stuff like show the outline or something like that on mouseover. I've created a little demo from the WMS example you supplied in the comments.
http://plnkr.co/edit/1HGn6IUzdrn1N5KGazXQ?p=preview
Note that i'm using a GeoJSON layer with one feature instead of a polygon, because it was easier to find the outline of the US in GeoJSON format. But in your case a four point polygon would do the trick just as wel.
Hope that helps, let me know if something isn't clear.

Leaflet circleMarkers don´t show up

I am trying to draw hundres of circleMarker in a Leaflet map, I am using flask and foundation.js, the same code work in different app built with bootstrap.js
This is my code:
<script src="http://cdn.leafletjs.com/leaflet-0.5.1/leaflet.js"></script>
<script>
var map = L.map('map').setView([40,-4], 6);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-cnkhv76j/{z}/{x}/{y}.png', {
attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery CloudMade',
maxZoom: 18
}).addTo(map);
var geojsonMarkerOptions = {
radius: 100,
fillColor: "#FFF803",
color: "#DDFF03",
weight: 1,
opacity: 0.8,
fillOpacity: 0.8
};
{% for item in data['data'] %}
L.circleMarker([{{item[0]}},{{item[1]}}],geojsonMarkerOptions).addTo(map);
{% endfor %}
var marker = L.marker([41.5, -0.09]).addTo(map);
marker.bindPopup("I am a circle.");
var circle = L.circle([51.508, -0.11], 500, {color: 'red',
fillColor: '#f03',
fillOpacity: 1
}).addTo(map);
</script>
At the bottom I tried a fixed marker which appears and fixed circle which doesn´t, could it be a problem with foundation.js? Because in a previous project with other framework worked perfectly.

I tried your code, replacing 51.508 with 41.508 (so the red circle is near the marker) and adding just a single circleMarker. It works. So the problem is not in the code.
Please check that you have included leaflet.css from the same locations as leaflet.js. Also check there are no errors in a javascript console (Ctrl+Shift+J in Firefox). Check that coordinates from {{item[0/1]}} are properly formatted (decimal separator is a dot, no extra symbols). Try using more recent version of Leaflet library, 0.7.3.

Ilja, many thanks. You were right the circles were pushed behind the map by a css. In this case, I was also using d3.js for some chart, and as soon as I got rid of nvd3's css the circles showed up.

I've been having the same issue, and it turns out that it is the nv.d3.css file. I found that commenting out these lines will allow you to draw a circle:
display: block;
width: 100%;
height: 100%;'
I don't know what potential side effects this might have on your page, but I think the main issue is that d3 decides to hijack any svgs that you put on the page.
EDIT: my case was with circles, but I wouldn't be surprised if it is the same problem between circles and circle markers.
EDIT 2:
It's been a while, but someone just liked this, so I feel like I should inform you that in the end, these didn't play nice together. I didn't have the time to really tinker with it, so I was forced to remove the leaflet circles and pass on the project with a recommendation that it might just be easier to plug in Google Maps. Hope that's helpful.

That question was posted long ago.
But May my answer helps someone.
When we instanciate L.CircleMarker(...), the circle is created, but not showing.
In my case, i noticed that it wait for the window resize event in order to display.
So juste trigger that event after L.CircleMarker(...).addTo(map) and the circle will appear like a charm.
With JS
window.dispatchEvent(new Event('resize'));
With Jquery
$(window).trigger('resize');

Making a graph inside a leaflet popup using geoJson data

I'm working on a map that uses leaflet and is populated by data from a file in a GeoJson format. My overarching goal is to put graphs into the leaflet popups for each marker on the map.
Getting the markers for each feature and getting the popups to open was fairly easy. However, I am finding it difficult to use D3 to add to the popup.
For the sake of simplicity my goal at the moment is to use D3 to create a svg within each leaflet popup div and draw a square.
I have found some examples where people have used D3 to create graphs inside leaflet popups, but none of them were also using geoJson and the onEachFeature function. This is one of the examples:http://jsfiddle.net/6UJQ4/
Here is the relevant part of my code:
L.geoJson( data, {
style: function (feature) {
return { opacity: 0, fillOpacity: 0.5, fillColor: "#0f0" };
},
onEachFeature: function(feature, layer){
var graph_container = '<div class="popupGraph" id="graph" style="width: 200px; height:200px;"></div>';
layer.bindPopup(feature.properties.name + '<br>' + graph_container);
var svg = d3.select("#graph").selectAll("svg").append("svg").attr("width", 50).attr("height", 200);
var rectangle = svg.append("rect").attr("width", 25).attr("height", 25);
}
}).addTo(map);
I believe I am having issues because D3 can't find the graph_container div however I am a little stumped on how to fix this.
If anyone has any experience using D3, Leaflet, and geoJson together and could explain to me how to get my square to show in the popups or if anyone knows of a source that could help me. I would appreciate it a lot.
Thanks in advance!
UPDATE: Bits has solved my problem! If anyone needs a working example of using D3 in Leaflet popups in combination with GeoJson, Bits posted it in the comments but I will post it here aswell: http://jsfiddle.net/2XfVc/132/

Its quite simple, you just need to add and svg element inside of your div. And start coding d3.
Give me a moment, I am updating your fiddle.
Update: Here you go http://jsfiddle.net/6UJQ4/6/
I took the liberty of simplifying/stripping your example to lowest common denominator to reduce confusion.
Update: http://jsfiddle.net/6UJQ4/7/
In the previous fiddle, you will come across issues where all your markers will be selected everytime giving undesired results. So use last update.

Geolocation api with direction arrow

I am building a simple PHP based off-road navigation webpage for use on a smartphone that will display two icons on a Google map, one being my my current location and one my destination. As I move, the position of the icon for me will automatically update.
Sample code to do the basic stuff includes:This Stackoverflow example and This tutorial.
I would like my icon to be an arrow that points in the direction I am currently walking. The direction would be based on my previous position and my current position. Does anyone know of any method to achieve that please?
One crude method would be to have 8 (or 16) icons, representing N, S, E, W, NE... and pick the icon that approximately matches my direction, but I was hoping for something more dynamic.
The other option is to simply draw a path on the map of where I have been. I am thinking of doing that anyway, but would also like the arrow.
To clarify exactly what I want, This Stackoverflow example contains this code to display a marker of my current position on a map:
map = new google.maps.Map(document.getElementById("map_canvas"), {
zoom: 18,
center: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(startPos.coords.latitude, startPos.coords.longitude),
map: map
});
Instead of the teardrop type marker I want an arrow that is pointing in the direction I am walking. I would calculate the direction for it to point based on the lat/long of my previous location and my current location, but I need the code to insert in the above code where it says position:...
This is basic navigation stuff so I am sure it has been done before. I just haven't been able to find any examples. (I do not want to use Google directions API. It has a usage limit and is not really suited to off-road.)

I haven't tried this myself, but it seems the Google Maps Javascript API provides functionality for this. You can use the google.Maps.Symbol object.
With the rotation property you can set the rotation of the symbol in degrees. You need to get the angle between the current location and destination from the API first then.
With the path property you can set a the symbol. Google already implemented symbols for arrows, they use the constants BACKWARD_CLOSED_ARROW, BACKWARD_OPEN_ARROW, FORWARD_CLOSED_ARROW and FORWARD_OPEN_ARROW.
It also seems to support coloring, scaling, etc. for the symbol, so you can do quite some things with it. I hope this information helped.