1

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:

Array[4]
0:
-2.362060546875
1:
51.96245837645124
2:
7.62162297964096
3:
51.96245837645124

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;
                    try{
                    b.push(o[i]._source.metadata.o2r.spatial.union.geojson.bbox);
                    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: {
                  scale:true,
                  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;


                    drawnItems.addLayer(layer);


                    console.log(JSON.stringify(layer.toGeoJSON()));
                  });
               });
           });
2

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);
map.fitBounds(bounds);

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 '17 at 9:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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