The Visualisation on this map is set to "GeoJson" and the SQL Query loads some countries selected at random.
select json_object(
'type' is 'Feature',
'geometry' is geometry
returning clob
) as geojson
,country as name
,rownum as id
,country||'-flex1' as flex1
,'#' || /*random color*/ to_char(dbms_random.value(0, to_number('FFFFFF','XXXXXX')),'fm0XXXXX')
as flex2
from (
select *
from jk64demo_countries
where geometry is not null
order by dbms_random.value
) where rownum <= 70
The JavaScript Initialisation code has this:
this.options.featureStyleFn = function(feature) {
var color = feature.getProperty('attr02');
return /** @type {!google.maps.Data.StyleOptions} */({
fillColor : color,
strokeColor : color,
strokeWeight : 2
});
}
We could also embed the properties in the geoJson document; this allows the
developer to include any arbitrary properties while avoiding using "flex" fields:
select json_object(
'type' is 'Feature',
'geometry' is c.geometry,
'properties' is json_object(
'id' is c.id,
'name' is c.country,
'population' is c.pop
)
returning clob
) as geojson
from country_borders c
A Dynamic Action on the
mouseoverFeature event sets
P27_NAME
to:
this.data.feature.getProperty("name")
A Dynamic Action on the
mouseoutFeature event clears
P27_NAME
.
A Dynamic Action on the
selectFeature event sets
P27_DATA
to:
"id=" + this.data.feature.getProperty("id")
+ " attr01=" + this.data.feature.getProperty("attr01")
+ " attr02=" + this.data.feature.getProperty("attr02")
Refresh the page to load the borders for a different set of countries.
It is possible to query the data layer and interact dynamically with its contents.
For example, the "Select feature with id=1" button runs the following JavaScript:
var dataLayer = $("#map_testmap").reportmap("instance").map.data,
feature = dataLayer.getFeatureById('1');
feature.setProperty("isSelected",true);
$s("P27_NAME", feature.getProperty("name"));
$s("P27_DETAILS",
"id=" + feature.getProperty("id")
+ " attr01=" + feature.getProperty("attr01")
+ " attr02=" + feature.getProperty("attr02"));
This gets the Data Layer from the Google Map object, then queries it for the
feature matching the given ID (note that our query sets id to the rownum). It
then sets the "isSelected" property on the feature which triggers the map to
re-execute the feature's style function.
A custom style hides all the labels and roads from the map.