maplibre-gl-js : load offline (local) glyphs, sprites and mbtiles - HTML website - javascript

I'm currently coding a simple HTML page with embedded Javascript to visualise a local mbtiles, including local glyphs and sprites.
The html index.html is :
...
<script src="https://unpkg.com/maplibre-gl#2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl#2.1.9/dist/maplibre-gl.css" rel="stylesheet" />
...
<body>
<div id="map"></div>
</body>
<script type="module" src="./index.js" async defer></script>
The javascript index.js is :
var map = new maplibregl.Map({
container: 'map',
style:
'styles/style.json',
center: [174.746344, -36.8899343],
zoom: 11.15
});
and the goal is to load a style.json file that would define the mbtiles, sprites and glyphs local location.
I'm currently using the OSM Bright style, copied over locally on my machine, within the style.json file and the goal is to swap any connection to remote files by local files:
glyphs
"glyphs": "./glyphs/{fontstack}/{range}.pbf",
It works well for the glyphs
sprites
"sprite": "./sprites/sprite",
I have the following error :
Unable to parse URL "./sprites/sprite"
mbtiles
"sources": {
"openmaptiles": {
"type": "vector",
"url": "./mbtiles/country.mbtiles"
}
},
I got the following error : Error: Unexpected token 'S', "SQLite for"... is not valid JSON
I'm definitely missing some protocols here, and I can't find any answer to my question so far, knowing :
I'm not looking to build an IOS/Android app : so this useful website for instance https://medium.com/#ty2/how-to-display-offline-maps-using-maplibre-mapbox-39ad0f3c7543 doesn't apply to my case -> I've tried to add
asset://sprites/sprite
or
mbtiles://country.mbtiles
but that doesn't work (neither for the glyphs, but it doesn't look like it's necessary any way)
this Load local .mbtiles with maplibre-gl-js looks like the closest to my need, but again the answer focus on application and not html, plus the question has not yet been fully resolved neither
So any help would be appreciated, especially I would be interested to know if this is even possible with the maplibre-gl.js library that I'm using as this might just not be possible. If that's the case, I would appreciate a similar answer with mapbox-gl.js if necessary, but still using local (offline) files.
In other words the main objective is to run a website (not an app) with maplibre (not mapbox - at least if possible) and only including local files.
Thanks for any feedback.

I know it's may be late, but nevertheless:
mbtiles:// protocol only works with maplibre-gl not with maplibre-gl-js as I know.
So I used pbf files. You can get them from mbtiles file with mbutil or from osm.pbf file with tilemaker.
Before converting from osm.pbf with tilemaker you should modify field "compress" to "none" in config-openmaptiles.json, or map won't be rendered.
For me only "glyphs" worked with relative path, but "sprite" and "tiles" with full path, like http://... (But I only tried python3 embedded http.server and uvicorn)
This is my excerpt from style.json:
"sources": {
"openmaptiles": {
"type": "vector",
"tiles": ["http://localhost:8000/data/tiles/{z}/{x}/{y}.pbf"],
"minzoom": 0,
"maxzoom": 14
}
},
"sprite": "http://localhost:8000/data/sprites/bright-v8",
"glyphs": "data/glyphs/{fontstack}/{range}.pbf",
"tiles" path should be in square brackets and you should provide "maxzoom" of your map (14 is a default for many maps, as I know) if you want overzoom to work.

Related

Google VR View for the Web

