Bad rendering with Leaflet Draw polygon

Question

I have the following polygon:

{"type":"Polygon","coordinates":[[[-95.1470947265625,42.2685019842801],[-94.9493408203125,42.2400409352592],[-94.866943359375,42.3213241404624],[-95.0372314453125,42.4349444401055],[-95.1470947265625,42.2685019842801]]]}

This polygon renders properly in http://geojsonlint.com/. But when I render it on my page, it looks like this.

Problem rendering geojson

Here is the full code used to render this object:

var geometry = {"type":"Polygon","coordinates":[[[-95.1470947265625,42.2685019842801],   [-94.9493408203125,42.2400409352592],[-94.866943359375,42.3213241404624],[-95.0372314453125,42.4349444401055],[-95.1470947265625,42.2685019842801]]]};
var mmp_polygon = geometry;
geometry.crs = {"type": "name", "properties": {"name": "EPSG:4326"}};
$('#feeding_operation_map_coords_as_geojson').val(JSON.stringify(geometry));

var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
        .setView([41.9022517010637, -93.7140816297676], 8);

var featureGroup = L.featureGroup().addTo(map);

var drawControl = new L.Control.Draw({
    draw: {
        marker: false,
        rectangle: false,
        polyline: false,
        circle: false
    },
    edit: {
        featureGroup: featureGroup
    }
}).addTo(map);


var line_points = mmp_polygon.coordinates[0];

// Mapbox wants lat and long swapped
line_points.forEach(function (entry) {
    entry.reverse();
});


// Define polyline options
// http://leafletjs.com/reference.html#polyline
var polyline_options = {
    color: '#000'
};

// Defining a polygon here instead of a polyline will connect the
// endpoints and fill the path.
// http://leafletjs.com/reference.html#polygon
var polygon = L.polygon(line_points, polyline_options).addTo(featureGroup);

bounds = featureGroup.getBounds();
console.log("bounds");
console.log(JSON.stringify(bounds));
map.fitBounds(bounds, {padding: [50, 50]})

The GeoJSONLint output looks the same as the image you posted. What is the output supposed to look like? — garnertb
– garnertb, Commented Jan 22, 2014 at 14:15
The GeoJSONLint version shows the proper background tiles, while my version does not. — Pro777
– Pro777, Commented Jan 22, 2014 at 15:02

geraldarthur · Accepted Answer · 2014-02-03 22:40:10Z

1

After the map is loaded, setView is causing a different set of tiles to be loaded than fitBounds. I commented out setView and got the proper tiles to load. Here's a live demo including source code with my edits.

answered Feb 3, 2014 at 22:40

geraldarthur

1,5341 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bad rendering with Leaflet Draw polygon

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related