Restrict panning and zoom on Here Maps 3.0 - here-api

I generated a map with Here maps JS Api 3.0. I want to restrict the zoom to a min/max value and the panning to a given rectangle. Is there a way to do that?
for example:
map.setMinZoom(4);
map.setMaxZoom(14);
map.setPanRestriction(rectangle);

I am guessing you're trying to restrict the viewport to where you now have you image overlay...
The easiest way is to listen to view model and and viewport updates similar the other example:
Custom map overlay heremaps js api v3
Now you can look at the map's center coordinate and see if it is within the boundaries you wish to display. If not, set it to within the boundaries. Something along those lines may work for you:
var bounds = new H.geo.Rect(45, -45, -45, 45);
map.getViewModel().addEventListener('sync', function() {
var center = map.getCenter(),
adjustLat,
adjustLng;
if (!bounds.containsPoint(center)) {
if (center.lat > bounds.getTop()) {
adjustLat = bounds.getTop();
} else if (center.lat < bounds.getBottom()) {
adjustLat = bounds.getBottom();
} else {
adjustLat = center.lat;
}
if (center.lng < bounds.getLeft()) {
adjustLng = bounds.getLeft();
} else if (center.lng > bounds.getRight()) {
adjustLng = bounds.getRight();
} else {
adjustLng = center.lng;
}
map.setCenter({
lat: adjustLat,
lng: adjustLng
});
}
});
//Debug code to visualize where your restriction is
map.addObject(new H.map.Rect(bounds));

Related

PaperJS, Need to select items underneath a transparent raster using Mouse Down

