Open Maps draggable circle with adjustable radius

Question

I used to use google maps for this but their library has given me CSP 'unsafe-eval' errors. I want to remain secure so I'm starting to look at Open Maps.

Here's a screencast of the functionality I want to port over to Open Maps - http://screencast.com/t/5f5LeAesRr. On map click I want a circle that is draggable with an adjustable radius. Using leaflet I was able to get a circle to show on the map but it isn't draggable and the radius can't be adjusted by dragging as shown in the GMaps screencast. Any help is appreciated.

score 0 · Accepted Answer · answered Jun 03 '15 at 21:23

Figured it out using Leaflet and this Circle Editor plugin

Here's a small example using dependencies from https://github.com/kartena/Leaflet.EditableHandlers

<!DOCTYPE html>
<html>
<head>
    <title>maps</title>
    <style type="text/css">
        #map { width: 481px;height: 300px; }
    </style>

    <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.js"></script>

    <!-- Plugin dependecies -->
    <link rel="stylesheet" href="../lib/leaflet-0.6.4/leaflet.css" />
    <link rel="stylesheet" href="../css/marker-extend.css" />

    <script src="../lib/leaflet-0.6.4/leaflet-src.js"></script>
    <script src="../src/L.CircleEditor.js" ></script>
    <!-- End plugin dependecies -->

</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>
    <br>
    <input id="lat" placeholder="lat" type="number"/>
    <input id="lng" placeholder="lng" type="number"/>
    <input id="radius" placeholder="radius" type="number"/>

    <script>

        var map = L.map('map').setView([40, -98.50], 4);

        L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
                '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="http://mapbox.com">Mapbox</a>',
            id: 'examples.map-i875mjb7'
        }).addTo(map);




        var updateValues = function(circle) {
            console.log(circle._latlng.lat, circle._latlng.lng ,circle._mRadius);
            $('#lat').val(circle._latlng.lat);
            $('#lng').val(circle._latlng.lng);
            $('#radius').val(circle._mRadius);

        }

        // Set only one circle
        var circleSet = false;

        var onMapClick = function(e) {
            if (!circleSet) {
                var circleLocation = new L.LatLng(e.latlng.lat, e.latlng.lng),
                circleOptions = {
                    color: '#0159E5', 
                    fillColor: '#A8C5E4', 
                    fillOpacity: 0.7,
                    extendedIconClass : 'extend-icon'
                };

                var circle = new L.CircleEditor(circleLocation, 786500, circleOptions);
                map.addLayer(circle);
                circleSet = true;
                updateValues(circle);
                circle.on('edit', function(){
                    updateValues(this);
                });
            }
        }

        map.on('click', onMapClick);

    </script>

    <!-- From https://github.com/kartena/Leaflet.EditableHandlers -->
</body>
</html>

Open Maps draggable circle with adjustable radius

1 Answers1