Javascript WMS Source

Map Plus helps, usage, issues, bug report, downloads...

Javascript WMS Source

Postby ddrinka » 2018-10-29 23:48

I'd like to add a WMS source using Javascript. Here's the URL that works fine in simple mode:
Code: [Select all]
https://digital.weather.gov/wms.php?LAYERS=ndfd.conus.totalsnowamt,ndfd.conus.totalsnowamt.points&FORMAT=image%2Fpng&TRANSPARENT=TRUE&VERSION=1.3.0&VT=2018-11-02T00%3A00&EXCEPTIONS=INIMAGE&SERVICE=WMS&REQUEST=GetMap&STYLES=&CRS=EPSG%3A3857&BBOX={$bbox_3857}&WIDTH=512&HEIGHT=512
 
Text


I need to calculate "VT=" for tomorrow's date.

How can I use {$bbox_3857} with Javascript?
User avatar
ddrinka
★★
 
Posts: 8
Joined: 2018-01-29 23:57

Re: Javascript WMS Source

Postby Zax » 2018-10-30 1:56

ddrinka wrote:How can I use {$bbox_3857} with Javascript?


Although you can google the maths for how to calculate the bbox_3857 from x,y,z with JS, it is suggested to just include the dynamic param of "{$bbox_3857}" in the return url of the "getTileUrl" function and the app knows how to handle it.

Something like:

Code: [Select all]
function getTileUrl(z, x, y)
{
    var calculatedVT;

    //...your code

    return "https://digital.weather.gov/wms.php........&VT" + calculatedVT + "&.....BBOX={$bbox_3857}&WIDTH=512....";
}
 
Javascript
Zax Zeng
Duwei Technology
User avatar
Zax
★★★★★
 
Posts: 1122
Joined: 2011-07-27 0:54

Re: Javascript WMS Source

Postby ddrinka » 2018-10-30 21:30

Oh, great, I didn't even think to try that. I assumed I'd have to do _something_ with the x,y,z passed in.

Here's my final code that's working great:
Code: [Select all]
var name = "Cumulative Snow Overnight";
var minZoom = 0;
var maxZoom = 7;
var projection = "WM";

var daysAway = 1;
var today = new Date();
var requestDate = new Date();
requestDate.setDate(today.getDate() + daysAway);
var strDate = requestDate.getFullYear() + "-" + ("0" + (requestDate.getMonth()+1)).slice(-2) + "-" + ("0" + requestDate.getDate()).slice(-2) + "T06:00";

function getTileUrl(z, x, y)
{
  return "https://digital.weather.gov/wms.php?LAYERS=ndfd.conus.totalsnowamt,ndfd.conus.totalsnowamt.points&FORMAT=image%2Fpng&TRANSPARENT=TRUE&VERSION=1.3.0&VT=" + strDate + "&EXCEPTIONS=INIMAGE&SERVICE=WMS&REQUEST=GetMap&STYLES=&CRS=EPSG%3A3857&BBOX={$bbox_3857}&WIDTH=512&HEIGHT=512"
}
 
Javascript
User avatar
ddrinka
★★
 
Posts: 8
Joined: 2018-01-29 23:57

Re: Javascript WMS Source

Postby Zax » 2018-11-01 1:48

First, it is suggested to move all date calculations codes into the getTileUrl() function, so that it could be evaluated every time when the function is called (while downloading a tile).
If you put them outside the getTileUrl(), they are only evaluated once when the map is added to the main map canvas, for example, after one day, if you do not do "hide from map" and "show on map" operations on it, the date string (strDate) is still the value of yesterday.


Then, please also notice that both the app and the underneath map rendering engine (iOS's MapKit) will cache the tiles you've downloaded(viewed), since both caches are based on the tile index of x, y, z, not the tile url, for dynamic tile content, like yours which changes every day, they could not be updated automatically unless caches are cleared, so you have to:

For caches of the app:
Set the "Cache Expire" in this map's detail information page as "1 day" or shorter.

For caches of the underneath iOS map engine:
You may have to go to the main screen > "Layer" button > Custom Maps > choose the map > "Reload On Map", in order to refresh the map content manually. If the reload not work, then try "hide from map" and then "show on map" instead.
Zax Zeng
Duwei Technology
User avatar
Zax
★★★★★
 
Posts: 1122
Joined: 2011-07-27 0:54


Return to Map Plus - Forums