...
-
Capabilities
-
OpenLayers = Javascript (by example)
- Support for Multiple basemaps: BingMaps, OpenStreetMap, Stamen
- Model for interaction with multiple map server platforms: ArcGIS (REST), MapServer, GeoServer
- Support for key OGC standards: WMS, WMTS, WFS, GML, KML
- Multiple control types: Attribution, Zoom, Overview, Scale, FullScreen, Graticule
- Custom styled features with associated attributes: Curve, LinearRing, LineString, MultiLineString, MultiPoint, MultiPolygon, Point, Polygon
- Support for many formats for data read and write: ATOM, GML (1, 2, 3), GeoJSON, GPX, KML, WKT, any many others
- Open Source, enabling modification and integration into other systems (e.g. GeoExt)
- Greater emphasis on client-side processing - Client access and rendering of data files that Google's servers otherwise take care of (pros & cons to this approach)
- Integrated support for OGC services and their products
- Support for different projections (adds complexity)
- API more rich in options ==> more complexity
Application Programming Interface (API) Reference
OpenLayers_01.html
<html>
<head>
<link rel="stylesheet" href="css/OpenLayers_01.css" type="text/css">
<!-- these two files are imported from a host that provides a hosted full
build of the OpenLayers package for development as documented here:
https://openlayers.org/download/ -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.css"
type="text/css">
<script
src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.4/ol.js"
type="text/javascript">
</script>
</head>
<body>
<h1>This is a very simple OpenLayers 4 sample map page</h1>
<div id='map'><!-- This is where the map will be displayed --></div>
<!-- import the external Javascript file with the map configuration code -->
<script src="js/OpenLayers_01.js" type="text/javascript"></script>
</body>
</html>
OpenLayers_01.js
// OpenLayers_01.js
var myMap = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([-106.624083,35.08427]),
zoom: 18
})
});
OpenLayers_01.css
/* OpenLayers_01.css */
body {
width:100%;
height:100%
}
#map,.map {
width:600px;
height:400px;
}
#map_selector li {
cursor:pointer;
width:350px;
}
#map_selector li:hover {
background-color: yellow;
}
#map div.ol-viewport div.ol-overlaycontainer-stopevent
div.ol-overviewmap.ol-unselectable.ol-control.ol-uncollapsible {
top: 200px;
bottom: 300px;
}
- Basic Mapper (with Open Street Map base map (source))
- Mapper (source) with a variety of base maps (Bing, Stamen, OSM) and basic layer selection
- Basic Mapper with Controls: No Controls (source), Customized Controls (source)