tombatossals / angular-leaflet-directive Goto Github PK

Adding support for a title allows the text to be shown as the mouse hoovers over a marker.

Just notice that some of the marker examples () are broken now:

• markers-example.html
• main-marker-example.html

Cause is still unknown, we need to write a unit test to prevent regression in the future.

Hello everyone,

I got an issue with which I fight all day long and can't find help so trying my luck here :).

I got markers in my scope : hardcoded London and manually added ones.

Manually added ones can be freshly added or pastly added and retrieved from indexedDb database.

All markers are not draggable; to make a marker draggable hold right click on marker for 2 seconds and then release.
An alert wil confirm draggable property change.

Problem is that all manually created markers stay stuck and not draggable , but same operation on london causes markers can be dragged by left click.

I got a live example with markers in scope
http://n0ky.free.fr/debug2/src/app/#/map

and one with markers stored in a service which I was thinking could be the reason of issue but is not.
http://n0ky.free.fr/debug/src/app/#/map

Library cleaning not yet done for the moment so it can take a few seconds to load, my bad.

If any of you got an explanation, or a tip, or a live example that could fit my issue, I would be glad to hear you.

PS: I do read path example with ng-model but I don't know how it could help with since I dont have ng-model in my case.

Thanks for reading !

Hello! Thank you very much for your work! I was wondering: is it possible to have the markers populating from backend? Because I see no markers. Is there a way to "reload" the map after the markers have been set (callback called)?

The commit at ed6298a seems to have removed the bounds functionality from the directive. Was this on purpose?

Add a .editorconfig file setting the coding standards of the project, so it can be edited from multiple editor without affecting indentation.

Want a coffeescript version? Here's my morning's work:
https://gist.github.com/DanielBaird/5392128

The compiled JS shows a map, but I've not tested markers or anything..

I played a bit with the development branch, especially with the baselayer/overlay feature. Is it possible to hide the layers control? I want to hide it and use my own controls.

Greetings

I'm relatively new to Angular, and I have the leaflet directive doing what I want except for a small issue. I have a leaflet map embedded in a tab that is created via AnuglarUI's bootstrap module. When my page is first loaded the leaflet map is shown, but doesn't display all the tiles properly (one is sometimes shown but the rest are just gray). The moment the browser window is re-sized or refreshed the map displays everything correctly. Here's a stackoverflow question discussing the exact issue I'm having (along with a jsfiddle that demonstrates it):

http://stackoverflow.com/q/10762984/571237
http://jsfiddle.net/C7Rp8/4/

In doing some research it seems that adding a call to invalidateSize() on the map object can trick leaflet into redrawing itself, but I'm not sure how to update this directive to use that technique. I've tried embedding some js code into the directive itself to call invalidateSize() but I'm not having any luck on getting it to work.

Has anyone else ran into this?

I've dealt a lot with Leaflet in the past but am fairly new to Angular, so some of my confusion may be down to still learning how all this works. Any clarification on my questions below would be greatly appreciated!

• With this directive, is it possible to listen for map and marker events?
• How can I access the scope of the directive from a controller to get, for example, the current center of the map?
• One of my main frustrations right now, and this is partly due to being new to the Angular way of doing things, is that using a directive seems like a middle man, getting in the way of accessing and working with Leaflet. Am I expecting too much from this directive in its current state? PS: I'm more than happy to contribute changes to flesh out this directive once I understand what's going on.

I'll start there with my questions as clearing them up will go a long way to helping me out. Thanks in advance.

Hi guys, I have been working on a re-design of the github page of the directive, with another structure, and making AngularJS more present on every section of the web.

I have pushed it online now, there's some work to do yet, more examples, a documentation section, etc. but this could be accomplished more easily now on the new structure.

I will continue adding examples (the @JaumeFigueras are a must) on the next days, but I would like to know your opinion, if you would add/modify/delete anything of this new page.

http://tombatossals.github.io/angular-leaflet-directive/

