Telerik Forums
Kendo UI for jQuery Forum
5 answers
122 views

In drag and drop markers method viewToLocation does not position the point in the right place, there is always an offset. Very little zoom point comes to be positioned in another country.

Here we can see an example of this problem http://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/drag-and-drop-markers

Georgi
Telerik team
 answered on 12 May 2020
1 answer
281 views

When creating Pins on the Telerik UI Map, (https://demos.telerik.com/kendo-ui/map/remote-markers), how can we make sure that multiple pins that happen to have the same coordinates, will show up and not be "covered", so that only the very last one drawn get shown?

 

Does Telerik pin has a similar feature to show multiple clusters of pin, with something like this? (https://developers.google.com/maps/documentation/android-sdk/images/utility-markercluster.png)

Georgi
Telerik team
 answered on 17 Apr 2020
1 answer
629 views

I am trying to export my openStreetMap to a PDF but the background (the map) doesn't show up. I see a bunch of errors in the console that are similar to:

Access to XMLHttpRequest at 'https://www.toolserver.org/tiles/bw-mapnik/4/4/6.png' from origin 'https://localhost:44342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have no control over toolserver.org so I can't tell them to add Access-Control-Allow-Origin to their header. Is there a workaround? I'm open to using another map template that offers a black and white map if anyone knows of one that won't give me the cors error. 

Alex Hajigeorgieva
Telerik team
 answered on 04 Dec 2019
5 answers
205 views
Hello,

I was just wondering if there is a way to make the map always show the same extent, regardless
of the size of the <div> element containing it?

Something like an auto zoom function so the map always shows the same area?

Best regards 
Viktor Tachev
Telerik team
 answered on 08 Nov 2019
3 answers
293 views
I have a map with functions defined for the Click and MarkerClick events. If the marker is clicked, i do not want to execute the map click as well.  I tried using the stopPropagation() method but it's apparently not defined for the object passed to the event handler  function.  How can I do this with these events?
Peter Milchev
Telerik team
 answered on 17 Oct 2019
2 answers
84 views

Hello,

Look example: https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/drag-and-drop-markers

This sample work in Chrome, but it don't work in IE11.

How can i use it in IE11?

Konstantin
Top achievements
Rank 1
 answered on 17 Sep 2019
2 answers
166 views

I'm having trouble with the shapeMouseEnter event not firing on any layer but the last one added (top layer).  I have a background layer using the openmap.org, and then I have 2 GeoJSON layers.  These layers don't overlap, one is the US counties, and the other is all the other countries of the world.  The problem is that the shapeMouseEnter only gets triggered on the layer that was added last to the map.  I thought that the shapeMouseEnter event should fire for all layers with shapes.  Is this not correct?  Here is an example of my map definition:

var colors = ['#9ecae1', '#6baed6', '#4292c6', '#2171b5', '#08519c', '#08306b'];
 
// create the map with the markers
$("#kendoMapCounty").kendoMap({
    center: [38.891033, -95.437500],//[30.268107, -155.744821],
    zoom: 4,
    controls: {
        attribution: false,
        navigator: false
    },
    wraparound: false,
    layers: [
    {
        type: "tile",
        urlTemplate: "//#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        subdomains: ["a", "b", "c"],
        attribution: "© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>"
    },
    {
        type: "shape",
        dataSource: {
            type: "geojson",
            transport: {
                read: "/Resources/kendoui/GeoJSON/world_countries_and_us_counties.geo.json"
            }
        }
    },
    {
        type: "shape",
        dataSource: {
            type: "geojson",
            transport: {
                read: "/Resources/kendoui/GeoJSON/tl_2010_us_county10_simplified.json"
            }
        }
    },
    ],
    shapeCreated: function (e) {
        var dataItem = e.shape.dataItem;
        var id = dataItem.properties.GEOID10;
        if (typeof id !== "undefined") {
            SL.shapesById[id] = SL.shapesById[id] || [];
            SL.shapesById[id].push(e.shape);
 
            var STATEFP10 = parseInt(e.shape.dataItem.properties["STATEFP10"]);
            if (STATEFP10) {
                e.shape.fill(colors[STATEFP10 % colors.length]);
                e.shape.options.set("fill.opacity", 0.0);
            }
 
            if (SL.selectedCounties.length > 0) {
                $.each(SL.selectedCounties, function (key, value) {
                    if (value.dataItem.properties.GEOID10 === id) {
                        e.shape.options.set("fill.opacity", 0.8);
                    }
                });
            }
        }
 
        id = dataItem.properties.iso_n3;
        if (typeof id !== "undefined") {
            var diss_me_id = dataItem.properties.diss_me;
            SL.shapesById[id] = SL.shapesById[id] || [];
            SL.shapesById[id].push(e.shape);
 
            var typeCode = e.shape.dataItem.properties["type"];
            if (typeCode === 'State') {
                var diss_me = parseInt(e.shape.dataItem.properties["diss_me"]);
                if (diss_me) {
                    e.shape.fill(colors[diss_me % colors.length]);
                    e.shape.options.set("fill.opacity", 0.0);
                }
            }
            else {
                var iso_n3 = parseInt(e.shape.dataItem.properties["iso_n3"]);
                if (iso_n3) {
                    e.shape.fill(colors[iso_n3 % colors.length]);
                    e.shape.options.set("fill.opacity", 0.0);
                }
            }
 
            if (SL.selectedStates.length > 0) {
                $.each(SL.selectedStates, function (key, value) {
                    if (typeCode === 'State') {
                        if (value.dataItem.properties.diss_me === diss_me_id) {
                            e.shape.options.set("fill.opacity", 0.8);
                        }
                    }
                    else {
                        if (value.dataItem.properties.iso_n3 === id) {
                            e.shape.options.set("fill.opacity", 0.8);
                        }
                    }
                });
            }
        }
    },
    markerCreated: function (e) {
        // Draw a shape (circle) instead of a marker
        e.preventDefault();
    },
    click: SL.onClick,
    reset: SL.onReset,
    pan: SL.onPan,
    panEnd: SL.onPanEnd,
    shapeClick: SL.onShapeClick,
    shapeMouseEnter: SL.onShapeMouseEnter,
    shapeMouseLeave: SL.onShapeMouseLeave,
    zoomStart: SL.onZoomStart,
    zoomEnd: SL.onZoomEnd
});

Ofer
Top achievements
Rank 1
 answered on 25 Aug 2019
6 answers
312 views

Hello Everyone,

I am facing problem in implementing the kendo alert functionality.

In my page I am using kendo grid which is working perfectly. But when I am trying to use kendo alert, javascript error comes "kendo.alert is not a function". Below is a part of the code.

kendo.ui.progress($('#myGridDiv'), true);
            $.ajax({
                url: '<%=ResolveUrl("~/ReportDataService.asmx/GetReportData") %>',
                data: "{'Office':'" + Office + "','Team':'" + Team + "','Client':'" + Client + "','FileNo':'" + FileNo + "','BillNo':'" + BillNo + "'}",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.d.length > 0) {
                        var grid = $('#myGridDiv').getKendoGrid();
                        grid.dataSource.data(data.d);
                        grid.refresh();
                    }
                    else {
                        kendo.alert('No results found. Displaying last searched results.');     //--> Error comes from here. If no record is found for the grid.
                    }
                    kendo.ui.progress($('#myGridDiv'), false);
                },
                error: function (error) {
                    alert("Error: " + JSON.stringify(error));
                    kendo.ui.progress($('#myGridDiv'), false);
                }
            });

