Hi Maximillian,
Thank's for you answer.
image parameter name in ol3 style is a bit confusing, as it's not necessary
an image but a vector draw for point.
I can resume my code as this :
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var app = new Angular.module[];
/////////////////----This is the angular directive :
///////////////////////////
app.directive('Olmap',[function(){
return : {
restrict : 'E',
scope : {
divref : '@',,
geojsondata : '=',
olstyle : '='
},
template : '<div id="'++'" class="the-map-css"></div>',
link : function($scope, $elem, $attr){
//----stock all layers ref
$scope.mapAllLayers[];
//-----define a geoJson vector layer
var gJsonLayer = new ol.layer.Vector({
title : 'test vector layer',
source : new ol.source.GeoJSON({
object : $scope.geojsondata,
}),
style : layerStyle,
});
$scope.mapAllLayers.push(gJsonLayer);
//-----define the map
$scope.map = new ol.Map({
target : $scope.divref,
layers: $scope.mapAllLayers,
controls : controls,
view : new ol.View(center : [0,0], zoom : 5),
});
//----add the layer to the map
$scope.map.addLayer($scope.mapAllLayers[0]);
}
};//--end return
}]);
////////////////// Controler /////
app.controler('MainCtrl, ['$scope', '$http', $q', function($scope, $http,
$q){
//----some function to retrieve geoJson feature from postgres database)
$http.get('theUrlAjax).success(data){
$scope.geoJsonData = data;
//------ this style is ok and working
$scope.style1 = new ol.style.Style({
fill : new ol.style.Fill({color : '#FF0000}'),
stroke : new ol.style.Stroke({color : #00FF00', width : 5})
})
//------ the style isn't working
$scope.style2 = new ol.style.Style({
image : new ol.style.Circle({radius : 20, fill : new
ol.style.Fill({color : '#000000}')}),
fill : new ol.style.Fill({color : '#FF0000}'),
stroke : new ol.style.Stroke({color : #00FF00', width : 5})
})
...............}.error(function(){});
}]);
//////////////////// the html element ///////
....some start html....
<olmap divref="map1" geojsondata="geoJsonData" olstyle="style2"></olmap>
...... some end html....
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
So all is working if i use the style1 but with the style2 i get this error
from accessing a cross-origin frame.
have you some idea ?
Thank's a lot.
Fbm
Le dimanche 23 novembre 2014 11:59:24 UTC+1, Maximilian Noppel a écrit :
>
> Hey,
>
> i did some work with angularJS and ol3 but i dont really get a picture,
> what you are talking about. Can you post the parts of directive-code, where
> you apply the style to the layer, please?
>
> Regards,
> Max
>
> Am Sonntag, 23. November 2014 11:33:23 UTC+1 schrieb fbm:
>>
>> Hi all,
>>
>>
>> i'm facing about a strange cross domaine issue with an angular app that
>> use the openlayers 3 library.
>> I have create an directive for openlayers 3 obj (a map), and all is
>> working fine, but if i pass a object as style reference to the directive,
>> i'm facing with a
>>
>> Error: Blocked a frame with origin "http://localhost"; from accessing a
>> cross-origin frame.
>>
>> If you don't know Ol3, the object i passed is not refernce to external
>> source or so , but juste un object (style object in this case).
>>
>> For resume :
>> 1 - i build an object : $scope.myStyle = {image :{color : new
>> ol.style.Fill ('#FF0000'}, stroke : new ol.style.Stroke('width : 5)};
>>
>> 2 - passing this object to my ol directive with "=" parameter ;
>>
>> 3 - read and apply this in the ol object in the directive.
>>
>> All i working fine with all type of style, but not if i use this above
>> example with image parameter. I don't knoiw why, because the image
>> parameter use an Fill type only, without reference to other thing, and a
>> style with fill only is working.
>>
>> If i apply the style without an directive, i don't receive this cros
>> message error.
>>
>> Sorry about this confusing description, but i don't know how to solve
>> this.
>>
>> Than's for your help.
>>
>>
>> fbm
>>
>>
>>
>>
>>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
