I have created a mobile map with Cloudmade Leaflet and have it so a number of markers are generated to coincide with LatLong values in a database. However, I can't figure out how to set the initial Map view to set the zoom and centre the map on the group of markers. I presume I need to use setBounds but for this I need to know what the NorthEast and SouthWest coordinates are.
Do I need to go through the whole array of marker coordinates to find the North-most, East-most, South-most and West-mode values or is there an easier way?
You can use the fitBounds() method.
Leaflets reference
Create a L.LatLngBounds object and loop through your markers calling L.LatLngBounds.extend() for each lat/lng.
I think the easiest way would be to do something like this:
int minLat = int.MaxValue;
int minLong = int.MaxValue;
int maxLat = int.MinValue;
int maxLong = int.MinValue;
foreach (var point in coordinates)
{
minLat = Math.Min(point.Latitude(), minLat);
minLong = Math.Min(point.Longitude(), minLong);
maxLat = Math.Max(point.Latitude(), maxLat);
maxLong = Math.Max(point.Longitude(), maxLong);
}
This has worked well for me in C#.
map.fitBounds(markers.getBounds());
should work...provided you have same names as the examples..
Related
I really beg about help because I'm trying to do some things for a few days, and I really don't know how. I want to do road manipulate by hold and drag . I think I need to start with adding new point in polyline geometry exaclly in the pointer place (or linestring, linstring points and polyline geometry seems to be almost the same). But it seems to be impossible.
Of course, there is no problem with getting coordinates, but adding this new coordinates to polyline or linestring in appropriate place.
There is no code, because every here map methods (pushPoints, setGeopetry) seems to be usless, and give points in the wrong place.
See please this example: https://demo.support.here.com/examples/v3/fleet - you can drag-n-drop there
and src code of it : https://demo.support.here.com/javascripts/examples/v3/fleet.js
Search there in the code the variable clipedPolyline and func clipPolyline:
var clipPolyline = function(polyline, viewportX, viewportY, bboxSize){
var pleft = viewportX - bboxSize,
pright = viewportX + bboxSize,
ptop = viewportY - bboxSize,
pbottom = viewportY + bboxSize,
coordLeftTop = map.screenToGeo(pleft, ptop),
coordRigthBottom = map.screenToGeo(pright, pbottom),
rect = new H.geo.Rect(coordLeftTop.lat,coordLeftTop.lng,coordRigthBottom.lat,coordRigthBottom.lng),
clipedPolyline = polyline.clip(rect);
return clipedPolyline;
};
Read please documentation for method clip on:
https://developer.here.com/documentation/maps/3.1.31.0/api_reference/H.map.Polyline.html#clip
I was wondering if there was a way to obtain the bounding box for the models that are inserted via 3dio.js, or otherwise calculate their center points? I'm looking to center them on the origin.
The images below show two models relative to the scene origin indicated by the red box.
You can access the three.js object of the 3d.io entity like this:
var threeElem = document.getElementById("custom-id").components['io3d-data3d'].data3dView.threeParent
Then you can use the native bounding box from three.js:
var bbox = new THREE.Box3().setFromObject(threeElem)
Like that you get the min/max bounds which you can use to determine the origin.
I hope that answers your question. Let me know!
Edit:
for furniture it would probably be
var threeElem = document.getElementById("custom-id").components['io3d-furniture'].data3dView.threeParent
Based on Madlaina's answer. I needed to ensure the model was loaded before
addModelToScene(type) {
let scene = document.querySelector('a-scene');
let model = document.createElement('a-entity');
model.setAttribute('io3d-data3d', getModelKey(type) )
model.addEventListener('model-loaded', () => {
// Access the three.js object of the 3d.io
let threeElem = model.components['io3d-data3d'].data3dView.threeParent
// create the bounding box
let bbox = new THREE.Box3().setFromObject(threeElem)
// Calculate the center-point offsets from the max and min points
const offsetX = (bbox.max.x + bbox.min.x)/2
const offsetY = (bbox.max.y + bbox.min.y)/2
const offsetZ = (bbox.max.z + bbox.min.z)/2
// apply the offset
model.setAttribute('position', {x:-offsetX,y:-offsetY, z:-offsetZ})
} );
scene.appendChild(model);
}
The result:
I have an openlayers map with markers added as geometry vector points. In the style option I set a size for each. However, the problem is, that if I zoom in or zoom out, they all become the same size until I load the entire page again. In other words, once I zoom in or out, they are all the same.
var layer_style = OpenLayers.Util.extend({},
OpenLayers.Feature.Vector.style['default']);
var style = OpenLayers.Util.extend({}, layer_style);
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
map.addLayers([terrain, road, satellite, hybrid, pointLayer]);
var lonlat = new OpenLayers.LonLat(0, 140);
lonlat.transform(proj, map.getProjectionObject());
map.setCenter(lonlat, 2);
var point = new OpenLayers.Geometry.Point(-40, -40);
point = point.transform(proj, map.getProjectionObject());
style.pointRadius = 10;
var pointFeature = new OpenLayers.Feature.Vector(point, null, style);
pointLayer.addFeatures([pointFeature]);
var point = new OpenLayers.Geometry.Point(-40, -40);
point = point.transform(proj, map.getProjectionObject());
style.pointRadius = 40;
var pointFeature = new OpenLayers.Feature.Vector(point, null, style);
pointLayer.addFeatures([pointFeature]);
When I load this, I get two markers, one size 10, the other 40. But when I zoom in or out, they all become same size.
You are overwriting the pointRadius property of the style object each time, so in the end the last value will be used as OpenLayers will only point to the style.
What you need to do is use a lookup to let the pointRadius depend on a given feature attribute.
See Rule-based Styling: http://trac.osgeo.org/openlayers/wiki/Styles#Rule-basedStyling
I recently started working with [Bing Api] in my webService [wcf] in c #.
I would like to recover a satellite image of a given scale with Bing!
for example
Scale 1:200 (1 centimeter on the map equal 200 centimeters on the world)
Of course I found this function that explains how to calculate the image resolution satellite bing but this is not what I'm looking for ..
Map resolution = 156543.04 meters/pixel * cos(latitude) / (2 ^ zoomlevel)
Here is my function used to generate my bing map, but I do not know what to send parameter to retrieve an image scale of 1:200.
I need :
Scale = 1:200
I search :
int mapSizeHeight = ?
int mapSizeWidth = ?
int zoomLevel = ?
public string GetImageMap(double latitude,double longitude,int mapSizeHeight, int mapSizeWidth, int zoomLevel)
{
string key = "ddsaAaasm5vwsdfsfd2ySYBxfEFsdfsdfcFh6iUO5GI4v";
MapUriRequest mapUriRequest = new MapUriRequest();
// Set credentials using a valid Bing Maps key
mapUriRequest.Credentials = new ImageryService.Credentials();
mapUriRequest.Credentials.ApplicationId = key;
// Set the location of the requested image
mapUriRequest.Center = new ImageryService.Location();
mapUriRequest.Center.Latitude = latitude;
mapUriRequest.Center.Longitude = longitude;
// Set the map style and zoom level
MapUriOptions mapUriOptions = new MapUriOptions();
mapUriOptions.Style = MapStyle.Aerial;
mapUriOptions.ZoomLevel = zoomLevel;
mapUriOptions.PreventIconCollision = true;
// Set the size of the requested image in pixels
mapUriOptions.ImageSize = new ImageryService.SizeOfint();
mapUriOptions.ImageSize.Height = mapSizeHeight;
mapUriOptions.ImageSize.Width = mapSizeWidth;
mapUriRequest.Options = mapUriOptions;
//Make the request and return the URI
ImageryServiceClient imageryService = new ImageryServiceClient();
MapUriResponse mapUriResponse = imageryService.GetMapUri(mapUriRequest);
return mapUriResponse.Uri;
}
If you haven't already, you might want to check out this article on the Bing Maps tile system calculations, within you will find a section discussing ground resolution and map scale. From that article:
map scale = 1 : ground resolution * screen dpi / 0.0254 meters/inch
Depending on which implementation of Bing Maps you use, specifying the view via a precise map scale might not be possible. I think this is due to the fact that you don't have precise control over the zoom level. For example, in the javascript ajax version, you can only specify zoom levels in integer values, so the ground resolution part of the above equation will jump in discreet steps. At the equator, using a zoom level of 21 will give you a scale of 1: 282, and a zoom level of 22 will give you 1:141. Since you can't specify a decimal value for zoom level, it is not possible to get an exact 1:200 scale using the ajax control. I don't have extensive experience with the .net Bing Maps control, so you might want to investigate that API to see if you can specify an arbitrary zoom level.
If you can precisely control the zoom level and know the dpi value, then the 1:200 scale is achievable using the equation described in the above linked article.
I have an application in Flex 4 with a map, a database of points and a search tool.
When the user types something and does the search it returns name, details and coordinates of the objects in my database.
I have a function that, when i click one of the results of my search, it zooms the selected point of the map.
The question is, i want a function that zooms all the result points at once. For example if i search "tall trees" and it returns 10 points, i want that the map zooms to a position where i can see the 10 points at once.
Below is the code im using to zoom one point at a time, i thought flex would have some kind of function "zoom to group of points", but i cant find anything like this.
private function ResultDG_Click(event:ListEvent):void
{
if (event.rowIndex < 0) return;
var obj:Object = ResultDG.selectedItem;
if (lastIdentifyResultGraphic != null)
{
graphicsLayer.remove(lastIdentifyResultGraphic);
}
if (obj != null)
{
lastIdentifyResultGraphic = obj.graphic as Graphic;
switch (lastIdentifyResultGraphic.geometry.type)
{
case Geometry.MAPPOINT:
lastIdentifyResultGraphic.symbol = objPointSymbol
_map.extent = new Extent((lastIdentifyResultGraphic.geometry as MapPoint).x-0.05,(lastIdentifyResultGraphic.geometry as MapPoint).y-0.05,(lastIdentifyResultGraphic.geometry as MapPoint).x+0.05,(lastIdentifyResultGraphic.geometry as MapPoint).y+0.05,new SpatialReference(29101)).expand(0.001);
break;
case Geometry.POLYLINE:
lastIdentifyResultGraphic.symbol = objPolyLineSymbol;
_map.extent = lastIdentifyResultGraphic.geometry.extent.expand(0.001);
break;
case Geometry.POLYGON:
lastIdentifyResultGraphic.symbol = objPolygonSymbol;
_map.extent = lastIdentifyResultGraphic.geometry.extent.expand(0.001);
break;
}
graphicsLayer.add(lastIdentifyResultGraphic);
}
}
See the GraphicUtil class from com.esri.ags.Utils package. You can use the method "getGraphicsExtent" to generate an extent from an array of Graphics. You then use the extent to set the zoom factor of your map :
var graphics:ArrayCollection = graphicsLayer.graphicProvider as ArrayCollection;
var graphicsArr:Array = graphics.toArray();
// Create an extent from the currently selected graphics
var uExtent:Extent;
uExtent = GraphicUtil.getGraphicsExtent(graphicsArr);
// Zoom to extent created
if (uExtent)
{
map.extent = uExtent;
}
In this case, it would zoom to the full content of your graphics layer. You can always create an array containing only the features you want to zoom to. If you find that the zoom is too close to your data, you can also use map.zoomOut() after setting the extent.
Note: Be careful if you'Ve got TextSymbols in your graphics, it will break the GraphicUtil. In this case you need to filter out the Graphics with TextSymbols
Derp : Did not see the thread was 5 months old... Hope my answer helps other people