Geoserver - Revision history

Admin at 06:10, 8 February 2015

2015-02-08T06:10:23Z

← Older revision		Revision as of 06:10, 8 February 2015
Line 312:		Line 312:

	[[Image:GeoserverEmbeddedMap.png\|500px]]		[[Image:GeoserverEmbeddedMap.png\|500px]]


			[[Category:GIS]]

Admin at 13:58, 2 February 2015

2015-02-02T13:58:30Z

← Older revision		Revision as of 13:58, 2 February 2015
Line 1:		Line 1:
	~~This guide (part 2) picks up where the~~ [[Geodroplet]] page ~~(part 1) left off:~~		My Geodroplet adventure:

			* Part 1 - [[Geodroplet]]
			* Part 2 - this page
			* Part 3 - [[Geoserver OilGas]]

	http://docs.geoserver.org/stable/en/user/gettingstarted/web-admin-quickstart/index.html		http://docs.geoserver.org/stable/en/user/gettingstarted/web-admin-quickstart/index.html

Admin: /* Final Product */

2015-02-02T05:46:42Z

Final Product

← Older revision		Revision as of 05:46, 2 February 2015
Line 307:		Line 307:
	The final page should look something like this:		The final page should look something like this:

	[[~~Images~~:GeoserverEmbeddedMap.png\|500px]]		[[Image:GeoserverEmbeddedMap.png\|500px]]

Admin: /* Final Product */

2015-02-02T05:46:27Z

Final Product

← Older revision		Revision as of 05:46, 2 February 2015
Line 307:		Line 307:
	The final page should look something like this:		The final page should look something like this:

	[[Images:GeoserverEmbeddedMap.png]]		[[Images:GeoserverEmbeddedMap.png\|500px]]

Admin: /* Embedded Map Example */

2015-02-02T05:46:10Z

Embedded Map Example

← Older revision		Revision as of 05:46, 2 February 2015
Line 192:		Line 192:
	</source>		</source>

	==Embedded Map Example==		==Embedded Map Example Page==

	The following files can be served up by a web server to serve up a map with Leaflet.		The following files can be served up by a web server to serve up a map with Leaflet.
Line 302:		Line 302:
	});		});
	</source>		</source>

			===Final Product===

			The final page should look something like this:

			[[Images:GeoserverEmbeddedMap.png]]

Admin: /* Javascript: mymap.js */

2015-02-02T05:43:14Z

Javascript: mymap.js

← Older revision		Revision as of 05:43, 2 February 2015
Line 244:		Line 244:
	<source lang="javascript">		<source lang="javascript">
	// create the map, assign to the mao div, and set it's lat, long, and zoom level (12)		// create the map, assign to the mao div, and set it's lat, long, and zoom level (12)

	//NYC		//NYC
	var map = L.map('map').setView([40.754306, -73.985861], 12);		var map = L.map('map').setView([40.754306, -73.985861], 12);

	////~~London~~		// big thanks to
	//~~var map = L~~.~~map('map')~~.~~setView([51.505,~~ -~~0.09], 13);~~		// http://gis.stackexchange.com/questions/64406/getting-wfs-data-from-geoserver-into-leaflet
			// for making this script a lot better

			// Add MapBox Tiles
	L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w~~', {~~		L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',		attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',
	maxZoom: 18		maxZoom: 18
	}).addTo(map);		}).addTo(map);

			var owsrootUrl = 'http://104.236.163.66:8080/geoserver/ows';

	var owsrootUrl = 'http://AA.BB.CC.DD:8080/geoserver/ows';

	var defaultParameters = {		var defaultParameters = {
Line 265:		Line 263:
	version : '1.0',		version : '1.0',
	request : 'GetFeature',		request : 'GetFeature',
	typeName : '~~nyc_roads:~~nyc_roads',		typeName : 'nyc_roads',
	maxFeatures : '~~100~~',		maxFeatures : '200',
	outputFormat : 'text/javascript',		outputFormat : 'text/javascript',
	format_options : 'callback:getJson',		format_options : 'callback:getJson',
			SrsName : 'EPSG:4326'
	};		};
			// get the srs name from Geoserver --> Layers
			// that piece of information is critical to getting this working

	var parameters = L.Util.extend(defaultParameters);		var parameters = L.Util.extend(defaultParameters);
