You are not logged in.

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: 90

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.