I have used angular-1.2.0-rc.2 and everything works ok! I needed this version of angular to be able to use this hightlight directive:

https://github.com/pc035860/angular-highlightjs

Hi, it's me again :)

I just updated directive source and the custom "dragend" event that I got my markers is not fired anymore.

I have been searching for quite a few hours so I put my problem online.

http://n0ky.free.fr/debug/src/app/#/map

To be concise, event on line 64 of map.js in map directory is not fired.

Markers are store in browser database.
To add a marker hold right click for 2 second on the map then release, select a type, type the name and validate.

Thanks for your time and sorry but i cant do a jsfiddle as the code is splitted.

PS: I hope this the good place to ask for help as it's hard to find people concerned by both aspects : angular and leaflet on IRC

I came across this issue while creating #84 and since I didn't know an obvious solution (still new to Angular), I figured a bug report would be more suitable.

map.setView is getting called when the map's center is updated on moveend due to the $watch on the map's center. This is a redundant setView since the user didn't make this center change. The side effect of this, especially when using moveend to update the map center is that the map redraws itself creating a visible flicker.

Is there a way to prevent this map.setView from happening? There's no reason to set the map's view if the center just changed from the map's events and not a user change.

Line I'm referring to: https://github.com/tombatossals/angular-leaflet-directive/blob/master/src/angular-leaflet-directive.js#L246

Hello, I am having an issue with markers,

I am using Leaflet.awesome-markers (I tested it and this issue works there). When I place the awesome marker to my map it works but when I drag-n-drop it the marker is changed to it's default style.

Popup work with minified, not with the full javascript version.
Maybe the wrong file?

I attempted to track down how to solve this bust couldn't come up with anything solid. When the marker dragend event fires in createMarker which is used to update the marker's lat/lng, $digest already in progress is getting thrown.

From what I can tell, it's from trying to alter the markers in the scope during this whole broadcast process.

I'm hoping that someone will know the fix and in the process expand my knowledge of how all this works.

Inside my controller I have a function that grabs data from my factory and calls addMarker. Here's my problem:

If I call addMarker inside this function the map displays with no marker, and I get this error:
[AngularJS - Leaflet] 'center' is undefined in the current scope, did you forget to initialize it?

If I call addMarker outside of this I get a null data error because the data has not loaded yet.

myFactory.getDarta().then(function(data) {
$scope.myData = data;
$scope.addMarker($scope.myData);
});

$scope.addMarker = function (item) {
    angular.extend($scope, {
        center: {
            lat: item.latitude,
            lng: item.longitude,
            zoom: 13
        },
        markers: {
            store: {
                lat: item.latitude,
                lng: item.longitude,
                message: "Drag me to your position",
                focus: true,
            }
        }
    });

};

hrm, seems that after removed the marker attribute, we cannot put a marker on map by clicking on it now?

I am developing a map app now and need this feature. More specifically, I need a main marker that's different from other markers.

@tombatossals , do you mind I bring back the marker attribute?

When I remove them directly from markers, e.g. delete $scope.markers[id]; I get:

