How to change map zoomlevel on buttonclick without using dijit? - javascript

I am working with the esri javascript API to create a webmap. I want to have a button next to the map to allow me to zoom-in/out (not the standard esri button). Now, I found a lot of examples doing this using dijit (https://developers.arcgis.com/javascript/jssamples/toolbar_navigation.html) but I just want to use a simple html button like: Zoom in and then in the script part say something like:
function zoomin(){map.setZoom()}
Now my problem is that I don't know how to make that work. I guess the problem is that after the buttonclick it can't find the zoomin function since it's inside the require([...]),function(){} But I can't put it outside neither since the code depends on the require.
So, it would be great if you could tell me what to do.

For zooming in on the map, use the setZoom method incrementing the current zoom level to zoom in and decreasing to zoom out. For example:
//zoom out:
map.setZoom(map.getZoom()-1);
//zoom in:
map.setZoom(map.getZoom()+1);
As an example, using the sandbox of the Esri sample above:
http://developers.arcgis.com/javascript/sandbox/sandbox.html?sample=toolbar_navigation
...replace line 85 to 91 with this:
registry.byId("zoomin").on("click", function () {
//navToolbar.activate(Navigation.ZOOM_IN);
map.setZoom(map.getZoom()+1);
});
registry.byId("zoomout").on("click", function () {
//navToolbar.activate(Navigation.ZOOM_OUT);
map.setZoom(map.getZoom()-1);
});
This will allow the Zoom In and Zoom Out buttons to control the map.
Hope this helps.

Related

Fullscreen functionality on saperate html button for highchart in angular

Hello I have been looking for the a full screen functionality for chart in highchart. I have been referring the site and got this link.
Here in javascript you can achieve this by simply handling click event like
document.getElementById('button').addEventListener('click', function () {
chart.fullscreen.toggle();
});
I have tried the same thing for angular highcharts :
ngOnInit(){
this.progressChart = Highcharts.chart(this.donutContainer.nativeElement, this.donutOptions, () => {
/*
Do things here after chart is drawn
*/
})
}
onFullScreenClick(){
this.progressChart.fullscreen.toggle()
}
But seems like this code is not working. I somewhere read you can also use toggleFullScreen(). But that is also not feasible.
Fullscreen requires the fullscreen module, so if you did not imported and initialized that might be the reason.
import HC_fullscreen from 'highcharts/modules/full-screen.js';
HC_fullscreen(Highcharts);
I have prepared a simple demo for you to show you the possible solution. I am using the official highcharts-angular wrapper there (I am encouraging you to check it out, it might make your life easier while working with highcharts in angular), but the solution made without the wrapper should be similar.
Docs:
https://github.com/highcharts/highcharts-angular
Live demo:
(note - the fullscreen will not work inside the stack-blitz frame, but the following example will work in the real-life project)
https://stackblitz.com/edit/highcharts-angular-basic-line-abnznx?file=src/app/app.component.ts

Removing individual markers from map at the end of animation

I have a map with several moving markers on it and have been trying to remove each individual one when their respective animation ends. I am using Leaflet and Leaflet's plugin Leaflet.MovingMarker. I tried using methods isEnded() and end without much success.
With the latter method (end), the following code removes only but one marker (full code here):
marker.on('end', function() {
map.removeLayer(this);
});
With a click event instead of an end event, each marker is made easily removable, but then this is not what I am looking for:
marker.on('click', function() {
map.removeLayer(this);
});
With the method isEnded(), have not had any luck at all either (full code here):
var ended = marker.isEnded();
if (ended = true) {
console.log("this marker ended!");
map.removeLayer(this);
}
I wonder what I am missing here? Any hint appreciated!

Open leaflet marker using url parameter not working now that markercluster is used

I have a leaflet application at http://atlantaartmap.com. The javascript it uses is http://atlantaartmap.com/lazy_art.js.
At line 16, I grab a url parameter that can be used to open the map on a specific piece. While creating the markers, there is a piece of code at line 71 that checks to see if the most recently created marker has the ID referred to in the URL.
This code used to work, but I recently added marker clusters to the website and it no longer does. It still pans and zooms to the marker, but the popup does not open. Here is an example.
http://atlantaartmap.com/index.html?piece=40
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom());
marker.openPopup();
}
I'm not sure why, but map.setView() works and marker.openPopup() doesn't.
Any ideas? Thanks in advance.
My guess (am unable to test this) is that your map is still zooming while you call openPopup on the marker. At that time the marker isn't added to the map yet because of your cluster so the popup won't show. You could try to wait untill the setView method has completed by listening to the zoomend event and then open the popup:
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
marker.openPopup();
});
}
If that won't work you can try to use a little delay with setTimeout:
if (marker.feature.properties.pieceID == pieceID) {
map.setView(marker.getLatLng(), newZoom()).once('zoomend', function () {
setTimeout(function () {
marker.openPopup();
}, 500); // Uses millisecs, you might need to fiddle around with it
});
}
Another option could be to wait for the marker's add event:
if (marker.feature.properties.pieceID == pieceID) {
marker.once('add', function () {
marker.openPopup();
});
map.setView(marker.getLatLng(), newZoom());
}
Hope that helps, as said am unable to test this due to the complexity of your case so i'm not sure. Good luck!