I'm trying to embed some 360 images on my site using Google VR View, but I'm having no luck getting anything to work. I'm following the Google provided documentation as a guide...
https://developers.google.com/vr/concepts/vrview-web
`window.addEventListener('load', onVrViewLoad)
function onVrViewLoad() {
var vrView = new VRView.Player('#vrview', {
image: 'img/jtree.jpg',
is_stereo: false
});
}`
I copied the example code, and am getting errors in the console (see attached screen shots)
Console Errors
Does anyone know of a tutorial that would better outline how to use this? Or possibly can someone shed some light on what I may be doing incorrectly?
You have to open your HTML file in a server.
Enable CORS https://enable-cors.org/server.html.
I find an easy way to enable CORS with the Chrome web server just for your experiment purpose.
I had absolutely no luck getting this to work with the instructions provided by Google - guess I'm not versed enough in coding. For me it only worked when I used the iframe, see https://www.museum-joanneum.at/spielwiese/360.
However, the view is still not exactly the same, the info-Tag is not layered over the image in the left lower corner like the demo on Google, but on top of the image and reduces the image height by about 30 pixels. Maybe that's related to the iframe since the instructions state, that the functionality isn't exactly the same as with the JavaScript API.
Also, for my images I had to select "false" for stereo in order to display correctly.
I hope this helps!
Looks like you are not setting up the directories properly. Is your web server set up so the root is the root of the repo? Are you also getting a 404 error? (looks like vrview.js is not being loaded)
As for places to get help with this, I recommend the vrview-web google group.
you need add this html id on web page.
<div id="vrview"></div>
Below JavaScript will call out the image on HTML.
var vrView;
var scenes = {
petra: {
image: 'images/petra.jpg',
preview: 'images/petra-preview.jpg'
}
}
function onLoad() {
vrView = new VRView.Player('#vrview', {
width: '100%',
height: 480,
image: 'images/blank.png',
is_stereo: false,
is_autopan_off: true
});
vrView.on('ready', onVRViewReady);
vrView.on('modechange', onModeChange);
vrView.on('getposition', onGetPosition);
vrView.on('error', onVRViewError);
}
function loadScene(id) {
console.log('loadScene', id);
// Set the image
vrView.setContent({
image: scenes[id].image,
preview: scenes[id].preview,
is_autopan_off: true
});
}
function onVRViewReady(e) {
console.log('onVRViewReady');
loadScene('petra');
}
function onModeChange(e) {
console.log('onModeChange', e.mode);
}
function onVRViewError(e) {
console.log('Error! %s', e.message);
}
function onGetPosition(e) {
console.log(e)
}
window.addEventListener('load', onLoad);
You can run those scripts only on the server and then only it will render the texture so you can add your all files in the wamp server path and access through or you can create a web project in asp.net, add your files and build the project. everything will be taken care of by the Visual Studio.
For example
download this sample Code
Add this in your wamp server path or create a project in visual
studio and add these files
Open your index.html file the in browser

Get Fonts through Flash ans JS

I have to check all available fonts istalled on user's system. Therefore, I try to use this tutorial. I compiled Fontlist.as with mxmlc compiler and included a JS file, which contains the populateFontList(fontArr) function.
I embed the SWF file with:
$("#flash").flash(
{
"src": "FontList.swf",
"width": "1",
"height": "1",
"swliveconnect": "true",
"id": "getfonts",
"name": "getfonts"
},
{ update: false }
);
If I open the page, it the SWF file will be embeded to the <div id="flash"></div> but the populateFontList(fontArr) function isn't fired.
Is there any trap which I fell in?
I would welcome every advise.
Many thanks!
Daniel
Ok I got it. My problem was, that I testet it locally. I installed the Flash Debugger and realised, that there was a security error #2060. The solution was to add the local path to flash player's global settings:
Global Settings

Hidden malicious script inserting code into html web page, how to remove/clean?

