GeoJSON MultiPoint Not Displaying

5 posts, 0 answers
  1. Dave
    Dave avatar
    3 posts
    Member since:
    Nov 2012

    Posted 07 Feb 2014 Link to this post

    I can not seem to get a GeoJSON layer with MultiPoint data to display. My map code looks like this (using the ASP.NET MVC wrapper):

    @(Html.Kendo().Map()
        .Name("map")
        .Center(39.50, -98.35)
        .Zoom(3)
        .Layers(x =>
        {
            x.Add().Type(MapLayerType.Tile).UrlTemplateId("http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png");
            x.Add().Type(MapLayerType.Shape)
                .Style(y => y.Fill(z => z.Color("#000000").Opacity(1)))
                .DataSource(y => y.GeoJson().Read(z => z.Action(MVC.MyController.Map())));
        })
       .Events(events => events
           .ShapeCreated("onShapeCreated")
        )
    )
     
    <script>
        function onShapeCreated(e) {
            alert('shape!');
        }
    </script>

    My action code looks like (using JSON.NET Linq):
    public virtual ActionResult Map()
    {
        List<Tuple<double, double>> coordinates = new List<Tuple<double,double>>(){
            new Tuple<double, double>(39.50, -98.35),
            new Tuple<double, double>(30.268107, -97.744821)
        };
     
        JObject featureCollection = new JObject(
            new JProperty("type", "FeatureCollection"),
            new JProperty("features", new JArray(
                    new JObject(
                        new JProperty("type", "Feature"),
                        new JProperty("properties", new JObject()),
                        new JProperty("geometry", new JObject(
                            new JProperty("type", "MultiPoint"),
                            new JProperty("coordinates", coordinates.Select(c => new JArray(c.Item1, c.Item2)).ToArray())
                        ))
                    )
                ))
            );
     
        ContentResult result = new ContentResult();
        result.Content = featureCollection.ToString();
        result.ContentType = "application/json";
        return result;
    }

    I have verified that the action gets called and that it generates the following GeoJSON file:
    {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {},
          "geometry": {
            "type": "MultiPoint",
            "coordinates": [
              [
                39.5,
                -98.35
              ],
              [
                30.268107,
                -97.744821
              ]
            ]
          }
        }
      ]
    }

    None of the points are shown on the map. The alert in onShapeCreated also doesn't get called, which makes me think there's something wrong with the GeoJSON - but it looks good to me based on the specification. What am I missing?

    Thanks,

    Dave
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 13 Feb 2014 Link to this post

    Hi,

    Please accept my apologies for the late reply.

    The GeoJSON you generate seems fine, except for the actual coordinates. It should be listed as longitude,latitude, as per the spec:
    The order of elements must follow x, y, z order (easting, northing, altitude for coordinates in a projected coordinate reference system, or longitude, latitude, altitude for coordinates in a geographic coordinate reference system).

    The Map public API uses latitude, longitude as this seems to be more widely accepted. We need to keep to the spec for the GeoJSON data though.

    With this corrected, the demo seems to be running fine: http://jsbin.com/sokif/1/edit

    Regards,
    T. Tsonev
    Telerik

    Check out the new Telerik Platform - the only modular platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native apps. Register for the free online keynote and webinar to learn more about the Platform on Wednesday, February 12, 2014 at 11:00 a.m. ET (8:00 a.m. PT).

  3. Kendo UI is VS 2017 Ready
  4. Dave
    Dave avatar
    3 posts
    Member since:
    Nov 2012

    Posted 14 Feb 2014 Link to this post

    Sure enough, that did the trick. Thanks!
  5. Barak
    Barak avatar
    3 posts
    Member since:
    Jul 2011

    Posted 04 Mar 2014 in reply to T. Tsonev Link to this post

    Hi T,
    I'm evaluating the Kendo web and the Map control doesn't digest my GeoJson correctly.

    Wasn't able to trace it other than that it works with your sample data and doesn't with mine.

    I'll appreciate your help.
  6. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 05 Mar 2014 Link to this post

    Hi,

    Can you please share a short sample of what the data looks like? Also note that the coordinates in the GeoJSON file must be in a longitude, latitude order as per the spec:
    The order of elements must follow x, y, z order (easting, northing, altitude for coordinates in a projected coordinate reference system, or longitude, latitude, altitude for coordinates in a geographic coordinate reference system).

    Tools like geojsonhint might also be used to ensure that the GeoJSON is well formed.

    Regards,
    T. Tsonev
    Telerik

    DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

Back to Top
Kendo UI is VS 2017 Ready