Draw on the map

3 posts, 0 answers
  1. Scott
    Scott avatar
    14 posts
    Member since:
    Nov 2011

    Posted 08 Jun 2015 Link to this post

    Is it possible to draw shapes on the map with a mouse?  I do not see mouse events exposed for the map or shape layer.
  2. Scott
    Scott avatar
    14 posts
    Member since:
    Nov 2011

    Posted 09 Jun 2015 in reply to Scott Link to this post

    Here is some code I have been trying,

     

    $("#map").mousedown(mapMouseDown);
    $("#map").mousemove(mapMouseMove);
    $("#map").mouseup(mapMouseUp);

    var _drawing = false;
    var _currentShape = null;
    var _shapeData = new Array(0);
    var _map = $("#map").data("kendoMap");
    var _shapeLayer = _map.layers[2];
    var _lineShapeFactory = new LineShapeFactory();
    var _polygonShapeFactory = new PolygonShapeFactory();

    var _counter = 0;

    function mapMouseDown(e) {
        
        var location = _map.eventToLocation(e);

        _currentShape = new _lineShapeFactory.CreateNew();

        _currentShape.coordinates.push(new Array(location.lat, location.lng));

        _currentShape.coordinates.push(new Array(location.lat, location.lng));

        _shapeData.push(_currentShape);

        _shapeLayer.datasource = _shapeData;

        _drawing = true;

        e.stopPropagation();

        var foo = null;
    }

    function mapMouseMove(e) {

        if (_drawing == false) {
            return;
        }

        var location = _map.eventToLocation(e);

        if (_currentShape.type == "Linestring") {
            _currentShape.coordinates[1] = new Array(location.lat, location.lng);
        }

        var test = _shapeData;

        e.stopPropagation();

        if (counter == 100) {
            var foo = null;
        }

        counter++;
    }

    function mapMouseUp(e) {
        _drawing = false;

        e.stopPropagation();
    }

    function LineShapeFactory() {
        this.CreateNew = function () {
            var newLineString = {
                "type": "Linestring",
                "coordinates": new Array(0)
            };

            return newLineString;
        }
    }

    The map is named "map", and it has in this order a tile layer, a marker layer, and a shape layer.

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 10 Jun 2015 Link to this post

    Hi,

    Using the shape layer as a drawing surface is an interesting idea. It makes possible to persist the changes in a standard format. We'll consider it as a full-blown feature.

    Please, file a request for this feature on our UserVoice portal if you have minute.
    This will help us gauge the overall interest and prioritize.

    Regards,
    T. Tsonev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top