config-mode: add a map to place the node

[tcatm]

No description provided.

[do9xe]

Actually not a bad Idea, would be awesome.

[rubo77]

In Hamburg they modified the process so you have to click on a link in the config mode at the end when it restarts. Maybe baldo can explain?

[adlerweb]

Attached a sample code using OpenStreetMap/OpenLayers. I just appended it to /lib/gluon/config-mode/wizard/0400-geo-location.lua:7, however this is most likely not the proper place for tons of HTML/JS. Maybe still a starting point for someone with better knowledge of gluons internals…

  local s = form:section(cbi.SimpleSection, nil,
    [[Um deinen Knoten auf der Karte anzeigen zu können, benötigen
    wir seine Koordinaten. Hier hast du die Möglichkeit, diese zu
    hinterlegen.
    <!-- Beware: Ugly hacks ahead -->
    <div id="locationPickerMap" style="width:100%; height:300px; display: none;"></div>


    <script type="text/javascript">
        /*  Center coordinated if node has no position - adjust to your city */
        var latitude = 50.356667;
        var longitude = 7.593889;

        function showMap() {
            if (typeof OpenLayers === 'object') {
                document.getElementById("locationPickerMap").style.display="block";

                var proj4326 = new OpenLayers.Projection("EPSG:4326");
                var projmerc = new OpenLayers.Projection("EPSG:900913");

                var mapZoom = 12;

                var markers = new OpenLayers.Layer.Markers( "Markers" );

                OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
                    defaultHandlerOptions: {
                        'single': true,
                        'double': false,
                        'pixelTolerance': 0,
                        'stopSingle': false,
                        'stopDouble': false
                    },

                    initialize: function(options) {
                        this.handlerOptions = OpenLayers.Util.extend(
                            {}, this.defaultHandlerOptions
                        );
                        OpenLayers.Control.prototype.initialize.apply(
                            this, arguments
                        ); 
                        this.handler = new OpenLayers.Handler.Click(
                            this, {
                                'click': this.trigger
                            }, this.handlerOptions
                        );
                    }, 

                    trigger: function(e) {
                        var lonlat = osmMap.getLonLatFromPixel(e.xy);
                        lonlat1 = new OpenLayers.LonLat(lonlat.lon,lonlat.lat).transform(projmerc,proj4326);
                        document.getElementById("cbid.wizard.1._longitude").value=lonlat1.lon;
                        document.getElementById("cbid.wizard.1._latitude").value=lonlat1.lat;
                        markers.clearMarkers(); 
                        markers.addMarker(new OpenLayers.Marker(lonlat));

                        cbi_d_update("cbid.wizard.1._longitude");
                        cbi_d_update("cbid.wizard.1._latitude");
                    }
                });

                osmMap = new OpenLayers.Map("locationPickerMap", {
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.PanZoomBar(),
                        new OpenLayers.Control.MousePosition()
                    ],
                    maxExtent:
                    new OpenLayers.Bounds(-20037508.34,-20037508.34, 20037508.34, 20037508.34),
                    numZoomLevels: 18,
                    maxResolution: 156543,
                    units: 'm',
                    projection: projmerc,
                    displayProjection: proj4326
                } );

                var osmLayer = new OpenLayers.Layer.OSM("OpenStreetMap");
                osmMap.addLayer(osmLayer);

                osmMap.addLayer(markers);

                var temp_lon = longitude;
                var temp_lat = latitude;

                if(document.getElementById("cbid.wizard.1._longitude").value != "") temp_lon = document.getElementById("cbid.wizard.1._longitude").value;
                if(document.getElementById("cbid.wizard.1._latitude").value != "") temp_lat = document.getElementById("cbid.wizard.1._latitude").value;

                markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(temp_lon,temp_lat).transform(proj4326, projmerc)));

                var mapCenterPositionAsLonLat = new OpenLayers.LonLat(temp_lon, temp_lat);
                var mapCenterPositionAsMercator = mapCenterPositionAsLonLat.transform(proj4326, projmerc);

                osmMap.setCenter(mapCenterPositionAsMercator, mapZoom);

                var click = new OpenLayers.Control.Click();
                osmMap.addControl(click);
                click.activate();
            }else{
                /* Either we are still loading or offline - try again later */
                setTimeout(showMap, 1000);
            }
        }

        var maindiv = document.getElementById("maincontainer");

        /* Append script via DOM to the end of the document - this prevents the browser
           from blocking the rendering if the OpenLayers-Server is unreachable
         */
        var newcontent = document.createElement('script');
        newcontent.setAttribute("type", "text/javascript");
        newcontent.setAttribute("src", "http://www.openlayers.org/api/OpenLayers.js");
        maindiv.appendChild(newcontent);

        /* Try to initialize map after 1 second - we can't really determinate if OL is completely loaded */
        setTimeout(showMap, 1000);
</script>
]])

Edit: For our community we packaged the script - use at your own risk...
https://github.com/FreifunkMYK/gluon-packages-extra/tree/master/gluon-config-mode-geo-location-map

[robotanarchy]

As a proof of concept, I've been experimenting with creating a minimal map that could be flashed on the router to make if available offline (demo, source). It works okayish, but I don't really have any motiviation to integrate it into the gluon firmware, because it would need lots of modifications and I don't think that it is really that useful.

The best concept would be what @rubo77 said in my opinion, to show a map after the router is actually connected to the internet!

EDIT: Maybe the design of the coordinates picking from my demo can be recycled though, I've put some work into that to give it a decent Freifunk style.

[neocturne]

Fixed in 6b5cb4f.