Hi Everyone,
I create my own custom property type that allows the content editor to select a location in a Bing map, I have 2 issues :
1- I want to get the Bing map API key from my database
2- I created
a text box that is Model.value and when the user selects a location in the map the text box value changed to log,lat of the location but the model.value is not changing until he writes something manually is the textbox.
this is my view code
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=[my API Key ]&callback=loadMapScenario' async defer></script>
<script type='text/javascript'>
var map;
function loadMapScenario() {
var navigationBarMode1 = Microsoft.Maps.NavigationBarMode;
result = document.getElementById("location").value.split(',');
var mapProp = {
center: new Microsoft.Maps.Location(result[0], result[1]),
zoom: 16,
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
navigationBarMode: navigationBarMode1.compact,
};
map = new Microsoft.Maps.Map(document.getElementById('BingMap'), mapProp);
Microsoft.Maps.Events.addHandler(map, 'dblclick', function (e) { handleArgs('mapDoubleclick', e); });
var location = new Microsoft.Maps.Location(result[0], result[1]);
var pushpin = new Microsoft.Maps.Pushpin(location, null);
map.entities.push(pushpin);
function handleArgs(id, e) {
//setFocusToTextBox()
var point = new Microsoft.Maps.Point(e.getX(), e.getY());
var loc = e.target.tryPixelToLocation(point);
document.getElementById("location").value = loc.latitude
+ "," + loc.longitude;
var location = new Microsoft.Maps.Location(loc.latitude, loc.longitude);
map.entities.clear();
var pushpin1 = new Microsoft.Maps.Pushpin(location, null);
var memId = loc.latitude
+ ", " + loc.longitude;
map.entities.push(pushpin1);
setFocusToTextBox()
}
function setFocusToTextBox() {
document.getElementById("location").focus();
vm.model.value = document.getElementById("location").value;
}
}
</script>
<small>Input address</small>
<br />
<input type="text" ng-model="model.value" ng-change="vm.savevalue()" id="location" class="umb-editor" />
<br />
and this is my controller code:
(function () {
"use strict";
function MapController($scope) {
var vm = this;
vm.checkValue = checkValue;
vm.savevalue = savevalue;
function checkValue() {
if ($scope.model.value === "" || $scope.model.value === null) {
// alert($scope.model.value);
$scope.model.value = "Damascus";
}
}
function savevalue() {
// alert($scope.model.value);
if ($scope.model.value === "" || $scope.model.value === null) {
// alert($scope.model.value);
$scope.model.value = "Damascus";
}
}
function onInit() {
// alert($scope.model.value);
checkValue();
}
onInit();
var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
// $scope.model.value += "0";
savevalue();
});
}
angular.module("umbraco").controller("Bing.MapController", MapController);})();
Normally if you want to retrieve a value from a database via the Angular layer then you'd need to create an UmbracoAuthorizedJsonController (in your C# code) that does this and then returns the value as JSON to your Angular layer.
However, the normal way you configure Property Editors is via Pre Values. So when someone creates an instance of the Property Editor they would enter the API key and then this can be retrieved in the controller.
use a database value in a custom property type
Hi Everyone, I create my own custom property type that allows the content editor to select a location in a Bing map, I have 2 issues :
and this is my controller code:
Thanks.
Normally if you want to retrieve a value from a database via the Angular layer then you'd need to create an UmbracoAuthorizedJsonController (in your C# code) that does this and then returns the value as JSON to your Angular layer.
However, the normal way you configure Property Editors is via Pre Values. So when someone creates an instance of the Property Editor they would enter the API key and then this can be retrieved in the controller.
https://our.umbraco.com/Documentation/Extending/Property-Editors/package-manifest#pre-values
is working on a reply...