I was trying to show a location using heatMap module in bingMap. When I try to use some location heatMap show me diffrect location to that long and lat,
HeatMap
I just change the code like following way
`
Microsoft.Maps.loadModule('Microsoft.Maps.HeatMap', function () {
var mapDiv = map.getRootElement();
var locations = [];
locations.push(map.tryPixelToLocation(new Microsoft.Maps.Point(28.150900,-81.468440), Microsoft.Maps.PixelReference.control));
var heatMap = new Microsoft.Maps.HeatMapLayer(locations);
map.layers.insert(heatMap);
});
This location is for 410 Marlberry Leaf Ave, Kissimmee, FL 34758, USA but heatMap show me a location in ALESKA
The issue is that you are taking the lat/long coordinates and treating it as a pixel point and converting it into a location. This results in a completely different coordinate. Remove the call to map.tryPixelToLocation( and use the Location class instead of the Point class.
Here is a modified version of your code:
Microsoft.Maps.loadModule('Microsoft.Maps.HeatMap', function () {
var mapDiv = map.getRootElement();
var locations = [];
locations.push(new Microsoft.Maps.Location(28.150900,-81.468440));
var heatMap = new Microsoft.Maps.HeatMapLayer(locations);
map.layers.insert(heatMap);
});
Related
I've placed my markers and drawn the polylines between them and it's working great.
I've also given the user the ability to remove a marker using the following function
function hide(marker) {
map.closePopup();
map.removeLayer(marker);
}
Now, when a marker is removed I'd also like to remove the polyline. I've been doing a lot of searching but haven't come across my specific issue: I'm using pixel coordinates and need to remove the polyline between two markers.
markers
var marker1 = L.marker(map.unproject([8706, 7789], map.getMaxZoom()));
var marker2 = L.marker(map.unproject([8302, 5273], map.getMaxZoom()));
var marker3 = L.marker(map.unproject([9303, 7251], map.getMaxZoom()));
polylines
polyline = L.polyline([
map.unproject([8706, 7789], map.getMaxZoom()),
map.unproject([8302, 5273], map.getMaxZoom()),
map.unproject([9303, 7251], map.getMaxZoom())
]);
So when a user removes marker1, the polyline disappears between marker1 and marker2, but remains between marker2 and marker3, and so on down the line...
How is this accomplished?
You can add the polylines to the markers. And if the marker is removed you can read out the lines and remove them too.
marker1 = L.marker([51.498912, -0.122223],{connectedLines: []}).addTo(mymap);
marker2 = L.marker([51.496988, -0.056305],{connectedLines: []}).addTo(mymap);
poly1 = L.polyline([marker1.getLatLng(),marker2.getLatLng()]).addTo(mymap);
marker1.options.connectedLines.push(poly1);
marker2.options.connectedLines.push(poly1);
function removeMarkerLine(e){
var marker = this;
if(marker.options && marker.options.connectedLines){
var lines = marker.options.connectedLines;
lines.forEach(function(line){
mymap.removeLayer(line);
});
}
mymap.removeLayer(marker);
};
https://jsfiddle.net/falkedesign/3aukgm7t/
Simplest way, keep track of which polylines belongs to which two markers, and if one is removed you also remove that one.
Can be easily accomplished using layer groups.
I have displayed the the result markers for the leaflet-knn on the map with following code:
const myloc = new L.LatLng(13.7433242, 100.5421583);
var gjLayer = L.geoJson(testCities, {
onEachFeature: function(feature, layer) {
content = "<b>Name:</b> " + feature.properties.name;
layer.bindPopup(content);
}
});
var longitude = myloc.lng,
latitude = myloc.lat;
var res = leafletKnn(gjLayer).nearest(
[longitude, latitude], 5, distance);
for (i = 0; i < res.length; i++) {
map.addLayer(res[i].layer);
}
Now I want to change the color of this marker that is added or I want to change the icon.
Can anybody tell me how can I do?
Leaflet-knn is agnostic when it comes to the representation of the results - it relies on the existing L.Layers: it takes a L.GeoJSON as an input and then iterates through all its members in order to fetch all their coordinates (in the case of polylines and polygons) and then store a reference to the L.Layer for each of its coordinates.
The results of a leaflet-knn search include the original L.Layer from the L.GeoJSON that was passed at instantiation time.
Either symbolize your GeoJSON afterwards, as explained in the Leaflet tutorials, or create new markers/symbols for the results after each query.
Right now your code is relying on the default symbolization of GeoJSON data (instantiate a L.Marker with a L.Icon.Default for points). I suggest the approach of displaying your L.GeoJSON in the map to ensure that it looks like you want it to (even if it's a partial set of the data), then implementing the leaflet-knn search.
I learned how to create a Leaflet map with Socrata open data when latitude and longitude appear in separate columns. See working examples at https://github.com/JackDougherty/leaflet-socrata
My problem: how to make this work when latitude and longitude are combined in one point data field (geom) inside Socrata? This is common for datasets published on http://data.hartford.gov. See my non-working example at https://github.com/JackDougherty/leaflet-socrata
Solved with this code snippet:
// load open data from Socrata endpoint in GeoJSON format
// Food Establishments, City of Hartford Open Data https://data.hartford.gov/resource/daux-ukcc
$.getJSON("https://data.hartford.gov/resource/daux-ukcc.geojson", function (data){
var geoJsonLayer = L.geoJson(data, {
pointToLayer: function( feature, latlng) {
var marker = L.marker(latlng);
marker.bindPopup(feature.properties.blms_dba); // replace last term with property data labels to display from GeoJSON file
return marker;
}
}).addTo(map);
});
See my notes and more examples at https://www.datavizforall.org/leaflet/with-socrata/
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.
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."