ourumbracogmaps in a custom section

AWatters 33 posts 174 karma points

Jun 13, 2023 @ 19:21

Our.Umbraco.Gmaps in a Custom Section

I wonder does anyone have recent experience using Our.Umbraco.Gmaps in a Custom Section of a site? ie in angular rather than just as a Data Type. I am setting up a "dealer map" for dealers and their branches. Admin is mostly done, the only bit left is the actual map in the branch edit page where you select a location. I have code from Umbraco 7 which I am trying to base it off but it's not working. This is the first chunk of my App_Plugins\WebsiteAdmin\backoffice\DealerTree\branchedit.controller.js

angular.module("umbraco").controller("Dealer.BranchEditController",
    function ($scope, $routeParams, dealerResource, notificationsService, navigationService, editorState) {

        $scope.loaded = false;

        var id = $routeParams.create ? 0 : $routeParams.id;
        dealerResource.getBranchById(id).then(function (response) {
            $scope.branch = response.data;
            if ($routeParams.create) {
                $scope.branch.dbr_dlrId = $routeParams.id;
            }       

            $scope.location = {
                latitude: $scope.branch.dbr_latitude,
                longitude: $scope.branch.dbr_longitude,
                postcode: $scope.branch.dbr_postcode,
                address: $scope.GetAddress()
            };
            alert("scope location lat: "+ $scope.location.latitude);
            alert("scope location long: " + $scope.location.longitude);

            $scope.properties = [
                {
                    label: 'Location',
                    description: 'Drag pin to refine location',
                    view: '/App_Plugins/Our.Umbraco.GMaps/views/maps.editor.html',
                    config: {
                    },
                    value: $scope.location
                }
            ];
            $scope.loaded = true;
            editorState.set($scope.branch);

$scope.location gets the correct coordinates from the database but it doesn't show correctly on the map. I'm thinking I need to change this to something like $scope.address.coordinates.lat and long but I don't know exactly what's needed and how to implement it. Any help would be great thanks! Umbraco 10.4.2, Our.Umbraco.GMaps 2.1.3

Copy Link

AWatters 33 posts 174 karma points

Jun 13, 2023 @ 21:58

angular.module("umbraco").controller("Dealer.BranchEditController",
    function ($scope, $routeParams, dealerResource, notificationsService, navigationService, editorState) {

        $scope.loaded = false;

        var id = $routeParams.create ? 0 : $routeParams.id;
        dealerResource.getBranchById(id).then(function (response) {
            $scope.branch = response.data;
            if ($routeParams.create) {
                $scope.branch.dbr_dlrId = $routeParams.id;
            }       

            $scope.address = {                
                coordinates: {
                    lat: $scope.branch.dbr_latitude,
                    lng: $scope.branch.dbr_longitude,
                    postalcode: $scope.branch.dbr_postcode,
                    full_address: $scope.GetAddress()
                },
            };

            $scope.properties = [
                {
                    label: 'Location',
                    description: 'Drag pin to refine location',
                    view: '/App_Plugins/Our.Umbraco.GMaps/views/maps.editor.html',
                    config: {
                    },
                    value: $scope.address.coordinates
                }
            ];
            $scope.loaded = true;
            editorState.set($scope.branch);

            $scope.$watch('branch.dbr_postcode', function () {
                $scope.address.coordinates.postalcode = $scope.branch.dbr_postcode;
            });

            $scope.$watch(function () {
                return $scope.address;
            }, function () {
                $scope.branch.dbr_latitude = $scope.address.coordinates.lat;
                $scope.branch.dbr_longitude = $scope.address.coordinates.lng;
            }, true);


            ////console.log($scope.town);

            $scope.$watch('[branch.dbr_address1,branch.dbr_address2,branch.dbr_address3,branch.dbr_town,branch.dbr_county,branch.dbr_postcode]', function (oldVal, newVal) {
                $scope.address.full_address = $scope.GetAddress();
            }, true);  
        });

        $scope.save = function (branch) {
            alert("save branch lat " + $scope.branch.dbr_latitude);
            alert("save branch long " + $scope.branch.dbr_longitude);
            alert("save branch address1 " + $scope.branch.dbr_address1);
            console.log(branch);
            alert("save address");
            dealerResource.saveBranch(branch).then(function (response) {
                $scope.branch = response.data;
                editorState.set($scope.branch);
                $scope.branchForm.$dirty = false;
                navigationService.syncTree({ tree: 'DealerTree', path: [-1, $scope.branch.dbr_dlrId, $scope.branch.dbr_dbrId], forceReload: true });
                notificationsService.success("Success", branch.dbr_town + " branch has been saved");
            });
        };

        $scope.GetAddress = function () {
            //console.log($scope.towns);
            // console.log($scope.town.value);
            //console.log($scope.town.config.items[$scope.town.value]);
            var add = [];
            add.push($scope.branch.dbr_address1);
            add.push($scope.branch.dbr_address2);
            add.push($scope.branch.dbr_address3);
            add.push($scope.branch.dbr_town);
            add.push($scope.branch.dbr_county);
            add.push($scope.branch.dbr_postcode);
            add.push("UK");

            return add.join(',');
        };

    });

Changed to $scope.address.coordinates.lat and lng - but still not working in that the map appears and can go to searched-for address etc but the pin on load are not the coordinates from the database and new coordinates don't get saved to $scope.branch. So I'm obviously missing something vital

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Our.Umbraco.Gmaps in a Custom Section