Examples index

GeoMapFish

GeoMapFish examples.


API help

GeoMapFish API help.


Animation example

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


ASITVD source example

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


Attributes example

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 .


Background layer selection example

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.


Background layer selection example

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.


Color picker example

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


Control example

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


Create Feature Example

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


Datepicker example

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


Datepicker example

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


Disclaimer example

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.


ngeoDisplaywindow

This example shows how to use the ngeoDisplaywindow component.


Draw Feature Example

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


Elevation profile example

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


Simple example

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


GoogleStreetView Example

This example shows how to use the ngeo-streetview component with GoogleStreetview.


Grid example

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


Import features example

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


Interaction button group example

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


Layer order example

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.


Layer tree example

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.


Location-search example

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.


Print example

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


Mapillary Example

This example shows how to use the ngeo-streetview component with Mapillary.


Map swipe example

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


Simple example

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


Measure example

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.


Mobile geolocation example

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


Modal example

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


Modify circle example

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


Modify rectangle example

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


Notification service example

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.


Offline example

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


Permalink example

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.


Popover example

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


ngeoCreatePopup service factory example

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.


Query example

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:


Recenter example

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


Rotate interaction example

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.


Routing example

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


Scale selector example

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


Search example

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


Simple example

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


Simple OL-Cesium 3d example

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.


SVG example

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


Activate tools example

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.