We Keep Coding

Openlayers draw interaction: Error: drag and drop of map after click

I am trying to add a draw interaction to my map. The user should click a button, add one point and then add attribute information about the point. I'm still stuck in the drawing part: After I draw a point in the map, the cursor position remains the same and mouse movements change the map in the background (like when panning). When I click again this stops. No idea why it's doing this. In the console in Chrome I get an error in the draw.js file from openlayers (this.source_.addFeature is not a function).
Grateful for any help!
Here's my code:
function addFeature() {
var btn_cancel = document.getElementById('buttonCancel');
btn_cancel.style.display = 'block';
var btn_add = document.getElementById('buttonAdd');
btn_add.classList.add("button_clicked");
var draw;
function addInteraction() {
draw = new ol.interaction.Draw({
source: lunchvec,
type: "Point",
});
map.addInteraction(draw);
draw.on('drawend', function(evt) {
console.log(evt.feature.getGeometry().getCoordinates());
map.removeInteraction(draw);
});
};
addInteraction();
}

How to Drag a Marker if you click it? Leaflet

Good Day to everyone, Im developing a site that has a mapping features.
My goal here is make it drag if you click the marker.
Here is my code
else if (select1.value === "Arson"){
var note = document.getElementById('note');
var datepick = document.getElementById('demo1');
var timepick = document.getElementById('timepick');
layerpoly.on('click', function(e){
var markerA = new L.Marker(e.latlng,{icon: Icon1});
markerA.bindPopup("</a><br><strong>ARSON</strong></br><strong>Date:</strong>"+datepick.value+"</br><strong>Time:</strong>"+timepick.value+"</br><strong>Address:</strong>"+note.value+"<strong><br><strong>Suspect Sketch</strong><br><a href=legends/suspect.jpg rel=lightbox><img src = legends/suspect.jpg height=100 width = 100/><br> ").addTo(map);
closure1 (markerA)
var ll = markerA.getLatLng();
document.querySelector('#userLat').value = ll.lat;
document.querySelector('#userLng').value = ll.lng;
marker.dragging.enable();
});
}
The output of the code above is if i select arson. I will place a marker on map.
My question is how can i make it draggable if click that marker?
by the way this code
document.querySelector('#userLat').value = ll.lat;
document.querySelector('#userLng').value = ll.lng;
is connected into two textboxes with id of userLat and useLng. How can i update this textbox if i drag that marker?
Any Help? TY

Here's the documentation for L.Marker: http://leafletjs.com/reference.html#marker As you can see there is absolutely no method called dragging.enable so calling marker.dragging.enable(); will never work and should throw an obvious error to your browserconsole. There is however a draggable option which you can use when you instanciate the marker:
var markerA = new L.Marker(e.latlng,{
icon: Icon1,
draggable: true
});
Here's a working example on Plunker: http://plnkr.co/edit/Au3XlD?p=preview

Leaflet.js: detecting when map finishes zooming

