I have a set of bounding box arrays which I want to display over leaflet map in my application. The arrays look something like this with the bounding box co-ordinates in it:


The number of arrays can increase depending on the searching done by user. I want to have a functionality where it goes through each array and displays the bounding box on map. Any suggestions?

Here is how I am fetching the data and storing bounding box in separate array

    function map(obj){

               var o = obj.data.hits.hits;
               var b=[];
                for(var i in o){
                    o[i]._source.id = o[i]._source.compendium_id;
                    throw error()
                  catch (g){
                    console.error("missing spatial");
                $log.debug('mconfiging result: %o', o,b);
                return obj;
here is my map creation

angular.extend($scope, {
                center: {
                    lat: 51.505,
                    lng: 10.09,
                    zoom: 3
                controls: {
                  draw: {}


                layers: {
                    baselayers: {
                        mapbox_light: {
                            name: 'Mapbox Streets',
                            url: 'https://api.mapbox.com/styles/v1/mapbox/streets-v10/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmVoYW5zNTE2IiwiYSI6ImNpeWxjcWNkODAwNGwzM3FxamR6a2gxOXkifQ.PuUfs90MyfmVGYVqx0AoUw',
                            type: 'xyz',
                            layerOptions: {
                                apikey: 'pk.eyJ1IjoicmVoYW5zNTE2IiwiYSI6ImNpeWxjcWNkODAwNGwzM3FxamR6a2gxOXkifQ.PuUfs90MyfmVGYVqx0AoUw',
                                mapid: 'mapbox.streets',
                                format: '@2x.png'
                            layerParams: {
                                showOnSelector: false
                    overlays: {
                        draw: {
                            name: 'draw',
                            type: 'group',
                            visible: true,
                            layerParams: {
                                showOnSelector: false



           leafletData.getMap().then(function(map) {

               leafletData.getLayers().then(function(baselayers) {
                 var drawnItems = baselayers.overlays.draw;
                  map.on('draw:created', function (e) {

                    var layer = e.layer;



1 Answer 1


I'm not really sure about the array of bounding box coordinates in the example - the second and fourth points are identical, meaning this will never make a box.

In any case, have you looked at L.Rectangle?

// starting with the coordinate array you posted, 
// but arbitrarily changed the last point to 52 from 51
var box = [-2.362060546875, 51.96245837645124, 7.62162297964096, 52.96245837645124];

// define rectangle geographical bounds
var bounds = [[box[1], box[0]], [box[3], box[2]]];

// create an orange rectangle
L.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

This could easily be extended to work with an array of arrays

  • thanks for answering. yea i tried this but the problem is that plain leaflet (L.rectangle or L.geojson) don't work with angular leaflet directive which i am using. do you know a workaround for that? plus i am also confused as to how would this be extended when working with multiple arrays as determining coordinates and styling for each box?
    – Rehan
    Feb 22, 2017 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.