-
Notifications
You must be signed in to change notification settings - Fork 25
MAPP
MAPP is a library for web mapping applications based on Openlayers map component.
The mapp.dictionary is an object proxy. The get handler will use the mapp.language (default: en) value to lookup the requested key in the mapp.dictionaries. The English value will be returned if mapp.language entry has not been specified.
new Proxy({}, {
get: function(target, key, receiver){
if (mapp.dictionaries[mapp.language][key]) {
return mapp.dictionaries[mapp.language][key]
}
return mapp.dictionaries.en[key]
}})The mapp.dictionaries object can be extended in any of the javascript modules imported into the mapp library.
Mapview is a decorator method. Methods and properties are assigned to the mapview object provided as argument. The decorated mapview object is returned.
export default (mapview) => {
Object.assign(mapview, {
srid: mapview.locale.srid || '3857',
addLayer,
fitView,
geoJSON,
getBounds,
infotip,
locate,
popup,
layers: {},
locations: {},
interactions: {
highlight: _highlight.bind(mapview),
draw: _draw.bind(mapview),
modify: _modify.bind(mapview),
zoom: _zoom.bind(mapview),
}
})Valid mapview keys and values are:
mapp.Mapview({
host: '/mapp', // REQUIRED; Can be relative
target: 'Map', // REQUIRED; Can be string or instanceOf HTMLElement
hooks: true,
locale: {
extent: {
north: 62, //lat
east: 11, //lng
south: 48, //lat
west: -19, //lng
mask: true,
},
view: {
lat: 54.3,
lng: -4,
z: 4,
},
minZoom: 4,
maxZoom: 18,
},
scrollWheelZoom: true,
scalebar: 'metric', //'imperial'
controls: [new ol.control.Zoom()], // Adds OL zoom control
attribution: {
target: document.getElementById('Attribution'),
links: {
[`XYZ v${mapp.version}`]: "https://geolytix.github.io/xyz",
Openlayers: "https://openlayers.org",
}
}
})The mapview.Map control is an OL Map interface assigned by the Mapview decorator.
The mapview.Map pointermove event updates the mapview.position and mapview.pointerLocation properties when triggered.
The mapview.Map mouseout event sets the mapview.position and mapview.pointerLocation properties to null when triggered.
The mapview.Map changeEnd event updates the lat, lng, and z URL view hooks when triggered.
The mapview.Map moveend event debounces the changeEnd evnt.
mapview.layers is a key/value list of layers which have been added to a mapview with the mapview.addLayer method. The layer key can be used to lookup a layer in the list.
mapview.locations is a key/value list of selected locations. A location key is composed of the location's layer key and id (eg. stores|23). The mapp.location.get method will add a location to the locations list.
A single layer, or an array of layers provided as argument to the mapview.addLayer method will be cloned and assigned to the mapview.layers list. The layer.display flag will be set according to the current mapp hooks if hooks are enabled for the mapview. The layer.show() method will be called if layer.display is truthy.
Fits view[port] of the mapview.Map control to the provided extent. The options argument is passed on to the OL view.fit() method as opt_options. The options argument allows to override defaults for the duration of the transition animation and viewport padding.
The mapview.geoJSON method reads a single geoJSON geometry provided as params.geometry. The geometry will be transformed to the mapview.srid projection if an SRID/EPSG code is provided as params.dataProjection. The zIndex for the layer can provided as param. A new OL vector source and layer will be created. The layer will be added to the mapview.Map and returned. The style for the vector layer must be provided as params.Style.
mapview.geoJSON({
zIndex: infinity,
geometry: {
type: 'Point',
coordinates: entry.value,
},
dataProjection: '4326' // EPSG|SRID
// The Style param must be provided as OL Style object.
Style: mapp.utils.style({
strokeColor: "#F00",
strokeWidth: 2,
})
})mapview.getBounds returns the calculated extent from the mapview.Map view[port]. The extent is returned as a object with north, east, west, and south keys for the individual edge values. The values are transformed to a target projection if an srid argument is provided as EPSG/SRID code.
The infotip method will create an .infotip element with the content provided as HTML element. The infotip element position will update when a mapview pointermove event is triggered. Only one infotip element per mapview is valid. The current infotip will be cleared before a new element is created. A falsy argument (eg. null) will simply clear the infotip without creating a new element. The pointermove event will be unset when the current infotip element is cleared.
mapview.locate will draw an icon on the browser navigator position retrieved from mapp.utils.getCurrentPosition. The icon will be removed from the mapview.Map if mapview.locate is called again.
The infotip method will create a .popup element with params.content provided as HTML element. Unlike the infotip element, the popup element has a static position. The position can be provided as params.coords. If not provided the popup will positioned on the current mapview.position. Only one popup element per mapview is valid. The current popup will be cleared before a new element is created. A falsy argument (eg. null) will simply clear the popup without creating a new element.
Interactions must be bound to the mapview object. The current interaction is assigned to mapview.interaction. The finish method of the current interaction is called when a different interaction is activated.
The draw interaction provides an interface to OL drawing tools. A newly drawn simple geometry will be returned from a valid drawing input.
The highlight interaction returns a candidate feature from each feature at pixel found in a filtered list of layers.
The modify interaction provides access to OL modify tools to modify a provided input geometry.
The zoom interaction will draw a temporary rectangular polygon. The mapview.Map view[port] will be set to fit the extent of the drawn zoombox.
A Mapp Layer is an interface for spatial data. Layer are defined as JSON objects in the layers array of a Workspace Locale. A valid layer must have a format and a data source connection (dbs) defined. The XYZ host will assign defaults to a layer object.
A mapview must be assigned to the layer object in order to decorate a layer.
The layer decorator passes the layer to a defined format method which assigns the Openlayers layer object (L).
Common interface methods such as layer.show, and hide are assigned to the layer object.
A blank layer.filter object will be set if the filter has not been defined in the JSON layer.
The first theme from the layer.style.themes array will be assigned as layer.style.theme if not already set.
Any plugins matching layer keys will be executed with the layer being passed as argument to the plugin method.
The layer object is returned from the decorator.
The layer's display property will be set to true.
The OL layer layer.L will be removed first and then add to the mapview.map control. This is to prevent that the layer.L is added more than once to the map control.
A displayTrue event will be dispatched to the layer's view.
The layer's attribition will be added to the mapview.
An URL parameter hook is added if enabled for the mapview.
The layer's display property will be set to false.
The OL layer layer.L will be removed from the mapview.map control.
A displayFalse event will be dispatched to the layer's view.
The layer's attribition will be removed from the mapview.
An URL parameter hook is removed if enabled for the mapview.
Return layer table value for the current zoom level. Will return the first or last table (maybe null) if the current zoom level exceeds the range defined in layer.tables.
Return the last table value from the layer.tables object which is not null.
Return the first table value from the layer.tables object which is not null.
The layer.style method has access to the layer object and receives an OL feature as only argument.
An array of features can be assigned to a layer as featureLookup. A feature will not be styled if the featureLookup is set but the feature is not found in the array. The lookup feature properties will be assigned to the current feature for subsequent styling.
The style.cluster is assigned to the style.default for features with a count of more than 1, indicating a cluster of multiple locations.
The style.label object is assign to the style object.
For point geometry features, the style.icon object is assigned from a clone of the style object if an icon style is not defined in the style object. The scale and clusterScale will be removed from the root of the style object.
The theme style associated with a cat property value is assigned to the feature style.
The clusterScale is applied to the style.icon. The clusterScale is the icon scale for the cluster with the largest size. The size is either the count of locations in a cluster or the aggregate sum of field.values for all locations grouped in a cluster. Scaling is either linear or logarithmic (logScale) between the smallest (or single location) and largest cluster.
// The clusterScale will be added to the icon scale.
style.icon.clusterScale = layer.style.logScale ?
// A natural log will be applied to the cluster scaling.
Math.log(style.icon.clusterScale) / Math.log(layer.max_size) * Math.log(properties.size || properties.count) :
// A fraction of the icon clusterScale will be added to the items scale for all but the biggest cluster location.
1 + (style.icon.clusterScale / layer.max_size * (properties.size || properties.count))zoomInScale and zoomOutScale are applied to icon styles based on the current zoom level.
The highlightStyle is applied for a feature whose ID is set as the layer.highlight value.
The style.label text value is assigned for feature labels.
An OL style is returned to the layer render method. The OL style is returned from utils.style which receives the JSON style and feature as arguments.
The layer.format.cluster assigns an OL vector layer and source in the mapp.layer.decorate method. The cluster loader method is triggered from the mapview.Map changeEnd event. The loader method sends an XHR to the mapview.host with parameters inferred from the current viewport and style configuration. The loader method will create OL features from projected coordinates in the cluster response. A new OL vector source with the features will be assigned to the vector layer, effectively removing the existing source and features. The current max value will be calculated from the cluster response and assigned to the layer in order to calculate the cluster icon scale. Setting the vector source on the existing vector layer will automatically trigger the assigned layer.style method.
The loadPlugins util take a single or an array of resource locator and attempt to load each as a dynamic module import. The utility will await for all dynamic imports to resolve.
The style utility method receives a JSON style object, and an OL feature as optional argument and returns an OL style object. The OL style is created from stroke, fill, image(icon), and text(label) OL style objects. Icon styles are memoized prior to being scaled. The scale applied to an icon is calculated from the base scale, clusterScale, zoomInScale, zoomOutScale, and highlightScale.