tombatossals / angular-leaflet-directive

AngularJS directive to embed an interact with maps managed by Leaflet library
http://tombatossals.github.io/angular-leaflet-directive
MIT License
1.5k stars 637 forks source link

How to change TileLayerWMS? #1008

Closed endigo closed 8 years ago

endigo commented 8 years ago

'tiles' diretive uses only TileLayer. not TileLayerWMS. I want do like this. http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/basic/tiles-example

tombatossals commented 8 years ago

Ok seems a useful feature and easy to code, I can take a look on this if you help me.

Do you have any source of WMS that we can use for an example?

tombatossals commented 8 years ago

@ENDiGo, I think the example you need is this:

http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/layers/overlays-simple-example

The "tiles" example you referenced before is used when you want to load a simple layer in a map, but normally you are using WMS with a baselayer down, and the WMS layer at from.

In that example you can see how the layer of the USA States is a WMS layer.

endigo commented 8 years ago

@tombatossals thanks for your response.

my controller code:

$scope.tiles = {
 standard: {
                    name: 'MAP Standard',
                    type: 'wms',
                    url: $window.config.tileserver,
                    layerParams: {
                        layers: 'layer:standard',
                        format: 'image/png',
                        transparent: true,
                        tiled: true,
                        version: '1.3.0',
                        maxZoom: 19
                    }
                },                
                blue: {
                    name: 'MAP Blue',
                    type: 'wms',
                    url: $window.config.tileserver,
                    layerParams: {
                        layers: 'layer:blue',
                        format: 'image/png',
                        transparent: true,
                        tiled: true,
                        version: '1.3.0',
                        maxZoom: 19
                    }
                },
}

in my html

 <leaflet center="options.center" maxbounds="options.maxBounds" tiles="tiles" defaults="options.defaults" controls="options.controls" url-hash-center="yes" id="map-canvas"></leaflet>

Then I want to change between above wms tile layers like this example http://tombatossals.github.io/angular-leaflet-directive/examples/0107-basic-tiles-example.html

tombatossals commented 8 years ago

Ok, so the trasparency overlays doesn't fit your needs?

We could code the TileLayerWMS funcionality, but I really need a WMS server to create an example to show it working.

Are you using a public WMS service? Could you publish the contents of "$window.config.tileserver", or is a private server?

endigo commented 8 years ago

It doesn't fit my needs. You may use this url: https://api.minu.mn/wms

standard: {
                    name: 'MAP Standard',
                    type: 'wms',
                    url: 'https://api.minu.mn/wms',
                    layerParams: {
                        layers: 'mongolid:mimap',
                        format: 'image/png',
                        transparent: true,
                        tiled: true,
                        version: '1.3.0',
                        attribution: "MINU Map",
                        maxZoom: 19
                    }
                }

and center is

lat: 47.918464,
lng: 106.917678,

Thank you

tombatossals commented 8 years ago

Hi @ENDiGo, I have added this functionality with this commit: https://github.com/tombatossals/angular-leaflet-directive/commit/50e4449c6a91129c10ee1aebde74159e4c0c31db

You have an example included so it's easy to know how to use it. But the WMS server you provide us shows an error loading tiles, for example this:

https://api.minu.mn/wms?SERVICE=WMS&REQUEST=GetMap&VERSION=1.1.1&LAYERS=&STYLES=&FORMAT=image%2Fjpeg&TRANSPARENT=false&HEIGHT=256&WIDTH=256&SRS=EPSG%3A3857&BBOX=-313086.06785608194,6731350.458905762,-156543.03392804097,6887893.4928338

Do you know what's the problem loading tiles that the minu.mn server refers?

tombatossals commented 8 years ago

The published example is this, but of course, no tiles loading because of the error message commented before:

http://tombatossals.github.io/angular-leaflet-directive/examples/0127-basic-tiles-wms-example.html

Any ideas @ENDiGo?

endigo commented 8 years ago

it's work with this layers.

layers: 'mongolid:mimap',
layers: 'mongolid:mimap_blue', // it's published not yet.

And center is must be

lat: 47.918464,
lng: 106.917678,

We have only Ulaanbaatar tiles. thanks

tombatossals commented 8 years ago

That's great @ENDiGo , I have added all the configuration you provided, but I'm still unable to see any tile. Maybe I need to have a localhost server of tiles running?

endigo commented 8 years ago

Hmm, it's working fine in https://map.minu.mn/beta In this example http://tombatossals.github.io/angular-leaflet-directive/examples/0127-basic-tiles-wms-example.html tiles load request hasn't any parameters.

tombatossals commented 8 years ago

I'm going to rework&redesign angular-leaflet-directive to be compatible with Leaflet v1.0. It will mantain almost all its functionality, and will be compatible with the current features of the directive, but I must start from a fresh point, so I'm going to close this issue. If you think it must be worked with the new version, please reopen it.

endigo commented 8 years ago

Ok, thank you