Map client API

This is the Hello World example. A map with a single tile layer.

<script>
$(window).load(function() {
	// Create a new map object
	var cloud_example1 = new mygeocloud_ol.map("map_example1","mydb");
	// Zoom to default extent
	cloud_example1.zoomToExtent();
	// Add a single tile layer
	cloud_example1.addTileLayers(["public.publicnuclear_facilities_update"]);
});
</script>
<div id="map_example1" style="width: 100%;height: 500px"></div>

This example shows how to add GeoJSON to a map object using the SQL API.

<script>
$(window).load(function() {
	// Create a new map object
	var cloud_example2 = new mygeocloud_ol.map("map_example2","mydb");
	// Create a new GeoJSON store
	var store_example2 = new mygeocloud_ol.geoJsonStore("mydb");
	// Add the GeoJSON store to the map
	cloud_example2.addGeoJsonStore(store_example2);
	// Set the SQL query in the store
	store_example2.sql = "SELECT * FROM public.publicnuclear_facilities_update";
	// Load the GeoJSON
	store_example2.load();
	// Defined a "onLoad" function
	store_example2.onLoad = function(){
		// When the GeoJSON is loaded, zoom to its extent
		cloud_example2.zoomToExtentOfgeoJsonStore(store_example2);
	};
});
</script>
<div id="map_example2" style="width: 100%;height: 500px"></div>

This is a bit more advanced example. It shows how use the the SQL API to create a 100 km buffer around features. Both the features and the buffers is mapped. Because the features in this case are stored in projection EPSG:4326 they are transformed to webmercator before the buffering. The grid object is used to show the GeoJSON in a table grid.

 
<script>
$(window).load(function() {
	// Create a new map object
	var cloud_example3 = new mygeocloud_ol.map("map_example3","mydb");
	// Create a new GeoJSON store
	var store_example3 = new mygeocloud_ol.geoJsonStore("mydb");
	// Add the GeoJSON store to the map
	cloud_example3.addGeoJsonStore(store_example3);
	// Set the SQL query in the store. You can fire any SELECT query that returns one or more geometries. 
	store_example3.sql = "SELECT *,buffer(transform(the_geom,900913),100000) FROM public.publicnuclear_facilities_update LIMIT 5";
	// Load the GeoJSON
	store_example3.load();
	// Defined a "onLoad" function
	store_example3.onLoad = function(){
		// When the GeoJSON is loaded, zoom to its extent
		cloud_example3.zoomToExtentOfgeoJsonStore(store_example3);
		// Add a grid with the GeoJSON
		var grid_example3 = new mygeocloud_ol.grid("grid_example3",store_example3);
	};
});
</script>
<div id="map_example3" style="width: 100%;height: 500px"></div>
<div id="grid_example3" style="width: 100%;height: 500px"></div>