I just updated a website I'm working on, unfortunately a few links I didn't create are popping up in one of the corners. I could really use a bit of guidance as to how I should go about cleaning the site and removing all of it.
The only files I uploaded to the server were a handful of bootstrap css files, the index.html, and one image for a background. I've run aVast on all these files but they're coming up clean, although I'm not sure if this is a sufficient enough scan.
All files were uploaded using filezilla FTP.
I've opened up inspect element in chrome while loading the webpage and under resources it shows files being loaded that aren't mine and that I can't locate on the server. To be specific, one is an image file whose URL points to acint(dot)net and the other is a script called aci.js, which is located at acint(dot)net/aci.js (code below)
(function(n){n(window,"undefined"===typeof window._acic?{}:window._acic,"undefined"===typeof window._aci_debug?!1:window._aci_debug)})(function(n,f,t){function k(){if(!(this instanceof k))return new k;this.version="0.0.9";this.urlHit="//www.acint.net/hit/";this.urlJump="//www.acint.net/jump/";this.uid="";this.config={dataProvider:"",allowExtLinksTrack:!0,customData:null}}var v=!!t,s={};"object"==typeof JSON&&"function"==typeof JSON.stringify?s.stringify=function(a){return JSON.stringify(a)}:function(){function a(a){function b(a){return 10>
a?"0"+a:a}if(a&&"object"==typeof a){if(a instanceof Date)return isFinite(a.valueOf())?a.getUTCFullYear()+"-"+b(a.getUTCMonth()+1)+"-"+b(a.getUTCDate())+"T"+b(a.getUTCHours())+":"+b(a.getUTCMinutes())+":"+b(a.getUTCSeconds())+"Z":null;if(a instanceof String||a instanceof Number||a instanceof Boolean)return a.valueOf()}return a}function c(a){e.lastIndex=0;return e.test(a)?'"'+a.replace(e,function(a){var b=h[a];return"string"===typeof b?b:"\\u"+("0000"+a.charCodeAt(0).toString(16)).slice(-4)})+'"':'"'+
a+'"'}function d(e,u){var h,r,f,k,n=b,p,m=u[e],m=a(m);"function"===typeof q&&(m=q.call(u,e,m));switch(typeof m){case "string":return c(m);case "number":return isFinite(m)?String(m):"null";case "boolean":case "null":return String(m);case "object":if(!m)return"null";b+=g;p=[];if("[object Array]"===Object.prototype.toString.apply(m)){k=m.length;for(h=0;h<k;h+=1)p[h]=d(h,m)||"null";f=0===p.length?"[]":b?"[\n"+b+p.join(",\n"+b)+"\n"+n+"]":"["+p.join(",")+"]";b=n;return f}if(q&&"object"===typeof q)for(k=
q.length,h=0;h<k;h+=1)r=q[h],"string"===typeof r&&(f=d(r,m))&&p.push(c(r)+(b?": ":":")+f);else for(r in m)Object.prototype.hasOwnProperty.call(m,r)&&(f=d(r,m))&&p.push(c(r)+(b?": ":":")+f);f=0===p.length?"{}":b?"{\n"+b+p.join(",\n"+b)+"\n"+n+"}":"{"+p.join(",")+"}";b=n;return f}}var e,b,g,h,q;"function"!==typeof s.stringify&&(e=/[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g,h={"\b":"\\b","\t":"\\t","\n":"\\n","\f":"\\f","\r":"\\r",
'"':'\\"',"\\":"\\\\"},s.stringify=function(a,c,e){var h;g=b="";if("number"===typeof e)for(h=0;h<e;h+=1)g+=" ";else"string"===typeof e&&(g=e);if((q=c)&&"function"!==typeof c&&("object"!==typeof c||"number"!==typeof c.length))throw Error("JSONStub.stringify");return d("",{"":a})})}();var e={generateUUID:function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(a){var c=16*Math.random()|0;return("x"==a?c:c&3|8).toString(16)}).toLowerCase()},stringTrimLimit:function(a){a=a.replace(/\s+/gmi,
" ").replace(/^\s+|\s+$/g,"");1E3<a.length&&(a=a.substr(0,1E3));return a},getTimeZoneOffsetIso8601:function(){var a=function(a){return 10>a?"0"+a:a},c=(new Date).getTimezoneOffset();return(0<c?"-":"+")+a(Math.floor(Math.abs(c)/60))+":"+a(Math.abs(c)%60)},isObject:function(a){return"object"===typeof a&&"[object Object]"===Object.prototype.toString.call(a)},isArray:function(a){return"undefined"!==typeof Array.isArray?Array.isArray(a):"[object Array]"===Object.prototype.toString.call(a)},isEmptyObject:function(a){for(var c in a)return!1;
return!0},isString:function(a){return"string"===typeof a||a instanceof String},encodeUriParam:function(a){a=""+a;return encodeURIComponent instanceof Function?encodeURIComponent(a):escape(a)},implodeUriParams:function(a){var c,d=[];for(c in a)a.hasOwnProperty(c)&&d.push(c+"="+a[c]);return d.join("&")},makeRequestUri:function(a,c){return a+"?"+e.implodeUriParams(c)},makeRequestImage:function(a){(new Image).src=a},addEventListenerCrossBrowser:function(a,c,d){a.addEventListener?a.addEventListener(c,
d,!1):a.attachEvent?a.attachEvent("on"+c,d):"function"==typeof a["on"+c]&&(a["on"+c]=d)},addReadOnlyProperty:function(a,c,d){Object.defineProperty(a,c,{value:d,writeable:!1,enumerable:!0,configurable:!1})},fireEventCrossBrowser:function(a,c){var d,e=document;if(e.createEvent){var b=null;switch(c){case "click":case "dblclick":case "mousedown":case "mouseup":case "mouseover":case "mousemove":case "mouseout":case "mouseenter":case "mouseleave":b="MouseEvent";break;case "wheel":b="WheelEvent";break;case "load":case "unload":case "abort":case "error":case "select":case "resize":case "scroll":b=
"UIEvent";break;case "focus":case "focusin":case "focusout":case "blur":b="FocusEvent";break;case "beforeinput":case "input":b="InputEvent";break;case "keydown":case "keyup":b="KeyboardEvent";break;case "compositionstart":case "compositionupdate":case "compositionend":b="CompositionEvent"}try{d=e.createEvent(b)}catch(g){try{d=e.createEvent("HtmlEvents")}catch(h){try{d=e.createEvent("Event")}catch(q){throw Error("Cannot create event object for specified event: "+c);}}}d.initEvent(c,!0,!1);a.dispatchEvent(d)}else if(e.createEventObject)d=
e.createEventObject(),d.eventType=c,a.fireEvent("on"+c,d);else if("function"==typeof a["on"+c])a["on"+c]()},fireSameEventCrosBrowser:function(a,c,d){var e=document,b;if(e.createEvent)try{b=new d.constructor(c,d),a.dispatchEvent(b)}catch(g){b=e.createEvent("MouseEvent"),b.initMouseEvent(d.type,!0,!0,window,0,d.screenX,d.screenY,d.clientX,d.clientY,d.ctrlKey,d.altKey,d.shiftKey,d.metaKey,d.button,d.relatedTarget||null),a.dispatchEvent(b)}else if(e.createEventObject)b=e.createEventObject(d),b.eventType=
c,a.fireEvent("on"+c,b);else if("function"==typeof a["on"+c])a["on"+c]()},bindOnReady:function(a){function c(){e||(e=!0,a())}function d(){if(!e)try{h.doScroll("left"),c()}catch(a){setTimeout(d,10)}}var e=!1,b=window,g=document,h=g.documentElement;if(g.addEventListener)g.addEventListener("DOMContentLoaded",c,!1);else if(g.attachEvent){try{var q=null!=b.frameElement}catch(l){}h.doScroll&&!q&&d();g.attachEvent("onreadystatechange",function(){"complete"===g.readyState&&c()})}else if(b.addEventListener)b.addEventListener("load",
c,!1);else if(b.attachEvent)b.attachEvent("onload",c);else{var f=b.onload;b.onload=function(){f&&f();c()}}}};k.prototype.init=function(){if(!this.isAlreadyLoaded()){var a=this,c,d=document;this.uid=e.generateUUID();this.parseConfig();c=e.makeRequestUri(this.urlHit,this.collectDataOnInit());e.makeRequestImage(c);if(!0===this.config.allowExtLinksTrack){var f=function(b){var d=window,c=!1,f;b=b||d.event;var l=b.target||b.srcElement,k=l;if(!("tagName"in l&&"a"==l.tagName.toLowerCase())){for(c=l.parentNode;c;){if("tagName"in
c&&"a"==c.tagName.toLowerCase()){f=c;break}if("parentNode"in c)c=c.parentNode;else break}if(f)l=f;else return}if("href"in l&&/^(http:|https:|)\/\/.+/.test(l.href)&&!("hostname"in l&&l.hostname===d.location.hostname)){if(b.shiftKey||b.altKey||b.ctrlKey||b.metaKey)c=!0;c=!0;l.hasOwnProperty("_delayClick")?!1===l.hasOwnProperty("_canSkipDelay")?"preventDefault"in b?b.preventDefault():b.returnValue=!1:(delete l._canSkipDelay,delete l._delayClick):(d=e.makeRequestUri(a.urlJump,a.collectDataOnClick(b,l)),
e.makeRequestImage(d),!1===c&&(l._delayClick=!0,setTimeout(function(){l._canSkipDelay=!0;e.fireSameEventCrosBrowser(k,"click",b)},200),"preventDefault"in b?b.preventDefault():b.returnValue=!1))}};"interactive"==d.readyState||"complete"==d.readyState?e.addEventListenerCrossBrowser(d.body,"click",f):e.bindOnReady(function(){e.addEventListenerCrossBrowser(d.body,"click",f)})}}};k.prototype.isAlreadyLoaded=function(){if("object"==typeof n._acil&&"function"==typeof n._acil.isLoaded)return!0;"undefined"!==
typeof Object.defineProperty?(e.addReadOnlyProperty(n,"_acil",{}),e.addReadOnlyProperty(n._acil,"isLoaded",function(){return!0})):n._acil=function(){return{isLoaded:function(){return!0}}}();return!1};k.prototype.parseConfig=function(){if(e.isObject(f)&&!e.isEmptyObject(f)&&(f.hasOwnProperty("dataProvider")&&(this.config.dataProvider=isNaN(parseInt(f.dataProvider,10))?"":Math.abs(parseInt(f.dataProvider,10))),f.hasOwnProperty("allowExtLinksTrack")&&(this.config.allowExtLinksTrack=!0===f.allowExtLinksTrack),
f.hasOwnProperty("customData"))){var a=f.customData;if(!("undefined"===typeof a||null==a||"function"==typeof a||e.isString(a)&&0===a.length||e.isObject(a)&&e.isEmptyObject(a)||e.isArray(a)&&0===a.length)){try{if(e.isObject(a)||e.isArray(a)){if(a=s.stringify(a),"{}"===a||"[]"===a)a=null}else e.isString(a)||(a=a.toString(),0===a.length&&(a=null))}catch(c){if(a=null,!0===t)throw c;}this.config.customData=a}}};k.prototype.dataAddObligatoryParams=function(a){a.v=this.version;a.uid=this.uid;a.dp=this.config.dataProvider;
a.tz=e.encodeUriParam(e.getTimeZoneOffsetIso8601());a.nc=Math.random().toString().substr(2,8)};k.prototype.collectDataOnInit=function(){var a=document,c=window,d={u:e.encodeUriParam(c.location.href),r:e.encodeUriParam(a.referrer||""),rs:c.screen.width+"x"+c.screen.height,t:e.encodeUriParam(e.stringTrimLimit(a.title)),oE:+this.config.allowExtLinksTrack};null!==this.config.customData&&(d.cd=e.encodeUriParam(e.stringTrimLimit(this.config.customData)));c.parent!==c&&(d["if"]=e.encodeUriParam(c.location.href),
d.u=e.encodeUriParam(a.referrer||""),d.r="");this.dataAddObligatoryParams(d);return d};k.prototype.collectDataOnClick=function(a,c){var d=document,f=window,b={vP:"",c:"",r:"",u:"",aT:"",hT:0},g=a.target.ownerDocument||d,d=g.documentElement,g=g.body;b.vP=(f.innerWidth||d.clientWidth||g.clientWidth)+"x"+(f.innerHeight||d.clientHeight||g.clientHeight);null==a.pageX&&null!=a.clientX?b.c=a.clientX+(d&&d.scrollLeft||g&&g.scrollLeft||0)-(d&&d.clientLeft||g&&g.clientLeft||0)+"x"+(a.clientY+(d&&d.scrollTop||
g&&g.scrollTop||0)-(d&&d.clientTop||g&&g.clientTop||0)):null!==a.pageX&&(b.c=a.pageX+"x"+a.pageY);b.r=e.encodeUriParam(f.location.href);b.u=e.encodeUriParam(c.href);var f=c.childNodes,h=0,k=0,l=0;if(1<=f.length){for(d=0;d<f.length;d++)g=f[d],3!==g.nodeType&&1!==g.nodeType||1!==g.nodeType||(k+=1,"tagName"in f[d]&&"img"===f[d].tagName.toLowerCase()&&(h+=1,l=d));1==h&&h==k?b.hT=1:0<k&&(b.hT=2)}switch(b.hT){case 1:b.aT=f[l].getAttribute("alt")||"";break;case 2:case 0:b.aT=c.innerHTML?c.innerHTML.toString().replace(/<\/?[^>]+>/gmi,
""):""}0<b.aT.length&&(b.aT=e.stringTrimLimit(b.aT),""!==b.aT&&(b.aT=/^(\S+(\s|)){1,10}/gmi.exec(b.aT)[0].replace(/^\s+|\s+$/g,"")));b.aT=e.encodeUriParam(b.aT);this.dataAddObligatoryParams(b);return b};try{(new k).init()}catch(w){if(!0===v)throw w;}});
Any help would be really appreciated!
Some security weakness in your website is allowing someone to inject malicious scripts and/or code.
Disable the web server while you work on resolving this issue.
Change your FTP password.
If you can, switch to SFTP and use a certificate for authentication instead of a password.
Set the firewall to only accept FTP connections from your address, if that IP address is static (will not change on you), or from a range of IP addresses that you may be assigned by your ISP if you can determine such a range.
Remove all of your website code and re-upload from source control.
If you have a database behind your code:
Review your code for SQL Injection attack opportunities
Manually review all text columns in all tables for anything that looks like JavaScript.
Note: Since aVast did not turn up problems, the above steps are likely to get you back to where you need to be. If the problem persists, you may need to perform a complete reinstall of your server.
If you disable your extensions does it still show up? It is possible , if it isn't within the source code itself (like if the source code on the website is the same as on your computer) the script is an ads/monetizing script added by an extension like Freecorder. This is especially suspicious of the extension adding the script is an adware such as RelevantKnowledge, Yontoo, Iminent or iNTERNETTurbo.
If disabling your extensions/using a different browser makes no difference, some webhosts such as 1freehosting will add a script to your page for analytical purposes to check if people still visit your site and/or give you a graph of how many visits you've gotten. The script allows them to count the calls to the server for that page. This is not within your control - the webhost itself adds that code after the end html tag.
If neither it is possible your FTP has been accessed and you should change your password.
My wordpress websites were becoming slow and I've found out the same code was infecting my websites.
The malware javascript is loaded from http://www.acint.net/aci.js and because of it it takes about 20 seconds to fully load the page.
The malware creating a gif file which contains some script, it's located in "wp-content/themes/(your theme name)/images" and it's called logos.gif or logos2.gif - if you go to that location with your FTP client and sort files by most recently created it should be on the top of the list. I think it's created every time a home page is opened.
Make sure your wordpress is up to date (make files and database backup before updating) - that should remove the malware, also after that remove the logos.gif file.
https://sitecheck.sucuri.net/ - that's a cool free scanner to check if your website is infected.
I use this plugin for signing in but it didn't help in that case:
https://wordpress.org/plugins/are-you-robot-recaptcha/
I've installed this Firewall plugin so hopefully it'll make the website more secure:
https://wordpress.org/plugins/wp-simple-firewall/

