Pan-Maciek · October 6, 2016 18:36
diff --git a/artur.html b/artur.html
 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="pl">

 <head>
    <title>T: Project</title>
    <meta charset="utf-8">
    <script src="lib/jquery-3.1.0.min.js"></script>
    <script src="lib/gmap3.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsbtBhmgCISJQGwNuoGAIXQOOdrhBj-vI"></script>
    <script>
        var punkty = [];
        //zapisywanie do storage
        function zapis() {
            localStorage.setItem('punkty', JSON.stringify(punkty));
        }

        //czyści storage
        function del() {
            localStorage.clear();
            $('#mpd').gmap3({
                clear: {
                    name: ['polyline', 'marker']
                }
            })
            $("#l1 li").remove() // usuwanie elementów listy #l1
            punkty = [] // czyszczenie tablicy punktów
        }
        //dodawanie punktów listy, streeeview, centruje i ustawia zooma
        function ulista() {
            $('#l1').empty();
            var li;
            for (var i = 0; i < punkty.length; i++) {
                li = $("<li>");
                var s = $("<span>");
                s.text("x")
                li.text("Lokalizacja " + parseInt(i + 1));
                $(li).attr("id", "lokalizacja " + parseInt(i + 1));
                $(li).on('click', function () {
                    $('#mpd').gmap3({
                        clear: {
                            name: 'streetviewpanorama'
                        }
                    });
                    $('#street').empty();
                    $('#mpd').gmap3({
                        map: {
                            options: {
                                center: punkty[$(this).index()].latLng
                                , zoom: punkty[$(this).index()].zoom
                            }
                        }
                        , streetviewpanorama: {
                            options: {
                                container: $(document.createElement("div")).addClass("gmapa").appendTo($('#street'))
                                , opts: {
                                    position: new google.maps.LatLng(punkty[$(this).index()].latLng[0], punkty[$(this).index()].latLng[1])
                                    , pov: {
                                        heading: 34
                                        , pitch: 10
                                        , zoom: 1
                                    }
                                }
                            }
                        }
                    })
                });
                $("#l1").append(li);
                s.css({
                    position: "absolute",
                    right: "36px"
                });
                s.on("click", function(){
                    punkty.splice($(this).parent().index(),1);
                    $('#mpd').gmap3({
                        clear: {
                            name: 'marker'
                        }
                    });
                    ulista();
                    umarkery();
                })
                li.append(s);
            }
        }

        function umarkery() {
            $('#mpd').gmap3({
                clear: {
                    name: 'marker'
                }
            });
            for (var i = 0; i < punkty.length; i++) {
                $('#mpd').gmap3({
                    marker: {
                        values: punkty
                    }
                });
            }
        }
        $(document).ready(function () {
            //Mapka
            $("#mpd").gmap3({
                    map: {
                        options: {
                            center: [50.045806, 19.922174]
                            , zoom: 16
                            , disableDefaultUI: true
                        }
                    , }
                })
            // ładowanie lokalizacji z localstorage
            punkty = JSON.parse(localStorage.getItem('punkty'));
            if (!punkty) punkty = []
            ulista();
            umarkery();

                //Przesuwanie
            $("#suw1").on("input", function () {
                var x = parseInt($("#suw1").val())
                $("#mpd").gmap3({
                    map: {
                        options: {
                            center: [x, $("#suw2").val()]
                        }
                    }
                })
            })
            $("#suw2").on("input", function () {
                var y = parseInt($("#suw2").val())
                $("#mpd").gmap3({
                    map: {
                        options: {
                            center: [$("#suw1").val(), y]
                        }
                    }
                })
            })
            $("#suw3").on("input", function () {
                    var zoom = parseInt($("#suw3").val())
                    $("#mpd").gmap3({
                        map: {
                            options: {
                                zoom: zoom
                            }
                        }
                    })
                })
                //Markiery
            $("#mpd").gmap3({
                    map: {
                        events: {
                            click: function (map, event) {
                                var x1 = event.latLng.lat()
                                var y1 = event.latLng.lng()
                                $("#mpd").gmap3({
                                    marker: {
                                        latLng: [event.latLng.lat(), event.latLng.lng()]
                                    }
                                })
                                punkty.push({
                                    latLng: [event.latLng.lat(), event.latLng.lng()]
                                    , id: punkty.length
                                    , zoom: parseInt($("#suw3").val())
                                });
                                ulista();
                                umarkery();
                            }
                        }
                    }
                })

                //usuwanie
            $("#usun").on("click", function () {
                $("#l1").empty();
                k = 1;
            })
            $('#zapis').on('click', zapis)

            $('#delete').on('click', del)
            $('#men1').on('click', function () {
                $('#mdl').toggleClass('display');
            })
            //Rysowanie
            $('#rys').on('click', function () {
                $('#mpd').gmap3({
                    clear: {
                        name: 'polyline'
                    }
                });
                $('#mpd').gmap3({
                    polyline: { // wielokąt
                        options: {
                            strokeColor: "#0000ff"
                            , strokeOpacity: 0.5
                            , strokeWeight: 4
                            , path: punkty
                        }
                    }
                });
            })
            //usuwa rysunek
            $('#urys').on('click', function () {
                $('#mpd').gmap3({
                    clear: {
                        name: 'polyline'
                    }
                })
            })
        })
    </script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #pojemnik {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        #mpd {
            height: 100vh;
            width: 69%;
            float: left;
        }

        #med {
            height: 100vh;
            float: right;
            width: 29%;
            background-color: #0066B2;
        }

        #pas {
            height: 100vh;
            float: left;
            width: 2%;
            background-color: #199CFF;
        }

        .lokal {
            font-size: 20px;
            color: white;
            margin-top: 1%;
            width: 100%;
            background-color: #0091FF;
            margin-bottom: 10px;
            border: none;
            padding: 10px;
        }

        #usun {
            font-size: 20px;
            color: white;
            width: 100%;
            background-color: #0091FF;
            margin-bottom: 5px;
            border: none;
            padding: 10px;
        }

        #suw1 {
            width: 100%;
            color: #B26B00;
        }

        #suw2 {
            width: 100%;
        }

        #suw3 {
            width: 100%;
        }

        h1 {
            font-size: 20px;
            color: white;
            width: 100%;
            background-color: #0091FF;
            margin-bottom: 5px;
            border: none;
            padding: 10px;
            text-align: center;
        }

        #med ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #med li {
            font-size: 18px;
            text-align: center;
            padding: 10px;
            color: aliceblue;
            background-color: darkblue;
            margin: 4px;
        }

        .lokal:hover {
            background-color: #0066B2;
        }

        #mdl {
            height: 100vh;
            width: 29%;
            background-color: #0066B2;
            border-right: 2px solid darkblue;
            transition-duration: 1s;
            transform: translateX(-100%);
            position: absolute;
        }

        #men1 {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 997;
        }

        .display {
            transition-duration: 1s;
            transform: translateX(0) !important;
        }

        #street {
            width: 100%;
            height: 400px;
            top: 300px;
            z-index: 999;
            position: absolute
        }

        #mdl input {
            display: block;
            width: 90%;
            margin: 10px;
        }

        .gmapa {
            width: 100%;
            height: 100%;
        }

        #content {
            margin-top: 10%;
        }
    </style>
 </head>

 <body>
    <div id="pojemnik">
        <input id="men1" type="button" value="|||" />
        <div id="mpd"> </div>
        <div id="pas"></div>
        <div id="med">
            <input id="suw1" type="range" min="-90" max="90" value="50.045806" />
            <input id="suw2" type="range" min="-180" max="180" value="19.922174" />
            <input id="suw3" type="range" min="1" max="15" value="15" />
            <h1>Punkty</h1>
            <ul id="l1"></ul>
        </div>
        <div id="mdl">
            <div id="content">
                <input class="lokal" id="zapis" type="button" value="Zapisz w localStorage" />
                <input class="lokal" id="delete" type="button" value="Usuń z localStorage" />
                <input class="lokal" id="rys" type="button" value="Narysuj" />
                <input class="lokal" id="urys" type="button" value="Usuń narysowane" /> </div>
            <div id="street"> </div>
        </div>
    </div>
 </body>

 </html>
	<!DOCTYPE html>
	<html xmlns="http://www.w3.org/1999/xhtml" lang="pl">

	<head>
	<title>T: Project</title>
	<meta charset="utf-8">
	<script src="lib/jquery-3.1.0.min.js"></script>
	<script src="lib/gmap3.min.js"></script>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsbtBhmgCISJQGwNuoGAIXQOOdrhBj-vI"></script>
	<script>
	var punkty = [];
	//zapisywanie do storage
	function zapis() {
	localStorage.setItem('punkty', JSON.stringify(punkty));
	}

	//czyści storage
	function del() {
	localStorage.clear();
	$('#mpd').gmap3({
	clear: {
	name: ['polyline', 'marker']
	}
	})
	$("#l1 li").remove() // usuwanie elementów listy #l1
	punkty = [] // czyszczenie tablicy punktów
	}
	//dodawanie punktów listy, streeeview, centruje i ustawia zooma
	function ulista() {
	$('#l1').empty();
	var li;
	for (var i = 0; i < punkty.length; i++) {
	li = $("<li>");
	var s = $("<span>");
	s.text("x")
	li.text("Lokalizacja " + parseInt(i + 1));
	$(li).attr("id", "lokalizacja " + parseInt(i + 1));
	$(li).on('click', function () {
	$('#mpd').gmap3({
	clear: {
	name: 'streetviewpanorama'
	}
	});
	$('#street').empty();
	$('#mpd').gmap3({
	map: {
	options: {
	center: punkty[$(this).index()].latLng
	, zoom: punkty[$(this).index()].zoom
	}
	}
	, streetviewpanorama: {
	options: {
	container: $(document.createElement("div")).addClass("gmapa").appendTo($('#street'))
	, opts: {
	position: new google.maps.LatLng(punkty[$(this).index()].latLng[0], punkty[$(this).index()].latLng[1])
	, pov: {
	heading: 34
	, pitch: 10
	, zoom: 1
	}
	}
	}
	}
	})
	});
	$("#l1").append(li);
	s.css({
	position: "absolute",
	right: "36px"
	});
	s.on("click", function(){
	punkty.splice($(this).parent().index(),1);
	$('#mpd').gmap3({
	clear: {
	name: 'marker'
	}
	});
	ulista();
	umarkery();
	})
	li.append(s);
	}
	}

	function umarkery() {
	$('#mpd').gmap3({
	clear: {
	name: 'marker'
	}
	});
	for (var i = 0; i < punkty.length; i++) {
	$('#mpd').gmap3({
	marker: {
	values: punkty
	}
	});
	}
	}
	$(document).ready(function () {
	//Mapka
	$("#mpd").gmap3({
	map: {
	options: {
	center: [50.045806, 19.922174]
	, zoom: 16
	, disableDefaultUI: true
	}
	, }
	})
	// ładowanie lokalizacji z localstorage
	punkty = JSON.parse(localStorage.getItem('punkty'));
	if (!punkty) punkty = []
	ulista();
	umarkery();

	//Przesuwanie
	$("#suw1").on("input", function () {
	var x = parseInt($("#suw1").val())
	$("#mpd").gmap3({
	map: {
	options: {
	center: [x, $("#suw2").val()]
	}
	}
	})
	})
	$("#suw2").on("input", function () {
	var y = parseInt($("#suw2").val())
	$("#mpd").gmap3({
	map: {
	options: {
	center: [$("#suw1").val(), y]
	}
	}
	})
	})
	$("#suw3").on("input", function () {
	var zoom = parseInt($("#suw3").val())
	$("#mpd").gmap3({
	map: {
	options: {
	zoom: zoom
	}
	}
	})
	})
	//Markiery
	$("#mpd").gmap3({
	map: {
	events: {
	click: function (map, event) {
	var x1 = event.latLng.lat()
	var y1 = event.latLng.lng()
	$("#mpd").gmap3({
	marker: {
	latLng: [event.latLng.lat(), event.latLng.lng()]
	}
	})
	punkty.push({
	latLng: [event.latLng.lat(), event.latLng.lng()]
	, id: punkty.length
	, zoom: parseInt($("#suw3").val())
	});
	ulista();
	umarkery();
	}
	}
	}
	})

	//usuwanie
	$("#usun").on("click", function () {
	$("#l1").empty();
	k = 1;
	})
	$('#zapis').on('click', zapis)

	$('#delete').on('click', del)
	$('#men1').on('click', function () {
	$('#mdl').toggleClass('display');
	})
	//Rysowanie
	$('#rys').on('click', function () {
	$('#mpd').gmap3({
	clear: {
	name: 'polyline'
	}
	});
	$('#mpd').gmap3({
	polyline: { // wielokąt
	options: {
	strokeColor: "#0000ff"
	, strokeOpacity: 0.5
	, strokeWeight: 4
	, path: punkty
	}
	}
	});
	})
	//usuwa rysunek
	$('#urys').on('click', function () {
	$('#mpd').gmap3({
	clear: {
	name: 'polyline'
	}
	})
	})
	})
	</script>
	<style>
	body {
	margin: 0;
	padding: 0;
	}

	#pojemnik {
	width: 100%;
	height: 100%;
	overflow: hidden;
	}

	#mpd {
	height: 100vh;
	width: 69%;
	float: left;
	}

	#med {
	height: 100vh;
	float: right;
	width: 29%;
	background-color: #0066B2;
	}

	#pas {
	height: 100vh;
	float: left;
	width: 2%;
	background-color: #199CFF;
	}

	.lokal {
	font-size: 20px;
	color: white;
	margin-top: 1%;
	width: 100%;
	background-color: #0091FF;
	margin-bottom: 10px;
	border: none;
	padding: 10px;
	}

	#usun {
	font-size: 20px;
	color: white;
	width: 100%;
	background-color: #0091FF;
	margin-bottom: 5px;
	border: none;
	padding: 10px;
	}

	#suw1 {
	width: 100%;
	color: #B26B00;
	}

	#suw2 {
	width: 100%;
	}

	#suw3 {
	width: 100%;
	}

	h1 {
	font-size: 20px;
	color: white;
	width: 100%;
	background-color: #0091FF;
	margin-bottom: 5px;
	border: none;
	padding: 10px;
	text-align: center;
	}

	#med ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	}

	#med li {
	font-size: 18px;
	text-align: center;
	padding: 10px;
	color: aliceblue;
	background-color: darkblue;
	margin: 4px;
	}

	.lokal:hover {
	background-color: #0066B2;
	}

	#mdl {
	height: 100vh;
	width: 29%;
	background-color: #0066B2;
	border-right: 2px solid darkblue;
	transition-duration: 1s;
	transform: translateX(-100%);
	position: absolute;
	}

	#men1 {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 997;
	}

	.display {
	transition-duration: 1s;
	transform: translateX(0) !important;
	}

	#street {
	width: 100%;
	height: 400px;
	top: 300px;
	z-index: 999;
	position: absolute
	}

	#mdl input {
	display: block;
	width: 90%;
	margin: 10px;
	}

	.gmapa {
	width: 100%;
	height: 100%;
	}

	#content {
	margin-top: 10%;
	}
	</style>
	</head>

	<body>
	<div id="pojemnik">
	<input id="men1" type="button" value="\|\|\|" />
	<div id="mpd"> </div>
	<div id="pas"></div>
	<div id="med">
	<input id="suw1" type="range" min="-90" max="90" value="50.045806" />
	<input id="suw2" type="range" min="-180" max="180" value="19.922174" />
	<input id="suw3" type="range" min="1" max="15" value="15" />
	<h1>Punkty</h1>
	<ul id="l1"></ul>
	</div>
	<div id="mdl">
	<div id="content">
	<input class="lokal" id="zapis" type="button" value="Zapisz w localStorage" />
	<input class="lokal" id="delete" type="button" value="Usuń z localStorage" />
	<input class="lokal" id="rys" type="button" value="Narysuj" />
	<input class="lokal" id="urys" type="button" value="Usuń narysowane" /> </div>
	<div id="street"> </div>
	</div>
	</div>
	</body>

	</html>
No results found