tombatossals / angular-openlayers-directive Goto Github PK

Hey,

maybe this issue correlate with issue 51

I would like to style more than one polygons/feature in one layer individually. When i use inline GeoJSON, i only can set the style attribute on the same level as the source object.
In this case:

var myLayer = {
    name: 'example',
    source: {
        type: "GeoJSON",
        geojson: {
            object: {
                type : "FeatureCollection",
                features: [
                    {
                        type: "Feature",
                        id: "clicklayer",
                        geometry: {
                            "type": "Polygon",
                            "coordinates": [[...][...]]
                        }
                    }
                ]
            },
            projection: "EPSG:3857"
        }
    },
    style: {
        fill: {
            color: "rgba(0, 0, 0, 0)"
        },
        stroke: {
            color: "rgba(0, 0, 0, 0)",
            width: 1
        }
    },
    visible: true,
    opacity: 0.6
}

but, what i can do if i want to style polygones/features individuelly? To bad that i can't see any example for this case on your demo page (or i haven't seen it yet?)

so, i am searching for something like this:

...
                features: [
                    {
                        type: "Feature",
                        id: "clicklayer",
                        geometry: {
                            "type": "Polygon",
                            "coordinates": [[...][...]]
                        }
                        style: {
                             fill: {
                                 color: "rgba(0, 0, 0, 0)"
                             },
                        stroke: {
                            color: "rgba(0, 0, 0, 0)",
                            width: 1
                            }
                        },
                        visible: true,
                        opacity: 0.6
                       }
                   },
//some more feature types with style option
             ]
...

I also not need a GeoJSON object. It can be any type, as long as i can set the style attribute individually for polygones or features. You can help me?

best regards
lars

When i tried to add styles to a multipoint geojson, the layer disappeared. i noted that on the dist directive at the createStyle function there is not a case for image or something like ol.style.Circle

Hi @tombatossals,

Using static image map, I managed to add marker at the point clicked on the map. However, the existing label message of the existing markers will teleport to the top left of the map.

Looking at the webpage source code, the "popup-label marker ng-binding" of the existing markers are outside of the "ol-viewport", only the "popup-label marker ng-binding" of the newly added marker is inside the "ol-viewport".

Code snippet (html):

<openlayers ol-center="center" ol-markers="markers" height="400px" width="100%">
    <ol-layer ol-layer-properties="staticlayer"></ol-layer>
    <ol-marker ng-repeat="marker in markers" ol-marker-properties="marker"></ol-marker>
</openlayers>

Code snippet (js):

  $scope.$on('openlayers.map.singleclick', function(event, coordinate) {
      $scope.$apply(function() {
        $scope.markers.push({
          coord: coordinate.coord,
          projection: 'pixel',
          label: {
              message: "asd",
              show: true          
          }
        });
      });
  });

When working on

In the olHelpers.js service "event emitters", we may want to use the following helper function to obtain the geo-coordinates independent in a second try if the first one fails.
...

