[GIS] Draggable CircleMarker error using GeoJSON

leaflet

Draggable circlemarker works if the marker is defined. If I try to read in some GeoJSON data from a file I get the error:"Uncaught TypeError: mymarker.setLatLng is not a function" even if my GeoJSON is one point. 

var mymarker = L.circleMarker([42.5, -73.5], {
    color: '#f03',
    fillColor: '#f03',
    fillOpacity: 0.80
}).addTo(map);


mymarker.on({
      mousedown: function () {
      map.dragging.disable();
        map.on('mousemove', function (e) {
          mymarker.setLatLng(e.latlng);
        });
      }
   }); 
   map.on('mouseup',function(e){
    map.dragging.enable();
    map.removeEventListener('mousemove');
   })

This code below fails: ( I pass it GeoJSON it draws but I can't move anything.)

var mymarker =L.geoJSON(data, {

onEachFeature: onEachFeature,

pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng, {
        radius: 8,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    });
}

}).addTo(map);

So as a defined point it works but as a point from GeoJSON it fails. My goal is to be able to move points to their proper location and save their location by updating their lat/Long. I can do this with draggable markers but they want circleMarkers. Any ideas?

https://jsfiddle.net/bchappell61/41nsc3xr/ defined inline (Works)
https://jsfiddle.net/bchappell61/ec34pj6m/ defined from GeoJSON(Fail).

Best Answer

Got it. Found https://github.com/w8r/Leaflet.Path.Drag/ and used that.

This lets you define ther circleMarker as draggable. L.circleMarker(latlng,{ draggable: true }, and by then by placing layer.on('dragend' in my onEachFeature function I was able to capture the circleMarker coordinates and place them in textboxes, where I can use PHP to write them the new coords back to my database.

Problem solved.

function onEachFeature(feature, layer) {
var popupContent = feature.properties.popupContent
layer.bindPopup(popupContent);

    layer.on('dragend', function(e){
        document.getElementById("lat1").value = layer.getLatLng().lat;
        document.getElementById("lng1").value = layer.getLatLng().lng;
    });

}

var mymarker =L.geoJSON(data, {

style: function (feature) {
    return feature.properties && feature.properties.style;
},

onEachFeature: onEachFeature,

pointToLayer: function (feature, latlng) {
    return L.circleMarker(latlng,{ draggable: true }, {
        radius: 8,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    });
}
}).addTo(map);
Related Question