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


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.


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.


Draw Feature Example

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


Geolocation example

This example shows how to use the ngeoDecorateGeolocation service to bind the Geolocation's tracking value to an input checkbox.


GoogleStreetView Example

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


Grid example

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


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.


Interaction toggle example

This examples shows how to use ngeoDecorateInteraction to activate/deactivate an interaction through ng-model.


Layer loading example

This examples shows how to use ngeoDecorateLayerLoading to be notified when a layer is loading. The loading property is true when the layer is loading, false otherwise.


Layer opacity example

This examples shows how to use ngeoDecorateLayer to control the visibility of a layer through ng-model.


Layer order example

This example shows how to use the ngeo-sortable directive and the ngeoSyncArrays service 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.


Layer visibility example

This examples shows how to use ngeoDecorateLayer to control the visibility of a layer through ng-model.


Location chooser example

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


Location-search example

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


Profile example

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


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.


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 directive to insert an OpenLayers map in a page.


Activate tools example

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