Bing maps layer overlapping - bing-maps

Hi I'm using bing maps v8. I have 2 default layers with pushpins. By default only the last added layer gets displayed on map. I have made the layer1 visible using setVisible function, Still it doesn't show up on the map. Is it existing but not showing up. I'm not sure why its overlapping. Its same with many layers.
This is the code resembles somethis like this
var pushpin = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer1 = new Microsoft.Maps.Layer();
layer1.add(pushpin);
map.layers.insert(layer1);
var pushpin2 = new Microsoft.Maps.Pushpin(map.getCenter(), null);
var layer2 = new Microsoft.Maps.Layer();
layer2.add(pushpin2);
map.layers.insert(layer2);

You pushpins are in the exact same location. Both are rendered, but the one in layer1 is completely covered by the one that is in layer2, so you can't see it.
Here is a simple code sample to test. Simply copy and paste it into the edit window here: http://www.bing.com/api/maps/sdk/mapcontrol/isdk#addOneLayerItem+JS
var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
credentials: 'Your Bing Maps Key'
});
var pins = Microsoft.Maps.TestDataGenerator.getPushpins(3, map.getBounds());
var layer1 = new Microsoft.Maps.Layer();
layer1.add(pins [0]);
map.layers.insert(layer1);
var layer2 = new Microsoft.Maps.Layer();
layer2.add(pins [1]);
map.layers.insert(layer2);

Related

How do I add pushpins to a ClusterLayer for Bing Map in web API?

The ClusterLayer constructor works fine but I want to change what pins are on the ClusterLayer later in the code. setPushpins() seems like the desired function here but I am getting an Uncaught TypeError: Cannot read property '_v8Map' of undefined. This is a sample of what I have so far
window.map = new Microsoft.Maps.Map("#map_canvas",
{credentials:maps_key,
enableSearchLogo:false,
showCopyright:false,
mapTypeId:Microsoft.Maps.MapTypeId.road,
zoom:4,
scrollwheel:true,
center:new Microsoft.Maps.Location(us_latitude, us_longitude)
});
Microsoft.Maps.loadModule("Microsoft.Maps.Clustering", function(){
//Generate 1,000 random pushpins in the map view.
//var pins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
var pins = [];
var latitude = 43;
var longitude = -120;
var loc = new Microsoft.Maps.Location(latitude, longitude);
pin = new Microsoft.Maps.Pushpin(loc);
pins.push(pin);
//Create a ClusterLayer and add it to the map.
var loc = new Microsoft.Maps.Location(latitude+10, longitude+10);
pin = new Microsoft.Maps.Pushpin(loc, options);
pins.push(pin);
var clusterLayer = new Microsoft.Maps.ClusterLayer(pins);
map.layers.insert(clusterLayer);
clusterLayer.setPushpins(pins);
});
How should I go about changing which pins are part of a ClusterLayer?
Testing the setPushpins function I do see the error you are seeing. Interestingly after ignoring the error message the clusteringLayer adds the pushpins and works fine. I'll have the team look into why this error is being thrown.

MapBox - Add a clusterGroup clickable with Layer Control

I'm still learning and I'm a bit stuck. I may be trying to do to much at once. I have a MapBox map working great with a clickable layer menu taken from examples on the MapBox site. I also have a MarkerClusterGroup which also works and is always visible on the map. Is there a way I could somehow have the MarkerClusterGroup clickable on/off just like layers identified in var overlays = { ...
Below is the code that I think needs the help:
var layers = {
Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
Light: L.mapbox.tileLayer('mapbox.light'),
};
var overlays = {
DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
};
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
Markers: L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
var clusterGroup = new L.MarkerClusterGroup();
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup);
});
Could be something as simple as misuse of brackets. Thanks in advance.
You have to include your Marker Cluster Group in your overlays object. For example you could instantiate it just before defining overlays, even if your Cluster Group is empty for now.
Then you fill it once it has downloaded its data.
var layers = {
Streets: L.mapbox.tileLayer('mapbox.streets').addTo(map),
Satellite: L.mapbox.tileLayer('mapbox.satellite'),
Light: L.mapbox.tileLayer('mapbox.light'),
};
var clusterGroup = L.markerClusterGroup();
var overlays = {
DataA: L.mapbox.featureLayer().loadURL('/data/ctsnew.geojson'),
DataB: L.mapbox.featureLayer().loadURL('/data/selectZipcodes.geojson'),
Markers: clusterGroup
};
// Since featureLayer is an asynchronous method, we use the `.on('ready'`
// call to only use its marker data once we know it is actually loaded.
L.mapbox.featureLayer('examples.map-h61e8o8e').on('ready', function(e) {
// The clusterGroup gets each marker in the group added to it
// once loaded, and then is added to the map
e.target.eachLayer(function(layer) {
clusterGroup.addLayer(layer);
});
map.addLayer(clusterGroup); // use that line if you want to automatically add the cluster group to the map once it has downloaded its data.
});

