- 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:
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 2373
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/lib/knockout-3.5.1.js"></script>
<script type="text/javascript" src="js/lib/jquery-3.4.1.min.js"></script>
</head>
<body onload="DoApply()">
Cities:
<span data-bind="template: {name: 'cities-template', foreach: cities}"></span>
<script type="text/html" id="cities-template" >
<br/>
<input data-bind="id: id, name: name" type="checkbox">
<label data-bind="for: name, text: name"></label>
</script>
</body>
</html>
JS:
function MyViewModel() {
var self = this;
self.cities = ko.observableArray([]);
$.getJSON("cities.json", function(data) {
data.forEach(function (item, index) {
self.cities.push({name: item.Name, id:item.ID});
});
})
}
function DoApply() {
ko.applyBindings(new MyViewModel());
}
Where cities.json looks like:
[
{
"ID": 0,
"Name": "Bonn"
},
{
"ID": 0,
"Name": "Petrovaradin"
},
{
"ID": 0,
"Name": "Novi Sad"
},
{
"ID": 0,
"Name": "Balingen"
}
]
Live example see here.
---
Edit: observableArray must be global, something like ns.cities = ko.observableArray([]);, and pushed should be observable:
/*global window, ko*/
(function (ns) {
"use strict";
ns.CitiesViewModel = function () {
var self = this,
getCities = new GetCities(),
city = ko.observable();
ns.cities = ko.observableArray();
function GetCities() {
$.getJSON("api/cities", function (data) {
data.forEach(function (item, index) {
city({ name: item.Name, id: item.ID });
ns.cities.push(city());
});
});
}
return {
myCities: getCities
}
}
}(window.milosev));
---
Or even better and make it part of CitiesViewModel:
/*global window, ko, $*/
(function (ns) {
"use strict";
ns.CitiesViewModel = function () {
var self = this,
getCities = new GetCities(),
city = ko.observable();
function GetCities() {
self.cities = ko.observableArray();
$.getJSON("api/cities", function (data) {
data.forEach(function (item, index) {
city({ name: item.Name, id: item.ID });
self.cities.push(city());
});
});
return self.cities;
}
return {
cities: getCities
};
};
}(window.milosev));
- Details
- Written by: Stanko Milosev
- Category: Knockout
- Hits: 4115
Example which I am using when I want to see which model I am sending to knockout.Â
HTML:
<body>
<div data-bind="text: function() {debugger; return myText}()"></div>
</body>
JS:
/*global ko*/
(function () {
"use strict";
function MyModel() {
var self = this;
self.myText = ko.observable("Test");
}
MyModel = new MyModel();
ko.applyBindings(MyModel);
}());
Notice in HTML line:
<div data-bind="text: function() {debugger; return myText}()"></div>
In that line you can see debugger, and also return, which will force function to return value. Now you can debug knockout.