Click goes throught layer after Kinetic.Node.create()

I'm importing a JSON layer to the stage.
var loadedobject = Kinetic.Node.create(data);
maplayer.add(loadedobject);
Code to change the content what I'm importing seems to do like fine: (BTW: .maplayer2 is the layer I have imported)
maplayer.get('.maplayer2')[0].setScale(browserwidthdifference);
maplayer.get('.maplayer2')[0].setY(browserheight/2);
maplayer.setDraggable(true);
However if do the code below it doesn't work:
maplayer.on('click', function() {
console.log('help');
});
maplayer.get('.maplayer2')[0].on('click', function() {
console.log('help');
});
I have let the background black of the imported layer so I can see the detection. However if I do:
backgroundlayer.on('click', function() {
console.log('help');
});
I get the click responses even if I click on the imported layer which is clearly on top of the other layer. maplayer.moveToTop() doens't work either. All alternations work but the click events won't work with the imported object.
If I create another object in maplayer it will response to it when I click on it, but the imported layer in the layer will still be not detected.
If you save all objects within a group object it will work fine! So when you save things do not do it within a Layer but in a Group object.

google maps v3 API mouseover with polygons?

I'm building a map using the google v3 api because it is way faster. Essentially, it's a map of an area with about 30 cities with polygons over the regions. When a user hovers over a city, I want the fillColor to get lighter, and then return to it's normal state on mouseout. when a user click, it redirects them to another page.
The click event works just fine. But, looking through the v3 API documentation, it seems as if Google has implemented click, doubleclick, mousemove, mousedown and mouseup as event triggers, but no hover, or mouseover, or mouseout.
Really? Geez. I'd think over and out would be higher priority than down and up.
Anyway, has anybody else come across this? Am I wrong? Or is there a workaround?
Thank you in advance for your help,
Stephanie
The following works:
google.maps.event.addListener(polygon,"mouseover",function(){
this.setOptions({fillColor: "#00FF00"});
});
google.maps.event.addListener(polygon,"mouseout",function(){
this.setOptions({fillColor: "#FF0000"});
});
In Google Maps API V3, I have a rollover for a polygon with the below code. I do not like that I have to unset and reset the map each rollover, but, at this point in time, this is how I achieved a mouseover.
I am interested in any comments on how to improve this code.
var polyShape = new google.maps.Polygon({paths:polyData,strokeColor:"#aa0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#cc0",fillOpacity: 0.25});
var polyShapeOver = new google.maps.Polygon({paths:polyData,strokeColor:"#cc0",strokeOpacity:0.5,strokeWeight:1,fillColor:"#ff0",fillOpacity: 0.25});
polyShape.setMap(map);
google.maps.event.addListener(polyShape,"mouseover",function(){
this.setMap(null);
polyShapeOver.setMap(map);
});
google.maps.event.addListener(polyShapeOver,"mouseout",function(){
this.setMap(null);
polyShape.setMap(map);
});
Maps API V3 events are defined per object. Doing a search on the V3 reference page reveals that Marker is the only object with definitions for mouseover and mouseout. So yes, you appear to be correct.
By the way, there are people doing this, but it looks pretty involved:
http://groups.google.com/group/Google-Maps-API/browse_thread/thread/4ddc4f5888994563
mouseover and mouseout are now implemented in V3 Polyline.

Categories

Resources