From f29d0a0f017075a0243e7792c16b186168b4f632 Mon Sep 17 00:00:00 2001 From: David Rubert Date: Thu, 4 Jan 2024 15:14:49 +0100 Subject: [PATCH] update --- dist/app.min.js | 4 ++-- partials/frontpage.html | 25 ++++++++++++++++++------- 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/dist/app.min.js b/dist/app.min.js index a4584ce5..b1ac0461 100644 --- a/dist/app.min.js +++ b/dist/app.min.js @@ -1,3 +1,3 @@ -/*! angular-openlayers-directive WebApp 24-05-2015 */ -!function(){"use strict";angular.module("webapp",["ngRoute","openlayers-directive"]).config(["$locationProvider",function(a){a.html5Mode(!1)}]),function(){var a=angular.module("webapp");a.controller("CenterAutodiscoverController",["$scope",function(a){angular.extend(a,{center:{lat:0,lon:0,autodiscover:!1}})}])}(),function(){var a=angular.module("webapp");a.controller("CenterBoundsController",["$scope",function(a){angular.extend(a,{cairo:{lat:30.0047,lon:31.2586,zoom:10,bounds:[]}})}])}(),function(){var a=angular.module("webapp");a.controller("CenterConstrainZoomController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:5},defaults:{view:{maxZoom:9,minZoom:6}}})}])}(),function(){var a=angular.module("webapp");a.controller("CenterUrlHashController",["$scope","$location",function(a,b){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:4,centerUrlHash:!0}});var c;b.search().c&&(c=b.search().c,b.search({c:""})),a.$on("centerUrlHash",function(a,d){c&&(d=c,c=void 0),b.search({c:d})})}])}(),function(){var a=angular.module("webapp");a.controller("CenterController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:6}})}])}(),function(){var a=angular.module("webapp");a.controller("ControlController",["$scope",function(a){angular.extend(a,{center:{lat:43.88,lon:7.57,zoom:4},view:{rotation:-1},controls:[{name:"zoom",active:!0},{name:"rotate",active:!0},{name:"attribution",active:!0}]}),a.degreesToRadians=function(){a.view.rotation=parseFloat(a.degrees,10).toFixed(2)*(Math.PI/180)},a.$watch("view.rotation",function(b){a.degrees=(180*b/Math.PI).toFixed(2)})}])}(),function(){var a=angular.module("webapp");a.controller("CustomController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:8},defaults:{interactions:{mouseWheelZoom:!0}}})}])}(),function(){var a=angular.module("webapp");a.controller("EventDefaultsController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:4},defaults:{events:{map:["singleclick","pointermove"]}},mouseposition:{},mouseclickposition:{},projection:"EPSG:3857",changeProjection:function(b){a.projection=b}}),a.$on("openlayers.map.pointermove",function(b,c){a.$apply(function(){if(a.projection===c.projection)a.mouseposition=c;else{var b=ol.proj.transform([c.lon,c.lat],c.projection,a.projection);a.mouseposition={lat:b[1],lon:b[0],projection:a.projection}}})}),a.$on("openlayers.map.singleclick",function(b,c){a.$apply(function(){if(a.projection===c.projection)a.mouseclickposition=c;else{var b=ol.proj.transform([c.lon,c.lat],c.projection,a.projection);a.mouseclickposition={lat:b[1],lon:b[0],projection:a.projection}}})})}])}(),function(){var a=angular.module("webapp");a.controller("EventVectorLayerController",["$scope","$location","$http",function(a,b,c){angular.extend(a,{center:{lat:30,lon:0,zoom:2},mapbox:{name:"mapbox",source:{type:"TileJSON",url:"http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp"}},geojson:{name:"geojson",source:{type:"GeoJSON",url:"examples/json/countries.geo.json"}},defaults:{events:{layers:["mousemove","click"]}}}),a.$on("openlayers.layers.geojson.mousemove",function(b,c){console.log("hola"),a.$apply(function(b){c&&a.countries[c.getId()]&&(b.mouseMoveCountry=c?b.countries[c.getId()].name:"")})}),a.$on("openlayers.layers.geojson.click",function(b,c){a.$apply(function(a){c&&(a.mouseClickCountry=c?a.countries[c.getId()].name:"")})}),c.get("examples/json/all.json").success(function(b){a.countries={};for(var c=0;c12?"http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png":"http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"})}])}(),function(){var a=angular.module("webapp");a.controller("LayerController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:3},layers:[{name:"OpenStreetMap",source:{type:"OSM"}},{active:!0,name:"MapBox Terrain",source:{type:"TileJSON",url:"https://api.tiles.mapbox.com/v3/examples.map-i86nkdio.jsonp"}},{name:"MapBox Night",source:{type:"TileJSON",url:"https://api.tiles.mapbox.com/v3/examples.map-0l53fhk2.jsonp"}},{name:"Mapbox Geography",source:{type:"TileJSON",url:"http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp"}}],changeLayer:function(b){a.layers.map(function(a){a.active=a===b})}})}])}(),function(){var a=angular.module("webapp");a.controller("MainController",["$scope","$http","$q","$timeout",function(a,b,c,d){var e=c.defer();a.$on("$routeChangeSuccess",function(c,f){var g=f.params.example;a.section=f.params.section;var h=function(a){b.get(a.extUrl).success(function(b){a.source=b,d(function(){Prism.highlightAll()},200)})};e.promise.then(function(b){console.log("section",a.section),a.section||(a.section="first");var c=b[a.section];for(var d in c){var e=c[d];e.url===g&&(a.activeExample=e,h(e))}})}),b.get("json/examples.json").success(function(b){a.section||(a.section="first"),a.examples=b.examples,e.resolve(b.examples)})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerAddRemoveController",["$scope",function(a){angular.extend(a,{center:{lat:51.505,lon:-.09,zoom:7},markers:[{name:"London",active:!0,lat:51.505,lon:-.09},{name:"Bath",active:!0,lat:51.375,lon:-2.35},{name:"Canterbury",active:!1,lat:51.267,lon:1.083}]})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerLabelController",["$scope",function(a){angular.extend(a,{center:{lat:41.02,lon:29.08,zoom:11}})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerPropertiesController",["$scope",function(a){angular.extend(a,{center:{lat:42.9515,lon:-8.6619,zoom:9},styleCheckboxes:function(){return $(".ui.checkbox").checkbox(),!0},changeShowLabel:function(a){a.label.show=!a.label.show},changeShowLabelOnMouseOver:function(a){a.label.showOnMouseOver=!a.label.showOnMouseOver},markers:{finisterre:{name:"Finisterre",lat:42.9078005,lon:-9.265031499999964,label:{message:"Finisterre",show:!0,showOnMouseOver:!0}},santiago:{name:"Santiago de Compostela",lat:42.88059620000001,lon:-8.544641200000001,label:{message:"Santiago de Compostela",show:!0,showOnMouseOver:!0}}}})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerRenderHTMLController",["$scope",function(a){var b=[{name:"Eiffel Tower",lat:48.858093,lon:2.294694,label:{message:'',show:!1,showOnMouseOver:!0}},{name:"Notre Dame de Paris",lat:48.852966,lon:2.349902,label:{message:'',show:!0,showOnMouseOver:!0}},{name:"Palace of Versailles",lat:48.804722,lon:2.121782,label:{message:'',show:!1,showOnMouseOver:!0}}];angular.extend(a,{center:{lat:48.828093,lon:2.294694,zoom:11},markers:b}),a.centerAndShow=function(c){c.label.show||(b.filter(function(a){a.label.show=!1}),a.center.lat=c.lat,a.center.lon=c.lon),c.label.show=!c.label.show}}])}(),function(){var a=angular.module("webapp");a.controller("MarkerStaticImageLayerController",["$scope",function(a){var b=[{coord:[853,670],projection:"pixel",label:{message:'',show:!1,showOnMouseOver:!0}},{coord:[980,580],projection:"pixel",label:{message:'',show:!1,showOnMouseOver:!0}}];angular.extend(a,{center:{coord:[900,600],zoom:2},markers:b,defaults:{view:{projection:"pixel",extent:[0,0,1800,1200]}},"static":{source:{type:"ImageStatic",url:"http://blog.wallpops.com/wp-content/upLoads/2013/05/WPE0624.jpg",imageSize:[1800,1200]}}})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerController",["$scope",function(a){angular.extend(a,{center:{lat:51.505,lon:-.09,zoom:8}})}])}(),function(){var a=angular.module("webapp");a.controller("MultipleMapController",["$scope",function(a){angular.extend(a,{center:{lat:43.735,lon:-79.3734,zoom:10},defaults:{view:{maxZoom:11,minZoom:3}},defaults2:{view:{maxZoom:14,minZoom:3}},geojson1:{source:{type:"GeoJSON",url:"examples/json/toronto1.json"}},geojson2:{source:{type:"GeoJSON",url:"examples/json/toronto2.json"}},markers1:{one:{lat:43.75,lon:-79.56},two:{lat:43.76,lon:-79.5}},markers2:{one:{lat:43.75,lon:-79.56},two:{lat:43.75,lon:-79.45},three:{name:"Marker Three",lat:43.81,lon:-79.26}}})}])}(),function(){var a=angular.module("webapp");a.controller("ViewRotationController",["$scope",function(a){angular.extend(a,{degrees:0,center:{lat:18.17,lon:-66.37,zoom:8},view:{rotation:0}}),a.degreesToRadians=function(){a.view.rotation=parseFloat(a.degrees,10).toFixed(2)*(Math.PI/180)},a.$watch("view.rotation",function(b){a.degrees=(180*b/Math.PI).toFixed(2)})}])}();var a=angular.module("webapp");a.config(["$routeProvider",function(a){a.when("/",{templateUrl:"partials/frontpage.html"}).when("/:section/:example",{templateUrl:function(a){return"partials/"+a.example+".html"},reloadOnSearch:!1})}]),angular.module("webapp").run(["$templateCache",function(a){a.put("partials/basic.html",'

Simple Example

Showing a simple map on your DOM requires almost no code. Look at the source code of the stand-alone example.

Source code of this example

View stand-alone example

'),a.put("partials/center-autodiscover.html",'

Center Autodiscover example

Click me!

We can interact with the map with the center object, which allows us to set the specific position where the map shoduld point, in a bi-directional way. Take a look at the center object property of this map to know how this works:

{{ center | json }}

Source code of this example

View stand-alone example

'),a.put("partials/center-bounds.html",'

Center Bounds example

If you define a bounds array inside the center object it will be updated with the bounds of the map.

Center object

{{ cairo | json }}

Source code of this example

View stand-alone example

'),a.put("partials/center-constrain-zoom.html",'

Center Constrain Zoom example

We can constrain the maximum and minimum zoom allowed in our map changing the default view options.

Defaults object

{{ defaults | json }}

Source code of this example

View stand-alone example

'),a.put("partials/center-no-javascript.html",'

Simple Example

We can center the map in a specific location using almost no javascript code. Only loading our AngularJS application.

Source code of this example

View stand-alone example

'),a.put("partials/center-url-hash.html",'

Center Url Hash map example

Watsonville Malibu Garden Grove Tijuana

We can interact with the map with the center object, which allows us to set the specific position where the map shoduld point, in a bi-directional way. Take a look at the center object property of this map to know how this works:

{{ london | json }}

Source code of this example

View stand-alone example

'),a.put("partials/center.html",'

Center map example

We can interact with the map with the center object, which allows us to set the specific position where the map shoduld point, in a bi-directional way. Take a look at the center object property of this map to know how this works:

{{ london | json }}

Source code of this example

View stand-alone example

'),a.put("partials/control.html",'

Controls Example

Maybe you need to change the default parameters before creating the map, for example, setting the default controls, interactions, or layer tiles.

Map controls object:

{{ controls | json }}

Source code of this example

View stand-alone example

'),a.put("partials/custom.html",'

Custom Parameters Example

Maybe you need to change the default parameters before creating the map, for example, setting the default controls and interactions..

Map defaults object:

{{ defaults | json }}

Source code of this example

View stand-alone example

'),a.put("partials/event-defaults.html",'

Event Defaults Example

Map defaults object:

You can propagate some map events so you can react based on this events on your application. Take a look at the events object.

Projection type desired:

Mouse position in map

Mouse click position in map
Defaults object
{{ defaults | json }}
Source code of this example
View stand-alone example
'),a.put("partials/event-vector-layer.html",'
Event propagation of a GeojJSON object Example
You can propagate layer events, like a vector layer, with the feature selected by the user in the event.
Mouse over this country: {{ mouseMoveCountry }}
Mouse click on this country: {{ mouseClickCountry }}
Source code of this example
View stand-alone example
'),a.put("partials/frontpage.html",'
Manage your maps with the least javascript code possible
Look at the HTML source code used to show this map.
<openlayers lat="39.92" lon="116.38" zoom="10" height="400" custom-layers="true">\n    <ol-layer source-type="TileJSON" source-url="https://api.tiles.mapbox.com/v3/examples.map-i86nkdio.jsonp"></ol-layer>\n    <ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place."></ol-marker>\n</openlayers>\n
View stand-alone example
'),a.put("partials/layer-bing-maps.html",'

Bing Maps example
You can use easily the Microsoft Bing Maps tiles with OpenLayers. But first of all, you must request an API key to use these maps here.
Current layers object:
{{ bing | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson-center.html",'
GeoJSON Center example
You can center the map relative to the extension of the JSON, like you can see in this example.
Current geojson layer object:
{{ geojson | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson-change-style.html",'
Change style of GeoJSON vectorial shape
You can change dinamically the GeoJSON properties and it will be reflected on the map rendered.

Current Spain geojson layer object:
{{ spain | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson-inline.html",'
GeoJSON Inline example
This example adds the GeoJSON structure inline inside the layer object, instead of loading the GeoJSON from OpenLayers library.
Current Italy GeoJSON object:
{{ ita | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson.html",'
GeoJSON Layer example
You can load and style GeoJSON objects easily with Openlayers.
Current geojson object:
{{ geojson | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-heatmap.html",'
Layer KML Heatmap example
You can load an render a HeatMap in KML format with Openlayers.
Current heatmap layer object:
{{ heatmap | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-mapquest.html",'

MapQuest Layer example
You can use easily use the MapQuest Maps with OpenLayers too.
Current mapquest layer object:
{{ mapquest | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-multiple.html",'


Multiple and different layer types example
You can mix any of the previous seen layers together.
Current layers object:
{{ layers | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-no-javascript.html",'
Custom layer with no javascript Example
We can center the map and set a custom layer using almost no javascript code. Only loading our AngularJS application.
Source code of this example
View stand-alone example
'),
+/*! angular-openlayers-directive WebApp 04-01-2024 */
+!function(){"use strict";angular.module("webapp",["ngRoute","openlayers-directive"]).config(["$locationProvider",function(a){a.html5Mode(!1)}]),function(){var a=angular.module("webapp");a.controller("CenterAutodiscoverController",["$scope",function(a){angular.extend(a,{center:{lat:0,lon:0,autodiscover:!1}})}])}(),function(){var a=angular.module("webapp");a.controller("CenterBoundsController",["$scope",function(a){angular.extend(a,{cairo:{lat:30.0047,lon:31.2586,zoom:10,bounds:[]}})}])}(),function(){var a=angular.module("webapp");a.controller("CenterConstrainZoomController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:5},defaults:{view:{maxZoom:9,minZoom:6}}})}])}(),function(){var a=angular.module("webapp");a.controller("CenterUrlHashController",["$scope","$location",function(a,b){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:4,centerUrlHash:!0}});var c;b.search().c&&(c=b.search().c,b.search({c:""})),a.$on("centerUrlHash",function(a,d){c&&(d=c,c=void 0),b.search({c:d})})}])}(),function(){var a=angular.module("webapp");a.controller("CenterController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:6}})}])}(),function(){var a=angular.module("webapp");a.controller("ControlController",["$scope",function(a){angular.extend(a,{center:{lat:43.88,lon:7.57,zoom:4},view:{rotation:-1},controls:[{name:"zoom",active:!0},{name:"rotate",active:!0},{name:"attribution",active:!0}]}),a.degreesToRadians=function(){a.view.rotation=parseFloat(a.degrees,10).toFixed(2)*(Math.PI/180)},a.$watch("view.rotation",function(b){a.degrees=(180*b/Math.PI).toFixed(2)})}])}(),function(){var a=angular.module("webapp");a.controller("CustomController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:8},defaults:{interactions:{mouseWheelZoom:!0}}})}])}(),function(){var a=angular.module("webapp");a.controller("EventDefaultsController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:4},defaults:{events:{map:["singleclick","pointermove"]}},mouseposition:{},mouseclickposition:{},projection:"EPSG:3857",changeProjection:function(b){a.projection=b}}),a.$on("openlayers.map.pointermove",function(b,c){a.$apply(function(){if(a.projection===c.projection)a.mouseposition=c;else{var b=ol.proj.transform([c.lon,c.lat],c.projection,a.projection);a.mouseposition={lat:b[1],lon:b[0],projection:a.projection}}})}),a.$on("openlayers.map.singleclick",function(b,c){a.$apply(function(){if(a.projection===c.projection)a.mouseclickposition=c;else{var b=ol.proj.transform([c.lon,c.lat],c.projection,a.projection);a.mouseclickposition={lat:b[1],lon:b[0],projection:a.projection}}})})}])}(),function(){var a=angular.module("webapp");a.controller("EventVectorLayerController",["$scope","$location","$http",function(a,b,c){angular.extend(a,{center:{lat:30,lon:0,zoom:2},mapbox:{name:"mapbox",source:{type:"TileJSON",url:"http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp"}},geojson:{name:"geojson",source:{type:"GeoJSON",url:"examples/json/countries.geo.json"}},defaults:{events:{layers:["mousemove","click"]}}}),a.$on("openlayers.layers.geojson.mousemove",function(b,c){console.log("hola"),a.$apply(function(b){c&&a.countries[c.getId()]&&(b.mouseMoveCountry=c?b.countries[c.getId()].name:"")})}),a.$on("openlayers.layers.geojson.click",function(b,c){a.$apply(function(a){c&&(a.mouseClickCountry=c?a.countries[c.getId()].name:"")})}),c.get("examples/json/all.json").success(function(b){a.countries={};for(var c=0;c12?"http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png":"http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"})}])}(),function(){var a=angular.module("webapp");a.controller("LayerController",["$scope",function(a){angular.extend(a,{london:{lat:51.505,lon:-.09,zoom:3},layers:[{name:"OpenStreetMap",source:{type:"OSM"}},{active:!0,name:"MapBox Terrain",source:{type:"TileJSON",url:"https://api.tiles.mapbox.com/v3/examples.map-i86nkdio.jsonp"}},{name:"MapBox Night",source:{type:"TileJSON",url:"https://api.tiles.mapbox.com/v3/examples.map-0l53fhk2.jsonp"}},{name:"Mapbox Geography",source:{type:"TileJSON",url:"http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp"}}],changeLayer:function(b){a.layers.map(function(a){a.active=a===b})}})}])}(),function(){var a=angular.module("webapp");a.controller("MainController",["$scope","$http","$q","$timeout",function(a,b,c,d){var e=c.defer();a.$on("$routeChangeSuccess",function(c,f){var g=f.params.example;a.section=f.params.section;var h=function(a){b.get(a.extUrl).success(function(b){a.source=b,d(function(){Prism.highlightAll()},200)})};e.promise.then(function(b){console.log("section",a.section),a.section||(a.section="first");var c=b[a.section];for(var d in c){var e=c[d];e.url===g&&(a.activeExample=e,h(e))}})}),b.get("json/examples.json").success(function(b){a.section||(a.section="first"),a.examples=b.examples,e.resolve(b.examples)})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerAddRemoveController",["$scope",function(a){angular.extend(a,{center:{lat:51.505,lon:-.09,zoom:7},markers:[{name:"London",active:!0,lat:51.505,lon:-.09},{name:"Bath",active:!0,lat:51.375,lon:-2.35},{name:"Canterbury",active:!1,lat:51.267,lon:1.083}]})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerLabelController",["$scope",function(a){angular.extend(a,{center:{lat:41.02,lon:29.08,zoom:11}})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerPropertiesController",["$scope",function(a){angular.extend(a,{center:{lat:42.9515,lon:-8.6619,zoom:9},styleCheckboxes:function(){return $(".ui.checkbox").checkbox(),!0},changeShowLabel:function(a){a.label.show=!a.label.show},changeShowLabelOnMouseOver:function(a){a.label.showOnMouseOver=!a.label.showOnMouseOver},markers:{finisterre:{name:"Finisterre",lat:42.9078005,lon:-9.265031499999964,label:{message:"Finisterre",show:!0,showOnMouseOver:!0}},santiago:{name:"Santiago de Compostela",lat:42.88059620000001,lon:-8.544641200000001,label:{message:"Santiago de Compostela",show:!0,showOnMouseOver:!0}}}})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerRenderHTMLController",["$scope",function(a){var b=[{name:"Eiffel Tower",lat:48.858093,lon:2.294694,label:{message:'',show:!1,showOnMouseOver:!0}},{name:"Notre Dame de Paris",lat:48.852966,lon:2.349902,label:{message:'',show:!0,showOnMouseOver:!0}},{name:"Palace of Versailles",lat:48.804722,lon:2.121782,label:{message:'',show:!1,showOnMouseOver:!0}}];angular.extend(a,{center:{lat:48.828093,lon:2.294694,zoom:11},markers:b}),a.centerAndShow=function(c){c.label.show||(b.filter(function(a){a.label.show=!1}),a.center.lat=c.lat,a.center.lon=c.lon),c.label.show=!c.label.show}}])}(),function(){var a=angular.module("webapp");a.controller("MarkerStaticImageLayerController",["$scope",function(a){var b=[{coord:[853,670],projection:"pixel",label:{message:'',show:!1,showOnMouseOver:!0}},{coord:[980,580],projection:"pixel",label:{message:'',show:!1,showOnMouseOver:!0}}];angular.extend(a,{center:{coord:[900,600],zoom:2},markers:b,defaults:{view:{projection:"pixel",extent:[0,0,1800,1200]}},"static":{source:{type:"ImageStatic",url:"http://blog.wallpops.com/wp-content/upLoads/2013/05/WPE0624.jpg",imageSize:[1800,1200]}}})}])}(),function(){var a=angular.module("webapp");a.controller("MarkerController",["$scope",function(a){angular.extend(a,{center:{lat:51.505,lon:-.09,zoom:8}})}])}(),function(){var a=angular.module("webapp");a.controller("MultipleMapController",["$scope",function(a){angular.extend(a,{center:{lat:43.735,lon:-79.3734,zoom:10},defaults:{view:{maxZoom:11,minZoom:3}},defaults2:{view:{maxZoom:14,minZoom:3}},geojson1:{source:{type:"GeoJSON",url:"examples/json/toronto1.json"}},geojson2:{source:{type:"GeoJSON",url:"examples/json/toronto2.json"}},markers1:{one:{lat:43.75,lon:-79.56},two:{lat:43.76,lon:-79.5}},markers2:{one:{lat:43.75,lon:-79.56},two:{lat:43.75,lon:-79.45},three:{name:"Marker Three",lat:43.81,lon:-79.26}}})}])}(),function(){var a=angular.module("webapp");a.controller("ViewRotationController",["$scope",function(a){angular.extend(a,{degrees:0,center:{lat:18.17,lon:-66.37,zoom:8},view:{rotation:0}}),a.degreesToRadians=function(){a.view.rotation=parseFloat(a.degrees,10).toFixed(2)*(Math.PI/180)},a.$watch("view.rotation",function(b){a.degrees=(180*b/Math.PI).toFixed(2)})}])}();var a=angular.module("webapp");a.config(["$routeProvider",function(a){a.when("/",{templateUrl:"partials/frontpage.html"}).when("/:section/:example",{templateUrl:function(a){return"partials/"+a.example+".html"},reloadOnSearch:!1})}]),angular.module("webapp").run(["$templateCache",function(a){a.put("partials/basic.html",'
Simple Example
Showing a simple map on your DOM requires almost no code. Look at the source code of the stand-alone example.
Source code of this example
View stand-alone example
'),a.put("partials/center-autodiscover.html",'
Center Autodiscover example
Click me!
We can interact with the map with the center object, which allows us to set the specific position where the map shoduld point, in a bi-directional way. Take a look at the center object property of this map to know how this works:
{{ center | json }}
Source code of this example
View stand-alone example
'),a.put("partials/center-bounds.html",'
Center Bounds example
If you define a bounds array inside the center object it will be updated with the bounds of the map.
Center object
{{ cairo | json }}
Source code of this example
View stand-alone example
'),a.put("partials/center-constrain-zoom.html",'
Center Constrain Zoom example
We can constrain the maximum and minimum zoom allowed in our map changing the default view options.
Defaults object
{{ defaults | json }}
Source code of this example
View stand-alone example
'),a.put("partials/center-no-javascript.html",'
Simple Example
We can center the map in a specific location using almost no javascript code. Only loading our AngularJS application.
Source code of this example
View stand-alone example
'),a.put("partials/center-url-hash.html",'
Center Url Hash map example
Watsonville Malibu Garden Grove Tijuana
We can interact with the map with the center object, which allows us to set the specific position where the map shoduld point, in a bi-directional way. Take a look at the center object property of this map to know how this works:
{{ london | json }}
Source code of this example
View stand-alone example
'),a.put("partials/center.html",'
Center map example
We can interact with the map with the center object, which allows us to set the specific position where the map shoduld point, in a bi-directional way. Take a look at the center object property of this map to know how this works:
{{ london | json }}
Source code of this example
View stand-alone example
'),a.put("partials/control.html",'
Controls Example
Maybe you need to change the default parameters before creating the map, for example, setting the default controls, interactions, or layer tiles.
Map controls object:
{{ controls | json }}
Source code of this example
View stand-alone example
'),a.put("partials/custom.html",'
Custom Parameters Example
Maybe you need to change the default parameters before creating the map, for example, setting the default controls and interactions..
Map defaults object:
{{ defaults | json }}
Source code of this example
View stand-alone example
'),a.put("partials/event-defaults.html",'
Event Defaults Example
Map defaults object:
You can propagate some map events so you can react based on this events on your application. Take a look at the events object.
Projection type desired:
Mouse position in map
Mouse click position in map
Defaults object
{{ defaults | json }}
Source code of this example
View stand-alone example
'),a.put("partials/event-vector-layer.html",'
Event propagation of a GeojJSON object Example
You can propagate layer events, like a vector layer, with the feature selected by the user in the event.
Mouse over this country: {{ mouseMoveCountry }}
Mouse click on this country: {{ mouseClickCountry }}
Source code of this example
View stand-alone example
'),a.put("partials/frontpage.html",'
Manage your maps with the least javascript code possible
Look at the HTML source code used to show this map.
<openlayers lat="39.92" lon="116.38" zoom="10" height="400">\n    <ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place."></ol-marker>\n</openlayers>\n
View stand-alone example
'),a.put("partials/layer-bing-maps.html",'

Bing Maps example
You can use easily the Microsoft Bing Maps tiles with OpenLayers. But first of all, you must request an API key to use these maps here.
Current layers object:
{{ bing | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson-center.html",'
GeoJSON Center example
You can center the map relative to the extension of the JSON, like you can see in this example.
Current geojson layer object:
{{ geojson | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson-change-style.html",'
Change style of GeoJSON vectorial shape
You can change dinamically the GeoJSON properties and it will be reflected on the map rendered.

Current Spain geojson layer object:
{{ spain | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson-inline.html",'
GeoJSON Inline example
This example adds the GeoJSON structure inline inside the layer object, instead of loading the GeoJSON from OpenLayers library.
Current Italy GeoJSON object:
{{ ita | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-geojson.html",'
GeoJSON Layer example
You can load and style GeoJSON objects easily with Openlayers.
Current geojson object:
{{ geojson | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-heatmap.html",'
Layer KML Heatmap example
You can load an render a HeatMap in KML format with Openlayers.
Current heatmap layer object:
{{ heatmap | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-mapquest.html",'

MapQuest Layer example
You can use easily use the MapQuest Maps with OpenLayers too.
Current mapquest layer object:
{{ mapquest | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-multiple.html",'


Multiple and different layer types example
You can mix any of the previous seen layers together.
Current layers object:
{{ layers | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-no-javascript.html",'
Custom layer with no javascript Example
We can center the map and set a custom layer using almost no javascript code. Only loading our AngularJS application.
Source code of this example
View stand-alone example
'),
 a.put("partials/layer-opacity.html",'
Layer Opacity example
This examples show you how you can interact with the opacity of the layer.
Mapbox Layer Object
{{ mapbox | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-stamen-maps.html",'

Stamen Maps example
You can add an Stamen Maps layer easily too.
Current stamen layer object:
{{ stamen | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-static-image.html",'
Static Image Layer example
You can add an static image inside a layer and use OpenLayers to pan/zoom.
Current layers object:
{{ static | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-topojson.html",'
TopoJSON Layer example
You can load and style TopoJSON objects easily with Openlayers.
Current layers object:
{{ topojson | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-wms.html",'
WMS Layer example
You can load a WMS Layer from a GeoServer source.
Current layers object:
{{ wms | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer-zoom-changer.html",'
Layer Zoom Changer example
This examples show you how you could change the active layer in response to a simple event, for example, changing the zoom level of the map into a highter than 12 value.
Center zoom level
{{ london.zoom | json }}
Layer Source object
{{ OSMLayer.source | json }}
Source code of this example
View stand-alone example
'),a.put("partials/layer.html",'
Layers change tiles example
In this map you can change the main active layer pressing the buttons below. Try it.

On each button click we\'re simply adding a new <ol-layer> object inside the <openlayers> tag.
Current layers object:
{{ layers | json }}
Source code of this example
View stand-alone example
'),a.put("partials/marker-add-remove.html",'

Markers Interact Example
Adding and interacting with markers inside our OpenLayer maps is really easy. Take a look at the stand-alone source code.
Source code of this example
View stand-alone example
'),a.put("partials/marker-label.html",'
Marker with Label Example
Adding a label to our markers is done via a ol-marker propety: "message". Take a look at the stand-alone source code to see it.
Source code of this example
View stand-alone example
'),a.put("partials/marker-no-javascript.html",'
Markers and custom layer with no javascript Example
We can center the map, set a custom layer and show a marker with a message using almost no javascript code. Only loading our AngularJS application.
Source code of this example
View stand-alone example
'),a.put("partials/marker-properties.html",'
Marker Properties Example
You can change dinamically the markers properties. Try with these two markers:
Marker object
{{ marker | json }}

Source code of this example
View stand-alone example
'),a.put("partials/marker-render-html.html",'

Render HTML inside the marker labels
You can render HTML inside a marker label if you want, making use of the angular-sanitize module.
Markers object
{{ markers | json }}
Source code of this example
View stand-alone example
'),a.put("partials/marker-static-image-layer.html",'
Markers inside an Static Image Layer
Mouse over the markers to show the label with an image.
Static layer object
{{ static | json }}
Markers object
{{ markers | json }}
Source code of this example
View stand-alone example
'),a.put("partials/marker.html",'
Marker Example
Adding and interacting with markers inside our OpenLayer maps is really easy. Take a look at the stand-alone source code.
Source code of this example
View stand-alone example
'),a.put("partials/multiple-map.html",'

Multiple Maps Example
We can render two (or more) maps in screen, each one with its own properties, and make them interact making use of AngularJS.
Source code of this example
View stand-alone example
'),a.put("partials/view-rotation.html",'

View Rotation Example
This examples shows how to rotate the map view interacting with the view object.
View object
{{ view | json }}
Source code of this example
View stand-alone example
')}])}();
\ No newline at end of file
diff --git a/partials/frontpage.html b/partials/frontpage.html
index cfeaba68..39ca2a65 100644
--- a/partials/frontpage.html
+++ b/partials/frontpage.html
@@ -1,14 +1,25 @@
 

-    
-        
-        
+    
+        
     
-    
Manage your maps with the least javascript code possible

+    

+        Manage your maps with the least javascript code possible
+    

     
Look at the HTML source code used to show this map.

-    
<openlayers lat="39.92" lon="116.38" zoom="10" height="400" custom-layers="true">
-    <ol-layer source-type="TileJSON" source-url="https://api.tiles.mapbox.com/v3/examples.map-i86nkdio.jsonp"></ol-layer>
+    
<openlayers lat="39.92" lon="116.38" zoom="10" height="400">
     <ol-marker lat="39.92" lon="116.38" message="Here is Beijing. Dreamful place."></ol-marker>
 </openlayers>
 

-    
View stand-alone example

+    

+        View stand-alone example
+