0% found this document useful (0 votes)

86 views

Create Firs Map Code All

The document contains code for creating an OpenLayers map with layers, overlays, interactions and controls. It initializes the map with an OSM base layer and overlays a yellow dot on London. It also shows code for adding interactivity like toggling the layer visibility and changing the map target element. Further code examples demonstrate animating the map by panning, bouncing, rotating and zooming between locations.

Uploaded by

Efen Seko

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

86 views

Create Firs Map Code All

Uploaded by

Efen Seko

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 82

Create firs map

Code :
<!doctype html>
<html>
<head>
<title>OpenLayers Components</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol-debug.js"></script>
<script>
// create a layer with the OSM source
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});

// create an interaction to add to the map that isn't there by default

var interaction = new ol.interaction.DragRotateAndZoom();

// create a control to add to the map that isn't there by default

var control = new ol.control.FullScreen();

// center on london, transforming to map projection

var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

// an overlay to position at the center

var overlay = new ol.Overlay({
position: center,
element: document.getElementById('overlay')
});

// view, starting at the center

var view = new ol.View({
center: center,
zoom: 6
});

// finally, the map with our custom interactions, controls and overlays
var map = new ol.Map({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol-debug.js"></script>
<script>
// create a layer with the OSM source
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});

// create an interaction to add to the map that isn't there by default

var interaction = new ol.interaction.DragRotateAndZoom();

// create a control to add to the map that isn't there by default

var control = new ol.control.FullScreen();

// center on london, transforming to map projection

var center = ol.proj.transform([-1.812, 52.443], 'EPSG:4326', 'EPSG:3857');

// an overlay to position at the center

var overlay = new ol.Overlay({
position: center,
element: document.getElementById('overlay')
});

// view, starting at the center

var view = new ol.View({
center: center,
zoom: 6
});

Code:
<!doctype html>
<html>
<head>
<title>Map Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol.js"></script>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
target: 'map',
layers: [layer],
view: view
});
// create a DOM Input helper for the checkbox
var visible = new ol.dom.Input(document.getElementById('visible'));
// and bind its 'checked' property to the layer's 'visible' property
visible.bindTo('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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
// the normal setup for our samples
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol.js"></script>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
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 = map.getTarget();
if (target == 'left') {
map.setTarget('right');
} else {
map.setTarget('left');
}
}
</script>
</body>
</html>

Creating animated map

<!doctype html>
<html>
<head>
<title>Animation Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol.js"></script>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
target: 'map',
layers: [layer],
view: view
});

Changing layer propertis

var view = new ol.View({

center: ol.proj.transform([-1.8118500054456526, 52.4431409750608],
'EPSG:4326', 'EPSG:3857'),
zoom: 6
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(osmLayer);
map.setView(view);
/*
console.log(osmLayer.getSource());
osmLayer.setProperties({opacity: 0.4, contrast:0.6});
console.log(osmLayer.get('contrast'));
console.log(osmLayer.get('opacity'));
osmLayer.setProperties({opacity: 0.7, contrast:0.3});
console.log(osmLayer.getOpacity());
console.log(osmLayer.getContrast());
osmLayer.set('opacity',1);
osmLayer.setContrast(1);
osmLayer.setBrightness(0);
osmLayer.set('myId', 'myUnique');
console.log(osmLayer.get('myId'));
*/
</script>
</body>
</html>

Using OSM layer and MapQuest layers to create a map

var osm = new ol.layer.Tile({

source: new ol.source.MapQuest({layer: 'osm'})
});

var map = new ol.Map({

layers: [satellite, osm],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-74.044683,40.689848], 'EPSG:4326',
'EPSG:3857'),
zoom: 13
})
});
/*
osm.setVisible(false);
osm.setVisible(true);
*/
</script>
</body>
</html>

Creating a Stamen layer

