1

I have the following lines of code that generates a map, as seen it makes use of leaflet class to render it. Which works just fine, except that I additionally require the map to open as a new pop up window, or in a new tab on clicking anywhere on the map.

Code:- 

<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.0/leaflet.draw.js"></script>


/* miscellaneous stuff here */

    <div class="col-sm-6 col-sm-offset-4">
    <leaflet class="showMap" defaults="mappingConfig.defaults" center="mappingConfig.cityCenter" markers="markers" controls="controls"></leaflet>
    </div>

How should i go about achieving the same? I've not come across any relevant code examples online, which were helpful to this particular scenario

code.rhyme
  • 67
  • 4
  • 12
  • Could you please edit and clarify your question? Do you mean that you want a new tab to open up for the map? (In general, to open something in a new tab, use the `target="_blank"` attribute in the link, e.g. http://www.w3schools.com/TAgs/tryit.asp?filename=tryhtml_link_target) Or are you trying to have a click on the map open another map inside a Leaflet popup? Please clarify. :) – user2441511 Dec 09 '16 at 17:01
  • Hi, what I need is that a new modal pop up window should open on clicking anywhere on the map. This modal pop up should contain the map data itself. – code.rhyme Dec 12 '16 at 05:30

1 Answers1

0

If, in the template of the modal you have a map with the same id of the map in the main view, and put in a services the map object (to share it between the controllers), you can have same objects in modal and in the view.

angular.module('mymap.services', []).factory('MapServices', function () {
var map ={ 
center : {
    lat: 49,
    lng: 34,
    zoom: 8
}, defaults : {
    zoomControl: false,
    attributionControl: true
},
baselayers : {
    xyz: {....},
markers:[....]
};
return {
    getMap: function () {
        return map;
    },
  }});

Then you can use somethings like:

$scope.$on('leafletDirectiveMarker.map.click', function (event, args)    {
    $scope.map.center.lat = args.model.lat;
    $scope.map.center.lng = args.model.lng;
    $scope.valueModal = {};
    $scope.valueModal.properties = args.model.properties.properties;
    //show modal
    $scope.modalPopup.show();
});

Or instead to use markers into the angular-leaflet directive you can create a layer:

leafletData.getMap("map").then(function (map) {
  map.invalidateSize();
  //resp is the geojson
  var geojson = new L.GeoJSON(resp, {
                    onEachFeature: function (feature, layer) {
                        layer.on('click', function (e) {
                            $scope.map.center.lat = feature.geometry.coordinates[1];
                            $scope.map.center.lng = feature.geometry.coordinates[0];
                            $scope.feature = feature;
                            //open a modal
                            $scope.openLayersModal();
                        });
                    }
                });
                markers.addLayer(geojson);
                map.addLayer(markers);

            }, function (err) {
                console.log('ERROR', err.status);
            });
        });
Zigmund
  • 1
  • 2