Hi Folks
I am working on an virtual tour guide OpenSource AngularJS / Phonegap
application. Core part of this application is a map, showing a route.
Clicking on the map shall the center the click position within the map
container. To do the vector math, I need to know things like Map size,
MapViewContainer size, Vector from click position to map center and so on.
I had this working with a static configuration, but since there are many
mobile devices out there, I'd love to use media queries and dynamically
fetch the map container boundaries to do the math. Unfortunately, I still
have NO idea, how I could accomplish that. I think, I should get width and
height of ym-wrapper and padding of ym-box somehow to calculate the
container dimension, but maybe this is completely wrong? Hope you can help
me with that
I have a *partial called directive.html* with content
<main>
<div class="ym-wrapper" id="bla">
<div class="ym-wbox">
<angularmap user-position="userPosition"></angularmap>
<img ng-click="goToPosition()" src="img/position.png" >
<a href="#/poi" ><img href="#/poi" src="img/info.png"
style="float: right"></a>
</div>
</div>
</main>
.ym-wrapper has a css defined min-width and max-width, ym-wbox is an inner
container for applying e.g. paddings equally across browsers. To my
understanding
*My directive is :*
appDirectives.directive('angularmap', function (Map, $window, $document) {
var containerDimension = {width: 550, height: $window.innerHeight};
var offset = {top: 0, left: 0};
function link(scope, element, attrs) {
scope.icons = Map.icons;
console.log(element[0]);
element.css({
cursor: 'pointer'
});
scope.mapClicked = function (event) {
var clickX = event.clientX || event.changedTouches[0].clientX;
var clickY = event.clientY || event.changedTouches[0].clientY;
var wrapper = angular.element(element.children());
var offsetLeft = wrapper.prop('offsetLeft');
var offsetTop = wrapper.prop('offsetTop');
var relativeX = clickX - offsetLeft;
var relativeY = clickY - offsetTop;
var shiftX = containerDimension.width / 2.0 - relativeX;
var shiftY = containerDimension.height / 2.0 - relativeY;
console.log(offsetLeft);
console.log(offsetTop);
console.log(clickX);
console.log(clickY);
console.log(relativeX);
console.log(relativeY);
console.log(shiftX);
console.log(shiftY);
console.log(scope.mapOffsetLeft);
console.log(scope.mapOffsetTop);
offset.left += shiftX;
offset.top += shiftY;
}
scope.containerStyle = function () {
console.log(scope);
return {
overflow: 'hidden',
width: containerDimension.width + 'px',
height: containerDimension.height + 'px'
}
};
scope.mapStyle = function () {
return {
position: 'relative',
top: offset.top + 'px',
left: offset.left + 'px',
width: Map.size.width + 'px',
height: Map.size.height + 'px',
"background-image": 'url("./img/map.png")'
}
}
scope.positionMarkerStyle = function () {
if (scope.userPosition) {
var pixelCoords = Map.geoToPixels(scope.userPosition);
return {
position: 'absolute',
left: pixelCoords.left + 'px',
top: pixelCoords.top + 'px'
}
} else {
return {
display: 'none'
}
}
}
}
return {
link: link,
restrict: 'E',
scope: {
userPosition: '='
},
template: '<div ng-style="containerStyle()"
ng-click="mapClicked($event)">' +
'<div ng-style="mapStyle()">' +
'<img ng-repeat="icon in icons" ng-click="icon.toggleActive()"
ng-src="{{icon.getImage()}}" style="position: absolute;
left:{{icon.left}}px; top:{{icon.top}}px;" />' +
'<img src="./img/positionmarker.png"
ng-style="positionMarkerStyle()" />' +
'</div>' +
'</div>'
};
})
Feel free to also take a look at my project source. But be warned, I just
started with modern days JavaScript and Angular...
https://github.com/MariusSchmidt/Schreibwerkstatt/blob/Bettermap/www/js/directives.js
Kind regards,
Marius
--
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.
