You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Thursday, July 25th 2019, 11:52am

OSM plugin trial and errors

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:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
/*
    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 &copy; ' + mapLink,
            maxZoom: 18,
            }).addTo(map);
			L.marker([51.28, 0.09]).addTo(map)
			.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
			.openPopup();
  
        
    }
  
} 



Thank you for any suggestions and hints.

Regards,

Giuseppe

light_line

Trainee

Posts: 112

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

  • Send private message

2

Thursday, July 25th 2019, 1:44pm

I am developing OSM Map plugin right now!
if you are not in the hurry, I can give it to you in the next 2 weeks.

3

Thursday, July 25th 2019, 2:08pm

Thank you very much.
In the meanwhile any suggestions from anyone about what is wrong in my code would be very helpful.
I would like to use OSM and, in any case, I would like to know the way it works for further customisation and/or to use other free map resources.