I built a world map with a drop down menu that changes the zoom level: see fiddle
This is my function:
$('#func').change(function () {
var chart = $('#map').highcharts();
var v = $(this).val();
if(v == "1") {
$('#map').highcharts().mapZoom(10);
$('#map').highcharts().mapZoom(.4);
chart.redraw();
}
});
In addition I want to change the position of the map. How can I change latitude and longitude after a value is selected?
Using the mapZoom method you can change the current map view. You only have to add the second and third argument to that method. This is the X and Y position of the new zoom centre.
For calculating that value from latitude/longitude you might use the fromLatLonToPoint method.
In the demo below I implemented it for Europe.
API:
https://api.highcharts.com/class-reference/Highcharts.Chart#mapZoom
https://api.highcharts.com/class-reference/Highcharts.Chart.html#fromLatLonToPoint
Live demo:
https://jsfiddle.net/BlackLabel/xs8nLgho/
Related
I want to hide the marker after the zoom level reach 17, someone suggested I use clear method, but the issue with it that I have different marker that will show after some event so clear is not going to work any idea how can I made this possible?
To remove a specific marker
myMarker.map = nil
as far as I know there are no definite references to hiding markers, but you can manipulate marker data displayed on the map #CMIIW
as an example
var markers: [GMSMarker] = []
var tempMarker: [GMSMarker] = []
if zoom == 17 {
// TODO: Create tempMarker filter from markers
} else {
// TODO: Create tempMarker filter from markers
}
// TODO:
// mapView.clear()
// Mapview show markers from tempMarker
iOS Swift Google Maps SDK showing markers at specific zoom level?
//To delete
marker.map = nil
//to hide
marker.opacity = 0.0
Is it possible to set the chart zoom to a range of values within the dataset? So currently we have a chart that can display close to 100 values within it. What we're trying to achieve is the ability to zoom into a range of values i.e. The first 12 values within the dataset and then the user is able to scroll in either direction to see the remaining values within the chart.
We've currently tried using the setVisibleXRangeMaximum function but that only seems to display the first value within the chart rather than 12. And this may be because the data that we receive from he service can be unpredictable i.e. one value may be 1000 and the next maybe 100,000.
This is an extension that will let you zoom into a range of values like this:
extension BarLineChartViewBase {
func focusXRange(start: Double, end: Double) {
guard end > start else {
return
}
// Reset the zoom back to the full chart view, so that the setVisibleXRange call will zoom in to the desired range,
// setVisibleXRange only zooms in, not out.
// resetZoom() seems like it should be the right API call, but it doesn't work if the user is already zoomed
// in closer than the range to focus.
// zoomToCenter(scaleX: 1, scaleY: 1) similarly doesn't work
while !isFullyZoomedOut {
zoomOut()
}
let distance = end - start
// If the distance to focus on is greater than the xAxis maximum, we can't zoom in any further
guard distance < (xAxis.axisMaximum - xAxis.axisMinimum) else {
return
}
// Set the visible range to the distance between start and end. This will zoom the chart in to a range of that distance
setVisibleXRange(minXRange: xAxis.axisMinimum, maxXRange: xAxis.axisMinimum + distance)
// Move the chart to the start point
moveViewToX(start)
// Due to the previous setVisibleXRange call, the user cannot zoom back out.
// Restore the visible range to the full width of the dataset, so that the user can zoom back out.
// Note: this will not zoom the chart back out; setVisibleXRange will only zoom in, not out
setVisibleXRange(minXRange: xAxis.axisMinimum, maxXRange: xAxis.axisMaximum)
}
}
// Use it like
// chartView.focusXRange(0, 10) // Focus on the first ten data points
// chartView.focusXRange(chartView.xAxis.axisMaximum - 10, chartView.xAxis.axisMaximum) // Focus on the last ten data points
I am using openlayer 3.9.0 .I have the below code , in which i have to draw a number of overlay on map.
These overlay are coming but not at exact coordinate. But as soon as i click on map some where these overlay moves to correct position.
To overcome tis i tried to hit click event on hidden div also but it is not working. Only when i click on map somewhere then only these anamoly go tpo correct position.
for(var anamolyIndex=0; anamolyIndex< self.anamolyes.array.length ; anamolyIndex++)
{
tmpAnamolyObject = self.anamolyes.array[anamolyIndex];
elem = document.getElementById(tmpAnamolyObject.coordinates);
coordinate = tmpAnamolyObject.coordinates.split(",");
longitude = parseFloat(coordinate[0]);
lattitude = parseFloat(coordinate[1]);
position = ol.proj.transform([longitude, lattitude],'EPSG:4326', 'EPSG:3857');
popup = new ol.Overlay({
//position: position,
element: elem,
stopEvent:true,
positioning : 'center-center'
});
tmpAnamolyObject.type = "ANAMOLY";
popup['identity'] = tmpAnamolyObject;
elem.addEventListener('click', function() {
var coordinates = this.getAttribute('id');
self.send('onAnamolyClick',coordinates);
});
popup.setPosition(position);
self.map.addOverlay(popup);
}
I recently updated my Cordova mobile mapping app from OL3 V3.1.1 to V3.7.0 to V3.8.2.
Am using PouchDB to store off-line tiles, and with V3.1.1 tiles were visible.
Here is the code snippet:
OSM_bc_offline_pouchdb = new ol.layer.Tile({
//maxResolution: 5000,
//extent: BC,
//projection: spherical_mercator,
//crossOrigin: 'anonymous',
source: new ol.source.XYZ({
//adapted from: http://jsfiddle.net/gussy/LCNWC/
tileLoadFunction: function (imageTile, src) {
pouchTilesDB_osm_bc_baselayer.getAttachment(src, 'tile', function (err, res) {
if (err && err.error == 'not_found')
return;
//if(!res) return; // ?issue -> causes map refresh on movement to stop
imageTile.getImage().src = window.URL.createObjectURL(res);
});
},
tileUrlFunction: function (coordinate, projection) {
if (coordinate == null)
return undefined;
// OSM NW origin style URL
var z = coordinate[0];
var x = coordinate[1];
var y = coordinate[2];
var imgURL = ["tile", z, x, y].join('_');
return imgURL;
}
})
});
trails_mobileMap.addLayer(OSM_bc_offline_pouchdb);
OSM_bc_offline_pouchdb.setVisible(true);
Moving to both V3.7.0 and V3.8.2 causes the tiles to not display. Read the API and I'm missing why this would happen.
What in my code needs updating to work with OL-V3.8.2?
Thanks,
Peter
Your issue might be related to the changes to ol.TileCoord in OpenLayers 3.7.0. From the release notes:
Until now, the API exposed two different types of ol.TileCoord tile coordinates: internal ones that increase left to right and upward, and transformed ones that may increase downward, as defined by a transform function on the tile grid. With this change, the API now only exposes tile coordinates that increase left to right and upward.
Previously, tile grids created by OpenLayers either had their origin at the top-left or at the bottom-left corner of the extent. To make it easier for application developers to transform tile coordinates to the common XYZ tiling scheme, all tile grids that OpenLayers creates internally have their origin now at the top-left corner of the extent.
This change affects applications that configure a custom tileUrlFunction for an ol.source.Tile. Previously, the tileUrlFunction was called with rather unpredictable tile coordinates, depending on whether a tile coordinate transform took place before calling the tileUrlFunction. Now it is always called with OpenLayers tile coordinates. To transform these into the common XYZ tiling scheme, a custom tileUrlFunction has to change the y value (tile row) of the ol.TileCoord:
function tileUrlFunction = function(tileCoord, pixelRatio, projection){
var urlTemplate = '{z}/{x}/{y}';
return urlTemplate
.replace('{z}', tileCoord[0].toString())
.replace('{x}', tileCoord[1].toString())
.replace('{y}', (-tileCoord[2] - 1).toString());
}
If this is your issue, try changing your tileUrlFunction to
function (coordinate, projection) {
if (coordinate == null)
return undefined;
// OSM NW origin style URL
var z = coordinate[0];
var x = coordinate[1];
var y = (-coordinate[2] - 1);
var imgURL = ["tile", z, x, y].join('_');
return imgURL;
}
I have a map from jvectormap http://jvectormap.com/maps/countries/united-kingdom/ which displays country regions in SVG 'paths'.
I also have a set of objects with latitude and longitude co-ordinates.
Is it possible to assign each object to a particular region, given the co-ordinates and the SVG paths?
I found a way of doing it, but it's really hackish, and I'm sure there are better ways of doing it.
Anyhow, here's my solution to the problem:
jvm.Map.prototype.latLngToRegion = function (lat, lng) {
var pointOnMap = this.latLngToPoint(lat, lng),
pointOnPage = {
x: Math.round((pointOnMap.x + this.container.offset().left) - $(window).scrollLeft()),
y: Math.round((pointOnMap.y + this.container.offset().top) - $(window).scrollTop())
},
element = document.elementFromPoint(pointOnPage.x, pointOnPage.y),
region = $(element).attr('data-code');
return region; // note, this will only give you the region code, but from that you can read out most of what you need from jvectormaps itself.
}
Caveats are that the latitude and longitude you are looking for must be in view, for document.elementFromPoint to work. But you could maybe update the list on scroll and map pan etc.
Well, maybe you can take a look at how jvectormap matches your current mouse position to the region - you should be able to match your lat/lng coordinates in a similar way