I have a map with a dragable point and after drag, I update latitude and longitude fields in the form. But when I do that like this:
drag = new OpenLayers.Control.DragFeature(vectors, {
autoActivate: true,
onComplete: function() {
$('#place_latitude').val(point.transform(mapp, wgs84).y);
return $('#place_longitude').val(point.transform(mapp, wgs84).x);
}
});
After attempt to make second drag (from one point to another) point goes to 0,0. Without onComplete everything is ok.
You are transforming the point two times... transform method modifies point itself, it doesn't create new object.
You may use point.clone() instead of point.
Related
I have made my own vector tile .pbf data, consisting of polygons, lines and points.
The source of .pbf data are from a grouplayer of shapefiles in Geoserver, where each shapefile has been ordered so that points are at the top:
Using OpenLayers, I've styled the vector tiles and followed the example for "Vector Tile Info". The difference is mine is toggled by single click.
The problem is that I can't click on any point, even as a sprite image, if it is completely within a polygon.
It's possible to click on lines that are completely within a polygon.
Underlying polygons are selected as feature[0] when attempting to select a point.
What might be the cause of this render order? That a point is only a single pixel?
What might be the remedy?
I'm very new to JavaScript and OpenLayers so I'm hoping it's something naive.
I need to be able to prioritize the points when they're surrounded by a polygon.
The order of feature returned by map.getFeaturesAtPixel() seems to be random and not related to render order. Either check all the features returned, not just entry [0], or sort the array so Points/MultiPoints are lower in the sort order than LineStrings/MultiLineStrings with Polygons last
function rank(feature) {
var type = feature.getType();
if (type.indexOf('Point') > -1) {
return 1;
} else if (type.indexOf('LineString') > -1) {
return 2;
} else {
return 3;
}
}
map.getFeaturesAtPixel(event.pixel).sort(function(a, b) {
return rank(a) - rank(b);
});
Issue
When I click on the map I want to transform the coordinates to format of 4326. When I do this it seems the Latitude part of the array transforms fine, but the Longitude part is incorrect and not valid.
Code
When I click on the Map, the SingleClick event fires, I then get the coordinates of where the user clicked:
Example of pPointClicked = [-40364190.03366159, 7054830.416117247];
session.Map.on('singleclick', function (e) {
var pPointClicked = e.coordinate;
});
I try and transform these coordinates into 4326 by using the code below:
Example of coord4326 = [-362.59768838343064, 53.38659640004323];
session.Map.on('singleclick', function (e) {
var pPointClicked = e.coordinate;
var coord4326 = ol.proj.transform(pPointClicked, 'EPSG:3857', 'EPSG:4326');
});
As you can see the first value in the transformed variable is -362.59768838343064 which is incorrect? Does anyone know why this is happening.
The transformation seems to be working. Here's what I think is happening: you are not within the "original extent" of your map, i.e. you panned west and wrapped the entire world at least twice.
Try zooming out completely, then pan at the "same" location to the east twice, then click again. You should have the coordinate you're looking for.
Here's an other tip: the world extent, in EPSG:3857, is:
[
-20037508.342789244,
-20037508.342789244,
20037508.342789244,
20037508.342789244
]
[-40364190.03366159, 7054830.416117247] is out of that extent, but if you pan to wrap the world twice, you should get: 289173.348083102, 7054830.416117247], which is within the extent.
I am using leaflet to show an interactive map to our users.
We want to let them browse through a limited area, and inform them they have to subscribe in case they want to see something too far away (using a pop up or equivalent).
So far I have seen that Leaflet supports a maxBounds option.
This is a good start that lets me prevent users to see larger areas.
Now I would like to be able to detect a maxBounds 'event' to show the user a pop up.
I have been looking into the Leaflet source code, but couldn't find an obvious way to do it.
so far I have found that the maxBounds option is fed into the setView method.
This method itself uses the _limitCenter method to define the center.
This goes a few levels deeper, down to the _getBoundsOffset method that finally uses the bounds.
_getBoundsOffset: function (pxBounds, maxBounds, zoom) {
var projectedMaxBounds = toBounds(
this.project(maxBounds.getNorthEast(), zoom),
this.project(maxBounds.getSouthWest(), zoom)
),
minOffset = projectedMaxBounds.min.subtract(pxBounds.min),
maxOffset = projectedMaxBounds.max.subtract(pxBounds.max),
dx = this._rebound(minOffset.x, -maxOffset.x),
dy = this._rebound(minOffset.y, -maxOffset.y);
return new Point(dx, dy);
},
The closest I could find so far would be to hook into the moveend event and check whether the center is out of my bounds manually.
However, it seems like this would be redundant with what leaflet is already doing.
Is there a better to leverage leaflet to achieve this?
Thanks
Just check if your defined bounds contain the map bounds. As long as the map bounds are inside the defined bounds, this will do nothing:
var myBounds = L.latLngBounds(...)
map.on('move moveend zoomend', function(){
if (!myBounds.contains(map.getBounds())) {
// Display popup or whatever
}
});
it seems like this would be redundant with what leaflet is already doing.
Don't worry about that. The overhead is negligible for this use case.
I'm working on my project in Paper.js.
In the part of It, I need to use sprite with animation.
To examplain It, I've got a space ship that can be everywhere on the screen, and there is an effect of disortion that happens sometimes.
I got prepared a spritesheet with 10 frames, and all I want is use Paper.js RASTER class to load It and animate on every frame.
The problem is in the positions, that I don't know how to calculate them...
When I load a raster
let slide = new Raster({
source: 'assets/sprite.png',
position: [0, 0]
});
I see center of a very long image, when I need to see the first frame.
My idea was to use group with containts mask (square)
let mask = new Rectangle({
position: [220, 100],
size: [186, 154],
});
That I can change position dynamically and animate the spread at the same time.
Is It possible that way?
It would be cool, If I cant calculate the position of raster against the mask, but for me now It seems impossible.
Anyone have idea how to attain this in a simple way?
Cheers.
I've looked into this in my project. The key is using a group with a pivot point. This code is admittedly unfinished and in raw javascript but it should give you a good idea:
var Sprite = paper.Group.extend({
_class: 'Sprite',
initialize: function Sprite(url, size) {
var maskSize = size || new paper.Size(256, 256);
var that = this;
this._raster = new paper.Raster(url);
this._raster.pivot = new paper.Point();
this._raster.on('load', function () {
that._spriteSheetWidth = Math.floor(this.size.width / maskSize.width);
that.setIndex(that._spriteIndex || 0);
});
this._clipRect = new paper.Path.Rectangle(new paper.Point(), maskSize);
Sprite.base.call(this, [this._clipRect, this._raster]);
this.clipped = true;
// Just use a blank point if you want the position to be in the corner
this.pivot = new paper.Point(maskSize.divide(2));
},
setIndex: function (index) {
if (typeof this._spriteSheetWidth !== "undefined") {
// TODO: FINISH SPRITE SHEET IMPLEMENTATION
}
this._spriteIndex = index;
}
});
I'm not actually using sprites in my project anymore so I never finished the implementation. But the complicated concepts should be completed above. Namely the way that paper.js implements pivot points and clipping masks. The position of an object is the center of it's bounds by default... this is kind of unweildy for a lot of reasons, like an images position will appear to change when it loads etc... or when the contents of a path change. So I like to set a pivot of 0,0 immediately after making any object. The next key section is that clipping masks only work on Groups. And finally you can extend the Group class to make a standard Sprite class.
Normal sprite shifting of this._raster.position.x and this._raster.position.y should finish this implementation off.
Edit: Finished my implementation... https://jsfiddle.net/willstott101/vgxq9kak/
I've got a couple vector layers one has polygons, one has lines. We have a need to add lines to the line layer that attach to the polygons (database procedure requires the polygons IDs, which are stored in attributes on the polygons)
So I have a drawFeature control on the lineLayer, and a selectFeature (which stores off the ID on hover rather than just selecting) on the polygonLayer. It actually works just fine except the z axis of the linelayer while added is lower, so it shows the new line being drawn under the polygon. Would rather have the line show over the polygon. I know it's because when the selectFeature control is active it's setting the z-index of the polygon layer higher than the lineLayer.
I manually set the z-index of the linelayer higher than the polygon layer using lineLayer.setZIndex(800) or whatever, and that certainly makes the new line draw over the polygons, but then the selectFeature events don't trigger.
I've considered several solutions including adding the drawFeature to my polygon layer and then moving the feature to the line layer when done, but it's still rendering under the polygons, I even played with the graphicZIndex on the "temporary" style for my stylemap on the polygon layer. to no avail (i did set the renderOptions zindexing to true on the polygon layer)
I may be approaching this from the wrong angle, so I'm open to suggestions. If there was a function available on the vector layer something like getFeatureByPosition(position), I could grab the position on sketchStarted, and sketchEnded events and query that, but so far I've been unable to find anything like that.
I'm not on my dev box at the moment in case anyone is wondering why no code. Wanted to post this from work, but the base network is having issues displaying the logon page (due to ssl I think)
So my solution required a few things. First I needed to upgrade from OL 2.10 to the latest 2.13.1. Mostly this was due to needing a new event that was added to 2.11 (I think or maybe 2.12) the event is "featureover" which can be caught at the map level and therefore will trigger on all layers, so I'm not fighting with Z-Index of the select. I removed the select control from the polygon layer as it was not needed.
var featureOverHandler = function(event){
if (event.feature.layer.id == polygonLayer.id) {
selectedPolygonId = event.feature.attributes.POLYGON_ID;
console.log("Selected Polygon Id: " + selectedPolygonId);
map.events.unregister('featureover',map,featureOverHandler);
map.events.register('featureout',map,featureOutHandler);
}
};
var featureOutHandler = function (event) {
if (event.feature.layer.id == polygonLayer.id) {
selectedPolygonId = 0;
console.log("Cleared Selected Polygon ID ");
map.events.unregister('featureout', map, featureOutHandler);
map.events.register('featureover', map, featureOverHandler);
}
};
These will catch the polygon that is currently hovered over. But then I add events to catch where the line starts and ends. Since as of 2.11, they changed the way the "sketchstarted" event works, you can non longer use that to capture which polygon the pointer was over when the first point was added. I used the point callback on the vector layer.
var vDrawOptions = {
callbacks: {
"point": function (p) {
if (p.parent.components.length == 2) {
console.log("First Point added");
startingPolygonId = selectedPolygonId;
}
}
}
}
vectorAddControl = new OpenLayers.Control.DrawFeature(vectorLayer, OpenLayers.Handler.Path,vDrawOptions);
however, the "skecthcomplete" can still be used to capture the ending point (and thus polygon)
function vSketchComplete(evt) {
endingPolygonId = selectedPolygonId;
};
vectorLayer.events.register('sketchcomplete', vectorLayer, vSketchComplete);
Hopefully this will help someone else, in a similar situation.