'Pink tiles' when using GeoWebCache

I'm trying to test simple web map based on PostGIS/Geoserver/OpenLayers stack on Windows Server 2008. I've been using this tutorial and geoserver docs.
When I try to add WMS layer to my map using GeoWebCache:
var index1d = new OpenLayers.Layer.WMS(
"Index1",
"http://localhost:1979/geoserver/gwc/service/wms",
{'layers': "Index2000:index1d",
'format': "image/png",
'transparent': true
},
{'opacity': 1.0, 'isBaseLayer': true}
);
map.addLayer(index1d);
I get infamous 'pink tiles'. Error in Geoserver says:
ERROR [geowebcache.GeoWebCacheDispatcher] - Requested horizontal resolution:
750.0000000000005 , best match: 632.4668417968734 exceeds 10% threshold.
Perhaps the client is configured with an incorrect set of scales (resolutions),
or the DPI setting is off compared to the one in GWC ? http://localhost:
1979/geoserver/gwc/service/wms
My layer seems to be configured correctly and when I serve it without GeoWebCache with simply:
"http://localhost:1979/geoserver/wms"
everything works fine.
Could anyone point where I'm making mistake?
I haven't used GWC, but I guess you have set up the cache yourself? If so, I suppose you had to set the scales where GWC would create it's tiles. Building on these assumptions, I would say that you then must use the same scale levels when accessing the tiles. Look over your GWC settings and maybe recreate the cache.
(Using WMS will work because the map data by default is rendered on the fly, taking whatever parameters you supply it with and rendering from that.)