How do I set a version 7.0 bing map center to a location

I am using version 7.0 of the Bing Maps API. After creating the map, an array of pins are pushed into the EntityCollection object of the map class. Next, I want to center the map so that all of these pins are viewed on the map. The map's zoom is large enough to accommodate this. In the previous version, map.setMapView() was used, but BING Maps 7.0 has erased this function.
Some code for relevance:
map = new Microsoft.Maps.Map(document.getElementById("myMap"), mapOptions);
map.getCredentials(function(credentials) {
var searchRequest = 'https://dev.virtualearth.net/REST/v1/Locations/' + address + '?output=json&jsonp=getLatLong&key=' + credentials;
var mapscript = document.createElement('script');
mapscript.type = 'text/javascript';
mapscript.src = searchRequest;
document.getElementById('myMap').appendChild(mapscript);
});
function getLatLong(json){
findPlaceResults = new Microsoft.Maps.Location(json.resourceSets[0].resources[0].point.coordinates[0], json.resourceSets[0].resources[0].point.coordinates[1]);
myShape = new Microsoft.Maps.Pushpin(findPlaceResults);
//...
var pins = new Array();
for (var i = 0; i < AllLocations.length; i++) {
var shape = new Microsoft.Maps.Location(AllLocations[i].Latitude, AllLocations[i].Longitude);
var pins = new Microsoft.Maps.Pushpin(shape);
map.entities.push(pins);
}
map.entities.push(myShape);
if (map.entities.getLength() > 0) {
//map.SetMapView(pins);
}
Code TLDR: Stuff happens, try to SetMapView, doesn't work.
Any thoughts would be helpful!
When you creating your pins you need to create helper array will that lead to your goal.
Create array that contains all the locations converted to Microsoft location objects.
// The array
var arrLocations= [];
for (var i = 0; i < AllLocations.length; i++) {
var shape = new Microsoft.Maps.Location(AllLocations[i].Latitude,AllLocations[i].Longitude);
// You add those two lines.
var yourLocation= new Microsoft.Maps.Location(AllLocations[i].Latitude,AllLocations[i].Longitude);
arrLocations.push(yourLocation);
var pins = new Microsoft.Maps.Pushpin(shape);
map.entities.push(pins);
}
Now you use bing maps feature that gives you best zoom and pointing according to given locations.(The LocationRect)
var bestView = Microsoft.Maps.LocationRect.fromLocations(arrLocations);
Then you set the map view according to the best view that we found.
setTimeout((function () {
map.setView({ bounds: bestView });
}).bind(this), 1000);
Well, I found the answer at this website http://www.i-programmer.info/projects/131-mapping-a-gis/1609-getting-started-with-bing-maps-ajax-control-70.html?start=1
"If you are familiar with earlier versions of the Map object you need to know that the new version has far fewer methods. The idea is that instead of having lots of methods the new control has a few methods that accept complex objects as a parameter that specifies lots of settings.
For example, the original map control's SetCenter method will move the map location to the specified latitude and longitude. The new V7 map control has a setView method which accepts a ViewOptions object which in turn has a center property that can be set to a Location object which specifies the center of the map."

How can I position a marker on a map using GeoLocation?

I am creating a map page with a single image,
and I would like to use GeoLocation to show where the user is as a blue dot (somewhat like iOS maps).
I already have the JavaScript for finding the location, and it works great.
I just need help with how to place a marker - just a simple image - on the page according to the output of position.coords.latitude and position.coords.longitude.
Is there any way that this can be done, and if so, how?
Thanks in advance.
You can simply use GMarker in your javascript, something like this:
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});
You can customize its image like that:
var image = 'beachflag.png';
marker.icon = image;

Bing maps ajax control 7.0 polygon fillColor in IE8

In internet explorer 8, none of my polygons on my bing maps have the proper fill color. They are always filled in white. I have no issues in firefox, chrome, safari or opera.
I've even tried using the exact code from the bing docs
// Initialize the map
var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {credentials:"Bing Maps Key"});
// Create the locations
var location1 = new Microsoft.Maps.Location(20,-20);
var location2 = new Microsoft.Maps.Location(20,20);
var location3 = new Microsoft.Maps.Location(-20,20);
var location4 = new Microsoft.Maps.Location(-20,-20);
// Create a polygon
var vertices = new Array(location1, location2, location3, location4, location1);
var polygoncolor = new Microsoft.Maps.Color(100,100,0,100);
var polygon = new Microsoft.Maps.Polygon(vertices,{fillColor: polygoncolor, strokeColor: polygoncolor});
// Add the shape to the map
map.entities.push(polygon)
// Set the view
map.setView({bounds: Microsoft.Maps.LocationRect.fromLocations(vertices)});
Has anyone experienced this?
I am also using jquery 1.5.1
Figured out the issue.
I was using a htc file (ie-css3.htc) for some css3 effects in IE. I guess this doesn't play nicely with bing maps polygon colors.