var map = new ol.Map({

layers: [stamenLayer],
target: 'map',
view: new ol.View({
center: ol.proj.transform([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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var sourceBingMaps = new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Road',
culture: 'fr-FR'
});

var bingMapsRoad = new ol.layer.Tile({

preload: Infinity,
source: sourceBingMaps
});

var bingMapsAerial = new ol.layer.Tile({

preload: Infinity,
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial',
})
});

var map = new ol.Map({

layers: [bingMapsRoad,bingMapsAerial],
target: 'map',
view: new ol.View({
center: ol.proj.transform([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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></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 ol.proj.Projection({
code: 'ZOOMIFY',
units: 'pixels',
extent: [0, 0, imgWidth, imgHeight]
});

var source = new ol.source.Zoomify({

url: url,
size: [imgWidth, imgHeight],
crossOrigin: crossOrigin
});

var map = new ol.Map({

layers: [
new ol.layer.Tile({
source: source
})
],
target: 'map',
view: new ol.View({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>

var bingMapsAerial = new ol.layer.Tile({

preload: Infinity,
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Aerial'
})
});

bingMapsAerial.set('name', 'Bings Maps Aerial');

var bingMapsRoad = new ol.layer.Tile({

preload: Infinity,
source: new ol.source.BingMaps({
key: 'Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3',
imagerySet: 'Road',
culture: 'fr-FR'
})
});

bingMapsRoad.set('name', 'Bings Maps Road');

var mapQuestAerial = new ol.layer.Tile({

source: new ol.source.MapQuest({layer: 'sat'})
});

mapQuestAerial.set('name', 'MapQuest Open Aerial');

var simpleWMS = new ol.layer.Image({

opacity: 0.6,
source: new ol.source.ImageWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {
'LAYERS': 'topp:states'
},
extent: [-13884991, -7455066, 2870341, 6338219]
})
});
simpleWMS.set('name', 'USA layer from Geoserver WMS demo');

var layers = [bingMapsAerial, bingMapsRoad, mapQuestAerial, simpleWMS];

var map = new ol.Map({
layers: layers,
target: 'map',
view: new ol.View({
center: ol.proj.transform([-90, 40], 'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});

//Generate checkbox from layers array

function generate_checkbox(id_checkbox, label_name, html_element) {
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.id = id_checkbox;

var label = document.createElement('label');

label.htmlFor = id_checkbox;
label.appendChild(document.createTextNode(label_name));
html_element.appendChild(checkbox);
html_element.appendChild(label);
}

// Loop from the end to get the top layer in first

for (var i = layers.length - 1; i >= 0; i--) {
var id = layers[i].get('id');
var name = layers[i].get('name');
generate_checkbox('layer_id_' + i, name, document.body);
var visible = new ol.dom.Input(document.getElementById('layer_id_' + i));
visible.bindTo('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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var imgWidth = 9945;
var imgHeight = 6846;
var url = '/assets/data/1797-map-of-Dublin.jpg';

var imgCenter = [imgWidth / 2, imgHeight / 2];

var source = new ol.source.ImageStatic({

attributions: [
new ol.Attribution({
html: '© <a href="https://commons.wikimedia.org/wiki/File:1797-map-
of-Dublin.jpg#Summary">Wikipedia Commons</a>'
})
],
url: url,
imageSize: [imgWidth, imgHeight],
projection: proj,
imageExtent: proj.getExtent()
});

var map = new ol.Map({

layers: [
new ol.layer.Image({
source: source
})
],
target: 'map',
view: new ol.View({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
// create a vector source that loads a GeoJSON file
var vectorSource = new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/countries.geojson'
});

// a vector layer to render the source

var vectorLayer = new ol.layer.Vector({
source: vectorSource
});

var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 1
});

// the vector layer gets added like a raster layer

var map = new ol.Map({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
// set up a vector source to read the geojson data
var originalSource = new ol.source.GeoJSON({
url: '../assets/data/cluster.geojson'
});

// create a layer from it so we can visualize the original data

var originalLayer = new ol.layer.Vector({
source: originalSource
});

// a clustered source is configured with another vector source that it

// operates on
var clusterSource = new ol.source.Cluster({
source: originalSource
});

// it needs a layer too

var clusterLayer = new ol.layer.Vector({
source: clusterSource
});

// some data to use as the background

var vectorSource = new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/countries.geojson'
});

var vectorLayer = new ol.layer.Vector({

source: vectorSource
});

var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
// a tiled raster layer as the backdrop
var tiledRaster = new ol.layer.Tile({
source: new ol.source.OSM()
});

// styles for the vector layer

var fill = new ol.style.Fill({
color: 'rgba(0,0,0,0.2)'
});

var stroke = new ol.style.Stroke({

color: 'rgba(0,0,0,0.4)'
});

var circle = new ol.style.Circle({

radius: 6,
fill: fill,
stroke: stroke
});

var vectorStyle = new ol.style.Style({

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 = 'http://demo.boundlessgeo.com/geoserver/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=osm:builtup_area&' +
'outputFormat=text/javascript&format_options=callback:loadFeatures' +
'&srsname=EPSG:3857&bbox=' + extent.join(',') + ',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 = vectorSource.readFeatures(response);
vectorSource.addFeatures(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 ol.source.ServerVector({
format: new ol.format.GeoJSON(),
loader: vectorLoader,
strategy: ol.loadingstrategy.createTile(new ol.tilegrid.XYZ({
maxZoom: 19
}))
});

// a vector layer, this time with some style options

var serverVector = new ol.layer.Vector({
source: vectorSource,
style: vectorStyle
});

var center = ol.proj.transform([-72.6, 41.7], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({
center: center,
zoom: 12
});
var map = new ol.Map({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
var tiledRaster = new ol.layer.Tile({
source: new ol.source.OSM()
});

// some styles for the vector layer

var fill = new ol.style.Fill({
color: 'rgba(0,0,0,0.2)'
});

var stroke = new ol.style.Stroke({

color: 'rgba(0,0,0,0.4)'
});

var circle = new ol.style.Circle({

radius: 6,
fill: fill,
stroke: stroke
});

var vectorStyle = new ol.style.Style({

fill: fill,
stroke: stroke,
image: circle
});

// this time, we'll load vector tiles from openstreetmap

// in the topojson format
var tiledSource = new ol.source.TileVector({
format: new ol.format.TopoJSON({
defaultProjection: 'EPSG:4326'
}),
projection: 'EPSG:3857',
tileGrid: new ol.tilegrid.XYZ({
maxZoom: 19
}),
url:
'http://{a-c}.tile.openstreetmap.us/vectiles-water-areas/{z}/{x}/{y}.topojson'
});

var tiledVector = new ol.layer.Vector({

source: tiledSource,
style: vectorStyle
});

var center = ol.proj.transform([-72.6, 41.7], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({
center: center,
zoom: 12
});
var map = new ol.Map({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol-debug.js"></script>
<script>
var tiledRaster = new ol.layer.Tile({
source: new ol.source.OSM()
});

var fill = new ol.style.Fill({

color: 'rgba(0,0,0,0.2)'
});

var stroke = new ol.style.Stroke({

color: 'rgba(0,0,0,0.4)'
});

var circle = new ol.style.Circle({

radius: 6,
fill: fill,
stroke: stroke
});

var vectorStyle = new ol.style.Style({

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 ol.interaction.DragAndDrop({
formatConstructors: [
ol.format.GPX,
ol.format.GeoJSON,
ol.format.IGC,
ol.format.KML,
ol.format.TopoJSON
]
});
// 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
dragAndDrop.on('addfeatures', function(event) {
var vectorSource = new ol.source.Vector({
features: event.features,
projection: event.projection
});
map.addLayer(new ol.layer.Vector({
source: vectorSource,
style: vectorStyle
}));
var view = map.getView();
view.fitExtent(vectorSource.getExtent(), map.getSize());
});
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 1
});
var map = new ol.Map({
target: 'map',
layers: [tiledRaster],
view: view
});
// we can add an interaction after creating the map with the default set
map.addInteraction(dragAndDrop);
</script>
</body>
</html>

Geometries in action
<!doctype html>
<html>
<head>
<title>Geometry Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="closestFeature"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var countries = new ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/countries.geojson'
})
});
var view = new ol.View({
projection: 'EPSG:3857'
});
var map = new ol.Map({
target: 'map',
layers: [countries],
view: view
});

// zoom to the extent of the vector source once the map has been rendered
// for the first time
map.once('postrender', function() {
view.fitExtent(countries.getSource().getExtent(), map.getSize());
});

// capture mouse move events so we can 'look' at the feature

// underneath the mouse
map.on('pointermove', onMouseMove);

</script>
</body>
</html>

Interacting with features

// when the user moves the mouse, get the name property
// from each feature under the mouse and display it
function onMouseMove(browserEvent) {
var coordinate = browserEvent.coordinate;
var pixel = map.getPixelFromCoordinate(coordinate);
var el = document.getElementById('name');
el.innerHTML = '';
map.forEachFeatureAtPixel(pixel, function(feature) {
el.innerHTML += feature.get('name') + '<br>';
});
}
map.on('pointermove', onMouseMove);

</script>
</body>
</html>

Basic styling
<!doctype html>
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol-debug.js"></script>
<script>
// a basic style for the country layer
var countryStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: [203, 194, 185, 1]
}),
stroke: new ol.style.Stroke({
color: [177, 163, 148, 0.5],
width: 2,
lineCap: 'round'
})
});

// a style for the timezones, adding some text

var timezoneStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: [64, 200, 200, 0.5],
width: 1
}),
text: new ol.style.Text({
font: '20px Verdana',
text: 'TZ',
fill: new ol.style.Fill({
color: [64, 64, 64, 0.75]
})
})
});

var countries = new ol.layer.Vector({

source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/countries.geojson'
}),
style: countryStyle
});

// make sure we don't use the styles in the KML layer

var earthquakes = new ol.layer.Vector({

source: new ol.source.KML({
projection: 'EPSG:3857',
url: '../assets/data/earthquakes.kml',
extractStyles: false
}),
style: earthquakeStyle
});

var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({
center: center,
zoom: 1
});
var map = new ol.Map({
target: 'map',
layers: [countries, timezones, earthquakes],
view: view
});

earthquakes.once('render', function() {
view.fitExtent(earthquakes.getSource().getExtent(), map.getSize());
});
</script>
</body>
</html>

Using multiple styles

<!doctype html>
<html>
<head>
<title>Vector Style Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var shadowStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
color: [0, 0, 127, 0.15],
width: 8
}),
zIndex: 1
});
var countryStyle = new ol.style.Style({
fill: new ol.style.Fill({
color: [203, 194, 185, 1]
}),
stroke: new ol.style.Stroke({
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 ol.layer.Vector({
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/countries.geojson'
}),
style: [shadowStyle, countryStyle]
});
var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 1
});
var map = new ol.Map({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<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 ol.style.Style({
fill: new ol.style.Fill({
color: [250,250,250,1]
}),
stroke: new ol.style.Stroke({
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 = feature.get('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 ol.style.Style({
fill: new ol.style.Fill({
color: incomeLevels[level]
}),
stroke: defaultStyle.stroke
});
}
// 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 ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/countries.geojson'
});

var countries = new ol.layer.Vector({

source: source,
style: styleFunction
});
var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');
var view = new ol.View({
center: center,
zoom: 1
});
var map = new ol.Map({
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 = source.on('change', function(event) {
if (source.getState() == 'ready') {
source.unByKey(key);
$.ajax('../assets/data/income_levels.json').done(function(data) {
countries.getSource().forEachFeature(function(feature) {
var code = feature.get('iso_a2');
if (data[code]) {
feature.set('incomeLevel', data[code]);
}
});
});
}
});

</script>
</body>
</html>

Creating interactive styles

<!doctype html>
<html>
<head>
<title>Geometry Examples</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol-debug.js"></script>
<script>

var countries = new ol.layer.Vector({

source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/countries.geojson'
})
});

var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 1
});

var map = new ol.Map({

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 ol.style.Fill({
color: [0,0,0,1]
}),
stroke: new ol.style.Stroke({
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 ol.style.Style({
stroke: new ol.style.Stroke({
color: [255,0,0,0.6],
width: 2
}),
fill: new ol.style.Fill({
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 = feature.getGeometry();
if (geom.getType() == 'Point') {
var text = feature.get('text');
baseTextStyle.text = 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 = feature.get('isoCode').toLowerCase();
style = new ol.style.Style({
text: new ol.style.Text(baseTextStyle),
image: new ol.style.Icon({
src: '../assets/img/flags/'+isoCode+'.png'
}),
zIndex: 2
});
} else {
style = highlightStyle;
}

return [style];
}

var featureOverlay = new ol.FeatureOverlay({

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
map.on('pointermove', function(browserEvent) {
// first clear any existing features in the overlay
featureOverlay.getFeatures().clear();
var coordinate = browserEvent.coordinate;
var pixel = browserEvent.pixel;
// then for each feature at the mouse position ...
map.forEachFeatureAtPixel(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 = feature.getGeometry();
var point;
switch (geometry.getType()) {
case 'MultiPolygon':
var poly = geometry.getPolygons().reduce(function(left, right) {
return left.getArea() > right.getArea() ? left : right;
});
point = poly.getInteriorPoint().getCoordinates();
break;
case 'Polygon':
point = geometry.getInteriorPoint().getCoordinates();
break;
default:
point = geometry.getClosestPoint(coordinate);
}
// create a new feature to display the text
textFeature = new ol.Feature({
geometry: new ol.geom.Point(point),
text: feature.get('name'),
isoCode: feature.get('iso_a2').toLowerCase()
});
// and add it to the featureOverlay. Also add the feature itself
// so the country gets outlined
featureOverlay.addFeature(textFeature);
featureOverlay.addFeature(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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var blueMarbleLayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'http://maps.boundlessgeo.com/geowebcache/service/wms',
params: {
'TILED' : true,
'VERSION': '1.1.1',
'LAYERS': 'bluemarble',
'FORMAT': 'image/jpeg'
}
})
});

var view = new ol.View({

projection: 'EPSG:4326',
center: [-1.81185, 52.443141],
zoom: 6
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(blueMarbleLayer);

map.setView(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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>

proj4.defs("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 = ol.proj.get('EPSG:2154');
projection.setExtent(extent);

var layers = [
new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'http://geoservices.brgm.fr/geologie',
attributions: [new ol.Attribution({
html: '© ' +
'BRGM (French USGS equivalent)'
})
],
params: {
'LAYERS': 'SCAN_F_GEOL1M',
'VERSION': '1.1.1'
},
extent: extent
})
})
];

var map = new ol.Map({

layers: layers,
target: 'map',
view: new ol.View({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>

var projection = new ol.proj.Projection({

code: 'EPSG:2154',
units: 'm'
});

var map = new ol.Map({

layers: layers,
target: 'map',
view: new ol.View({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>

proj4.defs("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 = ol.proj.get('EPSG:2154');
projection.setExtent(extent);

var countriesSource = new ol.source.GeoJSON({

projection: 'EPSG:2154',
url: '../assets/data/nutsv9_lea.geojson'
});

countriesSource.once('change', function(evt) {
if (this.getState() == 'ready') {
console.log(this.getFeatures()[0].getGeometry().getCoordinates());
console.log(this.getFeatures()
[0].getGeometry().clone().transform('EPSG:2154','EPSG:4326').getCoordinates());
}
});

var map = new ol.Map({

layers: layers,
target: 'map',
view: new ol.View({
projection: projection,
center: [755520.187986, 6587896.855407],
zoom: 2
})
});

var bbox = new ol.layer.Vector({

source: new ol.source.GeoJSON()
});
map.addLayer(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 ol.format.GeoJSON({

defaultDataProjection: 'EPSG:4326'
});
var features = format.readFeatures(geojson, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:2154'
});
bbox.getSource().addFeatures(features);

</script>
</body>
</html>

Testing the use cases for

ol.interaction.Select
<!doctype html>
<html>
<head>
<title>Simple Select</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>

var raster = new ol.layer.Tile({

source: new ol.source.MapQuest({layer: 'sat'})
});

var selectEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
});

var defaultEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#0000ff',
width: 2
})
});
var vectorEuropa = new ol.layer.Vector({
id: 'europa',
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});

var selectInteraction = new ol.interaction.Select({

condition: ol.events.condition.singleClick,
toggleCondition: ol.events.condition.shiftKeyOnly,
layers: function (layer) {
return layer.get('id') == 'europa';
},
style: selectEuropa
});

var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',

'EPSG:3857');

var view = new ol.View({

center: london,
zoom: 6
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(raster);
map.addLayer(vectorEuropa);
map.setView(view);

map.getInteractions().extend([selectInteraction]);

</script>
</body>
</html>

More options with

ol.interaction.Select
<!doctype html>
<html>
<head>
<title>Hello OpenStreetMap</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>

var raster = new ol.layer.Tile({

source: new ol.source.MapQuest({layer: 'sat'})
});

var selectEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
});

var defaultEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#0000ff',
width: 2
})
});

var vectorEuropa = new ol.layer.Vector({

id: 'europa',
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});

var defaultFrancePoints = new ol.style.Style({

image: new ol.style.Circle({
fill: new ol.style.Fill({
color: 'blue'
}),
stroke: new ol.style.Stroke({
color: '#ffcc00'
}),
radius: 8
})
});

var selectFrancePoints = new ol.style.Style({

image: new ol.style.Circle({
fill: new ol.style.Fill({
color: '#ff0000'
}),
stroke: new ol.style.Stroke({
color: '#ffccff'
}),
radius: 16
})
});
var vectorFrancePoints = new ol.layer.Vector({
id: 'france',
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/france_4326.geojson'
}),
style: defaultFrancePoints
});

var selectInteraction = new ol.interaction.Select({

layers: function(layer) {
return layer.get('selectable') == true;
},
style: [selectFrancePoints, selectEuropa]
});

var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',

'EPSG:3857');

var view = new ol.View({

center: london,
zoom: 6
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(raster);
map.addLayer(vectorEuropa);
map.addLayer(vectorFrancePoints);
map.setView(view);

map.getInteractions().extend([selectInteraction]);

vectorEuropa.set('selectable', true);
vectorFrancePoints.set('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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="information"></div>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol-debug.js"></script>
<script>

var raster = new ol.layer.Tile({

source: new ol.source.MapQuest({layer: 'sat'})
});

var selectEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
});

var defaultEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#0000ff',
width: 2
})
});

var vectorEuropa = new ol.layer.Vector({

id: 'europa',
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});

var selectInteraction = new ol.interaction.Select({

layers: function (layer) {
return layer.get('id') == 'europa';
},
style: [selectEuropa]
});

var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',

'EPSG:3857');

var view = new ol.View({

center: london,
zoom: 6
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(raster);
map.addLayer(vectorEuropa);
map.setView(view);

map.getInteractions().extend([selectInteraction]);

var displayFeatureInfo = function(pixel) {

map.on('click', function(evt) {
var pixel = evt.pixel;
displayFeatureInfo(pixel);
});
</script>
</body>
</html>

Understanding getGetFeatureInfoUrl method

<!doctype html>
<html>
<head>
<title>GetFeatureInfo</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="information"></div>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>

var wms_layer = new ol.layer.Tile({

source: new ol.source.TileWMS({
url: 'http://demo.boundlessgeo.com/geoserver/wms',
params: {'LAYERS': 'ne:ne'}
})
});

var view = new ol.View({

center: [0, 0],
zoom: 1
});

var map = new ol.Map({

layers: [wms_layer],
target: 'map',
view: view
});

var viewProjection = view.getProjection();

var viewResolution = view.getResolution();

var container = document.getElementById('information');

map.on('click', function(evt) {
var url = wms_layer.getSource().getGetFeatureInfoUrl(
evt.coordinate, viewResolution, viewProjection,
{'INFO_FORMAT': 'text/javascript',
'propertyName': 'formal_en'});
if (url) {
var parser = new ol.format.GeoJSON();
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'parseResponse'
}).then(function(response) {
var result = parser.readFeatures(response);
if (result.length) {
var info = [];
for (var i = 0, ii = result.length; i < ii; ++i) {
info.push(result[i].get('formal_en'));
}
container.innerHTML = info.join(', ');
} else {
container.innerHTML = ' ';
}
});
}
});

</script>
</body>
</html>

Introducing ol.Overlay with a static example

<!doctype html>
<html>
<head>
<title>Simple Overlay</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol.js"></script>
<script>

var popup = new ol.Overlay({

element: document.getElementById('popup')
});

var osmLayer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var ol3_sprint_location = ol.proj.transform([-1.20472, 52.93646], 'EPSG:4326',

'EPSG:3857');

var view = new ol.View({

center: ol3_sprint_location,
zoom: 16
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(osmLayer);
map.setView(view);

map.addOverlay(popup);
popup.setPosition(ol3_sprint_location);

</script>
</body>
</html>

Using ol.Overlay dynamically with layers information

<!doctype html>
<html>
<head>
<title>Hello OpenStreetMap</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<body>
<div id="map" class="map">
<div id="popup"></div>
</div>
<script src="../assets/ol3/js/ol.js"></script>
<script>

var popup = new ol.Overlay({

element: document.getElementById('popup')
});

var osmLayer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var selectEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
});

var defaultEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#0000ff',
width: 2
})
});

var vectorEuropa = new ol.layer.Vector({

id: 'europa',
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});

var selectInteraction = new ol.interaction.Select({

layers: function (layer) {
return layer.get('id') == 'europa';
}
});

var ol3_sprint_location = ol.proj.transform([-1.20472, 52.93646], 'EPSG:4326',

'EPSG:3857');

var view = new ol.View({

center: ol3_sprint_location,
zoom: 16
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(osmLayer);
map.addLayer(vectorEuropa);
map.setView(view);

map.addOverlay(popup);

function pickRandomProperty() {
var prefix = ['bottom', 'center', 'top'];
var randPrefix = prefix[Math.floor(Math.random() * prefix.length)];
var suffix = ['left', 'center', 'right'];
var randSuffix = suffix[Math.floor(Math.random() * suffix.length)];
return randPrefix + '-' + randSuffix;
}

var container = document.getElementById('popup');

map.on('click', function(evt) {
var coordinate = evt.coordinate;
displayFeatureInfo(evt.pixel, coordinate);
});

</script>
</body>
</html>

Using ol.interaction.Draw to share new information on the

Web
<!doctype html>
<html>
<head>
<title>Create new content</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({layer: 'sat'})
});

var source = new ol.source.GeoJSON({

url: '/features.geojson'
});

var vector = new ol.layer.Vector({

id: 'vector',
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});

var map = new ol.Map({

layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});

var typeSelect = document.getElementById('type');

var draw; // global so we can remove it later

typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};

addInteraction();

</script>
</body>
</html>

Using ol.interaction.Modify to update drawing

<!doctype html>
<html>
<head>
<title>Modify sample</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>

var raster = new ol.layer.Tile({

source: new ol.source.MapQuest({layer: 'sat'})
});

var selectEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#ff0000',
width: 2
})
});