So i'm making this application with leafet.js.
This application requires that i have to manually draw grids onto the screen,
that i've taken care in a draw_grid() function that draws a bunch of polygons to the screen.
i have this function that i'm calling to trigger the change of the leaflet map.
zoom - the zoom integer and size is a dict like {x:1,y:1} that controls the size of the tiles drawn onto the map. (they need to change as the units the tiles are being drawn under are lat,long points on the map.
function changeZoom(zoom,size){
map.setZoom(zoom);
setSize(size);
setTimeout(drawGrid,500)s;
}
the reason i have to use the setTimeout is because the leaflet ignores any drawing commands onto the map (which i'm doing as a layer) until the map has finished animating.
how to do this asynchronously instead?

You can use the map.zoomend event, described in the API here
map.on('zoomend', function() {
drawGrid();
});
Once the map finishes the zooming animation, it will then call the drawGrid function.

In newer version of Leaflet, "zoomed" is no longer an event. There are now "zoomstart" and "zoomend" events:
map.on("zoomstart", function (e) { console.log("ZOOMSTART", e); });
map.on("zoomend", function (e) { console.log("ZOOMEND", e); });

This is best way to managed leflet Zoom control clicked
/*Zoom Control Click Managed*/
var bZoomControlClick = false;
mymap.on('zoomend',function(e){
var currZoom = mymap.getZoom();
if(bZoomControlClick){
console.log("Clicked "+currZoom);
}
bZoomControlClick = false;
});
var element = document.querySelector('a.leaflet-control-zoom-in');
L.DomEvent.addListener(element, 'click', function (e) {
bZoomControlClick = true;
$(mymap).trigger("zoomend");
});
var element1 = document.querySelector('a.leaflet-control-zoom-out');
L.DomEvent.addListener(element1, 'click', function (e) {
bZoomControlClick = true;
$(mymap).trigger("zoomend");
});

Google Maps API 3 - remove circle after bind

I can't for the life of me figure out why setMap(null) doesn't work. I am really upset how much documentation there is on adding overlays with bindTo, but not a single word about how to remove it. What am I doing wrong?
I'm creating the circle on the .radius_type click. Then when I toggle the drop down to a different shape, it won't remove the circle.
I'm calling the map like:
var map = new google.maps.Map(document.getElementById('map'), {...}
// this toggles the shapes, but I can't get it to remove the circle for the marker
$('.radius_type.selectee').click(function(){
var shape = $(this).find('span').html();
var opts= {...};
switch(shape){
case 'circle': // Here is the added circle to the second marker.
var circle = new google.maps.Circle(opts);
circle.setOptions({radius:17063,map:map});
circle.bindTo('center',markers[1],'position');
// It binds, now how to remove it?
break;
case 'square':
//tried - circle.setMap(null);
//tried - map.setMap(null);
//tried - google.map.event.setMap(null);
//tried - every web page on the topic.
//
// I don't understand how to unbind the circle from the marker.
var rect = new google.maps.rect(opts);
break;
case 'draw':
draw.setDrawingMode(google.maps.drawing.OverlayType.POLYGON);
break;
}
});

use $('element').on('change',function()) to remove the circle

You can try the following code snippet:
circle.setCenter(null);
circle.unbind('center');

Activation/deactivation of OpenLayers.Controls.DrawFeature fails

When I break on the first line in the call back function and do this
this.active --> true
this.deactivate() --> true
this.activate() --> true
this.deactivate() --> false
HOW CAN THIS HAPPEN?
Let me explain where this occurs.
This map has two layers and each layer has an EditingToolbar associated with it.
When the user pressed polygon draw (in the EditingToolbar), its being draw on the "polygon_layer".
When the user presses line draw or point draw the layer is switched and the user now draws on the "vectors" layer.
When I switch layers, I need to activate the correct button in the EditingToolbar, example:
The user draws polygons in the "polygon_layer" and now he want to draw lines. He presses draw lines button (in the EditingToolbar associated with the polygon_layer).
I switch layers and activate draw lines button on the EditingToolbar for that layer.
After a while, the user now wants to draw polygons again, so i deactivate all buttons in this layer, switch layers and activate the draw polygon button in the
EditingToolbar for the polygon_layer. and so on.
Now when I do this enough times (3 switches) I notice that the buttons don't get deactivate anymore.
So I tried to debug and got this totally unexpected error described above ( at the very top).
Please tell me what am I doing wrong.
I've appended my code and I'll put ERROR HERE where this occurs. This code is ready to run.
You can use the HTML code below, just change the reference to the JavaScript file that I've provided ( I've provided the contents of the JavaScript file)
JS FILE:
var map;
var editing_toolbar_polygon=null;
var editing_toolbar_vector=null;
var drag_control=null;
var vectors;
var polygon_layer=null;
var epsg900913 = new OpenLayers.Projection('EPSG:900913');
var epsg4326 = new OpenLayers.Projection('EPSG:4326');
//var epsg900913 = new OpenLayers.Projection('EPSG:900913');
// var epsg4326 = new OpenLayers.Projection('EPSG:4326');
var line_control;
var polygon_control;
var renderer;
function initialize() {
line_control, renderer=OpenLayers.Util.getParameters(window.location.href).renderer;
renderer= (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
// Create the map object
map = new OpenLayers.Map('map');
//Create a Google layer
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{
numZoomLevels: 20,
projection: new OpenLayers.Projection("EPSG:900913")
}
);
var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic',
projection: new OpenLayers.Projection("EPSG:4326")});
var mystyle=new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
fillColor: "#66ccff",
strokeColor: "#3399ff",
graphicZIndex: 2,
strokeWidth: 5,
}),
"temporary": new OpenLayers.Style({
fillColor:"#3399ff",
strokeColor: "#3399ff",
strokeWidth:5,
pointRadius:10
})
});
polygon_layer=new OpenLayers.Layer.Vector(
"Polygon Layer",
{
//renderers:renderer,
}
);
vectors= new OpenLayers.Layer.Vector(
"Vector Layer",
{
//renderers:renderer,
}
);
editing_toolbar_polygon=new OpenLayers.Control.EditingToolbar(polygon_layer);
editing_toolbar_vector=new OpenLayers.Control.EditingToolbar(vectors);
map.addLayers([gmap,wms,vectors,polygon_layer]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
//map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(editing_toolbar_polygon);
map.addControl(editing_toolbar_vector);
editing_toolbar_vector.deactivate();
//for the drag control to work you need to activate it
drag_control=new OpenLayers.Control.DragFeature(vectors);
map.addControl(drag_control);
find_control(editing_toolbar_polygon.getControlsByClass(new RegExp(".*DrawFeature")),"Point").events.register("activate",null,function(e){
//ERROR HERE
this.deactivate();
var picked_button=find_same_control(editing_toolbar_vector.controls,e.object);
change_layer(polygon_layer,vectors);
change_control(editing_toolbar_polygon,editing_toolbar_vector);
picked_button.activate();
});
find_control(editing_toolbar_polygon.getControlsByClass(new RegExp(".*DrawFeature")),"Path").events.register("activate",null,function(e){
//ERROR HERE
this.deactivate();
var picked_button=find_same_control(editing_toolbar_vector.controls,e.object);
change_layer(polygon_layer,vectors);
change_control(editing_toolbar_polygon,editing_toolbar_vector);
picked_button.activate();
});
find_control(editing_toolbar_vector.getControlsByClass(new RegExp(".*DrawFeature")),"Polygon").events.register("activate",null,function(e){
//ERROR HERE
this.deactivate();
var picked_button=find_same_control(editing_toolbar_polygon.controls,e.object);
change_layer(vectors,polygon_layer);
change_control(editing_toolbar_vector,editing_toolbar_polygon);
picked_button.activate();
});
polygon_layer.events.register("beforefeatureadded",null,function(e){
polygon_layer.removeAllFeatures();
});
// line_control=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Path);
//polygon_control=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.RegularPolygon);
//map.addControl(line_control);
//line_control.activate();
//map.addControl(polygon_control);
//polygon_control.activate();
// Zoom to Vancouver, BC
map.setCenter(new OpenLayers.LonLat(-123.12, 49.28).transform(epsg4326, epsg900913), 13);
}
function change_layer(current_layer,next_layer){
current_layer.setVisibility(false);
next_layer.setVisibility(true);
}
function change_control(current_control,next_control){
current_control.deactivate();
map.addControl(next_control);
}
//use this when you want to find a specific control type:
// DrawFeature cntrol has many types, Line, Polygon, Point.
// So what you do is pass an array of DrawFeature controls and a type(string), lets say "Point",
// then this function will return a DrawFeature thats specifically for drawing points
function find_control(controls,type){
var control;
for(var x in controls){
if(controls[x].displayClass.search(new RegExp(type+"$"))>0){
return controls[x];
}
}
return -1;
}

I just tried with a simple test.
When you desactivate a controller, you just remove the events of the controller.
So for OpenLayers.Control.LayerSwitcher, desactivate this controller is useless because nothing change and you can still choose a layer.
I think the best way is to remove the controller for your polygon and to add that for the lines.
When you select the "polygon_layer" :
map.addControl(editing_toolbar_polygon);
map.removeControl(editing_toolbar_vector);
When you select the "vectors" :
map.addControl(editing_toolbar_vector);
map.removeControl(editing_toolbar_polygon);