Here is a fiddle of my progress: http://jsfiddle.net/pegues/a5mn1ogu/

I've been trying to figure out how to create a drag and drop marker using OpenLayers like what is found with Pegman in Google Maps. I've successfully added a marker to the page, either on page load or by clicking a button. But I need to actually duplicate the behavior identical to how Google uses Pegman at maps.google.com to load streetviewer. I have no idea how to proceed with producing this behavior.

I've tried using HTML5 drag behavior, but that doesn't work:

document.getElementById('pegmanButtonDiv').addEventListener("dragstart", function(e) {...}

There are no examples similar to pegman with drag and drop markers at: http://openlayers.org/en/latest/examples/

I was successfully able to use interact.js to be able to implement drag and drop (interactjs.io#drag-and-drop), but this is independent of the OL canvas. I'm at the point where I need define the interact.js DOM element as an OL marker, then when dragged and dropped capture the coordinates where the marker was dropped in the OL map. Perhaps I also need to load a GEOJSON file to specify the bounding box region in interact.js?

Your Answer

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

Browse other questions tagged or ask your own question.