I have had a lot of difficulty trying to get a map pin to display consistently well on polygons that have their heights extruded. In my app, I am extruding heights of buildings based on an arbitrary value.
Later, upon selecting them, I add a billboard supplied with a custom image of a map pin.
//Get position of selected entity and add billboard at same position
var mPos = pCoords.positions[0];
var selectedPin = viewer.entities.add({
name : 'selBoutique',
position : mPos,
billboard : {
image : './img/marker.png',
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
eyeOffset: new Cesium.Cartesian3(0, 4, 0)
}
});
I am setting the vertical origin to bottom, in order to keep its display consistent, and have been experimenting with offset in order to find a setting which works well for buildings of various heights in 3D view.
Are there any other factors I should be considering when trying to achieve a position for these pins which is never blocked by buildings of differing heights? I attempted to set the value of the offset dynamically based on the building's height. Perhaps I will play with this some more in the meantime.
Screenshots:
Modify the pin's actual position by the height of the building. Essentially, position the pin at the center of the roof of the building, not the ground floor of it. Then, turn off the eyeOffset, but keep your VerticalOrigin.BOTTOM setting.
Related
Using svg-pan-zoom utility, I want to register the zoom and pan values every time is changes (using onPan() and onZoom()) and use these saved values to pan and zoom my SVG to the same position (using pan() and zoom()).
I works fine if the zoom level is not changed, however, if zoom level is changed, I have a gap between the wanted position of the svg and the real one.
You can see this problem in that fiddle: first, zoom in, then press the Pan button.
I would like my svg to keep its current location.
I have read other posts on stackoverflow about similar situations (I guess I should use data from getSizes()) but I'm still unable to make it work.
Any advice?
OK, I got the solution, which is quite obvious.
While zooming, I need to apply a zoom factor to the saved pan.
onZoom: function(zoom) {
ratio = zoom/currentZoom;
currentZoom = zoom;
currentPan = {
x: currentPan.x*ratio,
y: currentPan.y*ratio
}
}
See full code here
I have a png image, it's a map, it represents 4 countries : france, italy, spain and germany, what I need to do, is to use CSS to devided and by passing cursor on each zone, i'll have a popup with name of every country.
Div doesn't need to be with exact shapes of every country.
Any idea how to put div for each zone inside this image please ?
For now i'm trying this :
container{
width : 100px;
height : 100px;
overflow : hidden;
}
and the HTML is :
<div class = "container"><img src="src/assets/img_map.png"/></div>
Create hotspot/imagemap on image
An imagemap is a graphic image where a user can click on different parts of the image and be directed to different destinations. imagemaps are made by defining each of the hot areas in terms of their x and y coordinates (relative to the top left hand corner). With each set of coordinates, you specify a link that users will be directed to when they click within the area.
Image map generator link
Use an imagemap (html Elements map and area) and do the necessary highlighting via JavaScript.
Or do a position: relative on your container and add your divs with position: absolute inside the container.
I've included a zoom functionality similar to the one explained at this website:
http://www.flashandmath.com/howtos/zoom/
This works perfectly on my background image(a map, that is), but I want to keep the symbols on my map the same size while zooming in.
I probably could work this out by changing all the children's size when calling the zoom-function, but I am hoping there is some kind of easy code adapt in my children class to make the size of the instances unchangable. Is there?
Thanks!
One crude way, so you don't have to calculate the symbols scale, would be to remove the symbols from the mapDisplayObject so they're no longer a child and instead put symbol placeholders. Then match each symbol's x and y to each place holder, using localToGlobal...
If your children are not scaled or skewed or rotated you can iterate all of them and set transformation matrix to 1/parentScale. Something like:
for each (var child:DisplayObject in parent) {
var matrix:Matrix = child.transform.matrix;
matrix.a = 1/parentScale;
matrix.d = 1/parentScale;
child.transform.matrix = marix;
}
I am overlaying some clickable hotspots on top of a proprietary panorama viewer application in flash (as3), and I need to make sure that the hotspots scale according to the changing field of view as the user zooms in / zooms out, but I'm not sure what formula to use.
I set a maximum and minimum field of view of 90 and 25, respectively. I've been given some suggestions of how to calculate the scale of the icons:
from the maker of the panorama software:
Scale => 1/tan(FoV)
This doesn't seem to work for me. And:
scalar += (ZOOM_SCALE_UPPER - ZOOM_SCALE_LOWER) * ( ZOOM_LIMIT_OUT - tempFOV )/( ZOOM_LIMIT_OUT-ZOOM_LIMIT_IN) ;
hotspot.scaleX = hotspot.scaleY = scalar;
Gets me close, but at some point the hotspot stops scaling even though the panorama continues to scale. I thought I could just do something like:
diffFOV = previousFOV - currentFOV.
hotspot.scale = currentScale*(1-diffFov)
But that's not quite right either. Everything gets way too big or too small.
Any ideas?
You may be over thinking it.
//assume we change the scale
var NEW_SCALE:Number = currentScale*(1-(previousFOV-currentFOV));
//1. change the scale of the parent containing both the view and the hotspots
viewSprite.scale = NEW_SCALE;
//this way the hotspot and the panorama will scale together
//2. if they are not in the same parent... then set them both to the same view
hotspot.scale = panorama.scale;
Only thing you may have to do after is reposition if they are not registered on their center point.
http://www.dissentskateshop.co.uk/store-locator/
You can see the map pin sits in the sea, but if you zoom in, it's in the location I set it. I'm pulling my hair out with this one...
From this behaviour I would guess that the anchor point is not properly set: the anchor seems to be at the bottom left of the image, although the "visible" anchor (the pin) is more right, thus always offset. If you look at the distance in pixels, the offset from the original coordinate is always constant, no matter on what zoom level.
I took a look at your script: in the file store-locator.js, method addMarker: the fourth parameter of new google.maps.MarkerImage is the anchor. You've set it to (0,32) (i.e. the bottom left corner of the image). That is wrong! Get the correct anchor location and change the code.
Edit: I've looked at the image: the correct anchor coordinate is (16,31). Give it a try :-)
It is an issue with your custom marker, not a map coordinate registration issue.
You need to put the Anchor point in the center line of the image: 16,32 not 0,32.
I tested this on a copy of your web page.
var image = new google.maps.MarkerImage('http://www.google.com/intlen_us/mapfiles/ms/micons/red-dot.png',
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 32));
Also take care to edit the Shadow image as well.
For fun, I added Greenwich Observatory to your stores.json:
{
"name" : "Greenwich Observatory",
"latitude" : "51.47722",
"longitude" : "0.0",
"postcode" : ""
}
At Zoom level 6 (default), the Greenwich Observatory marker is to the east of the Cambridge dot on the map.
Zoom in two levels and it's to the west! That's before fixing the bug of course.