Differences

This shows you the differences between two versions of the page.

--- crea:intro [2018/09/05 23:15] – [Rules] bblonski
+++ crea:intro [2021/02/24 00:58] (current) – [Map] bblonski
@@ Line 38: / Line 38: @@
 <html>
-    <div id="map" class="smallmap"></div>
+<div id="map" class="map"></div>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
+<link rel="stylesheet" href="https://openlayers.org/en/v5.2.0/css/ol.css" type="text/css">
+<script type="text/javascript" src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
 <script type="text/javascript">
-var map;
+    var map;
-        function init(){
+    var extent = [0,0,2048, 2048];
-            map = new OpenLayers.Map('map');
+    var projection = new ol.proj.Projection({
+        code: 'crea-image',
-            var graphic = new OpenLayers.Layer.Image(
+        units: 'pixels',
-                'City Lights',
+        extent: extent
-                'data/4_m_citylights_lg.gif',
+    });
-                new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
+    function init(){
-                new OpenLayers.Size(580, 288),
+        map = new ol.Map({
-                {numZoomLevels: 3}
+            target: 'map',
-            );
+            layers: [
+                new ol.layer.Image({
-            graphic.events.on({
+                    source: new ol.source.ImageStatic({
-                loadstart: function() {
+                        url: 'https://wiki.blonski.me/_media/crea/map_slope.png',
-                    OpenLayers.Console.log("loadstart");
+                        projection: projection,
-                },
+                        imageExtent: extent
-                loadend: function() {
+                    })
-                    OpenLayers.Console.log("loadend");
+                })
-                }
+            ],
-            });
+            view: new ol.View({
+                zoom: 1,
-            var jpl_wms = new OpenLayers.Layer.WMS(
+                maxZoom: 5,
-                "Global Imagery",
+                minZoom: 1,
-                "http://demo.boundlessgeo.com/geoserver/wms",
+                center: [1024, 1024],
-                {layers: "bluemarble"},
+                projection: projection,
-                {maxExtent: [-160, -88.759, 160, 88.759], numZoomLevels: 3}
+                extent: extent
-            );
+            })
+        });
-            map.addLayers([graphic, jpl_wms]);
+    }
-            map.addControl(new OpenLayers.Control.LayerSwitcher());
+    init();
-            map.zoomToMaxExtent();
+    </script>
-        }
-        </script>
 </html>