The scripts that I am using are

<link rel="stylesheet" href="Styles/kendo.common.min.css" />
    <link rel="stylesheet" href="Styles/kendo.default.min.css" />
    <link rel="stylesheet" href="Styles/kendo.default.mobile.min.css" />
<script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/jszip.min.js"></script>
    <script src="Scripts/kendo.all.min.js"></script>

Can somebody please help.

Thanks & Regards

Viktor Tachev
Telerik team
 answered on 20 Aug 2019
1 answer
57 views

Hello,

is there a way to have shape fills that are more complex than rgb-values, for example a diagonal hatch fill?

my knowledge on the map control and svgis limited. my current approach is to create a pattern via jquery when the map is created:

        jQuery("map svg defs").html(''
            + '<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">'
            + '  <line x1="0" y1="0" x2="0" y2="10" style="stroke:red; stroke-opacity:0.4; stroke-width:8" />'
            + '</pattern>';

then i use the def as fill for shapes when they are created:

    shape.fill("url(#diagonalHatch)");

this works fine, but i want to have opacity or color depend on other parameters, which would result in many defs.

Do you have any suggestions?

Tsvetomir
Telerik team
 answered on 09 Jul 2019
1 answer
84 views
We seem to be getting a few network errors where tile.openstreetmap.org (a,b,c, subdomains) are sometimes unavailable.   What would be the best way to detect this and then display a message to the user that "Map is not Available"?
Georgi
Telerik team
 answered on 03 Jun 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Patrick
Top achievements
Rank 1
Iron
Iron
Iron
MIS
Top achievements
Rank 1
Ross
Top achievements
Rank 1
Marcin
Top achievements
Rank 1
Iron
Iron
Sean
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?