I am creating an amMap through amCharts http://docs.amcharts.com/3/javascriptmaps/AmMap and it comes with its own home button which you can click and reverts to the map default.
I would like to do this externally through my own button, but can't quite find the methods that amCharts uses to achieve this.
A few methods I've used are:
chart.zoomTo(), chart.zoomToLongLat(), chart.zoomToXY() using the correct values of when the chart is initialized. This works fine when the chart is not resized ever, but when the chart is resized (not re-initialized), those values become undependable, yet the home button is still able to bring me back to the default zoom.
What method does this home button use? Or I can use to replicate what the home button does?
You need to call zoomToLongLat and pass in your map object's initialZoomLevel, initialZoomLongitude and initialZoomLatitude. From the demo on AmChart's knowledge base for its custom external home button:
function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}
You can resize the frame on the codepen demo to see that it resets itself correctly each time.
Yes.. it very simple,
I did it this way:
map.addListener("rendered", function(event) {
var map = event.chart;
map.initialZoomLevel = map.zoomLevel();
map.initialZoomLatitude = map.zoomLatitude();
map.initialZoomLongitude = map.zoomLongitude();
});
function centerMap() {
map.zoomToLongLat(map.initialZoomLevel, map.initialZoomLongitude, map.initialZoomLatitude);
}
<div onclick="centerMap();" class="icon-home"></div>
Related
I am trying to create a map of a small area. On this map I have 2 buttons, one is for zooming in and the other is for out. I have created 2 buttons and 1 loader, then connected these together to make it work. My code for buttons and loader:
Loader.qml
Loader {
id: mapLoader
source: "map.qml"
function reload () {
source = ""
source = "map.qml"
console.log("Map Updated")
}
}
Buttons.qml
// This button zooms in 1 unit
// get_Zoomlevel() works on C++; therefore, it isn'T affected from qml reloads.
Button {
...
onClicked: {
map.setZoomLevel(map.get_ZoomLevel() + 1)
mapLoader.reload()
}
...
}
After all, it works as expected, I can zoom in and out easily. However, since the loader loads all the map components from scratch it takes a little longer for a normal and smooth user experience. Therefore, I am looking for a better way of loading or any other advice. Thanks in advance.
I have found the answer and I want to share for the future.
I thought that zoomLevel property of QML Map was only for reading, but I noticed I can also write; therefore, when I noticed it just becomes easy.
I created a variable,
property int zoomLv = 15 // default zoom level
and whenever I zoomed in/ out using buttons I just edited this variable instead of reloading the full map Item.
onClicked: {
zoomLv += 1
}
I am using jQuery ImageAreaSelect for image area selection like this:
$('#image').imgAreaSelect({}); //#image is a img id
Below this image, I have a bunch of image thumbnails, clicking on which will populate that image as #image. This way user can load each image and then select its area.
My problem is that when a new image is loaded, the dotted line which indicates the area selected for previous image still remains and gets shown on the newly loaded image. I do not want this and want this to go away every time a new image is loaded.
I read and tried this answer and this answer but they are not working for me...
My current (non-working) code is:
$('#load').click(function() {
$('#image').imgAreaSelect({hide:true,remove:true}); //try to remove old instance
$('#image').imgAreaSelect({}); //create new instance...
});
Any help is appreciated.
I have never used such pluggin but the documentation explains how to disable/re-enable it.
Save the variable when you initialize the pluggin
var ias = $('#image').imgAreaSelect( // your original initalization
Then call disable on it as the documentation states:
ias.setOptions({hide:true,remove:true})
Try this way
$('#load').click(function() {
$('#image').cancelSelection();
});
I am desperately trying to dynamically add buttons into leaflet.js marker popups and assign a callback. However, I seem not to be able to wrap my head around it.
I am using this example https://github.com/calendee/ionic-leafletjs-map-demo and add the following line into line 105 in js/controller/mapController.js
<button class="icon-left ion-information" ng-click="stationInfoButtonClick('+location.name+')"></button>
However, clicking / taping the button does not invoke the specified callback function. Ideas somebody?
You are trying to add HTML to AngularJS Code. This is not possible just like that.
You need to use $compileProvider for that.
On a previous version of leaflet, I managed to do that by calling the $compileProvider on popUp open.
$scope.$on('leafletDirectiveMap.popupopen', function(event, args) {
var feature = args.leafletEvent.popup.options.feature;
var newScope = scope.$new();
newScope.stream = feature;
$compile(args.leafletEvent.popup._contentNode)(newScope);
});
Never done it on ionic indeed, but I'm interested on your return.
I have implemented a simple bar chart,
ive added tooltip feature using highlighter but i am facing an issue with the same.
When i move the mouse down and exit the chart canvas the tooltip doesnt dismiss
I have tried adding
$.jqplot.eventListenerHooks.push(['jqplotMouseMove', handleMove]);
$.jqplot.eventListenerHooks.push(['jqplotMouseLeave', handleMove]);
But it doesnt work , i get the error handleMove is not defined
Here is the code fiddle for the same
https://jsfiddle.net/9j2na3L7/
I finally got this working :)
-- PROBLEM:
Mouse cursor escaping too fast from canvas, prevents event form fireing
-- SOLUTION:
First of all grab a handle of jplot object
var plotBar = $.jqplot('task_brk_bar_chart', [...
So we can use it to manipulate it on run-time.
Then we will use jqplotDataHighlight and jqplotDataUnHighlight events to change the graph properties and replot() function to apply them on fly.
$('#task_brk_bar_chart').bind('jqplotDataHighlight', function () {
plotBar.showTooltip = true;
plotBar.replot();
});
$('#task_brk_bar_chart').bind('jqplotDataUnhighlight', function () {
plotBar.showTooltip = false;
plotBar.repolot();
});
Working fiddle : https://jsfiddle.net/urahara/9j2na3L7/1/
Note: Copy your old css to override my setting, it was for testing purposes only.
Cheers!
How can I easily customize OpenLayers map controls? Or at least, how can I minimize the controls' height?
Thank you.
PS. Is there any CSS override?
You can sub-class any of the openLayers controls. I just made a 'zoom-slider' by sub-classing PanZoomBar (panZoomBar.js), overriding the draw() method and commenting out all the button elements, just leaving the zoom slider.. like this:
function zoomSlider(options) {
this.control = new OpenLayers.Control.PanZoomBar(options);
OpenLayers.Util.extend(this.control,{
draw: function(px) {
// initialize our internal div
OpenLayers.Control.prototype.draw.apply(this, arguments);
px = this.position.clone();
// place the controls
this.buttons = [];
var sz = new OpenLayers.Size(18,18);
var centered = new OpenLayers.Pixel(px.x+sz.w/2, px.y);
this._addButton("zoomin", "zoom-plus-mini.png", centered.add(0, 5), sz);
centered = this._addZoomBar(centered.add(0, sz.h + 5));
this._addButton("zoomout", "zoom-minus-mini.png", centered, sz);
return this.div;
}
});
return this.control;
}
var panel = new OpenLayers.Control.Panel();
panel.addControls([
new zoomSlider({zoomStopHeight:11}),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
]);
map.addControl(panel);
There is a CSS file that comes with can controls all of the CSS commands for within openlayers generally .olZoombar { here}
It is probably the easiest way to edit those sorts of things otherwise you can edit the actual .js file for the control.
If you are talking about the PanZoomBar or ZoomBar, as has been mentioned, you need to edit the zoomStopHeight. However, You do not need to edit OpenLayers.js.
new OpenLayers.Control.PanZoomBar({zoomStopHeight: 7})
You could consider trying PanZoom, which has no bar.
To minimize the ZoomBar search for zoomStopHeight in OpenLayers.js and edit it as you wish.
Further reference: Link.
Take a look here - http://geojavaflex.blogspot.com/
I am in the process of showing how to do an involved customization of the LayerSwitcher. This might give you ideas on how to do what you are after.
There is a map on the page that shows how the control works, and subsequent posts will discuss the code in detail.
If you are just interested in code see the source of the page and look for the link to CustomLayerSwitcher.js for the customized version of the switcher.