TypeError: Cannot read property 'overlays' of null
at Object.fn (http://127.0.0.1:5000/static/js/angular-leaflet-directive.js:709:43)
at Object.e.$digest (http://127.0.0.1:5000/static/js/angular.min.js:84:409)
at Object.e.$apply (http://127.0.0.1:5000/static/js/angular.min.js:86:469)
at HTMLElement. (http://127.0.0.1:5000/static/js/angular.min.js:140:507)
at http://127.0.0.1:5000/static/js/angular.min.js:22:462
at Array.forEach (native)
at m (http://127.0.0.1:5000/static/js/angular.min.js:6:193)
at HTMLElement.c (http://127.0.0.1:5000/static/js/angular.min.js:22:433) angular.min.js:60
TypeError: Cannot read property 'overlays' of null
at Object.fn (http://127.0.0.1:5000/static/js/angular-leaflet-directive.js:839:39)
at Object.e.$digest (http://127.0.0.1:5000/static/js/angular.min.js:84:409)
at Object.e.$apply (http://127.0.0.1:5000/static/js/angular.min.js:86:469)
at HTMLElement. (http://127.0.0.1:5000/static/js/angular.min.js:140:507)
at http://127.0.0.1:5000/static/js/angular.min.js:22:462
at Array.forEach (native)
at m (http://127.0.0.1:5000/static/js/angular.min.js:6:193)
at HTMLElement.c (http://127.0.0.1:5000/static/js/angular.min.js:22:433)

Hi,
I have been searching in the issue list and I did not find the answer for my problem which should be so easy.
I need to add interaction between the map and some external button. That way, I have a list of location, every location has its own marker. So I would need to open the marker popup on mouseover in the list item.
In other words I need to get the marker object in my "mouseOverItem" directive.

Thanks in advance,
Jorge

Proposal

Exposing the map object created in the directive to the scope in the controller.

I know the directive is supposed to take care of map interactions but all of the methods for map modification and state retrieval are unavailable.

Use Case

I'm currently working on a setup where I have the need to call map.fitBounds() and in general need to do some more advance map movement based on goings on at the controller level.

• Is there a way to do this currently with the way the directive is set up?
• If not, how would dealing with these kinds of functions work with an Angular directive since it doesn't really apply to data binding?

Concern

Exposing the map object to the controller could make it confusing to people using this directive at first as they might try to do all interaction with the map object directly instead of through the directive and what's set up already. What are the thoughts on this? Is exposing the map object a good/bad idea? If it's favourable to not expose it, what would be a way to make these functions available to the controller?

Thanks!!

👍 Great to see all the progress on this directive lately. Had to take a few weeks away from Angular work and was surprised at the amount of change that's gone on in the past few weeks.

Hello! Is there any way to disable the mouse scrollwheel with this directive? There is the "ScrollWheelZoom" propriety in leaflet plugin...

Thanks!

Proposal

Add a events attribute in the directive to manage which Leaflet events are exposed to Angular

Concern

I'm trying to perform move animation to markers when their position is updated and when they are clustered. This leads Leaflet to fire, at least, one event per marker. The directive 'send' the events to Angular consuming some CPU time (profiling in my computer tells me about 100ms). When dealing with thousands of markers the map update makes the application unusable.

Usage example

Add an event attribute to select which events are forwarded to Angular. Something like:

<leaflet events="none">
<leaflet events="all">
<leaflet events="map.click;map.popupopen;map.popupclose;marker.mouseover">

or possibly a model binding

events = {
  map: {},
  markers: {}
}

events = {
  map: {
    click: true,
    popupopen: true,
    popupclose: true
  },
  markers: {
    mouseover: true
  }
}

<leaflet events="events">

What do you think?

Hi,
I'm developing the use of multiple base layers and overlays in the directive. Now I think I have working correctly the multiple base layers of type xyz tiles (tileLayer in Leaflet) and the layer control. Also an example and unit tests.
But I don't know how to share this code with you, because I'm new in git and this feature will take some time to implement I don't know what to do. A branch? Send multiple PR with usable steps?
Advise me please.

Hi,

deleting marker from markers object does not remove marker from the map. The code deletes the marker from the backing object but does not call map.removeLayer( marker ).

I have fixed the code in my fork and add some support for circles and markers, if your interested.

-- Patrick

Hi,

I am exploring using angular and your directive to replace an existing code I have. How do i add cluster support to the directive? Is there a place to extend the functionality without accessing the map thru testing? Thank you for your help.

I've created a branch and i've put:
marker.on("click",function(e){
marker.bindPopup("" + markerData.name + "", { closeButton: true });
marker.openPopup();
});

Hi,

Is there possibility to specify custom Tile Layers in the current version?

Thanks in advance,
Dmitry

I've stumbled across an issue with marker events when it comes to the events and the $watch on the markers in the directive.

If a marker is removed using delete $scope.markers from a controller, the error $digest already in progress occurs. I assume this has something to do with events being fired for a marker that is no longer there.

Honestly, I'm not too sure what the Angular related issues are since I'm still learning how it all works.

Does anyone have ideas how this workflow can work properly?

To reproduce, simple have a marker on the map, and then remove it from the controller. The error should appear.

Hi,
First, sorry about my english.
I'm playing with angular-leaflet-directive and I like it very much.
But I can't use the defaults configuration values of tileLayer and maxZoom.
(I'm using nginx as a reverse proxy cache for the tile layers).
My code is:

angular.module('App.mapa-base', []).controller('base',['$scope', function($scope){
    angular.extend($scope, {
        center: {
            lat: 42.45462111623053,
            lng: -2.4725246429443355,
            zoom: 18
        },
        markers: {
            Madrid: {
                lat: 42.45462111623053,
                lng: -2.4725246429443355,
                message: "Inicio:</br>Parque de Bomberos de Logroño",
                focus: true,
                draggable: true
            }
        },
        defaults: {
          maxZoom: 18,
          tileLayer: "http://localhost:8123/{z}/{x}/{y}.png"
        }
    });
}]);

Many thanks.

Would it be possible to access the map variable outside the module?

Hello. Is it possible to style the markers a bit, using for example https://github.com/lvoogdt/Leaflet.awesome-markers ? How would one have to code to achieve the example marker?

L.marker([51.941196,4.512291], {icon: redMarker}).addTo(map);


In the path-example I can drag the markers to update the path, but paths are only updated when drag is finished. Is there a way to update the path when drag is still going on, i.e., sticking the path to the marker at all times? Thank you!

Just got around to upgrading to the latest master and am having this issue when trying to build my project that's using the Leaflet Directive.

For more reference, I'm merging from f51fbec.

Haven't had the chance to run a git bisect to track down exactly what's wrong but I figured I'd post here to see if those more familiar would know off the top of their head.

Thanks!

Add a .jshintrc file to detect code quality problems easily.

I try to use angular.element("div#map").scope().leaflet; from the Controller but due to the page loading order, the scope does not exist when I try to do this. I am fairly new to Angular, so may be missing something basic.

As far as I can tell from looking through your directive code there's no option for multiple markers. Is that correct?

I've just forked the directive and started adding support for the maxBounds option.

My thought was, to simply add a maxBounds object:

function MapController($scope) {
    angular.extend($scope, {        
        maxBounds: {
            southWest: {
                lat: 47.200,
                lng: 15.200
            },
            northEast: {
                lat: 47.700,
                lng: 15.500
            }
        },
[...]

But somehow, i must have messed up the data-binding for the new object. (see L33). The $scope.maxBounds always stays undefined and i can't figure out why. All other options (like center) work fine.

If we can fix this issue and it is appreciated, i'd provide the PR.

/m

Inside my controller I have a function that grabs data from my factory and calls addMarker. Here's my problem:

If I call addMarker inside this function the map displays with no marker, and I get this error:
[AngularJS - Leaflet] 'center' is undefined in the current scope, did you forget to initialize it?

If I call addMarker outside of this I get a null data error because the data has not loaded yet.

myFactory.getDarta().then(function(data) {
$scope.myData = data;
$scope.addMarker($scope.myData);
});

$scope.addMarker = function (item) {
    angular.extend($scope, {
        center: {
            lat: item.latitude,
            lng: item.longitude,
            zoom: 13
        },
        markers: {
            store: {
                lat: item.latitude,
                lng: item.longitude,
                message: "Drag me to your position",
                focus: true,
            }
        }
    });

};

Hi,

First of all, I'm sorry about opening too may issues :-)

I'm trying to put on map a set of markers. As I understand they should be assigned as properties of $scope.multimarkers object (a hashmap). Problem here is Id of my marker is Guid string (which can not be used as property of JS object).

Is there any workarounds for that?

If you share your vision how to fix it correctly (switch from object to array?), I probably can contribute a patch for that.

Thanks,
Dmitry

Hi, I'm re-working the code of the directive to manage better the new improvements:

• Merge the "zoom" property with the center property, so this would be the inicial starting point of the map:

example:

center: {
lat: xxx,
lng: xxx,
zoom: x,
maxZoom: x
}

• Merge the main marker with the multimarkers property, so we can have a list of markers with one main active marker (focused):

example:

markers: {
m1: {
lat: 51.505,
lng: -0.09,
message: "I'm a marker"
},
m2: {
lat: 51,
lng: 0,
focus: true,
message: "Hey, drag me if you want",
draggable: true
}
}

What do you think about these changes? I'm developing them with new examples of these features on the "dev" branch. If you see no problem, I will merge it with the main branch when they are correctly implemented.

Hi,
is it possible to include a leaflet chloropleth map using this directive?

http://leafletjs.com/examples/choropleth.html

Hi! I asked you if you could include the scrollWheelZoom propriety and I am very happy you did it! However, after your update, the same code I was running fine before pops up these error:

• WARNING [AngularJS - Leaflet] 'center' is undefined in the current scope, did you forget to initialize it?
• ERROR Error: $digest already in progress
• ERROR Error: Non-assignable model expression: undefined (directive: leaflet)

The plugin seems to be working fine though...

I try to change the TileUrl at runtime (I used the custom-parameter-example.html for this). With a click on the button the TileUrl should change. The value is changed like expected, but the map view doesn't changes.

<html ng-app="demoapp">
  <head>
    <script src="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script src="../dist/angular-leaflet-directive.min.js"></script>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.3/leaflet.ie.css" />
    <![endif]-->
    <script>
        angular.module("demoapp", ["leaflet-directive"]);
        function DemoController($scope) {
            angular.extend($scope, {
                london: {
                    lat: 51.505,
                    lng: -0.09,
                    zoom: 8
                },
                defaults: {
                    tileLayer: "http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png",
                    tileLayerOptions: {
                        opacity: 0.9,
                        detectRetina: true,
                        reuseTiles: true,
                    }
                }
            });

            $scope.changeUrl = function() {
                console.log($scope.defaults.tileLayer)
                var url = "http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png";
                $scope.defaults.tileLayer = url;
                console.log($scope.defaults.tileLayer)                   
            };
        };
    </script>
    <style>
        .angular-leaflet-map {
            width: 640px;
            height: 400px;
        }
    </style>
  </head>
  <body ng-controller="DemoController">
    <button ng-click="changeUrl()">change Url</button>
    <p>TileLayer Url: {{ defaults.tileLayer }}</p>
    <leaflet center="london" defaults="defaults"></leaflet>
  </body>
</html>

Using the $apply(fn) with:

$scope.$apply(function(){
    console.log($scope.defaults.tileLayer)
    var url = "http://otile1.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png";
    $scope.defaults.tileLayer = url;
    console.log($scope.defaults.tileLayer)
});

throw the error: $apply already in progress. Did I missused the $apply or is it actually impossible to change the TileUrl at runtime?

Seams you forget to add maxZoom: "=maxzoom", to the scope: { } in DEV no ?

How could you add in Circles, Rectangles, and polygons?

API reference: http://leafletjs.com/reference.html#circle

Hello,
how can I make map appear at 100% width/height. I need make it full window size (like Google Maps).
At the moment, I define arbitrary name to the directive and then use a script that modifies style width/height in window.onresize event. The bad thing about that seems like part of map is not loading properly. Also I have to use non-angular JS to achieve that.

Hi

Your module is really nice,
I thinks it coulb be really interesting to add it to bower registry ?
http://bower.io/

Thanks, nicolas

I've got this error using the multiple exemple