1

I am currently working on a project that has to display geojson data on a map.

I am using the leaflet-directive for AngularJS and it works fine.

My map is correctly displayed with the geojson data.

ANGULAR CONTROLLER

angular.extend($scope, {
    intersection: {
        lat: 50.891,
        lng: 4.258,
        zoom: 14
    },
    defaults: {
        scrollWheelZoom: false
    },
    geojson : {},
    layers: {
        baselayers: {
            xyz: {
                name: 'OpenStreetMap (XYZ)',
                url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                type: 'xyz'
            }
        },
        overlays: {}
    }
});

$scope.$watch("intersection.zoom", function(zoom) {
    if(zoom > 17){
        $scope.layers.overlays = {
            wms: {
                name: 'intersectionDraw',
                type: 'wms',
                visible: true,
                url: 'img/map.png'
            }
        }
    };
});

Now I would like to add a feature. I would like to display a png drawing when my zoom reaches the max zoom.For the moment, my code is displaying the png in mosaic. I want this png to get the full height and width of my map and see only this. There is no need to zoom more on this png but if I zoom out the "normal" map will be shown again

The mosaic PNG enter image description here

Weedoze
  • 13,683
  • 1
  • 33
  • 63

1 Answers1

0

Use a L.ImageOverlay. See Leaflet single picture and https://github.com/Leaflet/Leaflet/blob/master/debug/map/image-overlay.html

IvanSanchez
  • 18,272
  • 3
  • 30
  • 45
  • How can I use this with the angular-leaflet-directive ? – Weedoze Jun 24 '16 at 14:33
  • See the [example of using a `ImageOverlay` in the leaflet-angular documentation](http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/layers/imageoverlay-example). Apparently you can create a layer of type `imageOverlay`, with options as per the non-angular `L.ImageOverlay`. – IvanSanchez Jun 24 '16 at 14:39
  • Thx I did it but the image is totally transform and does not fit the whole size – Weedoze Jun 27 '16 at 10:34
  • + My geoJSON does not appears over the image – Weedoze Jun 27 '16 at 13:54