FIRS Code for MapCrunch Integration
Uploaded by
Efen SekoFIRS Code for MapCrunch Integration
Uploaded by
Efen SekoCreate firs map
Code :
<!doctype html>
<html>
<head>
<title>OpenLayers Components</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="overlay" style="background-color: yellow; width: 20px; height: 20px;
border-radius: 10px;"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// create a layer with the OSM source
var layer = new [Link]({
source: new [Link]()
});
// create an interaction to add to the map that isn't there by default
var interaction = new [Link]();
// create a control to add to the map that isn't there by default
var control = new [Link]();
// center on london, transforming to map projection
var center = [Link]([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
// an overlay to position at the center
var overlay = new [Link]({
position: center,
element: [Link]('overlay')
});
// view, starting at the center
var view = new [Link]({
center: center,
zoom: 6
});
// finally, the map with our custom interactions, controls and overlays
var map = new [Link]({
target: 'map',
layers: [layer],
interactions: [interaction],
controls: [control],
overlays: [overlay],
view: view
});
</script>
</body>
</html>
Create map
Code
<!doctype html>
<html>
<head>
<title>OpenLayers Components</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="overlay" style="background-color: yellow; width: 20px; height: 20px;
border-radius: 10px;"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// create a layer with the OSM source
var layer = new [Link]({
source: new [Link]()
});
// create an interaction to add to the map that isn't there by default
var interaction = new [Link]();
// create a control to add to the map that isn't there by default
var control = new [Link]();
// center on london, transforming to map projection
var center = [Link]([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');
// an overlay to position at the center
var overlay = new [Link]({
position: center,
element: [Link]('overlay')
});
// view, starting at the center
var view = new [Link]({
center: center,
zoom: 6
});
// finally, the map with our custom interactions, controls and overlays
var map = new [Link]({
target: 'map',
layers: [layer],
interactions: [interaction],
controls: [control],
overlays: [overlay],
view: view
});
</script>
</body>
</html>
Overlaying information
Code:
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<input type="checkbox" id="visible" checked> Toggle Layer Visibility
<script src="../assets/ol3/js/[Link]"></script>
<script>
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map',
layers: [layer],
view: view
});
// create a DOM Input helper for the checkbox
var visible = new [Link]([Link]('visible'));
// and bind its 'checked' property to the layer's 'visible' property
[Link]('checked', layer, 'visible');
</script>
</body>
</html>
Creating map class
Code:
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// the normal setup for our samples
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map',
layers: [layer],
view: view
});
</script>
</body>
</html>
Target practice
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div class="map">
<div id="right" class="half-map"></div>
<div id="left" class="half-map"></div>
<div class="panel">
<button onclick="changeTarget();">Change Target</button>
</div>
</div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'right',
layers: [layer],
view: view
});
// this function is called when the button is clicked.
// Move the map to another div based on its current target.
function changeTarget() {
var target = [Link]();
if (target == 'left') {
[Link]('right');
} else {
[Link]('left');
}
}
</script>
</body>
</html>
Creating animated map
<!doctype html>
<html>
<head>
<title>Animation Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<button onclick="doBounce(london);">Bounce To London</button><br />
<button onclick="doBounce(rome);">Bounce To Rome</button><br />
<button onclick="doPan(london);">Pan To London</button><br />
<button onclick="doPan(rome);">Pan To Rome</button><br />
<button onclick="doRotate();">Rotate</button><br />
<button onclick="doZoom(2);">Zoom Out</button><br />
<button onclick="doZoom(0.5);">Zoom In</button>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var rome = [Link]([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map',
layers: [layer],
view: view
});
function doBounce(location) {
// bounce by zooming out one level and back in
var bounce = [Link]({
resolution: [Link]().getResolution() * 2
});
// start the pan at the current center of the map
var pan = [Link]({
source: [Link]().getCenter()
});
[Link](bounce);
[Link](pan);
// when we set the center to the new location, the animated move will
// trigger the bounce and pan effects
[Link]().setCenter(location);
}
function doPan(location) {
// pan from the current center
var pan = [Link]({
source: [Link]().getCenter()
});
[Link](pan);
// when we set the new location, the map will pan smoothly to it
[Link]().setCenter(location);
}
function doRotate() {
// rotate 360 degrees
var rotate = [Link]({
rotation: [Link] * 2
});
[Link](rotate);
}
function doZoom(factor) {
// zoom from the current resolution
var zoom = [Link]({
resolution: [Link]().getResolution()
});
[Link](zoom);
// setting the resolution to a new value will smoothly zoom in or out
// depending on the factor
[Link]().setResolution([Link]().getResolution() * factor);
}
</script>
</body>
</html>
Link to view
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map1" class="half-map"></div>
<div id="map2" class="half-map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: [-201694.22, 6880651.07],
zoom: 6
});
// create two maps
var map1 = new [Link]({
target: 'map1',
layers: [layer]
});
var map2 = new [Link]({
target: 'map2',
layers: [layer],
view: view
});
// and bind the view properties so they effectively share a view
[Link]('view', map2);
</script>
</body>
</html>
Changing layer propertis
<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osmLayer = new [Link]({
source: new [Link](),
opacity: 0.6,
brightness: 0.2
});
var view = new [Link]({
center: [Link]([-1.8118500054456526, 52.4431409750608],
'EPSG:4326', 'EPSG:3857'),
zoom: 6
});
var map = new [Link]({
target: 'map'
});
[Link](osmLayer);
[Link](view);
/*
[Link]([Link]());
[Link]({opacity: 0.4, contrast:0.6});
[Link]([Link]('contrast'));
[Link]([Link]('opacity'));
[Link]({opacity: 0.7, contrast:0.3});
[Link]([Link]());
[Link]([Link]());
[Link]('opacity',1);
[Link](1);
[Link](0);
[Link]('myId', 'myUnique');
[Link]([Link]('myId'));
*/
</script>
</body>
</html>
Using OSM layer and MapQuest layers to create a map
<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var satellite = new [Link]({
source: new [Link]({layer: 'sat'})
});
var osm = new [Link]({
source: new [Link]({layer: 'osm'})
});
var map = new [Link]({
layers: [satellite, osm],
target: 'map',
view: new [Link]({
center: [Link]([-74.044683,40.689848], 'EPSG:4326',
'EPSG:3857'),
zoom: 13
})
});
/*
[Link](false);
[Link](true);
*/
</script>
</body>
</html>
Creating a Stamen layer
<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var stamenLayer = new [Link]({
source: new [Link]({
layer: 'toner'
})
});
var map = new [Link]({
layers: [stamenLayer],
target: 'map',
view: new [Link]({
center: [Link]([2.35239, 48.858391], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
})
});
</script>
</body>
</html>
Creating a Bing Maps layer
<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var sourceBingMaps = new [Link]({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Road',
culture: 'fr-FR'
});
var bingMapsRoad = new [Link]({
preload: Infinity,
source: sourceBingMaps
});
var bingMapsAerial = new [Link]({
preload: Infinity,
source: new [Link]({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial',
})
});
var map = new [Link]({
layers: [bingMapsRoad,bingMapsAerial],
target: 'map',
view: new [Link]({
center: [Link]([6.562783, 46.517814], 'EPSG:4326', 'EPSG:3857'),
zoom: 13
})
});
</script>
</body>
</html>
Creating tiles and adding Zoomify layer
<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var imgWidth = 9945;
var imgHeight = 6846;
var url = '/assets/data/1797-map-of-Dublin/';
var crossOrigin = 'anonymous';
var imgCenter = [imgWidth / 2, - imgHeight / 2];
// Maps always need a projection, but Zoomify layers are not geo-referenced,
and
// are only measured in pixels. So, we create a fake projection that the map
// can use to properly display the layer.
var proj = new [Link]({
code: 'ZOOMIFY',
units: 'pixels',
extent: [0, 0, imgWidth, imgHeight]
});
var source = new [Link]({
url: url,
size: [imgWidth, imgHeight],
crossOrigin: crossOrigin
});
var map = new [Link]({
layers: [
new [Link]({
source: source
})
],
target: 'map',
view: new [Link]({
projection: proj,
center: imgCenter,
zoom: 1
})
});
</script>
</body>
</html>
Playing with various sources and layers together
<!doctype html>
<html>
<head>
<title>Playing with various sources and layers</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var bingMapsAerial = new [Link]({
preload: Infinity,
source: new [Link]({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial'
})
});
[Link]('name', 'Bings Maps Aerial');
var bingMapsRoad = new [Link]({
preload: Infinity,
source: new [Link]({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Road',
culture: 'fr-FR'
})
});
[Link]('name', 'Bings Maps Road');
var mapQuestAerial = new [Link]({
source: new [Link]({layer: 'sat'})
});
[Link]('name', 'MapQuest Open Aerial');
var simpleWMS = new [Link]({
opacity: 0.6,
source: new [Link]({
url: '[Link]
params: {
'LAYERS': 'topp:states'
},
extent: [-13884991, -7455066, 2870341, 6338219]
})
});
[Link]('name', 'USA layer from Geoserver WMS demo');
var layers = [bingMapsAerial, bingMapsRoad, mapQuestAerial, simpleWMS];
var map = new [Link]({
layers: layers,
target: 'map',
view: new [Link]({
center: [Link]([-90, 40], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
//Generate checkbox from layers array
function generate_checkbox(id_checkbox, label_name, html_element) {
var checkbox = [Link]('input');
[Link] = "checkbox";
[Link] = id_checkbox;
var label = [Link]('label');
[Link] = id_checkbox;
[Link]([Link](label_name));
html_element.appendChild(checkbox);
html_element.appendChild(label);
}
// Loop from the end to get the top layer in first
for (var i = [Link] - 1; i >= 0; i--) {
var id = layers[i].get('id');
var name = layers[i].get('name');
generate_checkbox('layer_id_' + i, name, [Link]);
var visible = new [Link]([Link]('layer_id_' + i));
[Link]('checked', layers[i], 'visible');
}
</script>
</body>
</html>
Applying Zoomify sample knowledge to a single raw image
<!doctype html>
<html>
<head>
<title>Image static sample</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var imgWidth = 9945;
var imgHeight = 6846;
var url = '/assets/data/[Link]';
var imgCenter = [imgWidth / 2, imgHeight / 2];
// Maps always need a projection, but Zoomify layers are not geo-referenced,
and
// are only measured in pixels. So, we create a fake projection that the map
// can use to properly display the layer.
var proj = new [Link]({
code: 'ZOOMIFY',
units: 'pixels',
extent: [0, 0, imgWidth, imgHeight]
});
var source = new [Link]({
attributions: [
new [Link]({
html: '© <a href="[Link]
[Link]#Summary">Wikipedia Commons</a>'
})
],
url: url,
imageSize: [imgWidth, imgHeight],
projection: proj,
imageExtent: [Link]()
});
var map = new [Link]({
layers: [
new [Link]({
source: source
})
],
target: 'map',
view: new [Link]({
projection: proj,
center: imgCenter,
zoom: 1
})
});
</script>
</body>
</html>
Creating a vector layer
<!doctype html>
<html>
<head>
<title>Vector Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// create a vector source that loads a GeoJSON file
var vectorSource = new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
});
// a vector layer to render the source
var vectorLayer = new [Link]({
source: vectorSource
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
// the vector layer gets added like a raster layer
var map = new [Link]({
target: 'map',
layers: [vectorLayer],
view: view
});
</script>
</body>
</html>
Using the cluster source
<!doctype html>
<html>
<head>
<title>Vector Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// set up a vector source to read the geojson data
var originalSource = new [Link]({
url: '../assets/data/[Link]'
});
// create a layer from it so we can visualize the original data
var originalLayer = new [Link]({
source: originalSource
});
// a clustered source is configured with another vector source that it
// operates on
var clusterSource = new [Link]({
source: originalSource
});
// it needs a layer too
var clusterLayer = new [Link]({
source: clusterSource
});
// some data to use as the background
var vectorSource = new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
});
var vectorLayer = new [Link]({
source: vectorSource
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
target: 'map',
layers: [vectorLayer, clusterLayer],
view: view
});
</script>
</body>
</html>
Creating a loader function
<!doctype html>
<html>
<head>
<title>Vector Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script src="[Link]
<script>
// a tiled raster layer as the backdrop
var tiledRaster = new [Link]({
source: new [Link]()
});
// styles for the vector layer
var fill = new [Link]({
color: 'rgba(0,0,0,0.2)'
});
var stroke = new [Link]({
color: 'rgba(0,0,0,0.4)'
});
var circle = new [Link]({
radius: 6,
fill: fill,
stroke: stroke
});
var vectorStyle = new [Link]({
fill: fill,
stroke: stroke,
image: circle
});
// when loading from a features from a remote server, we need to provide
// a loading function that handles the actual communication
// using jQuery's ajax function, we can load the data and ask the WFS
// server to use jsonp and send the results to the loadFeatures function
var vectorLoader = function(extent, resolution, projection) {
var url = '[Link] +
'version=1.1.0&request=GetFeature&typename=osm:builtup_area&' +
'outputFormat=text/javascript&format_options=callback:loadFeatures' +
'&srsname=EPSG:3857&bbox=' + [Link](',') + ',EPSG:3857';
$.ajax({
url: url,
dataType: 'jsonp'
});
};
// this will be called when the server data has been loaded, we can
// use the source to read the features using its configured format
var loadFeatures = function(response) {
var features = [Link](response);
[Link](features);
};
// the source is configured with a format, loader function and a
// strategy, the strategy causes the loader function to be called
// in different ways. With the tile strategy, it will call with
// extents matching tile boundaries for the current zoom level
var vectorSource = new [Link]({
format: new [Link](),
loader: vectorLoader,
strategy: [Link](new [Link]({
maxZoom: 19
}))
});
// a vector layer, this time with some style options
var serverVector = new [Link]({
source: vectorSource,
style: vectorStyle
});
var center = [Link]([-72.6, 41.7], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 12
});
var map = new [Link]({
target: 'map',
layers: [tiledRaster, serverVector],
view: view
});
</script>
</body>
</html>
Working with the TileVector source
<!doctype html>
<html>
<head>
<title>Vector Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script src="[Link]
<script>
var tiledRaster = new [Link]({
source: new [Link]()
});
// some styles for the vector layer
var fill = new [Link]({
color: 'rgba(0,0,0,0.2)'
});
var stroke = new [Link]({
color: 'rgba(0,0,0,0.4)'
});
var circle = new [Link]({
radius: 6,
fill: fill,
stroke: stroke
});
var vectorStyle = new [Link]({
fill: fill,
stroke: stroke,
image: circle
});
// this time, we'll load vector tiles from openstreetmap
// in the topojson format
var tiledSource = new [Link]({
format: new [Link]({
defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',
tileGrid: new [Link]({
maxZoom: 19
}),
url:
'[Link]
});
var tiledVector = new [Link]({
source: tiledSource,
style: vectorStyle
});
var center = [Link]([-72.6, 41.7], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 12
});
var map = new [Link]({
target: 'map',
layers: [tiledRaster, tiledVector],
view: view
});
</script>
</body>
</html>
A drag-and-drop viewer for vector files
<!doctype html>
<html>
<head>
<title>Drag 'n' Drop Vector Example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var tiledRaster = new [Link]({
source: new [Link]()
});
var fill = new [Link]({
color: 'rgba(0,0,0,0.2)'
});
var stroke = new [Link]({
color: 'rgba(0,0,0,0.4)'
});
var circle = new [Link]({
radius: 6,
fill: fill,
stroke: stroke
});
var vectorStyle = new [Link]({
fill: fill,
stroke: stroke,
image: circle
});
// the draganddrop interaction allows us to drop files
// onto the browser window. If the file matches one of the
// format constructors, it will automatically extract
// the features from the file and trigger an event
var dragAndDrop = new [Link]({
formatConstructors: [
[Link],
[Link],
[Link],
[Link],
[Link]
]
});
// we can use the event to create a new vector source
// wiht the event's features and projection and add
// it to the map with a new vector layer
[Link]('addfeatures', function(event) {
var vectorSource = new [Link]({
features: [Link],
projection: [Link]
});
[Link](new [Link]({
source: vectorSource,
style: vectorStyle
}));
var view = [Link]();
[Link]([Link](), [Link]());
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
var map = new [Link]({
target: 'map',
layers: [tiledRaster],
view: view
});
// we can add an interaction after creating the map with the default set
[Link](dragAndDrop);
</script>
</body>
</html>
Geometries in action
<!doctype html>
<html>
<head>
<title>Geometry Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="closestFeature"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var countries = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
})
});
var view = new [Link]({
projection: 'EPSG:3857'
});
var map = new [Link]({
target: 'map',
layers: [countries],
view: view
});
// zoom to the extent of the vector source once the map has been rendered
// for the first time
[Link]('postrender', function() {
[Link]([Link]().getExtent(), [Link]());
});
// capture mouse move events so we can 'look' at the feature
// underneath the mouse
[Link]('pointermove', onMouseMove);
function onMouseMove(browserEvent) {
// the mousemove event sends a browser event object that contains
// the geographic coordinate the event happened at
var coordinate = [Link];
// we can get the closest feature from the source
var feature =
[Link]().getClosestFeatureToCoordinate(coordinate);
// to compute the area of a feature, we need to get it's geometry and do
// something a little different depeneding on the geometry type.
var geometry = [Link]();
var area;
switch ([Link]()) {
case 'MultiPolygon':
// for multi-polygons, we need to add the area of each polygon
area = [Link]().reduce(function(left, right) {
return left + [Link]();
}, 0);
break;
case 'Polygon':
// for polygons, we just get the area
area = [Link]();
break;
default:
// no other geometry types have area as far as we are concerned
area = 0;
}
area = area / 1000000;
// display the country name and area now
var text = [Link]().name + ' ' + [Link](0) + '
km<sup>2</sup>';
[Link]('closestFeature').innerHTML = text;
}
</script>
</body>
</html>
Interacting with features
<!doctype html>
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="name" style="font-size: 24px;"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var countries = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
})
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
var map = new [Link]({
target: 'map',
layers: [countries],
view: view
});
// when the user moves the mouse, get the name property
// from each feature under the mouse and display it
function onMouseMove(browserEvent) {
var coordinate = [Link];
var pixel = [Link](coordinate);
var el = [Link]('name');
[Link] = '';
[Link](pixel, function(feature) {
[Link] += [Link]('name') + '<br>';
});
}
[Link]('pointermove', onMouseMove);
</script>
</body>
</html>
Basic styling
<!doctype html>
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// a basic style for the country layer
var countryStyle = new [Link]({
fill: new [Link]({
color: [203, 194, 185, 1]
}),
stroke: new [Link]({
color: [177, 163, 148, 0.5],
width: 2,
lineCap: 'round'
})
});
// a style for the timezones, adding some text
var timezoneStyle = new [Link]({
stroke: new [Link]({
color: [64, 200, 200, 0.5],
width: 1
}),
text: new [Link]({
font: '20px Verdana',
text: 'TZ',
fill: new [Link]({
color: [64, 64, 64, 0.75]
})
})
});
var countries = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
}),
style: countryStyle
});
// make sure we don't use the styles in the KML layer
var timezones = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]',
extractStyles: false
}),
style: timezoneStyle
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
var map = new [Link]({
target: 'map',
layers: [countries, timezones],
view: view
});
</script>
</body>
</html>
The icon style
<!doctype html>
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// the icon style allows picking a section out of a larger image
var earthquakeStyle = new [Link]({
image: new [Link]({
anchor: [0.5, 0.5],
size: [52, 52],
offset: [52, 0],
opacity: 1,
scale: 0.25,
src: '../assets/img/[Link]'
})
});
var countryStyle = new [Link]({
fill: new [Link]({
color: [0, 255, 255, 1]
}),
stroke: new [Link]({
color: [127,127,127,1.0],
width: 1,
lineJoin: 'round'
})
});
var timezoneStyle = new [Link]({
stroke: new [Link]({
color: [127,127,127,1.0],
width: 1,
lineJoin: 'round',
lineCap: 'round'
})
});
var countries = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
}),
style: countryStyle
});
var timezones = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]',
extractStyles: false
}),
style: timezoneStyle
});
var earthquakes = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]',
extractStyles: false
}),
style: earthquakeStyle
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
var map = new [Link]({
target: 'map',
layers: [countries, timezones, earthquakes],
view: view
});
[Link]('render', function() {
[Link]([Link]().getExtent(), [Link]());
});
</script>
</body>
</html>
Using multiple styles
<!doctype html>
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var shadowStyle = new [Link]({
stroke: new [Link]({
color: [0, 0, 127, 0.15],
width: 8
}),
zIndex: 1
});
var countryStyle = new [Link]({
fill: new [Link]({
color: [203, 194, 185, 1]
}),
stroke: new [Link]({
color: [101, 95, 90, 1],
width: 1,
lineCap: 'round'
}),
zIndex: 2
});
// mulitple styles can be combined by using an array of them.
// the order in the array matters!
var countries = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
}),
style: [shadowStyle, countryStyle]
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
var map = new [Link]({
target: 'map',
layers: [countries],
view: view
});
</script>
</body>
</html>
Using properties to style features
<!doctype html>
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script src="[Link]
<script>
// define some colours matching some arbitrary divisions of the
// OECD income data
var high = [64,196,64,1];
var mid = [108,152,64,1];
var low = [152,108,64,1];
var poor = [196,32,32,1];
// map the income level codes to a colour value, grouping them
var incomeLevels = {
'HIC': high, // high income
'OEC': high, // high income OECD
'NOC': high, // high income, non-OECD
'UMC': mid, // upper middle income
'MIC': mid, // middle income
'LMC': mid, // lower middle income
'LIC': low, // low income
'LMY': low, // low and middle income
'HPC': poor // heavily indebted poor country
};
// a default style is good practice!
var defaultStyle = new [Link]({
fill: new [Link]({
color: [250,250,250,1]
}),
stroke: new [Link]({
color: [220,220,220,1],
width: 1
})
});
// a javascript object literal can be used to cache
// previously created styles. Its very important for
// performance to cache styles.
var styleCache = {};
// the style function returns an array of styles
// for the given feature and resolution.
// Return null to hide the feature.
function styleFunction(feature, resolution) {
// get the incomeLevel from the feature properties
var level = [Link]('incomeLevel');
// if there is no level or its one we don't recognize,
// return the default style (in an array!)
if (!level || !incomeLevels[level]) {
return [defaultStyle];
}
// check the cache and create a new style for the income
// level if its not been created before.
if (!styleCache[level]) {
styleCache[level] = new [Link]({
fill: new [Link]({
color: incomeLevels[level]
}),
stroke: [Link]
});
}
// at this point, the style for the current level is in the cache
// so return it (as an array!)
return [styleCache[level]];
}
var source = new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
});
var countries = new [Link]({
source: source,
style: styleFunction
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
var map = new [Link]({
target: 'map',
layers: [countries],
view: view
});
// we want to merge the country data with the income level data. After
// the country data is 'ready', we can load the income level data and
// the add a new property by linking the two sets of data on the
// ISO country code that is present in both data sets.
var key = [Link]('change', function(event) {
if ([Link]() == 'ready') {
[Link](key);
$.ajax('../assets/data/income_levels.json').done(function(data) {
[Link]().forEachFeature(function(feature) {
var code = [Link]('iso_a2');
if (data[code]) {
[Link]('incomeLevel', data[code]);
}
});
});
}
});
</script>
</body>
</html>
Creating interactive styles
<!doctype html>
<html>
<head>
<title>Geometry Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var countries = new [Link]({
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/[Link]'
})
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 1
});
var map = new [Link]({
target: 'map',
layers: [countries],
view: view
});
// we want to create text styles based on properties coming from a feature
// to do this, we need to create a new style for each string that needs to
// be represented. All the text styles will share the same properties
// except for the actual text itself. The properties can be set up ahead
// of time in an object literal
var baseTextStyle = {
font: '12px Calibri,sans-serif',
textAlign: 'center',
offsetY: -15,
fill: new [Link]({
color: [0,0,0,1]
}),
stroke: new [Link]({
color: [255,255,255,0.5],
width: 4
})
};
// when we move the mouse over a feature, we can change its style to
// highlight it temporarily
var highlightStyle = new [Link]({
stroke: new [Link]({
color: [255,0,0,0.6],
width: 2
}),
fill: new [Link]({
color: [255,0,0,0.2]
}),
zIndex: 1
});
// the style function for the feature overlay returns
// a text style for point features and the highlight
// style for other features (polygons in this case)
function styleFunction(feature, resolution) {
var style;
var geom = [Link]();
if ([Link]() == 'Point') {
var text = [Link]('text');
[Link] = text;
// this is inefficient as it could create new style objects for the
// same text.
// A good exercise to see if you understand would be to add caching
// of this text style
var isoCode = [Link]('isoCode').toLowerCase();
style = new [Link]({
text: new [Link](baseTextStyle),
image: new [Link]({
src: '../assets/img/flags/'+isoCode+'.png'
}),
zIndex: 2
});
} else {
style = highlightStyle;
}
return [style];
}
var featureOverlay = new [Link]({
map: map,
style: styleFunction
});
// when the mouse moves over the map, we get an event that we can use
// to create a new feature overlay from
[Link]('pointermove', function(browserEvent) {
// first clear any existing features in the overlay
[Link]().clear();
var coordinate = [Link];
var pixel = [Link];
// then for each feature at the mouse position ...
[Link](pixel, function(feature, layer) {
// check the layer property, if it is not set then it means we
// are over an OverlayFeature and we can ignore this feature
if (!layer) {
return;
}
// test the feature's geometry type and compute a reasonable point
// at which to display the text.
var geometry = [Link]();
var point;
switch ([Link]()) {
case 'MultiPolygon':
var poly = [Link]().reduce(function(left, right) {
return [Link]() > [Link]() ? left : right;
});
point = [Link]().getCoordinates();
break;
case 'Polygon':
point = [Link]().getCoordinates();
break;
default:
point = [Link](coordinate);
}
// create a new feature to display the text
textFeature = new [Link]({
geometry: new [Link](point),
text: [Link]('name'),
isoCode: [Link]('iso_a2').toLowerCase()
});
// and add it to the featureOverlay. Also add the feature itself
// so the country gets outlined
[Link](textFeature);
[Link](feature);
});
});
</script>
</body>
</html>
Using different projection codes
<!doctype html>
<html>
<head>
<title>WMS projection with WGS84</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var blueMarbleLayer = new [Link]({
source: new [Link]({
url: '[Link]
params: {
'TILED' : true,
'VERSION': '1.1.1',
'LAYERS': 'bluemarble',
'FORMAT': 'image/jpeg'
}
})
});
var view = new [Link]({
projection: 'EPSG:4326',
center: [-1.81185, 52.443141],
zoom: 6
});
var map = new [Link]({
target: 'map'
});
[Link](blueMarbleLayer);
[Link](view);
</script>
</body>
</html>
Using custom projection with WMS
sources
<!doctype html>
<html>
<head>
<title>WMS with custom projection</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/proj4js/[Link]"></script>
<script src="../assets/ol3/js/[Link]"></script>
<script>
[Link]("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3
+x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
var extent = [-378305.81, 6093283.21, 1212610.74, 7186901.68];
var projection = [Link]('EPSG:2154');
[Link](extent);
var layers = [
new [Link]({
source: new [Link]({
url: '[Link]
attributions: [new [Link]({
html: '© ' +
'BRGM (French USGS equivalent)'
})
],
params: {
'LAYERS': 'SCAN_F_GEOL1M',
'VERSION': '1.1.1'
},
extent: extent
})
})
];
var map = new [Link]({
layers: layers,
target: 'map',
view: new [Link]({
projection: projection,
center: [755520.187986, 6587896.855407],
zoom: 2
})
});
</script>
</body>
</html>
Using custom projection without
Proj4js
<!doctype html>
<html>
<head>
<title>WMS with custom projection</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var projection = new [Link]({
code: 'EPSG:2154',
units: 'm'
});
var layers = [
new [Link]({
source: new [Link]({
url: '[Link]
attributions: [new [Link]({
html: '© ' +
'BRGM (French USGS equivalent)'
})
],
params: {
'LAYERS': 'SCAN_F_GEOL1M',
'VERSION': '1.1.1'
}
})
})
];
var map = new [Link]({
layers: layers,
target: 'map',
view: new [Link]({
projection: projection,
center: [755520.187986, 6587896.855407],
zoom: 6
})
});
</script>
</body>
</html>
Reprojecting geometries in vector
layers
<!doctype html>
<html>
<head>
<title>WFS reprojection </title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/proj4js/[Link]"></script>
<script src="../assets/ol3/js/[Link]"></script>
<script>
[Link]("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3
+x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
var extent = [-378305.81, 6093283.21, 1212610.74, 7186901.68];
var projection = [Link]('EPSG:2154');
[Link](extent);
var countriesSource = new [Link]({
projection: 'EPSG:2154',
url: '../assets/data/nutsv9_lea.geojson'
});
[Link]('change', function(evt) {
if ([Link]() == 'ready') {
[Link]([Link]()[0].getGeometry().getCoordinates());
[Link]([Link]()
[0].getGeometry().clone().transform('EPSG:2154','EPSG:4326').getCoordinates());
}
});
var layers = [
new [Link]({
source: new [Link]({
url: '[Link]
attributions: [new [Link]({
html: '© ' +
'BRGM (French USGS equivalent)'
})
],
params: {
'LAYERS': 'SCAN_F_GEOL1M',
'VERSION': '1.1.1'
},
extent: extent
})
}),
new [Link]({
source: countriesSource
})
];
var map = new [Link]({
layers: layers,
target: 'map',
view: new [Link]({
projection: projection,
center: [755520.187986, 6587896.855407],
zoom: 2
})
});
var bbox = new [Link]({
source: new [Link]()
});
[Link](bbox);
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[[-0.944824, 46.134170], [-0.944824, 48.312428],
[4.438477, 48.312428], [4.438477, 46.134170],
[-0.944824, 46.134170]
]
]
}
}
]
};
var format = new [Link]({
defaultDataProjection: 'EPSG:4326'
});
var features = [Link](geojson, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:2154'
});
[Link]().addFeatures(features);
</script>
</body>
</html>
Testing the use cases for
[Link]
<!doctype html>
<html>
<head>
<title>Simple Select</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var raster = new [Link]({
source: new [Link]({layer: 'sat'})
});
var selectEuropa = new [Link]({
stroke: new [Link]({
color: '#ff0000',
width: 2
})
});
var defaultEuropa = new [Link]({
stroke: new [Link]({
color: '#0000ff',
width: 2
})
});
var vectorEuropa = new [Link]({
id: 'europa',
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});
var selectInteraction = new [Link]({
condition: [Link],
toggleCondition: [Link],
layers: function (layer) {
return [Link]('id') == 'europa';
},
style: selectEuropa
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map'
});
[Link](raster);
[Link](vectorEuropa);
[Link](view);
[Link]().extend([selectInteraction]);
</script>
</body>
</html>
More options with
[Link]
<!doctype html>
<html>
<head>
<title>Hello OpenStreetMap</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var raster = new [Link]({
source: new [Link]({layer: 'sat'})
});
var selectEuropa = new [Link]({
stroke: new [Link]({
color: '#ff0000',
width: 2
})
});
var defaultEuropa = new [Link]({
stroke: new [Link]({
color: '#0000ff',
width: 2
})
});
var vectorEuropa = new [Link]({
id: 'europa',
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});
var defaultFrancePoints = new [Link]({
image: new [Link]({
fill: new [Link]({
color: 'blue'
}),
stroke: new [Link]({
color: '#ffcc00'
}),
radius: 8
})
});
var selectFrancePoints = new [Link]({
image: new [Link]({
fill: new [Link]({
color: '#ff0000'
}),
stroke: new [Link]({
color: '#ffccff'
}),
radius: 16
})
});
var vectorFrancePoints = new [Link]({
id: 'france',
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/france_4326.geojson'
}),
style: defaultFrancePoints
});
var selectInteraction = new [Link]({
layers: function(layer) {
return [Link]('selectable') == true;
},
style: [selectFrancePoints, selectEuropa]
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map'
});
[Link](raster);
[Link](vectorEuropa);
[Link](vectorFrancePoints);
[Link](view);
[Link]().extend([selectInteraction]);
[Link]('selectable', true);
[Link]('selectable', true);
</script>
</body>
</html>
Understanding
forEachFeatureAtPixel method
<!doctype html>
<html>
<head>
<title>Get Features from vector</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="information"></div>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var raster = new [Link]({
source: new [Link]({layer: 'sat'})
});
var selectEuropa = new [Link]({
stroke: new [Link]({
color: '#ff0000',
width: 2
})
});
var defaultEuropa = new [Link]({
stroke: new [Link]({
color: '#0000ff',
width: 2
})
});
var vectorEuropa = new [Link]({
id: 'europa',
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});
var selectInteraction = new [Link]({
layers: function (layer) {
return [Link]('id') == 'europa';
},
style: [selectEuropa]
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map'
});
[Link](raster);
[Link](vectorEuropa);
[Link](view);
[Link]().extend([selectInteraction]);
var displayFeatureInfo = function(pixel) {
var features = [];
[Link](pixel, function(feature, layer) {
[Link](feature);
});
var container = [Link]('information');
if ([Link] > 0) {
var info = [];
for (var i = 0, ii = [Link]; i < ii; ++i) {
[Link](features[i].get('N3NM'));
}
[Link] = [Link](', ') || '(unknown)';
} else {
[Link] = ' ';
}
};
[Link]('click', function(evt) {
var pixel = [Link];
displayFeatureInfo(pixel);
});
</script>
</body>
</html>
Understanding getGetFeatureInfoUrl method
<!doctype html>
<html>
<head>
<title>GetFeatureInfo</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="information"></div>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script src="[Link]
<script>
var wms_layer = new [Link]({
source: new [Link]({
url: '[Link]
params: {'LAYERS': 'ne:ne'}
})
});
var view = new [Link]({
center: [0, 0],
zoom: 1
});
var map = new [Link]({
layers: [wms_layer],
target: 'map',
view: view
});
var viewProjection = [Link]();
var viewResolution = [Link]();
var container = [Link]('information');
[Link]('click', function(evt) {
var url = wms_layer.getSource().getGetFeatureInfoUrl(
[Link], viewResolution, viewProjection,
{'INFO_FORMAT': 'text/javascript',
'propertyName': 'formal_en'});
if (url) {
var parser = new [Link]();
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'parseResponse'
}).then(function(response) {
var result = [Link](response);
if ([Link]) {
var info = [];
for (var i = 0, ii = [Link]; i < ii; ++i) {
[Link](result[i].get('formal_en'));
}
[Link] = [Link](', ');
} else {
[Link] = ' ';
}
});
}
});
</script>
</body>
</html>
Introducing [Link] with a static example
<!doctype html>
<html>
<head>
<title>Simple Overlay</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map">
<div id="popup"><b>OpenLayers 3 Code Sprint</b> <i>Humanities A3</i></div>
</div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var popup = new [Link]({
element: [Link]('popup')
});
var osmLayer = new [Link]({
source: new [Link]()
});
var ol3_sprint_location = [Link]([-1.20472, 52.93646], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: ol3_sprint_location,
zoom: 16
});
var map = new [Link]({
target: 'map'
});
[Link](osmLayer);
[Link](view);
[Link](popup);
[Link](ol3_sprint_location);
</script>
</body>
</html>
Using [Link] dynamically with layers information
<!doctype html>
<html>
<head>
<title>Hello OpenStreetMap</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var popup = new [Link]({
element: [Link]('popup')
});
var osmLayer = new [Link]({
source: new [Link]()
});
var selectEuropa = new [Link]({
stroke: new [Link]({
color: '#ff0000',
width: 2
})
});
var defaultEuropa = new [Link]({
stroke: new [Link]({
color: '#0000ff',
width: 2
})
});
var vectorEuropa = new [Link]({
id: 'europa',
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});
var selectInteraction = new [Link]({
layers: function (layer) {
return [Link]('id') == 'europa';
}
});
var ol3_sprint_location = [Link]([-1.20472, 52.93646], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: ol3_sprint_location,
zoom: 16
});
var map = new [Link]({
target: 'map'
});
[Link](osmLayer);
[Link](vectorEuropa);
[Link](view);
[Link](popup);
function pickRandomProperty() {
var prefix = ['bottom', 'center', 'top'];
var randPrefix = prefix[[Link]([Link]() * [Link])];
var suffix = ['left', 'center', 'right'];
var randSuffix = suffix[[Link]([Link]() * [Link])];
return randPrefix + '-' + randSuffix;
}
var container = [Link]('popup');
var displayFeatureInfo = function(pixel, coordinate) {
var features = [];
[Link](pixel, function(feature, layer) {
[Link](feature);
});
if ([Link] > 0) {
var info = [];
for (var i = 0, ii = [Link]; i < ii; ++i) {
[Link](features[i].get('N3NM'));
}
[Link] = [Link](', ') || '(unknown)';
var randomPositioning = pickRandomProperty();
[Link](randomPositioning);
[Link](coordinate);
} else {
[Link] = ' ';
}
};
[Link]('click', function(evt) {
var coordinate = [Link];
displayFeatureInfo([Link], coordinate);
});
</script>
</body>
</html>
Using [Link] to share new information on the
Web
<!doctype html>
<html>
<head>
<title>Create new content</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<form class="form-inline">
<label>Geometry type </label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>
<script src="../assets/ol3/js/[Link]"></script>
<script src="[Link]
<script>
var raster = new [Link]({
source: new [Link]({layer: 'sat'})
});
var source = new [Link]({
url: '/[Link]'
});
var vector = new [Link]({
id: 'vector',
source: source,
style: new [Link]({
fill: new [Link]({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new [Link]({
color: '#ffcc33',
width: 2
}),
image: new [Link]({
radius: 7,
fill: new [Link]({
color: '#ffcc33'
})
})
})
});
var map = new [Link]({
layers: [raster, vector],
target: 'map',
view: new [Link]({
center: [-11000000, 4600000],
zoom: 4
})
});
var typeSelect = [Link]('type');
var draw; // global so we can remove it later
function addInteraction() {
draw = new [Link]({
source: source,
type: [Link]
});
[Link](draw);
[Link]('drawend',
function(evt) {
[Link]([Link]);
var parser = new [Link]();
var features = [Link]();
var featuresGeoJSON = [Link](features);
$.ajax({
url: '/[Link]',
type: 'POST',
data: featuresGeoJSON
}).then(function(response) {
[Link](response);
});
},
this);
}
[Link] = function(e) {
[Link](draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>
Using [Link] to update drawing
<!doctype html>
<html>
<head>
<title>Modify sample</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var raster = new [Link]({
source: new [Link]({layer: 'sat'})
});
var selectEuropa = new [Link]({
stroke: new [Link]({
color: '#ff0000',
width: 2
})
});
var defaultEuropa = new [Link]({
stroke: new [Link]({
color: '#0000ff',
width: 2
})
});
var vectorEuropa = new [Link]({
id: 'europa',
source: new [Link]({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});
var selectInteraction = new [Link]({
condition: [Link],
toggleCondition: [Link],
layers: function (layer) {
return [Link]('id') == 'europa';
},
style: selectEuropa
});
var modify = new [Link]({
features: [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map'
});
[Link](raster);
[Link](vectorEuropa);
[Link](view);
[Link]().extend([selectInteraction, modify]);
var selected_features = [Link]();
var dirty = {};
selected_features.on('add', function(evt) {
var feature = [Link];
var fid = [Link]();
[Link]('change', function(evt) {
dirty[[Link]()] = true;
});
});
selected_features .on('remove', function(evt) {
var feature = [Link];
var fid = [Link]();
if (dirty[fid]) {
[Link]('changed');
}
});
</script>
</body>
</html>
Configuring default interactions
<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map" tabIndex="0"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osm_default = new [Link]({
source: new [Link]()
});
var map = new [Link]({
layers: [osm_default],
interactions: [Link]({
keyboard: false,
altShiftDragRotate: false
}),
target: 'map',
view: new [Link]({
center: [Link]([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>
Using [Link]
<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osm_default = new [Link]({
source: new [Link]()
});
var map = new [Link]({
layers: [osm_default],
interactions: [Link]({
shiftDragZoom: false
}).extend([new [Link]()]),
target: 'map',
view: new [Link]({
center: [Link]([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>
Making rectangle export to GeoJSON with
[Link]
<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osm_default = new [Link]({
source: new [Link]()
});
var dragBoxInteraction = new [Link]({
condition: [Link],
style: new [Link]({
stroke: new [Link]({
color: 'red',
width: 2
})
})
});
[Link]('boxend', function(e) {
var format = new [Link]();
var geom = [Link]();
[Link]('EPSG:3857', 'EPSG:4326');
var feature = new [Link]({
geometry: geom
});
var obj = [Link]([feature]);
[Link]([Link](obj));
});
var map = new [Link]({
layers: [osm_default],
interactions: [Link]({
shiftDragZoom: false
}).extend([dragBoxInteraction]),
target: 'map',
view: new [Link]({
center: [Link]([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>
Starting with the default controls
<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osm_default = new [Link]({
source: new [Link]()
});
var map = new [Link]({
layers: [osm_default],
controls: [Link]({
zoom: false,
attribution: false,
rotate: false
}),
target: 'map',
view: new [Link]({
center: [Link]([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>
Changing the default attribution styles
<!doctype html>
<html>
<head>
<title>Simple Select</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<br/>
<div id="myattribution"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osm_default = new [Link]({
source: new [Link]()
});
var map = new [Link]({
layers: [osm_default],
logo: false,
controls: [Link]({
attributionOptions: {
target: [Link]('myattribution'),
className: 'myCustomClass'
}
}),
target: 'map',
view: new [Link]({
center: [Link]([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>
Finding your mouse position
<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<br/>
<div id="myposition"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osm_default = new [Link]({
source: new [Link]()
});
var map = new [Link]({
layers: [osm_default],
target: 'map',
view: new [Link]({
center: [Link]([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
var mousePosition = new [Link]({
coordinateFormat: [Link](2),
projection: 'EPSG:4326',
target: [Link]('myposition'),
undefinedHTML: ' '
});
[Link](mousePosition);
</script>
</body>
</html>
Discovering [Link] specific parameters
<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<br/>
<div id="myposition"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var osm_default = new [Link]({
source: new [Link]()
});
var map = new [Link]({
layers: [osm_default],
target: 'map',
view: new [Link]({
center: [Link]([-1.8118500054456526, 52.4431409750608],
'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
var mousePosition = new [Link]({
units: 'degrees',
minWidth: 100
});
[Link](mousePosition);
</script>
</body>
</html>
Configuring ZoomToExtent and manipulate controls
<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var zoomToExtentControl = new [Link]({
extent: [-11243808.051695308, 4406397.202710291, -4561377.290892059,
6852382.107835932]
});
var osm_default = new [Link]({
source: new [Link]()
});
var map = new [Link]({
layers: [osm_default],
target: 'map',
view: new [Link]({
center: [Link]([-83.43924243777822, 60.16139104246781],
'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});
[Link](zoomToExtentControl);
var controls = [Link]();
var attributionControl;
[Link](function (el) {
[Link](el instanceof [Link]);
if (el instanceof [Link]) {
attributionControl = el;
}
});
[Link](attributionControl);
</script>
</body>
</html>
Extending [Link] to make your own control
<!doctype html>
<html>
<head>
<title>Custom control</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map">
</div>
<form class="form-inline">
<label>Geometry type </label>
<select id="type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>
<script src="../assets/ol3/js/[Link]"></script>
<script src="../assets/js/[Link]"></script>
<script>
function download(filename, text) {
var blob = new Blob([text], {type: "application/json;charset=utf-8"});
saveAs(blob, filename);
}
[Link] = {};
var app = [Link];
/**
* @constructor
* @extends {[Link]}
* @param {Object=} opt_options Control options.
*/
[Link] = function(opt_options) {
var options = opt_options || {};
var anchor = [Link]('a');
[Link] = '#export-geojson';
[Link] = 'G';
var this_ = this;
var getGeoJSON = function(e) {
// prevent #export-geojson anchor from getting appended to the url
[Link]();
var source = [Link];
var format = new [Link]();
var features = [Link]();
var featuresGeoJSON = [Link](features);
download('[Link]', [Link](featuresGeoJSON));
};
[Link]('click', getGeoJSON, false);
[Link]('touchstart', getGeoJSON, false);
var element = [Link]('div');
[Link] = 'export-geojson ol-unselectable';
[Link](anchor);
[Link](this, {
element: element,
target: [Link]
});
};
[Link]([Link], [Link]);
var raster = new [Link]({
source: new [Link]({layer: 'sat'})
});
var source = new [Link]({
url: '/[Link]'
});
var vector = new [Link]({
id: 'vector',
source: source,
style: new [Link]({
fill: new [Link]({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new [Link]({
color: '#ffcc33',
width: 2
}),
image: new [Link]({
radius: 7,
fill: new [Link]({
color: '#ffcc33'
})
})
})
});
var map = new [Link]({
layers: [raster, vector],
controls: [Link]().extend([
new [Link]({source: source})
]),
target: 'map',
view: new [Link]({
center: [-11000000, 4600000],
zoom: 4
})
});
var typeSelect = [Link]('type');
var draw;
function addInteraction() {
draw = new [Link]({
source: source,
type: [Link]
});
[Link](draw);
}
[Link] = function(e) {
[Link](draw);
addInteraction();
};
addInteraction();
</script>
</body>
</html>
Go mobile!
<!doctype html>
<html>
<head>
<title>Mobile Examples</title>
<!-- the viewport is important for mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="full-map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// other than adding the <meta> viewport above, our normal setup will
// work fine for mobile
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map',
layers: [layer],
view: view
});
</script>
</body>
</html>
Location
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
<!-- font-awesome is an iconic font, which means we can draw resolution-
independent icons -->
<link href="//[Link]/font-awesome/3.2.1/css/[Link]"
rel="stylesheet">
</head>
<body>
<div id="map" class="full-map"></div>
<div id="location" class="marker"><span class="icon-flag"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map',
layers: [layer],
view: view
});
// create an Overlay using the div with id location.
var marker = new [Link]({
element: [Link]('location'),
positioning: 'bottom-left',
stopEvent: false
});
// add it to the map
[Link](marker);
// create a Geolocation object setup to track the position of the device
var geolocation = new [Link]({
tracking: true
});
// bind the projection to the view so that positions are reported in the
// projection of the view
[Link]('projection', view);
// bind the marker's position to the geolocation object, the marker will
// move automatically when the GeoLocation API provides position updates
[Link]('position', geolocation);
// when the GeoLocation API provides a position update, center the view
// on the new position
[Link]('change:position', function() {
var p = [Link]();
[Link](p[0] + ' : ' + p[1]);
[Link]([parseFloat(p[0]), parseFloat(p[1])]);
});
</script>
</body>
</html>
A sense of direction
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
<link href="//[Link]/font-awesome/3.2.1/css/[Link]"
rel="stylesheet">
</head>
<body>
<div id="map" class="full-map"></div>
<div id="location" class="marker"><span class="icon-arrow-up"></span></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
var layer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map',
layers: [layer],
view: view
});
// set up geolocation to track our position
var geolocation = new [Link]({
tracking: true
});
// bind it to the view's projection and update the view as we move
[Link]('projection', view);
[Link]('change:position', function() {
[Link]([Link]());
});
// add a marker to display the current location
var marker = new [Link]({
element: [Link]('location'),
positioning: 'center-center'
});
[Link](marker);
// and bind it to the geolocation's position updates
[Link]('position', geolocation);
// create a new device orientation object set to track the device
var deviceOrientation = new [Link]({
tracking: true
});
// when the device changes heading, rotate the view so that
// 'up' on the device points the direction we are facing
[Link]('change:heading', onChangeHeading);
function onChangeHeading(event) {
var heading = [Link]();
[Link](-heading);
}
</script>
</body>
</html>
Track me
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=no">
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
<link href="//[Link]/font-awesome/3.2.1/css/[Link]"
rel="stylesheet">
</head>
<body>
<div id="map" class="full-map"></div>
<div id="location" class="marker"><span class="icon-arrow-up"></span></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// create a style to display our position history (track)
var trackStyle = new [Link]({
stroke: new [Link]({
color: 'rgba(0,0,255,1.0)',
width: 3,
lineCap: 'round'
})
});
// use a single feature with a linestring geometry to display our track
var trackFeature = new [Link]({
geometry: new [Link]([])
});
// we'll need a vector layer to render it
var trackLayer = new [Link]({
source: new [Link]({
features: [trackFeature]
}),
style: trackStyle
});
var baseLayer = new [Link]({
source: new [Link]()
});
var london = [Link]([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new [Link]({
center: london,
zoom: 6
});
var map = new [Link]({
target: 'map',
layers: [baseLayer, trackLayer],
view: view
});
// set up the geolocation api to track our position
var geolocation = new [Link]({
tracking: true
});
// bind the view's projection
[Link]('projection', view);
// when we get a position update, add the coordinate to the track's
// geometry and recenter the view
[Link]('change:position', function() {
var coordinate = [Link]();
[Link](coordinate);
[Link]().appendCoordinate(coordinate);
});
// put a marker at our current position
var marker = new [Link]({
element: [Link]('location'),
positioning: 'center-center'
});
[Link](marker);
[Link]('position', geolocation);
// rotate the view to match the device orientation
var deviceOrientation = new [Link]({
tracking: true
});
[Link]('change:heading', onChangeHeading);
function onChangeHeading(event) {
var heading = [Link]();
[Link](-heading);
}
</script>
</body>
</html>
Chapter 11, Creating Web Map Apps
Adding data to your map
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/[Link]"></script>
<script>
// the source of our photos is a KML file
var flickrSource = new [Link]({
url: '../assets/data/flickr_data.kml',
projection: 'EPSG:3857'
});
// the vector layer uses the source
var flickrLayer = new [Link]({
source: flickrSource
});
// a tile layer as a base map to provide context
var layer = new [Link]({
source: new [Link]()
});
// center on 0,0 and transform for the view's projection
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
// a suitable starting point for the map's view
var view = new [Link]({
center: center,
zoom: 1
});
// the map goes in the map div
var map = new [Link]({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
</script>
</body>
</html>
Creating a style function
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
// the source of our photos is a KML file
var flickrSource = new [Link]({
url: '../assets/data/flickr_data.kml',
projection: 'EPSG:3857',
extractStyles: false
});
// use a style function to replace the styles in the KML file
// this is a placeholder for now
function flickrStyle(feature) {
var style = new [Link]({
image: new [Link]({
radius: 6,
stroke: new [Link]({
color: 'white',
width: 2
}),
fill: new [Link]({
color: 'green'
})
})
});
return [style];
}
var flickrLayer = new [Link]({
source: flickrSource,
style: flickrStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
</script>
</body>
</html>
Switching to JSON data
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
// everything is the same as the previous sample, except at the end
// we load data from a JSON file instead of KML
var flickrSource = new [Link]();
function flickrStyle(feature) {
var style = new [Link]({
image: new [Link]({
radius: 6,
stroke: new [Link]({
color: 'white',
width: 2
}),
fill: new [Link]({
color: 'green'
})
})
});
return [style];
}
var flickrLayer = new [Link]({
source: flickrSource,
style: flickrStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
// when jQuery has loaded the data, we can create features for each photo
function successHandler(data) {
// we need to transform the geometries into the view's projection
var transform = [Link]('EPSG:4326', 'EPSG:3857');
// loop over the items in the response
[Link](function(item) {
// create a new feature with the item as the properties
var feature = new [Link](item);
// add a url property for later ease of access
[Link]('url', [Link].m);
// create an appropriate geometry and add it to the feature
var coordinate = transform([parseFloat([Link]),
parseFloat([Link])]);
var geometry = new [Link](coordinate);
[Link](geometry);
// add the feature to the source
[Link](feature);
});
}
$.ajax({
url: '../assets/data/flickr_data.json',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});
</script>
</body>
</html>
Creating a thumbnail style
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
var flickrSource = new [Link]();
// a cache for the style objects, always good practice
var cache = {};
function flickrStyle(feature) {
// cache styles by photo url
var url = [Link]('url');
if (!cache[url]) {
// use the icon style and scale the image to 10% so its not too large
cache[url] = new [Link]({
image: new [Link]({
scale: 0.10,
src: url
})
});
}
return [cache[url]];
}
var flickrLayer = new [Link]({
source: flickrSource,
style: flickrStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function successHandler(data) {
var transform = [Link]('EPSG:4326', 'EPSG:3857');
[Link](function(item) {
var feature = new [Link](item);
[Link]('url', [Link].m);
var coordinate = transform([parseFloat([Link]),
parseFloat([Link])]);
var geometry = new [Link](coordinate);
[Link](geometry);
[Link](feature);
});
}
$.ajax({
url: '../assets/data/flickr_data.json',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});
</script>
</body>
</html>
Adding the select interaction
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
var vectorSource = new [Link]({
url: '../assets/data/flickr_data.kml',
projection: 'EPSG:3857'
});
// a cluster source can group photos that are too close
var clusterSource = new [Link]({
source: vectorSource,
distance: 40
});
var cache = {};
// this function computes a circle style
// based on the size of a cluster
// the style is cached.
function getCircleStyle(size) {
var key = 'circle' + size;
if (!cache[key]) {
cache[key] = new [Link]({
image: new [Link]({
radius: 8 + size,
fill: new [Link]({
color: 'rgb(97, 151, 255)'
}),
stroke: new [Link]({
color: 'white',
width: 2
})
})
});
}
return cache[key];
}
// this function computes a text style
// based on the size of a cluster
// the style is cached
function getTextStyle(text) {
var key = 'text' + text;
if (!cache[key]) {
cache[key] = new [Link]({
text: new [Link]({
font: '10px sans-serif',
text: text,
textBaseline: 'alphabetic',
offsetY: 4,
fill: new [Link]({
color: 'white'
})
})
});
}
return cache[key];
}
// the style function for the cluster layer combines
// a circle and a text style based on the size of the cluster
function clusterStyle(feature, resolution) {
var size = [Link]('features').length;
var pointStyle = getCircleStyle(size);
var textStyle = getTextStyle([Link]());
return [pointStyle, textStyle];
}
var vectorLayer = new [Link]({
source: clusterSource,
style: clusterStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
target: 'map',
layers: [layer, vectorLayer],
view: view
});
var select = new [Link]({
layers: [vectorLayer]
});
[Link](select);
</script>
</body>
</html>
Handling selection events
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="photo-info"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
var flickrSource = new [Link]();
var cache = {};
function photoStyle(feature, scale) {
var url = [Link]('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new [Link]({
image: new [Link]({
scale: scale,
src: url
})
});
}
return cache[key];
}
function flickrStyle(feature) {
return [photoStyle(feature, 0.10)];
}
function selectedStyle(feature) {
return [photoStyle(feature, 0.50)];
}
var flickrLayer = new [Link]({
source: flickrSource,
style: flickrStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
// create a Select interaction and add it to the map
var select = new [Link]({
layers: [flickrLayer],
style: selectedStyle
});
[Link](select);
// use the features Collection to detect when a feature is selected,
// the collection will emit the add event
var selectedFeatures = [Link]();
[Link]('add', function(event) {
var feature = [Link](0);
var url = [Link]('url');
// put the url of the feature into the photo-info div
$('#photo-info').html(url);
});
// when a feature is removed, clear the photo-info div
[Link]('remove', function(event) {
$('#photo-info').empty();
});
function successHandler(data) {
var transform = [Link]('EPSG:4326', 'EPSG:3857');
[Link](function(item) {
var feature = new [Link](item);
[Link]('url', [Link].m);
var coordinate = transform([parseFloat([Link]),
parseFloat([Link])]);
var geometry = new [Link](coordinate);
[Link](geometry);
[Link](feature);
});
}
$.ajax({
url: '../assets/data/flickr_data.json',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});
</script>
</body>
</html>
Displaying photo information
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="photo-info"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
var flickrSource = new [Link]();
var cache = {};
function photoStyle(feature, scale) {
var url = [Link]('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new [Link]({
image: new [Link]({
scale: scale,
src: url
})
});
}
return cache[key];
}
function flickrStyle(feature) {
return [photoStyle(feature, 0.10)];
}
function selectedStyle(feature) {
return [photoStyle(feature, 0.50)];
}
var flickrLayer = new [Link]({
source: flickrSource,
style: flickrStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
target: 'map',
layers: [layer, flickrLayer],
view: view
});
// a simple templating function that replaces keywords wrapped in
// curly brackets with the equivalent value from the feature properties
function photoContent(feature) {
// get the HTML content of the template as a string
var content = $('#photo-template').html();
// a list of keys we will consider for replacement
var keys =
['author','author_id','date_taken','latitude','longitude','link','url','tags','title'
];
for (var i=0; i<[Link]; i++) {
var key = keys[i];
// get the value of the key
var value = [Link](key);
// and replace its template placeholder in the content. If the template
// placeholder is absent, nothing happens so its safe
content = [Link]('{'+key+'}',value);
}
return content;
}
var select = new [Link]({
layers: [flickrLayer],
style: selectedStyle
});
[Link](select);
var selectedFeatures = [Link]();
[Link]('add', function(event) {
var feature = [Link](0);
// instead of the photo url, get the templated content
// for the current feature instead
var content = photoContent(feature);
$('#photo-info').html(content);
});
[Link]('remove', function(event) {
$('#photo-info').empty();
});
function successHandler(data) {
var transform = [Link]('EPSG:4326', 'EPSG:3857');
[Link](function(item) {
var feature = new [Link](item);
[Link]('url', [Link].m);
var coordinate = transform([parseFloat([Link]),
parseFloat([Link])]);
var geometry = new [Link](coordinate);
[Link](geometry);
[Link](feature);
});
}
$.ajax({
url: '../assets/data/flickr_data.json',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});
</script>
<!-- script tags are ignored for rendering, and adding type="text/html"
to the script tag makes the javascript engine ignore it, but
we can still access it as a DOM element and get its formatted content -->
<script type="text/html" id="photo-template">
<a href="{link}" target="_blank" title="Click to open photo in new tab"><img
src="{url}" style="float: left"></a><br>
<p>Taken by <a href="[Link] target="_blank"
title="Click to view author details in new tab">{author}</a> on {date_taken} at lat:
{latitude} lon: {longitude}</p><br>
<p>Tagged in <b>{tags}</b></p>
</script>
</body>
</html>
Getting dynamic data
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="photo-info"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
var flickrSource = new [Link]();
var cache = {};
function photoStyle(feature, scale) {
var url = [Link]('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new [Link]({
image: new [Link]({
scale: scale,
src: url
})
});
}
return cache[key];
}
function flickrStyle(feature) {
return [photoStyle(feature, 0.10)];
}
function selectedStyle(feature) {
return [photoStyle(feature, 0.50)];
}
var flickrLayer = new [Link]({
source: flickrSource,
style: flickrStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
renderer: 'canvas',
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function photoContent(feature) {
var content = $('#photo-template').html();
var keys =
['author','author_id','date_taken','latitude','longitude','link','url','tags','title'
];
for (var i=0; i<[Link]; i++) {
var key = keys[i];
var value = [Link](key);
content = [Link]('{'+key+'}',value);
}
return content;
}
var select = new [Link]({
layers: [flickrLayer],
style: selectedStyle
});
[Link](select);
var selectedFeatures = [Link]();
[Link]('add', function(event) {
var feature = [Link](0);
var content = photoContent(feature);
$('#photo-info').html(content);
});
[Link]('remove', function(event) {
$('#photo-info').empty();
});
function successHandler(data) {
var transform = [Link]('EPSG:4326', 'EPSG:3857');
[Link](function(item) {
var feature = new [Link](item);
[Link]('url', [Link].m);
var coordinate = transform([parseFloat([Link]),
parseFloat([Link])]);
var geometry = new [Link](coordinate);
[Link](geometry);
[Link](feature);
});
}
// the only change is to point at the remote URL for the feed
$.ajax({
url: '[Link]
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});
</script>
<script type="text/html" id="photo-template">
<a href="{link}" target="_blank" title="Click to open photo in new tab"><img
src="{url}" style="float: left"></a><br>
<p>Taken by <a href="[Link] target="_blank"
title="Click to view author details in new tab">{author}</a> on {date_taken} at lat:
{latitude} lon: {longitude}</p><br>
<p>Tagged in <b>{tags}</b></p>
</script>
</body>
</html>
Adding dynamic tags to your map
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px;
background-color: rgba(255,255,255,0.5);">
<input type="text" placeholder="Search photos by tag(s)" style="width: 200px">
<button type="button">Search</button>
</div>
<div id="photo-info"></div>
<script src="[Link]
<script src="../assets/ol3/js/[Link]"></script>
<script>
var flickrSource = new [Link]();
var cache = {};
function photoStyle(feature, scale) {
var url = [Link]('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new [Link]({
image: new [Link]({
scale: scale,
src: url
})
});
}
return cache[key];
}
function flickrStyle(feature) {
return [photoStyle(feature, 0.10)];
}
function selectedStyle(feature) {
return [photoStyle(feature, 0.50)];
}
var flickrLayer = new [Link]({
source: flickrSource,
style: flickrStyle
});
var layer = new [Link]({
source: new [Link]()
});
var center = [Link]([0,0], 'EPSG:4326', 'EPSG:3857');
var view = new [Link]({
center: center,
zoom: 2
});
var map = new [Link]({
renderer: 'canvas',
target: 'map',
layers: [layer, flickrLayer],
view: view
});
function photoContent(feature) {
var content = $('#photo-template').html();
var keys =
['author','author_id','date_taken','latitude','longitude','link','url','tags','title'
];
for (var i=0; i<[Link]; i++) {
var key = keys[i];
var value = [Link](key);
content = [Link]('{'+key+'}',value);
}
return content;
}
var select = new [Link]({
layers: [flickrLayer],
style: selectedStyle
});
[Link](select);
var selectedFeatures = [Link]();
[Link]('add', function(event) {
var feature = [Link](0);
var content = photoContent(feature);
$('#photo-info').html(content);
});
[Link]('remove', function(event) {
$('#photo-info').empty();
});
function successHandler(data) {
var transform = [Link]('EPSG:4326', 'EPSG:3857');
[Link](function(item) {
var feature = new [Link](item);
[Link]('url', [Link].m);
var coordinate = transform([parseFloat([Link]),
parseFloat([Link])]);
var geometry = new [Link](coordinate);
[Link](geometry);
[Link](feature);
});
}
// by moving the data loading into a function, we can call it with the user's
// search term and construct a new URL getting photos for the relevant tags.
// we can also clear existing features and selected features.
function loadFlickrFeed(tags) {
[Link]();
[Link]();
$('#photo-info').empty();
$.ajax({
url: '[Link]
data: {
format: 'json',
tags: tags
},
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});
}
// use jQuery to handle the user clicking the search button
$(document).on('click', '#search button', function() {
var value = $('#search input').val();
var tags = [Link](' ').join(',');
loadFlickrFeed(tags);
});
</script>
<script type="text/html" id="photo-template">
<a href="{link}" target="_blank" title="Click to open photo in new tab"><img
src="{url}" style="float: left"></a><br>
<p>Taken by <a href="[Link] target="_blank"
title="Click to view author details in new tab">{author}</a> on {date_taken} at lat:
{latitude} lon: {longitude}</p><br>
<p>Tagged in <b>{tags}</b></p>
</script>
</body>
</html>
Creating a combined build
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px;
background-color: rgba(255,255,255,0.5);">
<input type="text" placeholder="Search photos by tag(s)" style="width: 200px">
<button type="button">Search</button>
</div>
<div id="photo-info"></div>
<script src="[Link]
<!-- this replaces both [Link] and our application javascript as they are compiled
into a single file -->
<script src="flickr_combined.[Link]"></script>
<script type="text/html" id="photo-template">
<a href="{link}" target="_blank" title="Click to open photo in new tab"><img
src="{url}" style="float: left"></a><br>
<p>Taken by <a href="[Link] target="_blank"
title="Click to view author details in new tab">{author}</a> on {date_taken} at lat:
{latitude} lon: {longitude}</p><br>
<p>Tagged in <b>{tags}</b></p>
</script>
</body>
</html>
Creating a separate build
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/[Link]" type="text/css" />
<link rel="stylesheet" href="../assets/css/[Link]" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="search" style="position: absolute; top: 10px; right: 10px; padding: 5px;
background-color: rgba(255,255,255,0.5);">
<input type="text" placeholder="Search photos by tag(s)" style="width: 200px">
<button type="button">Search</button>
</div>
<div id="photo-info"></div>
<script src="[Link]
<!-- we need to load both our custom build of the OpenLayers library and our
application code -->
<script src="flickr_separate.[Link]"></script>
<script src="flickr_separate.js"></script>
<script type="text/html" id="photo-template">
<a href="{link}" target="_blank" title="Click to open photo in new tab"><img
src="{url}" style="float: left"></a><br>
<p>Taken by <a href="[Link] target="_blank"
title="Click to view author details in new tab">{author}</a> on {date_taken} at lat:
{latitude} lon: {longitude}</p><br>
<p>Tagged in <b>{tags}</b></p>
</script>
</body>
</html>
Situsnya
[Link]
web-debuggers/[Link]
You might also like
- Exercise: Developing Geo-Web Application With Openlyers 3No ratings yetExercise: Developing Geo-Web Application With Openlyers 314 pages
- Openlayers Workshop: Follow Along With The Demos atNo ratings yetOpenlayers Workshop: Follow Along With The Demos at36 pages
- Leaflet in Practice Create Webmaps Using The JavaScript Leaflet Library (Samuel Gachuhi Ngugi) (Z-Library)No ratings yetLeaflet in Practice Create Webmaps Using The JavaScript Leaflet Library (Samuel Gachuhi Ngugi) (Z-Library)138 pages
- Openlayers vs. Leaflet: Drupalcamp Vienna, Nov. 2013No ratings yetOpenlayers vs. Leaflet: Drupalcamp Vienna, Nov. 201344 pages
- Mastering OpenLayers 3 - Sample ChapterNo ratings yetMastering OpenLayers 3 - Sample Chapter29 pages
- Leaflet For Some Cats (With Apologies To Max Ogden)No ratings yetLeaflet For Some Cats (With Apologies To Max Ogden)20 pages
- Django Leaflet Readthedocs Io en LatestNo ratings yetDjango Leaflet Readthedocs Io en Latest23 pages
- Exercise: Create A 2D Animation Through TimeNo ratings yetExercise: Create A 2D Animation Through Time28 pages
- (Practice) Task 1 - Process - Đề thi thật 2024.01 PDFNo ratings yet(Practice) Task 1 - Process - Đề thi thật 2024.01 PDF2 pages
- Netflix Nations The Geography of Digital Distribut...No ratings yetNetflix Nations The Geography of Digital Distribut...251 pages
- Consumer Buying Trends in Festive SalesNo ratings yetConsumer Buying Trends in Festive Sales102 pages
- Integrated Marketing Case Study of PicnicNo ratings yetIntegrated Marketing Case Study of Picnic24 pages
- SPJ English Essential-Learning-Competencies100% (7)SPJ English Essential-Learning-Competencies13 pages
- Rebecca Kantor: Digital Strategy & Media Intern ExperienceNo ratings yetRebecca Kantor: Digital Strategy & Media Intern Experience1 page
- Revision - 2024 - Grade 11 English Home Language - Term 3 and 4No ratings yetRevision - 2024 - Grade 11 English Home Language - Term 3 and 425 pages
- HICCUPS-CAMPUS-JOURNALISM-REQUEST (AutoRecovered)No ratings yetHICCUPS-CAMPUS-JOURNALISM-REQUEST (AutoRecovered)4 pages