What should I use for the filepath if I'm developing from my desktop?

I'm having an extremely difficulty time getting the flowplayer to show up and the worst part is I have no idea what is wrong because I'm not getting any error messages!
I have an external javascript file:
C:/desktop/mysite/js/jq/plugins.js
calling $f() from:
C:/desktop/mysite/thirdparty/flowplayer/flowplayer.js
the swf files also live there...
I'm working on file/desktop (no localhost or webserver)
$(video.id).flowplayer("thirdparty/flowplayer/flowplayer-3.1.15.swf", {
clip:{
....
},
// min Flash version
version:[9,115],
// older versions will see a custom message
onFail:function(){
alert("Failed!");
},
onError:function(errCode,errMsg){
alert(errCode+errMsg);
}
});
I don't know what path to use for the SWFs to get them to load, is the path relative to the javascript (plugins.js) that calls $f() or is it relative to the path of the flowplayer.js ??
bangs head on wall
Why not use the absolute path?
$(video.id).flowplayer("file://c:/desktop/mysite/thirdparty/flowplayer/flowplayer-3.1.15.swf"...
replace thirdparty/flowplayer/flowplayer-3.1.15.swf with thirdparty\flowplayer\flowplayer-3.1.15.swf
if you are planning to put that on a web page then change the slashes back to forward slashes.

Categories