CODEWITHSUNDEEP
leafletgeojsonmapbox
Pro777
Pro777

Reputation: 1704

Bad rendering with Leaflet Draw polygon

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]})

Upvotes: 0

Views: 1644

Answers (1)

geraldarthur
geraldarthur

Reputation: 1524

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.

Upvotes: 1

Related Questions