I have a Canvas with multiple raster images.
I use onMouseDown on Tool to find select the item which was clicked.
I have a new requirement.
Suppose, two images overlap each other, and the upper image is partially transparent. That makes the lower image visible. But when I try to click on the lower image, obviously I end up choosing the upper image.
Failed Attempt
I tried to use the getPixel(point) function on Raster. I thought if I can figure that the selected pixel is transparent, I can ignore that raster and look for other items. But I am not getting the color value that I am expecting (transparent or not) using this function.
So, my second thought was that I need to change the mousedown event point from the global co-ordinate space to local raster co-ordinate space. It still did not work.
Is there a way to achieve what I want?
Code
tool.onMouseDown = (event) => {
project.activeLayer.children.forEach((item) => {
if (item.contains(event.point)) {
// check if hit was on a transparent raster pixel
const pixel = item.getPixel(event.point)
console.error(pixel.toCSS(true))
// 2nd attempt
const pixel = item.getPixel(item.globalToLocal(event.point))
console.error(pixel.toCSS(true))
}
}
}
There is a simpler way to do what you want to achieve.
You can rely on project.hitTestAll() method to do a hit test on all items.
Then, if the hit item is a raster, hit pixel color information will be contained in hitResult.color. hitResult.color.alpha is all you need to check if a raster was hit on a non-transparent pixel.
Here is a sketch demonstration of the solution.
const dataUrl = 'data:image/png;base64,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';
const lowOpacity = 0.3;
// create 2 rasters
new Raster({
source: dataUrl,
opacity: lowOpacity,
onLoad: function() {
this.position = view.center - 100;
}
});
new Raster({
source: dataUrl,
opacity: lowOpacity,
onLoad: function() {
this.position = view.center + 100;
}
});
// on mouse down
function onMouseDown(event) {
// unselect previously selected items
paper.project.selectedItems.forEach(item => {
item.selected = false;
item.opacity = lowOpacity;
});
// do a hit test on all project items
const hitResults = project.hitTestAll(event.point);
// for each hit result
for (let i = 0; i < hitResults.length; i++) {
const hitResult = hitResults[i];
// if item was hit on a non transparent pixel
if (hitResult && hitResult.color && hitResult.color.alpha > 0) {
// select item
hitResult.item.selected = true;
hitResult.item.opacity = 1;
// break loop
break;
}
}
}

Google maps custom marker icon configuration from sprite sheet with retina support

My Google map uses a custom Marker pin loaded from a sprite sheet, everything works as expected for 1x, 2x, and 3x displays expect #2x, and #3x the image shows up as twice of three times the size of the original image.
If I try and scale it back to to the 1x dimensions when displaying at #2x and #3x the marker shows up without the image.
Googleing around suggests that I am doing everything right, Icon configuration is based on the documentation.
Is anyone able to spot what might be wrong with my scaledImage configuration?
if(devicePixelRatio > 1) {
pinImage['scaledSize'] = new google.maps.Size(15, 36);
}
Code extract from JavaScript:
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// Retina support
var requireImagePrefix = "";
var devicePixelRatio = (window.devicePixelRatio===undefined?1:window.devicePixelRatio);
if(devicePixelRatio == 2) {
requireImagePrefix = "#2x";
}
else if(devicePixelRatio == 3) {
requireImagePrefix = "#3x";
}
// Image for the marker
var pinImage = {
url: "/assets/sprite" + requireImagePrefix + ".png",
size: new google.maps.Size(15*devicePixelRatio, 36*devicePixelRatio),
origin: new google.maps.Point(430*devicePixelRatio, 20*devicePixelRatio),
};
if(devicePixelRatio > 1) {
pinImage['scaledSize'] = new google.maps.Size(15, 36);
}
var officeMarker = new google.maps.Marker({
position: hqLocation,
map: map,
title: "Anomaly HQ",
icon: pinImage,
optimized: false
});
Thanks very much for your time.
My error in the above are:
The scaledSize parameter is meant to be the dimensions of the 1x sprite
We don't need to multiply the size and origin parameters by the aspect ratio
I have posted the updated solution as a Git oh Github

Can we make custom overlays draggable on google maps V3

The markers are draggable, but I cannot have a custom div on a marker which changes on hover click etc. hence I thought of using custom overlays, but I am not able to find out if custom overlay support drag. There is already an answer to this, but the demo itself does not work,
how to make a Custom Overlays draggable using google-maps v3
I didn't find anything on code reference for overlayView class.
Yes, we can.
DraggableOverlay.prototype = new google.maps.OverlayView();
DraggableOverlay.prototype.onAdd = function() {
var container=document.createElement('div'),
that=this;
if(typeof this.get('content').nodeName!=='undefined'){
container.appendChild(this.get('content'));
}
else{
if(typeof this.get('content')==='string'){
container.innerHTML=this.get('content');
}
else{
return;
}
}
container.style.position='absolute';
container.draggable=true;
google.maps.event.addDomListener(this.get('map').getDiv(),
'mouseleave',
function(){
google.maps.event.trigger(container,'mouseup');
}
);
google.maps.event.addDomListener(container,
'mousedown',
function(e){
this.style.cursor='move';
that.map.set('draggable',false);
that.set('origin',e);
that.moveHandler =
google.maps.event.addDomListener(that.get('map').getDiv(),
'mousemove',
function(e){
var origin = that.get('origin'),
left = origin.clientX-e.clientX,
top = origin.clientY-e.clientY,
pos = that.getProjection()
.fromLatLngToDivPixel(that.get('position')),
latLng = that.getProjection()
.fromDivPixelToLatLng(new google.maps.Point(pos.x-left,
pos.y-top));
that.set('origin',e);
that.set('position',latLng);
that.draw();
});
}
);
google.maps.event.addDomListener(container,'mouseup',function(){
that.map.set('draggable',true);
this.style.cursor='default';
google.maps.event.removeListener(that.moveHandler);
});
this.set('container',container)
this.getPanes().floatPane.appendChild(container);
};
function DraggableOverlay(map,position,content){
if(typeof draw==='function'){
this.draw=draw;
}
this.setValues({
position:position,
container:null,
content:content,
map:map
});
}
DraggableOverlay.prototype.draw = function() {
var pos = this.getProjection().fromLatLngToDivPixel(this.get('position'));
this.get('container').style.left = pos.x + 'px';
this.get('container').style.top = pos.y + 'px';
};
DraggableOverlay.prototype.onRemove = function() {
this.get('container').parentNode.removeChild(this.get('container'));
this.set('container',null)
};
It observes the mousemove-event and modifies the top/left-style of the overlay based on the distance from the last mouse-position.
Usage:
new DraggableOverlay(
map,//maps-instance
latLng,//google.maps.LatLng
'content',//HTML-String or DOMNode
function(){}//optional, function that ovverrides the draw-method
);
The top-left-corner of the overlay by default will be placed at the position provided via the latLng-argument.
To apply a custom drawing use the optional draw-argument of the constructor .
Demo: http://jsfiddle.net/doktormolle/QRuW8/
Edit:
This solution will only work up to version 3.27 of the google maps api.
Within the release of 3.28 there were changes made on the draggable option of the map.
Release Notes: https://developers.google.com/maps/documentation/javascript/releases#328

Multiple marker selection within a box in leaflet

I need to select multiple markers in a map. Something like this: Box/Rectangle Draw Selection in Google Maps but with Leaflet and OSM.
I think it could be done by modifying the zoom box that appears when you shift click and drag in an OSM map, but I don't know how to do it.
Edit:
I rewrote the _onMouseUp function, as L. Sanna suggested and ended up with something like this:
_onMouseUp: function (e) {
this._finish();
var map = this._map,
layerPoint = map.mouseEventToLayerPoint(e);
if (this._startLayerPoint.equals(layerPoint)) { return; }
var bounds = new L.LatLngBounds(
map.layerPointToLatLng(this._startLayerPoint),
map.layerPointToLatLng(layerPoint));
var t=0;
var selected = new Array();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
pt = new L.LatLng(a[0], a[1]);
if (bounds.contains(pt) == true) {
selected[t] = a[2];
t++;
}
}
alert(selected.join('\n'))
},
I think it could be easy modificating the zoom box that appears when
you shift clic and drag in an osm map, but I don't know how to do it
Good idea. The zoom Box is actually a functionality of leaflet.
Here is the code.
Just rewrite the _onMouseUp function to fit your needs.
Have you tried something like this?
markers is an array of L.latLng() coordinates
map.on("boxzoomend", function(e) {
for (var i = 0; i < markers.length; i++) {
if (e.boxZoomBounds.contains(markers[i].getLatLng())) {
console.log(markers[i]);
}
}
});
Not enough points to comment, but in order to override the _onMouseUp function like OP posted in their edit, the leaflet tutorial gives a good explanation. Additionally, this post was very helpful and walks you through every step.
A bit late to the party but it's also possible to achieve this using the leaflet-editable plugin.
// start drawing a rectangle
function startSelection() {
const rect = new L.Draw.Rectangle(this.map);
rect.enable();
this.map.on('draw:created', (e) => {
// the rectangle will not be added to the map unless you
// explicitly add it as a layer
// get the bounds of the rect and check if your points
// are contained in it
});
}
Benefits of using this method
Allow selection with any shape (polygon, circle, path, etc.)
Allow selection using a button/programmatically (does not require holding down the shift key, which may be unknown to some users).
Does not change the zoom box functionality