var defaultEuropa = new ol.style.Style({

stroke: new ol.style.Stroke({
color: '#0000ff',
width: 2
})
});

var vectorEuropa = new ol.layer.Vector({

id: 'europa',
source: new ol.source.GeoJSON({
projection: 'EPSG:3857',
url: '../assets/data/nutsv9_lea.geojson'
}),
style: defaultEuropa
});

var selectInteraction = new ol.interaction.Select({

condition: ol.events.condition.singleClick,
toggleCondition: ol.events.condition.shiftKeyOnly,
layers: function (layer) {
return layer.get('id') == 'europa';
},
style: selectEuropa
});

var modify = new ol.interaction.Modify({

features: selectInteraction.getFeatures()
});

var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',

'EPSG:3857');

var view = new ol.View({

center: london,
zoom: 6
});

var map = new ol.Map({

target: 'map'
});

map.addLayer(raster);
map.addLayer(vectorEuropa);
map.setView(view);

map.getInteractions().extend([selectInteraction, modify]);

var selected_features = selectInteraction.getFeatures();

var dirty = {};

selected_features.on('add', function(evt) {
var feature = evt.element;
var fid = feature.getId();
feature.on('change', function(evt) {
dirty[evt.target.getId()] = true;
});
});

selected_features .on('remove', function(evt) {

var feature = evt.element;
var fid = feature.getId();
if (dirty[fid]) {
console.log('changed');
}
});
</script>
</body>
</html>