+        function getGeoCoordinates(map_event) {
+        
+            // ### firefox seems to not send us offsetX/Y-values
+            var pixel = [map_event.originalEvent.offsetX, map_event.originalEvent.offsetY];
+            var coord = map.getCoordinateFromPixel(pixel);
+            if (isNaN(coord[0])) {
+                // ### in this case we make use of clientX/Y instead  
+                pixel = [map_event.originalEvent.clientX, map_event.originalEvent.clientY];
+                coord = map.getCoordinateFromPixel(pixel)
+            }
+            return coord
+            
+        }

             map.on('singleclick', function(e) {
-                var pixel = [e.originalEvent.offsetX, e.originalEvent.offsetY];
-                var coord = map.getCoordinateFromPixel(pixel);
 
-                console.log('hola');
+                var coord = getGeoCoordinates(e)

             map.on('pointermove', function(e) {
-                var pixel = [e.originalEvent.offsetX, e.originalEvent.offsetY];
-                var coord = map.getCoordinateFromPixel(pixel);
+            
+                var coord = getGeoCoordinates(e)

There are probably more robust solutions but at least I wanted to document that, when listening to the openlayers mouse-events emitted by this module, I got NaN in Firefox 33.

Additionally it may be wise to mention that I was working with:

commit 44f327e7c2c1ecc7b80c4a8a642d96e36d677171
...
Date:   Wed Nov 12 21:53:01 2014 +0100

Have a nice day & Cheers!

If the directive is used in a modal window or in a tab the map does not show up. The error message is the following:
Uncaught TypeError: Cannot read property 'time' of null

I'm not sure if I'm the problem lies between (my) chair and keyboard, but to me it seems like the ol-marker -directive is broken in the 0.0.2 release and the online examples.

Marker(s) not visible:
http://tombatossals.github.io/angular-openlayers-directive/examples/060-marker-example.html
http://tombatossals.github.io/angular-openlayers-directive/examples/061-markers-add-remove-example.html

Marker not visible, label visible:
http://tombatossals.github.io/angular-openlayers-directive/examples/062-markers-label-example.html

Markers not visible, showOnMouseOver has no effect:
http://tombatossals.github.io/angular-openlayers-directive/examples/063-markers-properties-example.html

Markers not visible, otherwise seems to work as intended:
http://tombatossals.github.io/angular-openlayers-directive/examples/064-markers-render-html-inside-labels-example.html

Marker not visible:
http://tombatossals.github.io/angular-openlayers-directive/examples/065-markers-static-image-layer-example.html

look at 'Center Example' demo: map is not centered correctly. only zoom works.
it also does not work on my local project (but worked correctly last week, on 01.11.2014).
please check.

Looking at the source code you can set the geojson property instead of the url property. I would like to use this as I want to generate the geojson dynamically, client-side.

However setting the geojson value to the literal content of a sample json file does not render a layer. A proper code sample would be very helpful.

Hi all,

1st, thanks for the wonderful directive 👍

I'm trying to tweak the example http://tombatossals.github.io/angular-openlayers-directive/examples/080-events-propagation-example.html to work for static image map but no event is firing ("openlayers.map.singleclick").

Tried also to change "openlayers.map.singleclick" to "openlayers.layers.singleclick" (since my static image is on a layer) but still getting no event.

Can shed some light on this?

Currently Open Layers supports null as a valid value for crossorigin. Currently if you attempt to pass null (which is the default value in ol) it executes the following: crossOrigin: source.crossOrigin ? source.crossOrigin : 'anonymous'.

Since this sees source.crossOrigin as null, it then applies anonymous instead which is not the desired behavior. This breaks any server that does not have CORS enabled.

Is it possible to add a style to vectors point, using a custom icon ?. The source that use is GeoJSON. The code in ol3js is:

                    oLayer = new ol.layer.Vector({
                        source: new ol.source.GeoJSON({
                            url: 'data/incidencias.json',
                        }),
                        style: new ol.style.Style({
                            image: new ol.style.Icon(({
                                anchor: [25, 45],
                                anchorXUnits: 'pixels',
                                anchorYUnits: 'pixels',
                                src: "img/marker.png"
                            }))
                        })
                    });

My maps use several GeoJSON layers, i want disable click event on these when dragging maps?
Please help me...tks so much!

In the examples I see the following script included:

<script src="../bower_components/openlayers3/build/ol.js"></script>

However if I install the library using bower the /build directory is not available. Do I need to do some kind of manual build step?

Layers are correctly shown when ol-layer tags are generated with ngRepeat. However, if the underlying array is modified or reordered, the order of the OpenLayers layers does not change in the same way. If "track by" is not used in the ngRepeat statement, the behaviour is slightly better but causes the reloading of layers. Also, the behaviour is still not completely predictable.

JSFiddle: https://jsfiddle.net/tg89544k/2/

Hi,

Great work so far. I am using GeoServer to supply WMS to my web app. Does this directive support this? I looked through the examples and can't find any code related to WMS.

Any plans on implementing support for static image layers (i.e. Image layer type and ImageStatic source type)?

I had a brief look at how this could be added, but according to the openlayers3 examples it would require a custom projection to be created and used both in the layer and in the view objects. I just can't seem to wrap my head around how this would be done without ending up with a spaghetti plate of unmanageable code.

Ideas?

I've been trying to use this directive to display some tiles that I made with the GDAL python script. One part that I can't get right is the projection. When I used the tiles in OpenLayers v2, markers were placed with pixel coordinates. But in OpenLayers v3, I can only get the map to work in latitude and longitude. Is there a way to set the projection I'd like?

I've posted some of my code here, if that helps.

Hi all,
Are you interested on 3D capabilities provided by ol Cesium?

Now I am extending your directive in order to add 3D capabilities.

This jsFiddle example shows the problem that changing a style function does not affect the layer. The $watch is not invoked here and nothing changes.

However, if you first click on the "change style" button and then make the layer invisible and visible again, you can see the effect.

Hi there!

I'm creating an Ionic App and using the angular-openlayer-directive. So far it works but one problem still remains: On a click event on the map I fetch some properties of a feature and want to show them in an overlay. Depending on how I navigate (ui-route) to that view it works ... or not. A reload often helps. I even can see the overlay's html code in the page source but it is not visible.
To avoid race conditions, I added the html element in javascript not loading it from the html. I already spent a lot of time in that issue.
Does anybody have some experience in that frame work combination - angular, ionic, openlayers? I think you should.
Best and thanks in advance.
Thomas

This is probably an utter noob question but I am not able to style my GeoJSON layer properly. This is my source:

{
    type: 'FeatureCollection',
    features: [
      {
        type: 'feature',
        geometry: {
          type: 'Point',
          coordinates: [4.351676, 51.911728]
        }
      }

Which are displayed properly in de OL default style. The moment I try to style it like this:

        style: {
          fill: {
            color: '#FF0000'
          },
          stroke: {
            color: '#FFFFFF',
            width: 3
          }
        },

the points are no longer visible.

Hi all,

I'm hoping to draw line between markers on static map.

Any idea I can achieve that using angular-openlayers-directive? Or how can I extend the directive?

Thanks in advance.

To represent a list of markers, I am using the following:

<ol-marker ng-repeat="marker in markers" ol-marker-properties="marker"></ol-marker>

However the representation of the markers are shown as two blue circuferencias without the blue icon marker.

The correct representation was as follows:

<ol-marker ng-repeat="marker in markers" lat="marker.lat" lon="marker.lon" message="{{marker.label.message}}"></ol-marker>

But do not take the properties of the label as 'show' and 'showOnMouseOver'.

map is not shown on example page (and also can`t use this feature)

http://tombatossals.github.io/angular-openlayers-directive/examples/048-layers-static-image-example.html

please check

Hi,

I would like to propose minor change into your angular-ol-directive. For View defaults object, there is extent property, that is not respected when created new ol.View object in olHelpers.createView().

I have modified it and you can see it in:
vkasala@ff44edb

Thanks.

Viliam Kasala

Angular itself does not have a problem with the center url hash parameter, however, when using ui-router an update to the URL (including the query parameters) will cause a state transition, which re-renders the views. Is there any good way to avoid this?

In the file
https://github.com/tombatossals/angular-openlayers-directive/blob/master/src/services/olHelpers.js

..there is an redundant comma on line 234:
extractStyles: false,

..which causes a syntax error

The marker style is hardcoded to the olMarker directive, and it isn't overriden if you set a custom one to the defaults set to the map.

The links to the simple example and the complete example page (mentioned in the README) don't work.

Hi,

Fist thanks for your work, very handy ;)
It would be great if we had access to the original ol.MapBrowserEvent in our code for singleclick and pointermove events.
I need the mouse position on the screen but want to save an ng-click to do so.

Any chance you add it as a last parameter of you $emit calls ?

Hello,

is it possible to add custom tile layer with my own source subclass which is in seperate file?

thanks

Nice work! Comming from reddit. I recently did a small experiment with AngularJS and OpenLayers 3. See here: https://medium.com/angularjs-meetup-south-london/angular-integration-with-openlayers-3-5a6e8d29e635. Includes github/slides/demo.

Few featues that you may enjoy:

• SVG Material Design icons - crispy clean markers improving UX on mobiles
• Map animations - better UX
• Custom zoom to extent control
• Filtering markers

Maybe the most beneficial is the SVG icons as you can style them (shape, color) and historically it was a pain as you had to create the markers as images.

Hi,

I want to know, with which versions of angularjs is this plugin compatible?

AngularJs 1.2, 1.3.9?

Thanks.

Hi,

is the lib already deployed on bower as I couldn't find it..

Hello,

I would like to know, if it is possible to use ServerVector source in vector layer with custom angularjs http function? And also synchronize the state of loaded data with some other controller?

Thanks.

How do you setup a listener to handle a click on a marker... Can't seem to find an example or work it out by tracing through the code. On the OpenLayers site this would require access to the map object to then get the feature at the pixel, but how would you get access to the map when handling the "openlayers.map.singleclick" event in a controller?

The current examples all show a single layer in a map, is it possible to define multiple layers?

The source code shows the layers directive as "A", what is the object structure assumed for the layers variable

In line 72 of openlayers.js we may want to pass on the custom defaults object to expose the openlayers3 interactions:

-            var interactions = ol.interaction.defaults();
+            var interactions = ol.interaction.defaults(defaults.interactions);

I had to change the line above to get the following custom configuration of openlayers3 to work:

defaults: {
    interactions: {
        mouseWheelZoom: false,
        doubleClickZoom: false,
        keyboardPan: false,
        dragPan: false
    }
}

Thanks for your work & Cheers!

There is an option in ImageStatic sources to set a function that will be fired when the image is loading, with this function you can control the loading process, log progress, change src of the element and etc...

I would like to make a PR to add that functionality so the load function callback can be sent with the source variable in the createSource helper function

Hi,

is there a way how to dynamically add layers from Controller? e.g. Is it a good way to add layers from Controller that has injected olData service?

Thanks.

Hello,

I would like to ask, if it is possible to add group layers into Groups ? I have managed to make workaround for it, but I am initializing map layers in my special directive and in their link function. If there was this feature, than it would work nice with https://github.com/walkermatt/ol3-layerswitcher. This uses 2 Group layers as default, one for Base layers (only one can be activated) and OverLayers(json, topografic)...

I think maybe it would be good, if I angular-ol would create two Group layers by default and then add other layers into this 2 groups according to specified parameter.

Thanks for response.

Viliam Kasala

Admittedly, google maps are not really "open" but they are the de-facto standard and a lot of customers ask for it. It would be great to mix and match. i.e. use gmaps as the tile layer and use OL for all the bling on top of it.

OL itself gives this sample code for loading a gmap. Is it possible to access the ol.View outside the directive?

Hi All,

I am trying to load bing maps with angular js. And after searching for 1 day i found ur site very helpfull.
Actually i am trying to implement http://www.nerddinner.com/ in angular js.
To implement this i need to know how to attach click event on the map , move the marker and also find out how to get a lat and long for a point and address.

Do we have any open layer libraries for this ?

It will be great full if you can help me out.

Thanks

I have been looking at the click event examples and trying to adapt them to KML layers instead of geojson. Had little luck and was wondering if this was possible.

Thanks

Hi, do you have any way of making the map full screen, such that it resizes when the browser window resizes?

In the style section, is there a way to set the image style attribute to be an ol.style.Circle?

The dynamic style for marker does not allow to change icon. Is it expected ?
What is wrong with this fiddle : http://jsfiddle.net/xxjq7o1x/1/ ?
Thanks

It is not possible to add a function as a style in a vector layer:

function styleFunc(feature, resolution) {
    var iconStyle =
        new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: 'resources/icon.png'
            })
        });
    return [iconStyle];
};

 .controller('Home2Ctrl', [ '$scope', '$http', 'olData', function($scope, $http, olData) {
        angular.extend($scope, {
            layers: {
                main: {
                    source: {
                        type: 'OSM'
                    }
                },
                geojson: {
                    source: {
                        type: 'GeoJSON',
                        url: 'data/data.geo.json'
                    },
                    style: styleFunc
                }
            }
        });
    }]);

The create layer method breaks because it expects an object. This works:

   createLayer: function(layer) {
                var oLayer,
                    type = detectLayerType(layer),
                    oSource = createSource(layer.source);

                switch(type) {
                    case 'Tile':
                        oLayer = new ol.layer.Tile({ source: oSource });
                        break;
                    case 'Vector':
                        if (layer.style) {
//                            var style = new ol.style.Style({
//                                fill: new ol.style.Fill({
//                                    color: layer.style.fill.color
//                                }),
//                                stroke: new ol.style.Stroke({
//                                    color: layer.style.stroke.color,
//                                    width: layer.style.stroke.width
//                                })
//                            });
                            oLayer = new ol.layer.Vector({ source: oSource, style: layer.style });
                        } else {
                            oLayer = new ol.layer.Vector({ source: oSource });
                        }
                        break;
                }

I have used your directive from a couple of weeks and it is great. I would like to contribute by adding the support of so called clustering (http://openlayers.org/en/v3.2.0/examples/cluster.html). I did not fork your code but the modification seems to be really simple, I added this part in the createLayer() function :

createLayer: function(layer, projection) {
...
if (!oSource) {
  return;
}

 // Manage clustering
 if ( (type === 'Vector') && layer.clustering ) {
    oSource = new ol.source.Cluster({
        source: oSource,
        distance: layer.clusteringDistance,
    });
}

switch (type) {
...

As you can see I propose to add two new options in the layer object for Vector layers:

• clustering : boolean to indicate if we want to cluster the layer
• clusteringDistance : as in OL3 to configure the distance from where features are clustered

Some results :

Thanks for this great tool. I have added two other cases, which are useful for layers TMS and XYZ.

case 'TileTMS':
                if (!source.url || !source.tileGrid) {
                    $log.error('[AngularJS - Openlayers] - TileTMS Layer needs valid url and tileGrid properties');
                }
                oSource = new ol.source.TileImage({
                    url: source.url,
                    maxExtent: source.maxExtent,
                    tileGrid: new ol.tilegrid.TileGrid({
                        origin: source.tileGrid.origin,
                        resolutions: source.tileGrid.resolutions
                    }),
                    tileUrlFunction: function(tileCoord) {

                        var z = tileCoord[0];
                        var x = tileCoord[1];
                        var y = tileCoord[2]; //(1 << z) - tileCoord[2] - 1;

                        if (x < 0 || y < 0) {
                            return "";
                        }

                        var url = source.url + z+'/'+ x +'/'+ y +'.png';

                        return url;
                    }
                });
                break;
            case 'TileImage':
                oSource = new ol.source.TileImage({
                    url: source.url,
                    tileGrid: new ol.tilegrid.TileGrid({
                        origin: source.tileGrid.origin, // top left corner of the pixel projection's extent
                        resolutions: source.tileGrid.resolutions
                    }),
                    tileUrlFunction: function(tileCoord, pixelRatio, projection) {
                        var z = tileCoord[0];
                        var x = tileCoord[1];
                        var y = -tileCoord[2]-1;
                        var url = source.url
                            .replace('{z}', z.toString())
                            .replace('{x}', x.toString())
                            .replace('{y}', y.toString());
                        return url;
                    }
                });
                break;