- Details
- Written by: Stanko Milosev
- Category: Bing Maps AJAX Control, Version 7.0
- Hits: 4765
It seems that there is one more bug. Polylines are disappearing if they are too big (i.e polyline which connects London with Sardinia) and if you zoom it.
Example you can see here, just zoom one line, zoom it until it disappears.
Also, in that file you can see example of adding viewchangeend event, which is fired also when zoom changes:
Microsoft.Maps.Events.addHandler(myMap, 'viewchangeend', addPins);
Then adding polylines:
var point1 = new Microsoft.Maps.Location(55, -2); var point2 = new Microsoft.Maps.Location(52, -2); var point3 = new Microsoft.Maps.Location(53, -1); var point4 = new Microsoft.Maps.Location(37.996162679728116, 8.701171874999998); var point5 = new Microsoft.Maps.Location(49.26780455063754, 8.701171874999998); var positions = new Array( point1 ,point2 ,point3 ,point4 ,point5 ); var poly = new Microsoft.Maps.Polyline( positions); myMap.entities.push(poly);
- Details
- Written by: Stanko Milosev
- Category: Bing Maps AJAX Control, Version 7.0
- Hits: 4789
It seems that adding and removing pushpins leads to memory leak.
Example you can see here, in Chrome click shift + esc to see memory consumption.
Also, in that example you can see how to add or remove pushpins:
Â
point = new Microsoft.Maps.Location(getRandomInRange(-180, 180, 3), getRandomInRange(-180, 180, 3));
pin = new Microsoft.Maps.Pushpin(point, {
text: ('p')
});
myMap.entities.push(pin);
- Details
- Written by: Stanko Milosev
- Category: Bing Maps AJAX Control, Version 7.0
- Hits: 5363
Javascript:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
$(document).ready(function () {
GetMap();
});
function GetMap() {
var myMap = new Microsoft.Maps.Map(document.getElementById("mapDiv"), { credentials: "YourKey" });
};
HTML:Â
<div id='mapDiv' style="position:absolute; width:800px; height:600px;"></div> Â
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 2383
/*global google, ko*/
/*jshint esversion: 6 */
/* jshint -W031 */
(function (ns){
"use strict";
var mapOptions,
mapCanvas,
map,
gpsViewModel;
mapOptions = {
zoom: 6,
center: { lat: -34.397, lng: 150.644},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
mapCanvas = document.getElementById('map-canvas');
if (!map) {
map = new google.maps.Map(mapCanvas, mapOptions);
gpsViewModel = new ns.GpsViewModel();
ko.applyBindings(gpsViewModel);
google.maps.event.addListener(map, 'click', function (evemt) {
new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0.35,
map,
center: { lat: gpsViewModel.lat(), lng: gpsViewModel.lng()},
radius: Math.sqrt(603502) * 100
});
});
google.maps.event.addListener(map, 'mousemove', function (event) {
gpsViewModel.lat(event.latLng.lat());
gpsViewModel.lng(event.latLng.lng());
});
}
}(window.milosev));
gps.js:
/*global window, ko*/
(function (ns) {
"use strict";
var self;
ns.GpsViewModel = function () {
self = this;
self.lat = ko.observable();
self.lng = ko.observable();
return {
lat: self.lat,
lng: self.lng
};
};
}(window.milosev));
Notice line:
radius: Math.sqrt(603502) * 100
That was just copy / paste, otherwise radius is in meters Source download from here. Live example:
Langitude:
Longitude: