I am trying to add some functionality that will zoom the map in/out depending on the points that are returned from a query. So for example, say we're zoomed in on the state of Texas. If I execute a query and the service returns back points that are in Texas AND some located in California, I would like the map to then zoom out and then display both California and Texas. I have been looking through the ArcGIS JS API to see how I could implement it but I'm having trouble figuring out what properties and/or methods to use to accomplish this.
The FeatureSet provided to the QueryTask's onComplete callback has the property features that is an array of Graphics.
The javascript api provides the esri.graphicsExtent(graphics) function that can accept that array of Graphics and calculate their extent. Once the extent has been calculated, map.setExtent(extent) can be used to zoom the map to that extent.
It should be noted that the documentation for esri.graphicsExtent(...) specifies that 'If the extent height and width are 0, null is returned.' This case will occur if the returned Graphics array only has a single point in it, so you'll want to check for it.
Here's an example QueryTask onComplete callback that could be used to zoom the map to the extents of points returned by the query:
function onQueryComplete(returnedPointFeatureSet){
var featureSet = returnedPointFeatureSet || {};
var features = featureSet.features || [];
var extent = esri.graphicsExtent(features);
if(!extent && features.length == 1) {
// esri.getExtent returns null for a single point, so we'll build the extent by hand by subtracting/adding 1 to create x and y min/max values
var point = features[0];
extent = new esri.geometry.Extent(point.x - 1, point.y - 1, point.x + 1, point.y + 1, point.spatialReference);
}
if(extent) {
// assumes the esri map object is stored in the globally-scoped variable 'map'
map.setExtent(extent)
}
}
I agree, map.setExtent(extent, true) is the way to go here. Another observation: In case we have only a single point it's worth considering simply using map.centerAndZoom(point, ZOOM_LEVEL) instead of creating an extent. Then, we could just have this:
function onQueryComplete(returnedPointFeatureSet){
var featureSet = returnedPointFeatureSet || {};
var features = featureSet.features || [];
var extent = esri.graphicsExtent(features);
if(!extent && features.length == 1) {
var point = features[0];
map.centerAndZoom(point, 12);
}
else {
map.setExtent(extent, true);
}
}
Not a good idea to create an extent from a point that way. If the units are in degrees you could get a huge extent. Instead, you could do a buffer around the point using the geometryEngine
function onQueryComplete(featureSet){
if (featureSet.features.length) {
var extent = esri.graphicsUtils.graphicsExtent(featureSet.features);
if(!extent && featureSet.features.length == 1 && featureSet.features[0].geometry.type == "point") {
var point = featureSet.features[0];
var extent = esri.geometry.geometryEngine.buffer(point.geometry, 1, "meters").getExtent();
}
// assumes the esri map object is stored in the globally-scoped variable 'map'
map.setExtent(extent)
}
}
Related
I have a kml file exported from Google Earth which is essentially a path of part of the River Thames in London. I have put this into Google Maps with Javascript as a KmlLayer.
I need to find a way to calculate the distance between one point on the route and the end of the route. Obviously it can't just be linear distance as the route goes up, down, back, forth etc.
I can't think of a way to do this using a kml file and Google Maps so any other suggestions or methods would be fine. I could perhaps gather the coordinates from the kml file and using them another way on the map? But I'm not sure where to start.
Apologies as always if this question has been answered elsewhere, but I have looked and had no luck.
Thanks in advance,
Adam
I found a solution, and that was to extract the kml coordinates into a javascript array of objects.
I then iterated through the array and got the distance between each point on the route using the Haversine Formula, and assigned each object a distance value (from the start of the route).
From there I could work out at each point on the route, how far it was from the start and finish just by using the distance value.
views.string = '-1.692525715111287,51.692324976351,0 -1.691353785046965,51.69214295521361,0 -1.690097310611129,51.69205100316109,0...//etc etc';
var array = views.string.split(',0 ');
map.route = [];
$.each(array, function (i, e) {
if ((i + 1) == array.length) {
e = e.replace(',0', '');
}
var coords = e.split(',');
map.route.push({ lat: parseFloat(coords[1]), lng: parseFloat(coords[0]) });
});
var distance = 0;
$.each(map.route, function (i, e) {
if (map.route[i - 1] != undefined) {
var d = map.getDistance(map.route[i - 1], e);
distance += d;
e.distance = distance;
}
else {
e.distance = distance;
}
});
I am using Leaflet.js for desktop and mobile browser-based maps, and need to support a variety of map tile services. Some of these tile services are defined with coarse zoom levels (like 1, 5, 10, 15), and if I make a request for an unsupported zoom level, the service does not return a tile. (For example, if I request service/tiles/6/x/y when zoom level 6 is not supported).
Leaflet tile layers support minZoom and maxZoom but I'm trying to figure out if there is a best practice for doing coarse zoom levels, and if other folks have encountered this.
I found this post on GitHub that addresses tile scaling for unsupported zoom levels: https://github.com/Leaflet/Leaflet/pull/1802
But I am not sure if this applies. (I'm not sure I want to scale or 'tween' the zoom levels... but if this makes sense and is not too difficult I am willing to try.)
I've started experimenting with this approach which gets messy because zooming can cause more zooming and I have to differentiate user-driven zooms from system-driven zooms:
// layer metadata (assumption: Levels is in ascending order of zoom)
var layerDef = { Title: 'Service lines', Levels: [10, 15, 19] };
// create Leaflet Tile Layer and show on map
var layer = L.tileLayer('://host/service/{z}/{x}/{y}');
layer.minZoom = layerDef.Levels[0];
layer.maxZoom = layerDef.Levels[layerDef.Levels-1];
layer.addTo(map);
// initialize lastZoom for coarse zoom management
var lastZoom = map.getZoom();
var userZoom = true;
// handle supported zoom levels when zoom changes
map.on('zoomend', function (e)
{
// get new zoom level
var z = e.target._zoom || map.getZoom();
if (userZoom) // assume user initiated this zoom
{
// is this zoom level supported?
var zIdx = $.inArray(z, layerDef.Levels);
if (zIdx === -1)
{
// zoom level is not supported; zoom out or in to supported level
// delta: < 0 for zoom out, > 0 for zoom in
var zDelta = z - lastZoom;
var zLastIdx = $.inArray(lastZoom, layerDef.Levels);
var newZoom = -1;
if (zDelta > 0)
{
// user zoomed in to unsupported level.
// zoom in to next supported level (rely on layer.maxZoom)
newZoom = layerDef.Levels[zLastIdx + 1];
}
else
{
// user zoomed out to unsupported level.
// zoom out to next supported level (rely on layer.minZoom)
newZoom = layerDef.Levels[zLastIdx - 1];
}
if (newZoom !== -1)
{
userZoom = false; // set flag
setTimeout(function ()
{
map.setZoom(newZoom); // set zoom -- seems to not work if called from within zoomend handler
}, 100); // delay call to setZoom() to fix issue
}
}
}
else
{
userZoom = true; // clear flag
}
lastZoom = z;
});
(Side note: I hope the reason for coarse zoom levels is obvious: it can get expensive to create and store raster tiles at each zoom level, especially for large geographic areas, and especially when used with offline mobile devices with their own [local] tile servers, limited wireless data plans, limited storage capacity, etc. This is perhaps not something you might encounter with toy apps and Google maps, for example, but rather with domain-specific and mobile applications in which space and bandwidth are at a premium.)
Thanks!
UPDATE: I found that the problem I was having with this code is that map.setZoom(z) does not work right when called from within the zoomEnd handler (it does set the zoom, but causes display issue with gray/nonexistent tiles, perhaps because Leaflet is still in process of scaling / zooming). Fix was to use setTimeout to delay the call to setZoom() a bit. However, I'm still really curious if anybody else has dealt with this, and if there is a 'better way'... (I updated above code to work with setZoom fix)
There is currently a commit under review in Leaflet's repository on GitHub. It adds zoomFactor to the map's options. Maybe that's what you're looking for. At least, i think it will work just as long as your available tileset has zoomlevels which are (don't know if this is the correct technical term) multiples of the lowest available zoomlevel.
See: https://github.com/Leaflet/Leaflet/pull/3285
The following (no guarantees, based on this) should work with Leaflet v1.7.3 but probably not with current master.
It uses a serverZooms option to specify available zoom levels on the tile server as an ordered array.
Overrides L.TileLayer._getZoomForUrl to return a matching or the next lower available server zoom. Also overrides L.TileLayer._getTileSize to increase tile size in order to scale the tiles in between server zooms.
L.TileLayer.Overzoom = L.TileLayer.extend({
options: {
// List of available server zoom levels in ascending order. Empty means all
// client zooms are available (default). Allows to only request tiles at certain
// zooms and resizes tiles on the other zooms.
serverZooms: []
},
// add serverZooms (when maxNativeZoom is not defined)
// #override
_getTileSize: function() {
var map = this._map,
options = this.options,
zoom = map.getZoom() + options.zoomOffset,
zoomN = options.maxNativeZoom || this._getServerZoom(zoom);
// increase tile size when overscaling
return zoomN && zoom !== zoomN ?
Math.round(map.getZoomScale(zoom) / map.getZoomScale(zoomN) * options.tileSize) :
options.tileSize;
},
// #override
_getZoomForUrl: function () {
var zoom = L.TileLayer.prototype._getZoomForUrl.call(this);
return this._getServerZoom(zoom);
},
// Returns the appropriate server zoom to request tiles for the current zoom level.
// Next lower or equal server zoom to current zoom, or minimum server zoom if no lower
// (should be restricted by setting minZoom to avoid loading too many tiles).
_getServerZoom: function(zoom) {
var serverZooms = this.options.serverZooms || [],
result = zoom;
// expects serverZooms to be sorted ascending
for (var i = 0, len = serverZooms.length; i < len; i++) {
if (serverZooms[i] <= zoom) {
result = serverZooms[i];
} else {
if (i === 0) {
// zoom < smallest serverZoom
result = serverZooms[0];
}
break;
}
}
return result;
}
});
(function () {
var map = new L.Map('map');
map.setView([50, 10], 5);
new L.TileLayer.Overzoom('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
serverZooms: [0, 1, 2, 3, 6, 9, 12, 15, 17],
attribution : '© <a target="_parent" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
})();
body {
margin: 0;
}
html, body, #map {
width: 100%;
height: 100%;
}
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="map"></div>
I have implemented a server side marker clustering by following what says in this link
http://www.appelsiini.net/2008/introduction-to-marker-clustering-with-google-maps
This works perfect for markers less than 5,000. But when my markers increased to 17,000
it causes all the memory to exhaust as there are very big loops running.
I am using mongodb for storing all my records with lat n long,
Can i make use of the mongodb's spatial query feature for clustering ?
Some how i want server load to be very less calculating the clusters each time user drags the map,
So far i'm doing the clustering as follows
while (count($markers)) {
$marker = array_pop($markers);
$cluster = array();
/* Compare against all markers which are left. */
foreach ($markers as $key => $target) {
$pixels = $this->pixelDistance($marker['lat'], $marker['long'],
$target['lat'], $target['long'],
$zoom);
if ($distance > $pixels && $zoom < 18) {
unset($markers[$key]);
$cluster[] = $target;
}
if (count($cluster) > 0) {
$cluster[] = $marker;
$clustered[] = $cluster;
} else {
$clustered[] = $marker;
}
}
$newarray = array();
foreach($clustered as $key => $cluster) {
$centroid = array('lat' => 0, 'long' => 0, 'count' => 0);
if(isset($cluster[0]) && is_array($cluster[0])){
foreach($cluster as $marker) {
//echo "{$key} =>"; printArray($marker);
//if($key != 10){
$centroid['lat'] += $marker['lat']; // Sum up the Lats
$centroid['long'] += $marker['long']; // Sum up the Lngs
$centroid['count']++;
//}
}
//if($centroid['count'] != 0){
$centroid['lat'] /= $centroid['count']; // Average Lat
$centroid['long'] /= $centroid['count']; // Average Lng
$clustered[$key] = $centroid; // Overwrite the cluster with the single point.
//}
}
}
return $clustered;
Any help is greatly appreciated.
Thanks in advance
You can use a bounding box to narrow the search. A longitude is 111 km: http://en.m.wikipedia.org/wiki/Longitude. The tile is calculated with 3 variables x,y,z. It uses a 2 dimensional grid with the x and y axis and the zoom level z. Read here:http://msdn.microsoft.com/en-us/library/bb259689.aspx. Basically you need to convert the lat-lng pair to pixel coordinates. Then you can get the tile-number from it. The maximum pixel is a power of 2 number. Hence the big number at maximum zoom level. Because you insist from the bing tiling system:
To optimize the indexing and storage of tiles, the two-dimensional tile XY coordinates are combined into one-dimensional strings called quadtree keys, or “quadkeys” for short. Each quadkey uniquely identifies a single tile at a particular level of detail, and it can be used as an key in common database B-tree indexes. To convert tile coordinates into a quadkey, the bits of the Y and X coordinates are interleaved, and the result is interpreted as a base-4 number (with leading zeros maintained) and converted into a string. For instance, given tile XY coordinates of (3, 5) at level 3, the quadkey is determined as follows:
tileX = 3 = 011 2
tileY = 5 = 101 2
quadkey = 100111 2 = 213 4 = “213”
Quadkeys have several interesting properties. First, the length of a quadkey (the number
of digits) equals the level of detail of the corresponding tile. Second, the quadkey of > any tile starts with the quadkey of its parent tile (the containing tile at the
previous level).
It's very similar to a quadtree or r-tree and it should be a good exercise for the reader but you already have the bing tile code.
I'm using the line-with-focus chart ( View Finder ) example in nvd3. That means there's 3 or 4 lines ( series ) being drawn on the graph. When i hover over any of the lines I want to get back all the y-values for all lines of that given x-axis position ( for the most part these will be interpolated y-values per line ).
I see in the nv.models.lineWithFocusChart source code that using a callback for the elementMouseover.tooltip event I can get my data's x-value back for the data points on the line.
The closest part of the source code that does what i want is with the interactiveGuideline code for the lineChart examples. However, i don't want to create a <rect> overlay with elementMousemove interaction. I think i can modify this code to filter my data and get each line's y-value, but I'm sure there's an easier way I'm not seeing.
I think I'm on the right track, but just wondering if someone had this need before and found a quicker route than the rabbit hole I'm about jump in.
Thanks for feedback
This is the basic functionality you're looking for, it still needs a bit of finesse and styling of the tooltips. (Right now the tooltip blocks the view of the points...)
Key code to call after the drawing the chart in (for example, within the nv.addGraph function on the NVD3 live code site):
d3.selectAll("g.nv-focus g.nv-point-paths")
.on("mouseover.mine", function(dataset){
//console.log("Data: ", dataset);
var singlePoint, pointIndex, pointXLocation, allData = [];
var lines = chart.lines;
var xScale = chart.xAxis.scale();
var yScale = chart.yAxis.scale();
var mouseCoords = d3.mouse(this);
var pointXValue = xScale.invert(mouseCoords[0]);
dataset
.filter(function(series, i) {
series.seriesIndex = i;
return !series.disabled;
})
.forEach(function(series,i) {
pointIndex = nv.interactiveBisect(series.values, pointXValue, lines.x());
lines.highlightPoint(i, pointIndex, true);
var point = series.values[pointIndex];
if (typeof point === 'undefined') return;
if (typeof singlePoint === 'undefined') singlePoint = point;
if (typeof pointXLocation === 'undefined')
pointXLocation = xScale(lines.x()(point,pointIndex));
allData.push({
key: series.key,
value: lines.y()(point, pointIndex),
color: lines.color()(series,series.seriesIndex)
});
});
/*
Returns the index in the array "values" that is closest to searchVal.
Only returns an index if searchVal is within some "threshold".
Otherwise, returns null.
*/
nv.nearestValueIndex = function (values, searchVal, threshold) {
"use strict";
var yDistMax = Infinity, indexToHighlight = null;
values.forEach(function(d,i) {
var delta = Math.abs(searchVal - d);
if ( delta <= yDistMax && delta < threshold) {
yDistMax = delta;
indexToHighlight = i;
}
});
return indexToHighlight;
};
//Determine which line the mouse is closest to.
if (allData.length > 2) {
var yValue = yScale.invert( mouseCoords[1] );
var domainExtent = Math.abs(yScale.domain()[0] - yScale.domain()[1]);
var threshold = 0.03 * domainExtent;
var indexToHighlight = nv.nearestValueIndex(
allData.map(function(d){ return d.value}), yValue, threshold
);
if (indexToHighlight !== null)
allData[indexToHighlight].highlight = true;
//set a flag you can use when styling the tooltip
}
//console.log("Points for all series", allData);
var xValue = chart.xAxis.tickFormat()( lines.x()(singlePoint,pointIndex) );
d3.select("div.nvtooltip:last-of-type")
.html(
"Point: " + xValue + "<br/>" +
allData.map(function(point){
return "<span style='color:" + point.color +
(point.highlight? ";font-weight:bold" : "") + "'>" +
point.key + ": " +
chart.yAxis.tickFormat()(point.value) +
"</span>";
}).join("<br/><hr/>")
);
}).on("mouseout.mine", function(d,i){
//select all the visible circles and remove the hover class
d3.selectAll("g.nv-focus circle.hover").classed("hover", false);
});
The first thing to figure out was which objects should I bind the events to? The logical choice was the Voronoi path elements, but even when I namespaced the event names to avoid conflict the internal event handlers nothing was triggering my event handling function. It seems that a parent <g> event captures the mouse events before they can reach the individual <path> elements. However, it works just fine if instead I bind the events to the <g> element that contains the Voronoi paths, and it has the added benefit of giving me direct access to the entire dataset as the data object passed to my function. That means that even if the data is later updated, the function is still using the active data.
The rest of the code is based on the Interactive Guideline code for the NVD3 line graphs, but I had to make a couple important changes:
Their code is inside the closure of the chart function and can access private variables, I can't. Also the context+focus graph has slightly different names/functionality for accessing chart components, because it is made up of two charts. Because of that:
chart in the internal code is chart.lines externally,
xScale and yScale have to be accessed from the chart axes,
the color scale and the x and y accessor functions are accessible within lines,
I have to select the tooltip instead of having it in a variable
Their function is called with custom event as the e parameter that has already had the mouse coordinates calculated, I have to calculate them myself.
One of their calculations uses a function (nv.nearestValueIndex) which is only initialized if you create an interactive layer, so I had to copy that function definition into mine.
I think that about covers it. If there's anything else you can't follow, leave a comment.
I have 2 OpenLayers.LonLat objects, and I want to determine the distance in pixels for the current zoom between the 2. I'm using OpenLayers.Layer.getViewPortPxFromLonLat() to determine the x and y of the points and then subtract to see the difference between the 2, but the values that I get are very small for points that are 2000km apart.
Here is my code:
var center_lonlat = new OpenLayers.LonLat(geometry.lon, geometry.lat);
var center_px = layer.getViewPortPxFromLonLat(center_lonlat);
var radius_m = parseFloat(feature.attributes["radius"]);
var radius_lonlat = OpenLayers.Util.destinationVincenty(center_lonlat, 0, radius_m);
var radius_px = layer.getViewPortPxFromLonLat(radius_lonlat);
var radius = radius_px.y - center_px.y;
I'm trying here to draw a circle, giving that I receive a center point and a radius in meters. The LonLat object seems to be ok.
Am I doing something wrong ?
I found the issue: destinationVincenty() need and returns coordinates in wgs84 where my map was using spherical mercator projection.
I hope I got correctly the answer, because projections make me dizzy and never really understood them :(. I was looking in the console to the numbers for my coordinates and the coordinates from the map.getExtent() that is used to calculate the getViewPortPxFromLonLat() and I realised they are not in the right order of magnitude, and then it hit me.
So, the code is now:
var spherical_mercator = new OpenLayers.Projection("EPSG:900913");
var wgs84 = new OpenLayers.Projection("EPSG:4326");
var map = feature.layer.map;
var geometry = feature.geometry;
var center_lonlat = new OpenLayers.LonLat(geometry.y, geometry.x);
var center_px = map.getViewPortPxFromLonLat(center_lonlat);
var radius_m = parseFloat(feature.attributes["radius"]);
var radius_lonlat = OpenLayers.Util.destinationVincenty(center_lonlat.clone().transform(spherical_mercator, wgs84), 0, radius_m).transform(wgs84, spherical_mercator);
var radius_px = map.getViewPortPxFromLonLat(radius_lonlat);
var radius = Math.abs(radius_px.y - center_px.y);
Measured the circles with the OpenLayers.Control.ScaleLine, and the size is dead on :D
You seem to be doing right. If the distance you get is too small, maybe there is a problem with OpenLayers.Util.destinationVincenty function? Have you tried to replace the bearing (0) with anything else - its value seem to be not important in your case. But frankly speaking, I wasn't able to understand how it works while browsing the source