Comment ouvrir une carte dessinée à partir d'une classe de dépliant en tant que fenêtre contextuelle ou dans un nouvel onglet?

Question

J'ai les lignes de code suivantes qui génèrent une carte, comme on le voit utilise la classe leaflet pour le rendre. Ce qui fonctionne très bien, sauf que j'ai besoin en plus de la carte pour ouvrir une nouvelle fenêtre pop-up, ou dans un nouvel onglet en cliquant n'importe où sur la carte.

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> 

Comment dois-je aller sur la réalisation de la même chose? Si aucun modèle de code pertinent n'a été trouvé en ligne, ce qui a été utile pour ce scénario particulier

Answer 1

Si, dans le modèle du modal, vous avez une carte avec le même identifiant de la carte dans la vue principale a services l'objet carte (pour le partager entre les contrôleurs), vous pouvez avoir les mêmes objets dans modal et dans la vue.

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; 
    }, 
    }}); 

Ensuite, vous pouvez utiliser somethings comme:

$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(); 
}); 

Ou au lieu d'utiliser des marqueurs dans la directive-feuillet angulaire vous pouvez créer une couche:

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