Prevent world-wrapping in GMap v3

I'm currently migrating from v2 to v3. The world should not be repeated longitudinally.
In v2 this could be archived with something like this:
var proj = new GMercatorProjection(30);
proj.tileCheckRange = function(a,b,c) {
var tileBounds = Math.pow(2,b);
if (a.y<0 || a.y >= tileBounds) {return false;}
if (a.x<0 || a.x >= tileBounds) {return false;}
return true;
};
proj.getWrapWidth = function(zoom) {
return 99999999999999;
};
G_NORMAL_MAP.getProjection = function() {return proj;};
But I have yet to find a solution for v3.
EDIT To clarify a bit: I'm not looking for a way to prevent panning (navigating sideways) but a way to prevent the map from repeating it self, esp. at low zoom-levels
Check out the two answers at How do I limit panning in Google maps API V3?. The technique outlined there should get you (depending on your use case) most of the way there or maybe all the way there.
Those answers do not show how to limit wrapping, but they do show how to limit panning. If you can take other measures to restrict what's in the initial viewport (say, if you have control over the size and can restrict the zoom levels and initial coordinates appropriately), then limiting panning can get you there.
The restriction MapOption property can help here.
new google.maps.Map(
container,
{
restriction:
{
latLngBounds: {north: 85, south: -85, west: -179.5, east: 179.5},
strictBounds: true
}
});
This will also take care of the "padding" that is usually displayed beyond the north/east bounds and make the map "end" where the map tiles end.
You can fiddle with the numbers a bit to account for a bit more (or a bit more accurate) area, but I think it should be enough for most cases.
World wrapping can be easily prevented this way (adapted from the answers linked by Trott)
// prevent wrap
var lastValid = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
if(map.getBounds().getNorthEast().lng() > map.getBounds().getSouthWest().lng()) {
lastValid = map.getCenter();
}
else
map.panTo(lastValid);
});

Resources