1

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).

1

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.