ourumbracogmaps in a custom section - Using Umbraco and getting started

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...

Flag this post as spam?

Our.Umbraco.Gmaps in a Custom Section