Hi,
I am trying to build an OSM plugin: no experience in jS, xml etc....
Here what I achieved copying and pasting here and there..:
http://www.lingua.it/giropano/index.html
Two (main) problems:
1) the map is not centered as expected and does not zoom properly: when zooming it seems the center is moving....
2) the text in popup does not desplay, thouth when downloading leaflet,js and leaflet.css directly on the folder it works. Actually I am not interested in popups but...just to understand why....
Here is from pano.xml:
..................
<!-- maps plugin - use Google for HTML5 and Bing for Flash -->
<plugin name="map" devices="html5"
keep="true"
url="osmkrplugin.js"
align="lefttop" x="10" y="10" width="270" height="370"
>
</plugin>
And here is osmkrplugin.js:
/*
krpano HTML5 Javascript Plugin Example
*/
function krpanoplugin()
{
var local = this; // save the 'this' pointer from the current plugin object
var krpano = null; // the krpano and plugin interface objects
var plugin = null;
// registerplugin - startup point for the plugin (required)
// - krpanointerface = krpano interface object
// - pluginpath = the fully qualified plugin name (e.g. "plugin[name]")
// - pluginobject = the xml plugin object itself
local.registerplugin = function(krpanointerface, pluginpath, pluginobject)
{
// get the krpano interface and the plugin object
krpano = krpanointerface;
plugin = pluginobject;
plugin.registercontentsize(270,370);
//text.style.cssText = "width:100%;height:100%;
var osmmap = document.createElement("div");
osmmap.setAttribute('id', 'osm-map');
osmmap.setAttribute('style', 'width:270px ; height:370px');
//document.body.appendChild(osmmap);
plugin.sprite.appendChild(osmmap);
// Where you want to render the map.
var element = document.getElementById('osm-map');
//code to insert leaflet layers
var map = L.map(element).setView([51.28, 0.09], 14);
mapLink =
'<a href="http://openstreetmap.org">OpenStreetMap</a>';
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + mapLink,
maxZoom: 18,
}).addTo(map);
L.marker([51.28, 0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
}
}
Alles anzeigen
Thank you for any suggestions and hints.
Regards,
Giuseppe