The Map client API makes it very easy to add maps to your own web pages or apps. The API works with the SQL API and WMS API. Below are a bit more advanced examples.
A cluster map is a great way to show the density of geographical features. In this example earth quakes are clustered. Just call clusterActivate() on the JSON store. The default base map is replaced with Google Hybrid Map.
<script>
$(window).load(function() {
// Create a new map object
var cloud_example4 = new mygeocloud_ol.map("map_example4", "mydb");
// Create a new GeoJSON store with a custom style map. The lifetime of the query cache is set to avoid strees on the server.
var store_example4 = new mygeocloud_ol.geoJsonStore("mydb", {
styleMap : styleMap,
lifetime : 1000000
});
// Activate clustering
store_example4.clusterActivate();
// Add Google Hybrid base map instead of the default base map
cloud_example4.setBaseLayer(cloud_example4.addGoogleHybrid());
// Zoom to an extent
cloud_example4.zoomToExtent([-16378765.698287, 1927734.4957731, -4931556.3438927, 6819704.3053435], true);
// Add the GeoJSON store to the map
cloud_example4.addGeoJsonStore(store_example4);
// Set the SQL query in the store. You can fire any SELECT query that returns one or more geometries.
store_example4.sql = "select * FROM publicquksigx020";
// Load the GeoJSON
store_example4.load();
});
</script>
<div id="map_example4" style="width: 100%;height: 500px"></div>
This query shows the real power of PostGIS. We have two data set: Nuclear plants and populated places. The plant points are buffered with a 100 km zone and the populations within the zones are summerized and a style map is applied. The population layer with over 50.000 points are stored in the same projection as the wanted projection for the result set, so no tranformation is needed (which would slow down the query).
<script>
$(window).load(function() {
// Define a column model
var columns = [{
"header" : "Name of plant",
"dataIndex" : "name",
"type" : "varchar",
"sortable" : true
}, {
"header" : "Population",
"dataIndex" : "count",
"type" : "int",
"typeObj":{"type":"int"},
"sortable" : true
}];
// Create a new map object
var cloud_example5 = new mygeocloud_ol.map("map_example5", "mydb");
// Create a new GeoJSON store with a custom style map. The lifetime of the query cache is set to avoid strees on the server.
var store_example5 = new mygeocloud_ol.geoJsonStore("mydb", {
styleMap : styleMap,
lifetime : 1000000
});
// Add the GeoJSON store to the map
cloud_example5.addGeoJsonStore(store_example5);
// Set the SQL query in the store. You can fire any SELECT query that returns one or more geometries.
store_example5.sql = "select publicnuclear_facilities_update.name,sum(pop.pop_1990)::int as count,ST_Buffer(ST_Transform(publicnuclear_facilities_update.the_geom,900913),100000) as buffer FROM pop,publicnuclear_facilities_update WHERE pop.the_geom && ST_Buffer(ST_Transform(publicnuclear_facilities_update.the_geom,900913),100000) AND St_Intersects(pop.the_geom,ST_Buffer(ST_Transform(publicnuclear_facilities_update.the_geom,900913),100000)) GROUP by buffer,publicnuclear_facilities_update.name ORDER by count"
// Load the GeoJSON
store_example5.load();
// Defined a "onLoad" function
store_example5.onLoad = function() {
// When the GeoJSON is loaded, zoom to its extent
cloud_example5.zoomToExtentOfgeoJsonStore(store_example5);
// Add a grid with the GeoJSON
var grid_example5 = new mygeocloud_ol.grid("grid_example5", store_example5);
};
});
</script>
<div id="map_example5" style="width: 100%;height: 500px"></div>
<div id="grid_example5" style="width: 100%;height: 500px"></div>
When you've a lot of features you want to map, you need an efficient strategy to visualized them. Here we use two stores tied to the same data source with earthquakes: One fixed and one dynamic. In the fixed store we load all features with server side caching and activate clustering. When we get above zoom level 9 (zooming in) the fixed store is hidden and the dynamic is loaded. The dynamic store only loads features within the map and reloads when pan or zoom ends. This strategy is enabled by using the movedEnd callback function and dynamic SQL. Further more we add a control to each store: When feature click on the fixed store we center on the cluster and zoom to level 9. When hover on the dynamic store a pretty label with feature attributes is shown.
<script>
$(window).load(function() {
// Create a new map object
var cloud_example6 = new mygeocloud_ol.map("map_example6", "mydb");
// Zoom to an extent
cloud_example6.zoomToExtent([-13823322.969013, 4248362.674188, -12997803.063649, 4554110.7872862], true);
// Create a fixed store for the cluster map
var store_fixed_example6 = new mygeocloud_ol.geoJsonStore("mydb", {
sql : "SELECT * FROM public.publicquksigx020",
// We use server side cache for the fxed store
lifetime : 100000,
styleMap : styleMap,
selectControl : {
onSelect : function(feature) {
cloud_example6.zoomToPoint(feature.geometry.x,feature.geometry.y,9);
}
}
});
// Activate clustering on the fixed layer
store_fixed_example6.clusterActivate();
// Create a new GeoJSON store for dynamically loading of features
var store_dynamic_example6 = new mygeocloud_ol.geoJsonStore("mydb", {
// You can use {minX}, {minY}, {maxX}, {maxy}, {centerX}, {centerY} and {bbox} in the SQL.
sql : "SELECT * FROM public.publicquksigx020 WHERE ST_SetSRID('BOX({minX} {minY},{maxX} {maxY})'::Box2d,900913) && ST_Transform(public.publicquksigx020.the_geom,900913)",
// Callback that is fired when a map movement ends
movedEnd : function() {
// If we are zoomed to level 9, reload the store.
if (cloud_example6.map.getZoom() >= 9) {
store_dynamic_example6.reset();
store_dynamic_example6.load();
store_fixed_example6.hide();
// Else reset the dynamic store and show the fixed one
} else {
store_dynamic_example6.reset();
store_fixed_example6.show();
}
},
styleMap : styleMap2,
// Add a control that shows a label when hovering over feature
selectControl : {
hover : true,
highlightOnly : true,
clickout : true,
renderIntent : "temporary",
eventListeners : {
featurehighlighted : function(e) {
var feature = e.feature;
var pixel = cloud_example6.getPixelCoord(feature.geometry.x, feature.geometry.y)
$("#label").css("top", pixel.y - 70);
$("#label").css("left", pixel.x - 78);
$("#label").fadeIn(250);
$("#label").html("<div style='font-size:.8em'>Magnitude: " + feature.attributes.magnitude + "<br/>Year:" + feature.attributes.year + "</div>");
},
featureunhighlighted : function(e) {
$("#label").fadeOut(250);
}
}
}
});
// Add the GeoJSON stores to the map
cloud_example6.addGeoJsonStore(store_fixed_example6);
cloud_example6.addGeoJsonStore(store_dynamic_example6);
// Activate the select controls
store_fixed_example6.selectControl.activate();
store_dynamic_example6.selectControl.activate()
// The initial load of the fixed store
store_fixed_example6.load();
});
</script>
<div id="map_example6" style="width: 100%;height: 500px"></div>