Get marker location in Angular Leaflet Direction - angularjs

I'm using Angular Leaflet Directive. In the example, say here form the docs (http://tombatossals.github.io/angular-leaflet-directive/#!/examples/dragging-markers), we have a marker that is draggable. Changing the location of the draggable Madrid marker is possible by clicking up and down on the lat/lng input.
Is there a way for the reverse to happen? That is, when the marker is dragged, the location is updated in those input values?
Alternately, is there a way to access a specific marker and retrieve its coordinates with the directive?

you should take a look at this link: http://tombatossals.github.io/angular-leaflet-directive/examples/0500-markers-simple-example.html
Specifically at those lines:
$scope.$on("leafletDirectiveMarker.dragend", function(event, args){
$scope.position.lat = args.model.lat;
$scope.position.lng = args.model.lng;
});
There is also a marker ID, if you have more than one marker on the map.
Also, you should know that when you drag marker, lat/lng properties of that marker update themselves, so you can use simple $watch, too.

Related

How can I reinitialize ngMaps when changing routes in Angular, using ui-router?

I'm using ngMap and here's my relevant code:
<div map-lazy-load="https://maps.google.com/maps/api/js" map-lazy-load-params="{{googleMapsUrl}}" ng-style="{'height': feedActualHeight + 'px'}">
<ng-map id="iPadFeedMap" zoom="14" center="Times Square, New York, NY">
</ng-map>
</div>
This works great and loads the map perfectly. But when I navigate away and then come back to the page, the map is grayed out:
Is there a way to re-initialize the map when this page loads?
I experienced the exact same issue regardless of how center was being set (it failed both with lat/lng and a physical address), but the accepted answer wasn't quite working for me.
My solution was to use NgMap's lazy-init property to re-initialize the map each time I returned to it.
<ng-map id="dashboard-map"
center="Boston, MA"
lazy-init="true"
zoom="9"
map-type-id="TERRAIN">
</ng-map>
In my ctrl I used the following code to 1) find the uninitialized map in the DOM and 2) initialize it
// dashboardCtrl.js
NgMap.getMap({ id: "dashboard-map" }).
then(function(map) {
NgMap.initMap(map.id);
});
This way every time I hit my dashboard, the ctrl would run and re-init the map. It now shows properly every time.
This was a helpful thread to read through: https://github.com/allenhwkim/angularjs-google-maps/issues/387
It seems it only occurs in case when value for center attribute is provided as address value (e.g. Times Square, New York, NY). In that case the way the map center is determined consist of the following steps:
since ng-map leverages Google Maps Geocoding API, the corresponding method is invoked to resolve actual location (lat,lng)
Map object center property is getting updated
Since this issue never occurred for me when center attribute is provided as location value (e.g. [40.759011, -73.98447220000003]) i propose to change the way how map is initialized:
remove setting of center attribute center="Times Square, New
York,NY"
instead set map center as demonstrated below:
Example: set map center by address
NgMap.getMap("iPadFeedMap").then(function (map) {
NgMap.getGeoLocation($scope.address)
.then(function (latlng) {
map.setCenter(latlng);
});
});
$scope.address = "Times Square, New York, NY";
Demo

Marker handle in angular-leaflet-directive

I need to get the handle of a marker in order to set the icon when I have a ng-mouseover somewhere else on the page.
I push my markers into leaflet like this:
angular.extend($scope,
{markers:
{'id1': {lat:foo, lng:bar},
'id2': {lat:foo, lng:bar}, ...
}
});
$scope.markers['id1'] returns the correct lat/lng dict. Here, i need the marker object so I can perform a marker.setIcon().
Looked a little into leafletMarkersHelpers but no success ...
Would appreciate any starting point.
Thanx
Best
/B
There's an leafletData service for that. The Promise you get when you call leafletData.getMarkers() resolves with the Leaflet marker objects in the object with keys like in your scope.
leafletData.getMarkers().then(function (markers) {
markers.id1.setIcon(...);
});

Drive Time and Distance from Leaflet Routing Machine

I’m building embedded content for a CRM using JQuery Datatables, Leaflet with OSM tiles, and Leaflet Routing Machine. Markers on the map and the rows of the table are based on the SAME JSON data, and I’m building interactions (using SHARED JavaScript functions) between the two libraries. For example, when a Datatable row is clicked, the row is highlighted, a popup is opened over the corresponding map marker, and a route is calculated using LRM which places the route line on the map. Conversely, when a map marker is clicked, all the same events happen because I'm calling the SAME function.
By default, the Itinerary LRM creates is hidden on the map, but I would like to parse out the Drive Time and Distance, and insert them in the popup opened by the shared function. I have spent four days pouring over the API documentation and searching the internet looking for clear instructions or code samples on how to access these values from the Itinerary object, but with no success. I have inspected every object I can figure out how to log to the console, but the data I need is in properties that come up ‘undefined’ when I try to access them.
Please, from start to finish, how do I access the Itinerary Summary?
When I init the map, I also init the Routing Control with null waypoints:
ctrl = L.Routing.control({
waypoints: null,
units: 'imperial',
show: false,
createMarker: function() { return null; }
}).addTo(map);
When a marker/row is clicked, I call this function:
function clickEffects(id, latlon) {
// set waypoints for routing control
ctrl.setWaypoints([ ctr, latlon])
// scroll the table to the row for the clicked marker
table.$('tr.selected').removeClass('selected');
var idx = table.row("#" + id).index()
table.row(idx).show().draw(false);
table.row(idx).nodes().to$().addClass('selected');
// create and open a popup
var popup = L.popup()
.setLatLng(latlon)
.setContent("Dan was here!!!")
.openOn(map);
}
Figured it out:
Declared popup in global scope
Bound default "Loading..." content when creating marker
In shared function, set div's with target id's in new popup content
(in addition to freshly retrieved ajax content.
In "routesfound" event listener, used JQuery to insert formatted
drive time and distance on target divs.
Works like a charm. Just need to expand on ajax data now...

Move marker on Openstreet map - Leaflet

I use the following plug-in to move the marker on the map - https://github.com/openplans/Leaflet.AnimatedMarker
Faced with such a problem that the zoom the map, markers are beginning to jump on it. How is that correct?
you do not need a plugin.
this should do it
marker.setLatLng([lat, long]);

Adding location to Google Map on page load with Angular UI

Thanks to #AJoslin I now have a working google map using only AngularUI and AngularJS.
Unfortunately there are two things I can't figure out how to do which may have to do with Google Map API and my lack of understanding of.
When the map initially loads, I already have a location so I wish to load it with a marker already on it. How do I do that?
I also wish to set the ng-click="myMap.panTo(marker.getPosition()) not to a new marker but to the initial location, which is the only marker I would have since I'm removing the add marker functionality out, once I can figure this one out.
Here is the working jsfiddle
http://jsfiddle.net/jorgecas99/xMw6U/
i think it should be achievable by setting the tilesloaded event, but didnt manage that way, so i ended up using a simple "trick", watching for myMap to appear.
$scope.$watch('myMap', function(){
$scope.setHome();
});
$scope.setHome = function() {
$scope.homeMarker = new google.maps.Marker({
map: $scope.myMap,
position: $scope.mapOptions.center
});
}

Resources