Last active
August 29, 2015 13:57
-
-
Save pgiraud/9778739 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <title>OpenLayers Basic OSM Example</title> | |
| <script src="http://maps.google.com/maps/api/js?v=3&sensor=false"></script> | |
| <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css" type="text/css"> | |
| <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/OpenLayers.js"></script> | |
| <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
| <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> | |
| </head> | |
| <body> | |
| <h1 id="title">Basic OSM Example</h1> | |
| <div id="tags"> | |
| Choose map : | |
| <button type="button" class="btn btn-default" id="L" data-toggle="modal" data-target="#geo"><span class="glyphicon glyphicon-globe"></span></button> | |
| </div> | |
| <!-- Geo. Layers Popup Modal --> | |
| <div id="geo" class="modal fade bs-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> | |
| <div class="modal-dialog modal-sm"> | |
| <div class="modal-content"> | |
| <a class="radio" href="#" data-layer="osmmapnik" data-dismiss="modal"><span class="glyphicon glyphicon-globe"></span> OSM Mapnik</a> | |
| <a class="radio" href="#" data-layer="osmlandscape" data-dismiss="modal"><span class="glyphicon glyphicon-globe"></span> OSM Landscape</a> | |
| <a class="radio" href="#" data-layer="googlesatellite" data-dismiss="modal"><span class="glyphicon glyphicon-globe"></span> Google Satellite</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="map" class="smallmap" style="width:512px;height:512px;></div> | |
| <div id="docs"> | |
| <p>This example shows a very simple OSM layout with minimal controls.</p> | |
| </div> | |
| <script src="scales.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var map, layer; | |
| var resolutions = [2445.9849047851562, 1222.9924523925781, 611.4962261962891, | |
| 305.74811309814453]; | |
| var serverResolutions = [156543.03390625, 78271.516953125, 39135.7584765625, | |
| 19567.87923828125, 9783.939619140625, | |
| 4891.9698095703125, 2445.9849047851562, | |
| 1222.9924523925781, 611.4962261962891, | |
| 305.74811309814453, 152.87405654907226, | |
| 76.43702827453613, 38.218514137268066, | |
| 19.109257068634033, 9.554628534317017, | |
| 4.777314267158508, 2.388657133579254, | |
| 1.194328566789627, 0.5971642833948135]; | |
| var layers = { | |
| osmmapnik: new OpenLayers.Layer.OSM( "Simple OSM Map", null, { | |
| serverResolutions: serverResolutions, | |
| isBaseLayer: false, | |
| visibility: false | |
| }), | |
| osmlandscape: new OpenLayers.Layer.OSM("OSM Landscape", | |
| ["http://a.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png", "http://b.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png"], | |
| { | |
| serverResolutions: serverResolutions, | |
| isBaseLayer: false, | |
| visibility: false | |
| } | |
| ), | |
| osmesri: new OpenLayers.Layer.OSM("Esri Topographic", | |
| "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/${z}/${y}/${x}.png", | |
| { | |
| serverResolutions: serverResolutions, | |
| isBaseLayer: false, | |
| visibility: false | |
| } | |
| ), | |
| googlesatellite: new OpenLayers.Layer.Google( | |
| "Google Satellite", | |
| { | |
| type: google.maps.MapTypeId.SATELLITE, | |
| isBaseLayer: false, | |
| visibility: false | |
| } | |
| ) | |
| }; | |
| var options = { | |
| controls: [ | |
| new OpenLayers.Control.Attribution(), | |
| new OpenLayers.Control.TouchNavigation({ | |
| dragPanOptions: { | |
| enableKinetic: true | |
| } | |
| }), | |
| new OpenLayers.Control.Zoom()/*, | |
| new OpenLayers.Control.LayerSwitcher()*/ | |
| ], | |
| projection: new OpenLayers.Projection('EPSG:900913'), | |
| maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34], | |
| resolutions: resolutions, | |
| theme: null, | |
| allOverlays: true, | |
| layers: [new OpenLayers.Layer('fake', { | |
| isBaseLayer: true, | |
| displayInLayerSwitcher: false | |
| })] | |
| }; | |
| map = new OpenLayers.Map('map',options); | |
| for (var l in layers) { | |
| map.addLayer(layers[l]); | |
| } | |
| map.setCenter( | |
| new OpenLayers.LonLat(-71.147, 42.472).transform( | |
| new OpenLayers.Projection("EPSG:4326"), | |
| map.getProjectionObject() | |
| ), 3 | |
| ); | |
| function setBackgroundLayer(layer) { | |
| // hide any existing background layer | |
| for (var l in layers) { | |
| layers[l].setVisibility(false); | |
| } | |
| // add the layer to map | |
| layer.setVisibility(true); | |
| } | |
| $('.radio').on('click', function() { | |
| // get the corresponding layer | |
| var layer = layers[$(this).attr('data-layer')]; | |
| setBackgroundLayer(layer); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment