Examples index

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 Bootstrap's dropdown jQuery plugin, 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 Angular's select, ngOptions, ngModel and ngChange directives, and on the ngeoBackgroundLayerMgr service.


BBox Query example

This example shows how to use the ngeo-mobile-query directive. Press Ctrl (or Cmd on Mac) and draw a query bbox on the map.


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.


Desktop geolocation example

This example shows how to use the ngeo-desktop-geolocation 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.


GoogleStreetView Example

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


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 ngeox.search.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.


Map Query example

This example shows how to use the ngeo-map-query directive. It also shows how the ngeo.misc.ToolActivate can be used to make the directive inactive when an other tool becomes active. The "Dummy" button here does nothing, but when toggled the query directive becomes inactive.


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-mobile-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.


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.


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 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.


Simple example

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


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.