Line 283:		Line 284:
	//upon success extraction of data		//upon success extraction of data
	success: function (data) {		success: function (data) {
	console.log(data);
			//console.log(data);

	//create a new geojson layer		//create a new geojson layer
	var geojson = new L.~~GeoJSON~~(data, {		var geojson = new L.geoJson(data, {
	~~// apply a style~~
	~~style: function(feature){~~
	~~return {color: "black", weight: 1};~~
	},
	~~// and bind a popup showing the street name for each feature extracted.~~
	~~onEachFeature: function(feature, layer){~~
	~~layer.bindPopup("street: " + feature.properties.NAME);~~
	}
	~~});~~

	~~//add the layer to the map~~
	~~geojson.addTo(map);~~

			// apply a style
			style: {"color":"#ff7800","weight":2},
			//
			// and bind a popup showing the street name for each feature extracted.
			onEachFeature: function(feature, layer){
			layer.bindPopup("street: " + feature.properties.name);
			//console.log(feature.properties);
			}
			}).addTo(map);
	}		}


	});		});

	</source>		</source>

Admin: /* Javascript: mymap.js */

2015-02-02T04:54:17Z

Javascript: mymap.js

← Older revision		Revision as of 04:54, 2 February 2015
Line 252:		Line 252:


	L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w		L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w', {
	attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',		attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>',
	maxZoom: 18		maxZoom: 18

Admin: /* Javascript: mymap.js */

2015-02-02T04:52:55Z

Javascript: mymap.js

← Older revision		Revision as of 04:52, 2 February 2015
Line 259:		Line 259:


	var owsrootUrl = 'http://~~104~~.~~236~~.~~163~~.66:8080/geoserver/ows';		var owsrootUrl = 'http://AA.BB.CC.DD:8080/geoserver/ows';

	var defaultParameters = {		var defaultParameters = {

Admin: /* Embedded Map Example */

2015-02-02T04:52:14Z

Embedded Map Example

← Older revision		Revision as of 04:52, 2 February 2015
Line 200:		Line 200:
	===HTML: index.html===		===HTML: index.html===

	<~~pre~~>		<source lang="javascript">
	<html>		<html>
	<head>		<head>
Line 229:		Line 229:

	</html>		</html>
	</~~pre~~>		</source>

	===CSS: style.css===		===CSS: style.css===

	<~~pre~~>		<source lang="javascript">
	#map {		#map {
	height: 600px;		height: 600px;
	width: 600px;		width: 600px;
	}		}
	</~~pre~~>		</source>

	===Javascript: mymap.js===		===Javascript: mymap.js===

	<~~pre~~>		<source lang="javascript">
	// create the map, assign to the mao div, and set it's lat, long, and zoom level (12)		// create the map, assign to the mao div, and set it's lat, long, and zoom level (12)

Line 305:		Line 305:
	});		});

	</~~pre~~>		</source>

Admin: /* Javascript: mymap.js */

2015-02-02T04:51:39Z

Javascript: mymap.js

← Older revision		Revision as of 04:51, 2 February 2015
Line 244:		Line 244:
	<pre>		<pre>
	// create the map, assign to the mao div, and set it's lat, long, and zoom level (12)		// create the map, assign to the mao div, and set it's lat, long, and zoom level (12)
	~~//var map = L.map('map').setView([40.754306, -73.985861], 12);~~
	~~var map = L.map('map').setView([51.505, -0.09], 13);~~

			//NYC
			var map = L.map('map').setView([40.754306, -73.985861], 12);

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

	~~//access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w5rSM7MjHv-SnOnt3gcqHA~~
	~~//http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.{format}?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w5rSM7MjHv-SnO~~

	L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w		L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhcmxlc3JlaWQxIiwiYSI6ImpreUJGM3MifQ.w
Line 258:		Line 258:


	~~//geojson url. obtained from logging into geoserver, selecting "Layer Preview" under the Data heading on the left, selecting geojson from t~~
	~~//var url = "http://104.236.163.66:8080/geoserver/tiger/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tiger:tiger_roads&&output~~
	~~//var url = "http://104.236.163.66:8080/geoserver/nyc_roads/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=nyc_roads:nyc_roads&m~~

	var owsrootUrl = 'http://104.236.163.66:8080/geoserver/ows';		var owsrootUrl = 'http://104.236.163.66:8080/geoserver/ows';