- Details
- Written by: Stanko Milosev
- Category: Bing Maps AJAX Control, Version 7.0
- Hits: 4859
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: 1703
/*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: 1815
<!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: 3569
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.