crazyunicorncode

This is a read only archive of pad.okfn.org. See the shutdown announcement for details.

crazyunicorncode <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
     <title>Pingu Flag</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
    <link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <style>
    img { margin-top: 10px;
       }
    body {
        padding: 0;
        margin: 0;}
    html, body, #map {
        height: 100%;}
    #setflag {
    position: relative;
    top: -50px;
    left: 20px;
    }
    h1 {     color: #1C1C1A;
    font-family: 'Oswald', sans-serif;
    position: absolute;
    top: -10px;
    left: 50px;
    background: rgba(255,255,255,0.7);
    padding: 5px;
    border-radius: 2px;
    z-index: 1001;
    box-shadow: rgba(0,0,0,0.2) 0px 1px 5px;
    font-size: 2.2em;
    }

    h6 {

font-weight: bold;
}

      #formular {
              position: absolute;
    top: 75px;
    left: 10%;
    z-index: 1001;
    width: 80%;
    background: rgba(255, 255, 255, 0.79);
    padding: 5px;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.5) 0px 1px 5px;
    display: none;
              }
         #formular img {

width: 29px;
}
#formular input , #formular textarea {

margin-bottom: 5px;
}

#formular button {

margin-top: 5px;
}

    </style>
</head>
<body>

     <h1>Pingu Flag</h1>

    <div id="formular">
    <form>
    <input type="text" name="name" class="form-control" placeholder="Name">
    <textarea class="form-control" rows="3" placeholder="Nachricht"></textarea>
    <div>

<input type="radio" value="blau" name="farbe" checked="true" /><img src="flag.png" />
<input type="radio" value="pink" name="farbe" /><img src="pinkflag.png" />
<input type="radio" value="green" name="farbe" /><img src="greenflag.png" />
</div>

    </input>
     <button id="ok" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-ok"></span></button>
     <button id="close" type="button" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span></button>
    </form>
    </div>

     <div id="map"></div>

     <button id="setflag" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-flag"></span></button>

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
    <script src="https://api.backendless.com/sdk/js/latest/backendless.min.js"></script>
    <script>


    Backendless.initApp( '754274B2-09CF-FEF8-FFA5-3B9339B82600', 'E22562B5-9ACF-F5D9-FFDB-13F2B0C68000', 'v1' );

      //karte initialisieren
     var map = L.map('map')
    .setView([51.505, -0.09], 13);


            // unser pnguin
    var myIcon = L.icon({
        iconUrl: 'smallpngu.png',
        iconSize: [50,50],
        iconAnchor: [37,37],
        popupAnchor: [-12, -28],
    className: 'pngu',
    });

    var myFlag = L.icon({
        iconUrl: 'flag.png',
        iconSize: [29,42],
        iconAnchor: [13,55],
        popupAnchor: [-12, -47],
                className: 'flag',
    });

     // add an OpenStreetMap tile layer

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {     attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);

    // add a marker in the given location, attach some popup content to it and open the popup

             var pngu = L.marker([0,0],{icon: myIcon}).addTo(map);

            // finde meine Position

    // Was passiert wenn die Position gefunden wurde

    var fahnen = [ ];

    function geo_success(position) {

               // karte auf meine position zentrieren
      map.setView([position.coords.latitude, position.coords.longitude]);
      // den Pnguin verschieben
    pngu.setLatLng([position.coords.latitude, position.coords.longitude]).update();
    var farben = {

"blau": "flag.png",

"pink": "pinkflag.png",
"green": "greenflag.png"

}
// Fahnen Finden
var callback = new Backendless.Async(

function(result)

{

// Fahnen Gefunden
console.log(result.data);
for (i in result.data) {

var fahne = result.data[i];
if ( fahnen.indexOf(fahne.objectId) < 0 ) {

var farbe = fahne.metadata.farbe || "blau";
var myFlag = L.icon({
iconUrl: farben[farbe],
iconSize: [29,42],
iconAnchor: [13,55],
popupAnchor: [-12, -47],
className: 'flag',
});

L.marker([fahne.latitude,fahne.longitude],{icon: myFlag}).addTo(map)

.bindPopup("<h6>"+(fahne.metadata.name || "")+"</h6>"+

decodeURI(fahne.metadata.nachricht));
fahnen.push(fahne.objectId);
};

};

},
function(result)
{
console.log( "error - " + result.message );

});

var geoQuery =

{
latitude: position.coords.latitude,

longitude: position.coords.longitude,

radius: 2000,

units: "METERS",

includeMetadata:true,

categories: ["fahne"]

}

Backendless.Geo.find( geoQuery, callback );

    };

    // was passiert wenn keine Position gefunden wurde

    function geo_error() {

      alert("I can't see you???");}

    // optionen

    var geo_options = {

      enableHighAccuracy: true,

      maximumAge        : 30000,

      timeout           : 27000};

    // beobachte meine Position

    var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);

    // Popup Auf

    $("#setflag").on("click",function() {$("#formular").show()});

    // Popup Zu

    $("#close").on("click",function() {$("#formular").hide()});

    $("#ok").on("click", function() {

    // Fahne Setzen
    var name = $("#formular input[name=name]").val();
    var nachricht = $("#formular textarea").val();
    var farbe = $("#formular input[name=farbe]:checked").val();

var myPosition = pngu.getLatLng();

// Fahne Speichern
var callback = new Backendless.Async(
function( result )
{
console.log( "geo point saved " + result.geopoint.objectId );
},
function(result)
{
alert( "Konnte Fahne nicht Speichern " + result.message );
});
var point = {
latitude: myPosition.lat,
longitude: myPosition.lng,
categories: ["fahne"],
metadata: {"name": name,

"nachricht": encodeURI(encodeURI(nachricht)),
"farbe": farbe}

}
Backendless.Geo.addPoint( point, callback );

    // Popup Zu

    $("#formular").hide();

    });

    </script>

</body>
</html>