Skip to content

Instantly share code, notes, and snippets.

@apollolm

apollolm/gist:8720143

Forked from fnicollet/gist:5764080
Last active August 29, 2015 13:55
Show Gist options
  • Save apollolm/8720143 to your computer and use it in GitHub Desktop.
Save apollolm/8720143 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Ryan Whitley revised this gist Jan 30, 2014. No changes.
  2. Ryan Whitley revised this gist Jan 30, 2014. 1 changed file with 41 additions and 64 deletions.
    105 changes: 41 additions & 64 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,42 +1,18 @@
    goog.provide('L.SingleTileWMSLayer');
    /*
    * from - https://gist.github.com/fnicollet/5764080
    * Modified by Ryan Whitley - Jan 30, 2013
    * L.DynamicSingleTile uses L.ImageOverlay to display a single-tile layer from node-mapnik.
    * url parameter must accept width, height and bbox.
    */

    goog.require('L.Map');


    L.SingleTileWMSLayer = L.ImageOverlay.extend({
    defaultWmsParams: {
    service: 'WMS',
    request: 'GetMap',
    version: '1.1.1',
    layers: '',
    styles: '',
    format: 'image/jpeg',
    transparent: false
    },
    initialize: function (url, options) { // (String, Object)
    L.DynamicSingleTile = L.ImageOverlay.extend({
    initialize: function (url, bounds, options) { // (String, Object)

    this._url = url;
    if (url.indexOf("{s}") != -1){
    if (url.indexOf("{s}") != -1) {
    this.options.subdomains = options.subdomains = '1234';
    }
    var wmsParams = L.extend({}, this.defaultWmsParams);

    /*
    if (options.detectRetina && L.Browser.retina) {
    wmsParams.width = wmsParams.height = this.options.tileSize * 2;
    } else {
    wmsParams.width = wmsParams.height = this.options.tileSize;
    }
    */
    for (var i in options) {
    if (!this.options.hasOwnProperty(i)) {
    wmsParams[i] = options[i];
    }
    }

    this.wmsParams = wmsParams;

    // = imageSwap et affichée now
    this._isSwap = false;
    this._imageSwap = null;

    @@ -46,8 +22,6 @@ L.SingleTileWMSLayer = L.ImageOverlay.extend({
    onAdd: function (map) {
    this._map = map;

    var projectionKey = parseFloat(this.wmsParams.version) >= 1.3 ? 'crs' : 'srs';
    this.wmsParams[projectionKey] = map.options.crs.code;
    //
    this._bounds = map.getBounds();
    // pan
    @@ -56,8 +30,10 @@ L.SingleTileWMSLayer = L.ImageOverlay.extend({
    if (map.options.zoomAnimation && L.Browser.any3d) {
    map.on('zoomanim', this._onZoomAnim, this);
    }

    // request a first image on add
    this._onViewReset();

    // override
    //L.ImageOverlay.prototype.onAdd.call(this, map);
    },
    @@ -66,7 +42,7 @@ L.SingleTileWMSLayer = L.ImageOverlay.extend({
    // super()
    L.ImageOverlay.prototype.onRemove.call(this, map);
    // add
    if (this._imageSwap){
    if (this._imageSwap) {
    map.getPanes().overlayPane.removeChild(this._imageSwap);
    }
    map.off('moveend', this._onViewReset, this);
    @@ -75,27 +51,19 @@ L.SingleTileWMSLayer = L.ImageOverlay.extend({

    _onViewReset: function () {
    this._futureBounds = this._map.getBounds();
    var map = this._map;
    var crs = map.options.crs;
    var nwLatLng = this._futureBounds.getNorthWest();
    var seLatLng = this._futureBounds.getSouthEast();
    var topLeft = this._map.latLngToLayerPoint(nwLatLng);
    var bottomRight = this._map.latLngToLayerPoint(seLatLng);
    var size = bottomRight.subtract(topLeft);
    var nw = crs.project(nwLatLng),
    se = crs.project(seLatLng);
    var bbox = [nw.x, se.y, se.x, nw.y].join(',');
    var url = this._url;
    this.wmsParams.width = size.x;
    this.wmsParams.height = size.y;
    var imageSrc = url + L.Util.getParamString(this.wmsParams, url) + "&bbox=" + bbox;

    var size = this._map.getSize();
    var b = this._map.getBounds();
    var metersBounds = { southWest: L.CRS.EPSG3857.project(b.getSouthWest()), northEast: L.CRS.EPSG3857.project(b.getNorthEast()) };
    var imageSrc = this._url + L.Util.getParamString(this.Params, this._url) + "&width=" + size.x + "&height=" + size.y + "&bbox=" + metersBounds.southWest.x + "," + metersBounds.northEast.y + "," + metersBounds.northEast.x + "," + metersBounds.southWest.y;

    this.swapImage(imageSrc, this._futureBounds);
    },


    _reset: function () {
    var el = this._isSwap ? this._imageSwap : this._image;
    if (!el){
    if (!el) {
    return;
    }
    /** @type {L.LatLng} */
    @@ -112,16 +80,16 @@ L.SingleTileWMSLayer = L.ImageOverlay.extend({



    _onZoomAnim: function(){
    if (this._imageSwap){
    _onZoomAnim: function () {
    if (this._imageSwap) {
    this._imageSwap.style.visibility = 'hidden';
    }
    if (this._image){
    if (this._image) {
    this._image.style.visibility = 'hidden';
    }
    },
    _onSwapImageLoad:function () {
    if (this._isSwap){
    _onSwapImageLoad: function () {
    if (this._isSwap) {
    this._imageSwap.style.visibility = 'hidden';
    this._image.style.visibility = '';
    } else {
    @@ -133,26 +101,31 @@ L.SingleTileWMSLayer = L.ImageOverlay.extend({
    this._reset();

    },


    swapImage:function (src, bounds) {
    if (!this._imagesCreated){
    _updateOpacity : function (){
    L.DomUtil.setOpacity(this._image, this.options.opacity);
    L.DomUtil.setOpacity(this._imageSwap, this.options.opacity);
    },
    swapImage: function (src, bounds) {
    if (!this._imagesCreated) {
    this._image = this._createImageSwap();
    this._imageSwap = this._createImageSwap();
    this._imagesCreated = true;
    this._imagesCreated = true;
    }
    if (this._isSwap){
    if (this._isSwap) {
    this._image.src = src;
    } else {
    this._imageSwap.src = src;
    }

    this._updateOpacity();

    // do not assign the bound here, this will be done after the next image
    this._futureBounds = bounds;
    // allows to re-position the image while waiting for the swap.
    // attention : the does not work while resizing, because of the wrong bound (size in pixel)
    this._reset();
    },
    _createImageSwap:function () {
    _createImageSwap: function () {
    var el = L.DomUtil.create('img', 'leaflet-image-layer');
    L.Util.extend(el, {
    galleryimg: 'no',
    @@ -165,4 +138,8 @@ L.SingleTileWMSLayer = L.ImageOverlay.extend({

    return el;
    }
    });
    });

    L.dynamicSingleTile = function (url, bounds, options) {
    return new L.DynamicSingleTile(url, bounds, options);
    };
  3. @fnicollet fnicollet created this gist Jun 12, 2013.
    168 changes: 168 additions & 0 deletions gistfile1.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,168 @@
    goog.provide('L.SingleTileWMSLayer');

    goog.require('L.Map');


    L.SingleTileWMSLayer = L.ImageOverlay.extend({
    defaultWmsParams: {
    service: 'WMS',
    request: 'GetMap',
    version: '1.1.1',
    layers: '',
    styles: '',
    format: 'image/jpeg',
    transparent: false
    },
    initialize: function (url, options) { // (String, Object)

    this._url = url;
    if (url.indexOf("{s}") != -1){
    this.options.subdomains = options.subdomains = '1234';
    }
    var wmsParams = L.extend({}, this.defaultWmsParams);

    /*
    if (options.detectRetina && L.Browser.retina) {
    wmsParams.width = wmsParams.height = this.options.tileSize * 2;
    } else {
    wmsParams.width = wmsParams.height = this.options.tileSize;
    }
    */
    for (var i in options) {
    if (!this.options.hasOwnProperty(i)) {
    wmsParams[i] = options[i];
    }
    }

    this.wmsParams = wmsParams;

    // = imageSwap et affichée now
    this._isSwap = false;
    this._imageSwap = null;

    L.setOptions(this, options);
    },

    onAdd: function (map) {
    this._map = map;

    var projectionKey = parseFloat(this.wmsParams.version) >= 1.3 ? 'crs' : 'srs';
    this.wmsParams[projectionKey] = map.options.crs.code;
    //
    this._bounds = map.getBounds();
    // pan
    map.on('moveend', this._onViewReset, this);
    // hide on zoom
    if (map.options.zoomAnimation && L.Browser.any3d) {
    map.on('zoomanim', this._onZoomAnim, this);
    }
    // request a first image on add
    this._onViewReset();
    // override
    //L.ImageOverlay.prototype.onAdd.call(this, map);
    },

    onRemove: function (map) {
    // super()
    L.ImageOverlay.prototype.onRemove.call(this, map);
    // add
    if (this._imageSwap){
    map.getPanes().overlayPane.removeChild(this._imageSwap);
    }
    map.off('moveend', this._onViewReset, this);
    map.off('zoomanim', this._onZoomAnim, this);
    },

    _onViewReset: function () {
    this._futureBounds = this._map.getBounds();
    var map = this._map;
    var crs = map.options.crs;
    var nwLatLng = this._futureBounds.getNorthWest();
    var seLatLng = this._futureBounds.getSouthEast();
    var topLeft = this._map.latLngToLayerPoint(nwLatLng);
    var bottomRight = this._map.latLngToLayerPoint(seLatLng);
    var size = bottomRight.subtract(topLeft);
    var nw = crs.project(nwLatLng),
    se = crs.project(seLatLng);
    var bbox = [nw.x, se.y, se.x, nw.y].join(',');
    var url = this._url;
    this.wmsParams.width = size.x;
    this.wmsParams.height = size.y;
    var imageSrc = url + L.Util.getParamString(this.wmsParams, url) + "&bbox=" + bbox;
    this.swapImage(imageSrc, this._futureBounds);
    },


    _reset: function () {
    var el = this._isSwap ? this._imageSwap : this._image;
    if (!el){
    return;
    }
    /** @type {L.LatLng} */
    var nwLatLng = this._bounds.getNorthWest();
    var seLatLng = this._bounds.getSouthEast();
    var topLeft = this._map.latLngToLayerPoint(nwLatLng);
    var bottomRight = this._map.latLngToLayerPoint(seLatLng);
    var size = bottomRight.subtract(topLeft);
    L.DomUtil.setPosition(el, topLeft);
    el.width = size.x;
    el.height = size.y;

    },



    _onZoomAnim: function(){
    if (this._imageSwap){
    this._imageSwap.style.visibility = 'hidden';
    }
    if (this._image){
    this._image.style.visibility = 'hidden';
    }
    },
    _onSwapImageLoad:function () {
    if (this._isSwap){
    this._imageSwap.style.visibility = 'hidden';
    this._image.style.visibility = '';
    } else {
    this._imageSwap.style.visibility = '';
    this._image.style.visibility = 'hidden';
    }
    this._isSwap = !this._isSwap;
    this._bounds = this._futureBounds;
    this._reset();

    },


    swapImage:function (src, bounds) {
    if (!this._imagesCreated){
    this._image = this._createImageSwap();
    this._imageSwap = this._createImageSwap();
    this._imagesCreated = true;
    }
    if (this._isSwap){
    this._image.src = src;
    } else {
    this._imageSwap.src = src;
    }
    // do not assign the bound here, this will be done after the next image
    this._futureBounds = bounds;
    // allows to re-position the image while waiting for the swap.
    // attention : the does not work while resizing, because of the wrong bound (size in pixel)
    this._reset();
    },
    _createImageSwap:function () {
    var el = L.DomUtil.create('img', 'leaflet-image-layer');
    L.Util.extend(el, {
    galleryimg: 'no',
    onselectstart: L.Util.falseFn,
    onmousemove: L.Util.falseFn,
    onload: L.Util.bind(this._onSwapImageLoad, this)
    });
    this._map._panes.overlayPane.appendChild(el);
    el.style.visibility = '';

    return el;
    }
    });