Configuring default interactions

<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map" tabIndex="0"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var osm_default = new ol.layer.Tile({
source: new ol.source.OSM()
});

var map = new ol.Map({

layers: [osm_default],
interactions: ol.interaction.defaults({
keyboard: false,
altShiftDragRotate: false
}),
target: 'map',
view: new ol.View({
center: ol.proj.transform([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>

Using ol.interaction.DragRotateAndZoom
<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol-debug.js"></script>
<script>
var osm_default = new ol.layer.Tile({
source: new ol.source.OSM()
});

var map = new ol.Map({

layers: [osm_default],
interactions: ol.interaction.defaults({
shiftDragZoom: false
}).extend([new ol.interaction.DragRotateAndZoom()]),
target: 'map',
view: new ol.View({
center: ol.proj.transform([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});
</script>
</body>
</html>

Making rectangle export to GeoJSON with

ol.interaction.DragBox
<!doctype html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var osm_default = new ol.layer.Tile({
source: new ol.source.OSM()
});

var dragBoxInteraction = new ol.interaction.DragBox({

condition: ol.events.condition.shiftKeyOnly,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'red',
width: 2
})
})
});

dragBoxInteraction.on('boxend', function(e) {
var format = new ol.format.GeoJSON();
var geom = e.target.getGeometry();
geom.transform('EPSG:3857', 'EPSG:4326');
var feature = new ol.Feature({
geometry: geom
});
var obj = format.writeFeatures([feature]);
console.log(JSON.stringify(obj));
});

var map = new ol.Map({

layers: [osm_default],
interactions: ol.interaction.defaults({
shiftDragZoom: false
}).extend([dragBoxInteraction]),
target: 'map',
view: new ol.View({
center: ol.proj.transform([-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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var osm_default = new ol.layer.Tile({
source: new ol.source.OSM()
});

var map = new ol.Map({

layers: [osm_default],
controls: ol.control.defaults({
zoom: false,
attribution: false,
rotate: false
}),
target: 'map',
view: new ol.View({
center: ol.proj.transform([-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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<br/>
<div id="myattribution"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var osm_default = new ol.layer.Tile({
source: new ol.source.OSM()
});

var map = new ol.Map({

layers: [osm_default],
logo: false,
controls: ol.control.defaults({
attributionOptions: {
target: document.getElementById('myattribution'),
className: 'myCustomClass'
}
}),
target: 'map',
view: new ol.View({
center: ol.proj.transform([-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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<br/>
<div id="myposition"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var osm_default = new ol.layer.Tile({
source: new ol.source.OSM()
});

var map = new ol.Map({

layers: [osm_default],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-1.81185, 52.443141], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});

var mousePosition = new ol.control.MousePosition({

coordinateFormat: ol.coordinate.createStringXY(2),
projection: 'EPSG:4326',
target: document.getElementById('myposition'),
undefinedHTML: ' '
});

map.addControl(mousePosition);
</script>
</body>
</html>

Discovering ol.control.ScaleLine specific parameters

<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<br/>
<div id="myposition"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var osm_default = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [osm_default],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-1.8118500054456526, 52.4431409750608],
'EPSG:4326', 'EPSG:3857'),
zoom: 6
})
});

var mousePosition = new ol.control.ScaleLine({

units: 'degrees',
minWidth: 100
});

map.addControl(mousePosition);
</script>
</body>
</html>

Configuring ZoomToExtent and manipulate controls

<!doctype html>
<html>
<head>
<title>Simple example</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
var zoomToExtentControl = new ol.control.ZoomToExtent({
extent: [-11243808.051695308, 4406397.202710291, -4561377.290892059,
6852382.107835932]
});

var osm_default = new ol.layer.Tile({

source: new ol.source.OSM()
});

var map = new ol.Map({

layers: [osm_default],
target: 'map',
view: new ol.View({
center: ol.proj.transform([-83.43924243777822, 60.16139104246781],
'EPSG:4326', 'EPSG:3857'),
zoom: 3
})
});

map.addControl(zoomToExtentControl);
var controls = map.getControls();
var attributionControl;
controls.forEach(function (el) {
console.log(el instanceof ol.control.Attribution);
if (el instanceof ol.control.Attribution) {
attributionControl = el;
}
});
map.removeControl(attributionControl);

</script>
</body>
</html>

Extending ol.control.Control to make your own control

<!doctype html>
<html>
<head>
<title>Custom control</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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/ol.js"></script>
<script src="../assets/js/FileSaver.js"></script>
<script>

function download(filename, text) {

var blob = new Blob([text], {type: "application/json;charset=utf-8"});
saveAs(blob, filename);
}

window.app = {};
var app = window.app;

/**
* @constructor
* @extends {ol.control.Control}
* @param {Object=} opt_options Control options.
*/
app.generateGeoJSONControl = function(opt_options) {
var options = opt_options || {};
var anchor = document.createElement('a');
anchor.href = '#export-geojson';
anchor.innerHTML = 'G';

var this_ = this;

var getGeoJSON = function(e) {
// prevent #export-geojson anchor from getting appended to the url
e.preventDefault();
var source = options.source;
var format = new ol.format.GeoJSON();
var features = source.getFeatures();
var featuresGeoJSON = format.writeFeatures(features);
download('export.geojson', JSON.stringify(featuresGeoJSON));
};

anchor.addEventListener('click', getGeoJSON, false);

anchor.addEventListener('touchstart', getGeoJSON, false);

var element = document.createElement('div');

element.className = 'export-geojson ol-unselectable';
element.appendChild(anchor);

ol.control.Control.call(this, {
element: element,
target: options.target
});
};

ol.inherits(app.generateGeoJSONControl, ol.control.Control);

var raster = new ol.layer.Tile({

source: new ol.source.MapQuest({layer: 'sat'})
});

var source = new ol.source.GeoJSON({

url: '/features.geojson'
});

var vector = new ol.layer.Vector({

var map = new ol.Map({

layers: [raster, vector],
controls: ol.control.defaults().extend([
new app.generateGeoJSONControl({source: source})
]),
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4
})
});

var typeSelect = document.getElementById('type');

var draw;
function addInteraction() {
draw = new ol.interaction.Draw({
source: source,
type: typeSelect.value
});
map.addInteraction(draw);
}

typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};

addInteraction();

</script>
</body>
</html>

Go mobile!
<!doctype html>
<html>
<head>
<title>Mobile 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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="full-map"></div>
<script src="../assets/ol3/js/ol.js"></script>
<script>
// other than adding the <meta> viewport above, our normal setup will
// work fine for mobile
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
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/ol-debug.js"></script>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});

var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',

'EPSG:3857');

var view = new ol.View({

center: london,
zoom: 6
});

var map = new ol.Map({

target: 'map',
layers: [layer],
view: view
});

// create an Overlay using the div with id location.

var marker = new ol.Overlay({
element: document.getElementById('location'),
positioning: 'bottom-left',
stopEvent: false
});

// add it to the map

map.addOverlay(marker);

// create a Geolocation object setup to track the position of the device

var geolocation = new ol.Geolocation({
tracking: true
});

// bind the projection to the view so that positions are reported in the
// projection of the view
geolocation.bindTo('projection', view);

// bind the marker's position to the geolocation object, the marker will
// move automatically when the GeoLocation API provides position updates
marker.bindTo('position', geolocation);

// when the GeoLocation API provides a position update, center the view
// on the new position
geolocation.on('change:position', function() {
var p = geolocation.getPosition();
console.log(p[0] + ' : ' + p[1]);
view.setCenter([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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
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/ol-debug.js"></script>
<script>
var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
target: 'map',
layers: [layer],
view: view
});
// set up geolocation to track our position
var geolocation = new ol.Geolocation({
tracking: true
});
// bind it to the view's projection and update the view as we move
geolocation.bindTo('projection', view);
geolocation.on('change:position', function() {
view.setCenter(geolocation.getPosition());
});
// add a marker to display the current location
var marker = new ol.Overlay({
element: document.getElementById('location'),
positioning: 'center-center'
});
map.addOverlay(marker);
// and bind it to the geolocation's position updates
marker.bindTo('position', geolocation);

// create a new device orientation object set to track the device

var deviceOrientation = new ol.DeviceOrientation({
tracking: true
});
// when the device changes heading, rotate the view so that
// 'up' on the device points the direction we are facing
deviceOrientation.on('change:heading', onChangeHeading);
function onChangeHeading(event) {
var heading = event.target.getHeading();
view.setRotation(-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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css"
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/ol-debug.js"></script>
<script>
// create a style to display our position history (track)
var trackStyle = new ol.style.Style({
stroke: new ol.style.Stroke({
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 ol.Feature({
geometry: new ol.geom.LineString([])
});
// we'll need a vector layer to render it
var trackLayer = new ol.layer.Vector({
source: new ol.source.Vector({
features: [trackFeature]
}),
style: trackStyle
});
var baseLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var london = ol.proj.transform([-0.12755, 51.507222], 'EPSG:4326',
'EPSG:3857');
var view = new ol.View({
center: london,
zoom: 6
});
var map = new ol.Map({
target: 'map',
layers: [baseLayer, trackLayer],
view: view
});
// set up the geolocation api to track our position
var geolocation = new ol.Geolocation({
tracking: true
});
// bind the view's projection
geolocation.bindTo('projection', view);
// when we get a position update, add the coordinate to the track's
// geometry and recenter the view
geolocation.on('change:position', function() {
var coordinate = geolocation.getPosition();
view.setCenter(coordinate);
trackFeature.getGeometry().appendCoordinate(coordinate);
});
// put a marker at our current position
var marker = new ol.Overlay({
element: document.getElementById('location'),
positioning: 'center-center'
});
map.addOverlay(marker);
marker.bindTo('position', geolocation);
// rotate the view to match the device orientation
var deviceOrientation = new ol.DeviceOrientation({
tracking: true
});
deviceOrientation.on('change:heading', onChangeHeading);
function onChangeHeading(event) {
var heading = event.target.getHeading();
view.setRotation(-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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<script src="../assets/ol3/js/ol-debug.js"></script>
<script>

// the source of our photos is a KML file

var flickrSource = new ol.source.KML({
url: '../assets/data/flickr_data.kml',
projection: 'EPSG:3857'
});

// the vector layer uses the source

var flickrLayer = new ol.layer.Vector({
source: flickrSource
});

// a tile layer as a base map to provide context

var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});

// center on 0,0 and transform for the view's projection

var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

// a suitable starting point for the map's view

var view = new ol.View({
center: center,
zoom: 1
});

// the map goes in the map div

var map = new ol.Map({
target: 'map',
layers: [layer, flickrLayer],
view: view
});

</script>
</body>
</html>

Creating a style function

// the source of our photos is a KML file

var flickrSource = new ol.source.KML({
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 ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
})
})
});
return [style];
}

var flickrLayer = new ol.layer.Vector({

source: flickrSource,
style: flickrStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var center = ol.proj.transform([0, 0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

target: 'map',
layers: [layer, flickrLayer],
view: view
});

</script>
</body>
</html>

Switching to JSON data

// 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 ol.source.Vector();

function flickrStyle(feature) {
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
stroke: new ol.style.Stroke({
color: 'white',
width: 2
}),
fill: new ol.style.Fill({
color: 'green'
})
})
});
return [style];
}

var flickrLayer = new ol.layer.Vector({

source: flickrSource,
style: flickrStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

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 = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
// loop over the items in the response
data.items.forEach(function(item) {
// create a new feature with the item as the properties
var feature = new ol.Feature(item);
// add a url property for later ease of access
feature.set('url', item.media.m);
// create an appropriate geometry and add it to the feature
var coordinate = transform([parseFloat(item.longitude),
parseFloat(item.latitude)]);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
// add the feature to the source
flickrSource.addFeature(feature);
});
}

$.ajax({
url: '../assets/data/flickr_data.json',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});

</script>
</body>
</html>

Creating a thumbnail style

var flickrSource = new ol.source.Vector();

// a cache for the style objects, always good practice

var cache = {};

var flickrLayer = new ol.layer.Vector({

source: flickrSource,
style: flickrStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

target: 'map',
layers: [layer, flickrLayer],
view: view
});

function successHandler(data) {
var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
data.items.forEach(function(item) {
var feature = new ol.Feature(item);
feature.set('url', item.media.m);
var coordinate = transform([parseFloat(item.longitude),
parseFloat(item.latitude)]);
var geometry = new ol.geom.Point(coordinate);
feature.setGeometry(geometry);
flickrSource.addFeature(feature);
});
}

$.ajax({
url: '../assets/data/flickr_data.json',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});

</script>
</body>
</html>

Adding the select interaction

var vectorSource = new ol.source.KML({

url: '../assets/data/flickr_data.kml',
projection: 'EPSG:3857'
});

// a cluster source can group photos that are too close

var clusterSource = new ol.source.Cluster({
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 ol.style.Style({
image: new ol.style.Circle({
radius: 8 + size,
fill: new ol.style.Fill({
color: 'rgb(97, 151, 255)'
}),
stroke: new ol.style.Stroke({
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 ol.style.Style({
text: new ol.style.Text({
font: '10px sans-serif',
text: text,
textBaseline: 'alphabetic',
offsetY: 4,
fill: new ol.style.Fill({
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 = feature.get('features').length;
var pointStyle = getCircleStyle(size);
var textStyle = getTextStyle(size.toString());
return [pointStyle, textStyle];
}

var vectorLayer = new ol.layer.Vector({

source: clusterSource,
style: clusterStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

target: 'map',
layers: [layer, vectorLayer],
view: view
});

var select = new ol.interaction.Select({

layers: [vectorLayer]
});

map.addInteraction(select);
</script>
</body>
</html>
Handling selection events
<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
</head>
<body>
<div id="map" class="map"></div>
<div id="photo-info"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="../assets/ol3/js/ol-debug.js"></script>
<script>

var flickrSource = new ol.source.Vector();

var cache = {};

function photoStyle(feature, scale) {

var url = feature.get('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new ol.style.Style({
image: new ol.style.Icon({
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 ol.layer.Vector({

source: flickrSource,
style: flickrStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({
center: center,
zoom: 2
});

var map = new ol.Map({

target: 'map',
layers: [layer, flickrLayer],
view: view
});

// create a Select interaction and add it to the map

var select = new ol.interaction.Select({
layers: [flickrLayer],
style: selectedStyle
});
map.addInteraction(select);

// use the features Collection to detect when a feature is selected,

// the collection will emit the add event
var selectedFeatures = select.getFeatures();
selectedFeatures.on('add', function(event) {
var feature = event.target.item(0);
var url = feature.get('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

selectedFeatures.on('remove', function(event) {
$('#photo-info').empty();
});

$.ajax({
url: '../assets/data/flickr_data.json',
dataType: 'jsonp',
jsonpCallback: 'jsonFlickrFeed',
success: successHandler
});

</script>
</body>
</html>

Displaying photo information

var flickrSource = new ol.source.Vector();

var cache = {};

function photoStyle(feature, scale) {

var url = feature.get('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new ol.style.Style({
image: new ol.style.Icon({
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 ol.layer.Vector({

source: flickrSource,
style: flickrStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});
var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

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<keys.length; i++) {
var key = keys[i];
// get the value of the key
var value = feature.get(key);
// and replace its template placeholder in the content. If the template
// placeholder is absent, nothing happens so its safe
content = content.replace('{'+key+'}',value);
}
return content;
}

var select = new ol.interaction.Select({

layers: [flickrLayer],
style: selectedStyle
});

map.addInteraction(select);

var selectedFeatures = select.getFeatures();

selectedFeatures.on('add', function(event) {
var feature = event.target.item(0);
// instead of the photo url, get the templated content
// for the current feature instead
var content = photoContent(feature);
$('#photo-info').html(content);
});

selectedFeatures.on('remove', function(event) {
$('#photo-info').empty();
});

$.ajax({
url: '../assets/data/flickr_data.json',
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="http://www.flickr.com/people/{author_id}" 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

var flickrSource = new ol.source.Vector();

var cache = {};

function photoStyle(feature, scale) {

var url = feature.get('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new ol.style.Style({
image: new ol.style.Icon({
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 ol.layer.Vector({

source: flickrSource,
style: flickrStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

renderer: 'canvas',
target: 'map',
layers: [layer, flickrLayer],
view: view
});

var select = new ol.interaction.Select({

layers: [flickrLayer],
style: selectedStyle
});

map.addInteraction(select);

var selectedFeatures = select.getFeatures();

selectedFeatures.on('add', function(event) {
var feature = event.target.item(0);
var content = photoContent(feature);
$('#photo-info').html(content);
});

selectedFeatures.on('remove', function(event) {
$('#photo-info').empty();
});

// the only change is to point at the remote URL for the feed
$.ajax({
url: 'http://api.flickr.com/services/feeds/geo/?format=json&tags=bird',
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="http://www.flickr.com/people/{author_id}" 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

var cache = {};

function photoStyle(feature, scale) {

var url = feature.get('url');
var key = scale + url;
if (!cache[key]) {
cache[key] = new ol.style.Style({
image: new ol.style.Icon({
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 ol.layer.Vector({

source: flickrSource,
style: flickrStyle
});

var layer = new ol.layer.Tile({

source: new ol.source.OSM()
});

var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

var view = new ol.View({

center: center,
zoom: 2
});

var map = new ol.Map({

renderer: 'canvas',
target: 'map',
layers: [layer, flickrLayer],
view: view
});

var select = new ol.interaction.Select({

layers: [flickrLayer],
style: selectedStyle
});

map.addInteraction(select);

var selectedFeatures = select.getFeatures();

selectedFeatures.on('add', function(event) {
var feature = event.target.item(0);
var content = photoContent(feature);
$('#photo-info').html(content);
});

selectedFeatures.on('remove', function(event) {
$('#photo-info').empty();
});

// 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) {
selectedFeatures.clear();
flickrSource.clear();
$('#photo-info').empty();
$.ajax({
url: 'http://api.flickr.com/services/feeds/geo',
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 = value.split(' ').join(',');
loadFlickrFeed(tags);
});

</script>

<script type="text/html" id="photo-template">

Creating a combined build

<!doctype html>
<html>
<head>
<title>Flickr Search</title>
<link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="flickr_combined.built.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="http://www.flickr.com/people/{author_id}" 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/ol.css" type="text/css" />
<link rel="stylesheet" href="../assets/css/samples.css" 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="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="flickr_separate.ol.js"></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="http://www.flickr.com/people/{author_id}" 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
https://openlayersbook.github.io/appendix-c-squashing-bugs-with-
web-debuggers/intro.html

Learn JavaScript in 24 Hours
From Everand
Learn JavaScript in 24 Hours
Alex Nordeen
3.5/5 (5)
IEC Certification Kit: Model-Based Design For ISO 26262
No ratings yet
IEC Certification Kit: Model-Based Design For ISO 26262
31 pages
Strategic Decision Making and Negotiation (Mm5009) : Case
No ratings yet
Strategic Decision Making and Negotiation (Mm5009) : Case
2 pages
OpenLayers v10.4.0 API - Class_ Map
No ratings yet
OpenLayers v10.4.0 API - Class_ Map
10 pages
React Portfolio App Development: Increase your online presence and create your personal brand
From Everand
React Portfolio App Development: Increase your online presence and create your personal brand
Abdelfattah Ragab
No ratings yet
Exercise: Developing Geo-Web Application With Openlyers 3
No ratings yet
Exercise: Developing Geo-Web Application With Openlyers 3
14 pages
Openlayers Workshop: Follow Along With The Demos at
No ratings yet
Openlayers Workshop: Follow Along With The Demos at
36 pages
05 OpenLayers
No ratings yet
05 OpenLayers
23 pages
Examen Final Telematica
No ratings yet
Examen Final Telematica
5 pages
Device Tracking - HTML
No ratings yet
Device Tracking - HTML
6 pages
Open Layers Presentation
No ratings yet
Open Layers Presentation
13 pages
How to a Developers Guide to 4k: Developer edition, #3
From Everand
How to a Developers Guide to 4k: Developer edition, #3
Xinc Cyberwizard
No ratings yet
9.GoogleMaps
No ratings yet
9.GoogleMaps
28 pages
WebGIS Leaflet
No ratings yet
WebGIS Leaflet
39 pages
Leaflet in Practice Create Webmaps Using the JavaScript Leaflet Library (Samuel Gachuhi Ngugi) (Z-Library)
No ratings yet
Leaflet in Practice Create Webmaps Using the JavaScript Leaflet Library (Samuel Gachuhi Ngugi) (Z-Library)
138 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
Adding The Necessary Script References
No ratings yet
Adding The Necessary Script References
1 page
Beginning Google Maps API PDF
No ratings yet
Beginning Google Maps API PDF
5 pages
V Home Lama
No ratings yet
V Home Lama
10 pages
Map Semen Tara
No ratings yet
Map Semen Tara
3 pages
OSM Changeset From Offenbach Http://geohash - Org/u0yjp2m2y77u9 50.0991765 8.7635866
No ratings yet
OSM Changeset From Offenbach Http://geohash - Org/u0yjp2m2y77u9 50.0991765 8.7635866
6 pages
OpenLayers Tutorials
100% (1)
OpenLayers Tutorials
24 pages
Antonio Santiago
No ratings yet
Antonio Santiago
42 pages
No Ph.D. Game Design With Three.js
From Everand
No Ph.D. Game Design With Three.js
Nikiforos Kontopoulos
No ratings yet
Leaflet Template
No ratings yet
Leaflet Template
1 page
Leaflet Tips and Tricks
No ratings yet
Leaflet Tips and Tricks
169 pages
Openlayers vs. Leaflet: Drupalcamp Vienna, Nov. 2013
No ratings yet
Openlayers vs. Leaflet: Drupalcamp Vienna, Nov. 2013
44 pages
10 Lessons in Front-end
From Everand
10 Lessons in Front-end
Krasimir Tsonev
2/5 (1)
50 Recipes for Programming Angular
From Everand
50 Recipes for Programming Angular
Jamie Munro
4/5 (1)
CSS Grid Layout: 5 Practical Projects
From Everand
CSS Grid Layout: 5 Practical Projects
Craig Buckler
No ratings yet
Angular Portfolio App Development: Create your personal brand
From Everand
Angular Portfolio App Development: Create your personal brand
Abdelfattah Ragab
No ratings yet
Web Mapping Geo Ext
No ratings yet
Web Mapping Geo Ext
19 pages
OpenStreet Map
No ratings yet
OpenStreet Map
17 pages
Ajax in One Hour, For Beginners, Learn Coding Fast
From Everand
Ajax in One Hour, For Beginners, Learn Coding Fast
Ray Yao
No ratings yet
Leaflet
No ratings yet
Leaflet
7 pages
Superimposing Google Maps
No ratings yet
Superimposing Google Maps
3 pages
Mastering OpenLayers 3 - Sample Chapter
No ratings yet
Mastering OpenLayers 3 - Sample Chapter
29 pages
ooooo
No ratings yet
ooooo
5 pages
DV EXP 9
No ratings yet
DV EXP 9
3 pages
Laboratory 6 (Updated)
No ratings yet
Laboratory 6 (Updated)
15 pages
301 PDFsam 36453687 PDF
No ratings yet
301 PDFsam 36453687 PDF
8 pages
Jakey's Fork
From Everand
Jakey's Fork
Richard Little
No ratings yet
Django Leaflet
No ratings yet
Django Leaflet
23 pages
Google Maps Javascript API v3 Examples
No ratings yet
Google Maps Javascript API v3 Examples
9 pages
NgRx SignalStore: An effortless solution for state management
From Everand
NgRx SignalStore: An effortless solution for state management
Abdelfattah Ragab
No ratings yet
Location Plotter - HTML
No ratings yet
Location Plotter - HTML
2 pages
Leaflet For Some Cats (With Apologies To Max Ogden)
No ratings yet
Leaflet For Some Cats (With Apologies To Max Ogden)
20 pages
Burps From My Butt
From Everand
Burps From My Butt
Marilyn Bricklin Lebovitz
No ratings yet
Angular Routing: Everything you need to know
From Everand
Angular Routing: Everything you need to know
Abdelfattah Ragab
No ratings yet
Gmaps Js
No ratings yet
Gmaps Js
42 pages
ArcGIS With Flex
No ratings yet
ArcGIS With Flex
187 pages
Mapcrunch
No ratings yet
Mapcrunch
13 pages
Pip Install Pip Install Folium: Django
No ratings yet
Pip Install Pip Install Folium: Django
8 pages
MapGuide Open Source Developer Guide
No ratings yet
MapGuide Open Source Developer Guide
114 pages
Leafletjs Tutorial
0% (1)
Leafletjs Tutorial
14 pages
Responsive Design: All CSS responsive features
From Everand
Responsive Design: All CSS responsive features
Abdelfattah Ragab
No ratings yet
Mastering JavaScript: The Complete Guide to JavaScript Mastery
From Everand
Mastering JavaScript: The Complete Guide to JavaScript Mastery
Tim Robards
5/5 (1)
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
From Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
No ratings yet
Django Leaflet
No ratings yet
Django Leaflet
23 pages
Open Street Map - Lite - Open Layers - From Map To Web Presentation
No ratings yet
Open Street Map - Lite - Open Layers - From Map To Web Presentation
39 pages
Map A Cober Tura
No ratings yet
Map A Cober Tura
10 pages
Benefits of Going Through the Great Tribulation
From Everand
Benefits of Going Through the Great Tribulation
Elwood Trost
No ratings yet
Nyi Ageng Serang
No ratings yet
Nyi Ageng Serang
4 pages
RPG Links
100% (2)
RPG Links
11 pages
Instant download (Ebook) BDD in Action: Behavior-Driven Development for the whole software lifecycle, 2nd Edition by John Ferguson Smart ISBN 9781617291654, 161729165X pdf all chapter
100% (8)
Instant download (Ebook) BDD in Action: Behavior-Driven Development for the whole software lifecycle, 2nd Edition by John Ferguson Smart ISBN 9781617291654, 161729165X pdf all chapter
81 pages
HP PrecisionScan Pro
No ratings yet
HP PrecisionScan Pro
110 pages
2015 - Rereading Aimé Césaire Negritude As Creolization (Retrieved - 2023-08-05)
No ratings yet
2015 - Rereading Aimé Césaire Negritude As Creolization (Retrieved - 2023-08-05)
8 pages
Edward Kass - A Brief Perspective On The Early History of American Infectious Disease Epidemiology
No ratings yet
Edward Kass - A Brief Perspective On The Early History of American Infectious Disease Epidemiology
9 pages
TY-housekeeping - PDF Free PDF
No ratings yet
TY-housekeeping - PDF Free PDF
45 pages
Allelopathic Intercrops and Its Mulch As An Integrated Weed Management Strategy For Rainfed BT - Transgenic Cotton Hybrids
No ratings yet
Allelopathic Intercrops and Its Mulch As An Integrated Weed Management Strategy For Rainfed BT - Transgenic Cotton Hybrids
9 pages
Training Design On PFA
No ratings yet
Training Design On PFA
5 pages
Reinhardt Redwood: Regional Park
No ratings yet
Reinhardt Redwood: Regional Park
2 pages
Not Using RN
No ratings yet
Not Using RN
9 pages
Attorney General Letter To The Court
No ratings yet
Attorney General Letter To The Court
3 pages
What Are the Major Breakdown of the Book of Job and What Make It a Book of Job
No ratings yet
What Are the Major Breakdown of the Book of Job and What Make It a Book of Job
5 pages
Instant download Money of the Russian Revolution 1917 1920 1st Edition Mikhail V. Khodjakov ebook 2025 edition
No ratings yet
Instant download Money of the Russian Revolution 1917 1920 1st Edition Mikhail V. Khodjakov ebook 2025 edition
80 pages
Bench Case SWOT
No ratings yet
Bench Case SWOT
4 pages
Anorexia Nervosa Presentation
No ratings yet
Anorexia Nervosa Presentation
10 pages
Spygmomanometer
No ratings yet
Spygmomanometer
7 pages
Control philosophy document
No ratings yet
Control philosophy document
8 pages
l4 Unit Test Answer Key
No ratings yet
l4 Unit Test Answer Key
6 pages
Integrated Marketing Communication
100% (1)
Integrated Marketing Communication
32 pages
Fraud Detection
No ratings yet
Fraud Detection
3 pages
Men's Cuban Link Chain Necklace - 'Never Forget That Kuwait Ubuy
No ratings yet
Men's Cuban Link Chain Necklace - 'Never Forget That Kuwait Ubuy
1 page
Gantt Chart
No ratings yet
Gantt Chart
16 pages
Ujian Sekolah Bahasa Inggris SMP
No ratings yet
Ujian Sekolah Bahasa Inggris SMP
10 pages
Summative Test No. 2 in Mathematics 6 (First Quarter)
No ratings yet
Summative Test No. 2 in Mathematics 6 (First Quarter)
2 pages
Shabari Matha Story 1
0% (1)
Shabari Matha Story 1
11 pages
DQAS CREATIVE WRITING 2 Grade 11 Final
No ratings yet
DQAS CREATIVE WRITING 2 Grade 11 Final
4 pages
Decided Case Law
No ratings yet
Decided Case Law
8 pages

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.