Upload dos arquivos da série OpenLayers 3 - Parte 6

larsurilch · Mar 9, 2015 · 1d322eb · 1d322eb
1 parent a98c36b
commit 1d322eb
Show file tree

Hide file tree

Showing 4 changed files with 219 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -20,4 +20,8 @@ Criando estilos e popups no OL3.
 
 ### Parte 5
 
-Adicionando ferramentas de desenho e apagar ponto no OL3.
+Adicionando ferramentas de desenho e apagar ponto no OL3.
+
+### Parte 6
+
+Inserindo ponto no mapa através da digitação de coordenadas em campos texto.
diff --git a/part6/css/main.css b/part6/css/main.css
@@ -0,0 +1,77 @@
+* {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font-weight: normal;
+	vertical-align: baseline;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+*:before, *:after {
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+html, body {
+	min-height: 100%;
+}
+
+#mapa {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	bottom: 0;
+}
+
+#bar, #coordinates, #inputs {
+	background-color: rgba(255, 255, 255, 0.8);
+	position: absolute;
+	padding: 12px;
+	margin: 10px 0 0 55px;
+	border-radius: 4px;
+	font-size: 13px;
+}
+
+#bar > p, #inputs > button {
+	padding: 6px 12px;
+	display: inline-block;
+	color: #fff;
+	border-radius: 4px;
+	background-color: #5cb85c;
+	border: 1px solid #4cae4c;
+	cursor: pointer;
+}
+
+#bar > p:hover, #bar > p.active {
+	background-color: #449d44;
+	border-color: #398439;
+}
+
+#coordinates {
+	margin-top: 75px;
+}
+
+#inputs {
+	margin-left: 275px;
+}
+
+#inputs > input[type="text"] {
+	border: 1px solid #bbb;
+	padding: 7px;
+	border-radius: 4px;
+}
+
+#inputs > button {
+	background-color: #337ab7;
+	border: 1px solid #2e6da4;
+}
+
+#inputs > button:hover {
+	background-color: #286090;
+	border: 1px solid #204d74;
+}
diff --git a/part6/index.html b/part6/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+	<head>
+		<title>CodeGeo - OL3</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<link href="css/ol.css" media="all" type="text/css" rel="stylesheet">
+		<link href="css/main.css" media="all" type="text/css" rel="stylesheet">
+		<script src="js/jquery-2.1.1.min.js" defer="defer"></script>
+		<script src="js/ol-debug.js" defer="defer"></script>
+		<script src="js/main.js" defer="defer"></script>
+	</head>
+	<body>
+		<div id="mapa"></div>
+		<div id="bar">
+			<p id="pan">Pan</p>
+			<p id="drawPoint">Draw</p>
+			<p id="erasePoint">Erase</p>
+		</div>
+		<div id="inputs">
+			<input type="text" name="latitude" placeholder="Latitude">
+			<input type="text" name="longitude" placeholder="Longitude">
+			<input type="hidden" name="wkt">
+			<button id="enviar">Enviar</button>
+		</div>
+		<div id="coordinates"></div>
+	</body>
+</html>
diff --git a/part6/js/main.js b/part6/js/main.js
@@ -0,0 +1,109 @@
+$(document).ready(function() {
+
+	var pointDraw;
+	var vectorSource = new ol.source.Vector();
+	var coordinates = $("#coordinates");
+	var latitude = $("[name='latitude']");
+	var longitude = $("[name='longitude']");
+	var wkt = $("[name='wkt']");
+
+	var view = new ol.View({
+		center: [-6217890.205764902, -1910870.6048274133],
+		zoom: 4,
+		maxZoom: 18,
+		minZoom: 2
+	});
+
+	var baseLayer = new ol.layer.Tile({
+		source: new ol.source.MapQuest({ layer: 'osm' })
+	});
+
+	var map = new ol.Map({
+		target: 'mapa',
+		controls: ol.control.defaults().extend([
+			new ol.control.ScaleLine(),
+			new ol.control.ZoomSlider()
+		]),
+		renderer: 'canvas',
+		layers: [baseLayer],
+		view: view
+	});
+
+	$('#enviar').click(function() {
+		var lat = latitude.val();
+		var long = longitude.val();
+
+		if(long != '' && lat != '') {
+			vectorSource.clear();
+			vectorSource.addFeature(
+				new ol.Feature({
+					geometry: new ol.geom.Point([parseFloat(long), parseFloat(lat)]).transform('EPSG:4326', 'EPSG:3857')
+				})
+			);
+
+			wkt.val('POINT(' + long + ' ' + lat + ')');
+			map.getView().fitExtent(vectorSource.getExtent(), map.getSize());
+		}
+
+		return false;
+	});
+
+	var vectorLayer = new ol.layer.Vector({
+		source: vectorSource
+	});
+
+	map.addLayer(vectorLayer);
+
+	$("#pan").click(function() {
+		clearCustomInteractions();
+		$(this).addClass('active');
+		return false;
+	});
+
+	$("#drawPoint").click(function() {
+		clearCustomInteractions();
+		$(this).addClass('active');
+
+		pointDraw = new ol.interaction.Draw({
+			source: vectorSource,
+			type: 'Point'
+		});
+
+		map.addInteraction(pointDraw);
+
+		pointDraw.on('drawend', function(e) {
+			var feature = e.feature;
+			vectorSource.clear();
+			vectorSource.addFeature(feature);
+			var latLong = feature.getGeometry().getCoordinates();
+			coordinates.text(ol.coordinate.toStringHDMS(ol.proj.transform(latLong, 'EPSG:3857', 'EPSG:4326')));
+			generatePointWkt(feature);
+		});
+
+		return false;
+	});
+
+	$("#erasePoint").click(function() {
+		clearCustomInteractions();
+		$(this).addClass('active');
+		vectorSource.clear();
+		coordinates.empty();
+		return false;
+	});
+
+	function clearCustomInteractions() {
+		$("#bar").find("p").removeClass('active');
+		map.removeInteraction(pointDraw);
+	}
+
+	function generatePointWkt(e) {
+		var coords = ol.proj.transform(e.getGeometry().getCoordinates(), 'EPSG:3857', 'EPSG:4326');
+		longitude.val(coords[0]);
+		latitude.val(coords[1]);
+
+		coords.length ? wkt.val('POINT(' + coords[0] + ' ' + coords[1] + ')') : wkt.val('');
+
+		return false;
+	}
+
+});