GeoMapFish examples.

GeoMapFish API help.

This example shows how to animate the resizing of a map without distortions of the map during the animation. This uses the ngeoResizemap directive.

This example shows how to use the ngeo.source.AsitVD source to access tiles from the ASIT VD tile server.

This example shows how to use the ngeo-attributes directive, which binds a form to the inner properties of a ol.Feature object. Changes made through the form are applied to the feature and vice-versa. Try playing with the form or click to change the name. You can also Disable the form .

This example shows how to write an application-specific directive (app-backgroundlayer) to create a background layer selector. The directive is based on Angular's select, ngOptions, ngModel and ngChange directives, and on the ngeoBackgroundLayerMgr service.

This example shows how to write an application-specific directive (app-backgroundlayer) to create a background layer selector. The directive is based on Bootstrap's dropdown jQuery plugin, and on the ngeoBackgroundLayerMgr service.

This example shows how to write an application-specific directive (app-colorpicker) based on ngeo-colorpickerto create a color picker.

This example shows how to use the ngeo-control directive to insert an OpenLayers control in the page.

This example shows how to use the ngeo-createfeature directive to draw point, linestring or polygon vector features on a map.

This example shows how to use the ngeo-date-picker directive.

This example shows how to use the ngeo-datetimepicker directive.

This example shows how to use the ngeo-disclaimer service to show dismissable messages. Only one unique message per type may be displayed at a time, i.e. 2 different "success" messages may be displayed, but not twice the same one. The same message can be displayed one in "success" the other "info", for example.

This example shows how to use the ngeoDisplaywindow component.

This example shows how to use the ngeo-drawfeature directive to draw vector features on the map.

This example shows how to use ngeo-profile to create a D3-based elevation profile graphic.

This example shows how to use the ngeo-map component to insert an OpenLayers map in a page.

This example shows how to use the ngeo-googlestreetview component.

This example shows how to use the ngeo-grid component.

This example shows how to use the ngeo-filereader directive to import features from a KML file read from the user's file system.

This example shows how to use the ngeo-btn-group and ngeo-btn directives to activate/deactivate OpenLayers interactions in a toggle group.

This example shows how to use the ngeo-sortable directive and the ngeo.misc.syncArrays function to create a list of layers where the order of layers can be changed using drag-and-drop.

This example shows how to use ngeo's layer tree directive (ngeo-layertree). It also shows how to define an application-specific HTML partial for the tree nodes.

This example shows how to use the ngeo-search directive with the ngeoCreateLocationSearchBloodhound service and the LocationSearchOptions options together with the GeoAdmin Location Search API.

This example shows how to use ngeo.Print to print an OpenLayers map with MapFish Print v3.

This example shows how to use the ngeo-Mapswipe component to insert an input type range and swipe a map.

This example shows how to use the ngeo.interaction.MeasureLength, ngeo.interaction.MeasureArea, and ngeo.interaction.MeasureAzimut interactions to create measure tools for an OpenLayers map.

This example shows how to use the ngeo-geolocation directive.

This example shows how to use the ngeo-modal directive to open a modal.

This examples shows how to use the ngeo.interaction.ModifyCircle. This interaction allows to resize a circle-shaped polygon.

This examples shows how to use the ngeo.interaction.ModifyRectangle. This interaction allows to resize a rectangle-shaped polygon.

This example shows how to use the ngeo-notification service to display all sorts of messages. By default, those are displayed at a specific location, but you can define where to display the messages. You can also define all sorts of options: the type of message, the delay, etc.

This example shows how to use the ngeo-offline component.

This example shows how to create an application-specific map component based on the ngeoMap directive that uses the ngeoLocation and ngeoDebounce services to update the browser address bar URL when the map view changes.

This example shows how to use the ngeo-popover directive to open a popover

This example shows how to use the ngeoCreatePopup service factory to display all sorts of modals. One can display plain text or display an external web page within an iframe.

This example shows how to configure and use the ngeo-query and ngeo-query-panel components. It also shows how the ngeo.misc.ToolActivate can be used to make the component inactive when an other tool becomes active. You can how queries are made on the map and what to do with the results using the panel. You can also temporarily change them using keyboard shortcuts:

• Hold down the "ctrl" key (meta on MAC) to set the query mode to drawing boxes on the map.
• Hold the A key to add the results to existing ones.
• Hold the X key to remove the results from the existing ones.

This example shows how to use the ngeo-recenter directive to jump between some predefined areas.

This examples shows how to use the ngeo.interaction.Rotate. This interaction allows to rotate a feature. Click on the feature to activate the interaction, then click and drag to rotate it.

This example shows how to use ngeo's routing component (ngeo-routingComponent)..

This example shows how to write an application-specific directive (app-scaleselecor) based on ngeo-scaleselectorto create a scale selector.

This example shows how to use the ngeo-search directive, which is based on Twitter's typeahead component.

This example shows how to use the ngeo-map component to insert an OpenLayers map in a page.

This example shows how to use ngeo.olcs.Manager and the ngeo-olcs-controls3d component to control an 3D view.
It also shows how 3d navigation interacts with permalink.

Here an example of permalink format: ?3d_enabled=true&3d_lon=26.81533&3d_lat=-21.85790&3d_elevation=1274213&3d_heading=360.000&3d_pitch=-63.995
3d permalink is managed in ngeo-olcs-service.

This example shows different ways to include an SVG in the application using Webpack.

This example shows how to use ngeo.misc.ToolActivate objects with the ngeo.misc.ToolActivateMgrto active only one map control at once. If none draw control is choose, the click on the map is enabled.