Skip to content

Instantly share code, notes, and snippets.

@tuxite

tuxite/map.html

Last active May 25, 2021 08:37
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 5 You must be signed in to fork a gist
  • Save tuxite/9954263 to your computer and use it in GitHub Desktop.
Save tuxite/9954263 to your computer and use it in GitHub Desktop.
Download ZIP
Example of OpenLayers 3 map inside an ExtJS 4 Panel
Raw
map.html
<!DOCTYPE html>
<html>
<head>
<title>Map Panel</title>
<!-- ExtJS -->
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
<script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
<!-- Local OpenLayers 3 stylesheet -->
<link href='ol.css' rel="stylesheet">
</head>
<body>
<!-- Local OpenLayers 3 js -->
<script src="ol.js"></script>
<script src="map.js"></script>
</body>
</html>
Raw
map.js
/* global Ext, ol */
/* jshint browser:true, devel:true, indent: 4 */
Ext.application({
name: 'OL3EXT4',
launch: function () {
var mappanel = Ext.create('Ext.panel.Panel', {
title: "Test Map",
layout: 'fit',
html: "<div id='test-map'></div>", // The map will be drawn inside
listeners: {
afterrender: function () {
var osm_source = new ol.source.OSM({
url: 'http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
});
var osmLayer = new ol.layer.Tile({
source: osm_source
});
this.map = new ol.Map({
target: 'test-map',
renderer: 'canvas',
layers: [osmLayer],
view: new ol.View2D({
center: [-10764594.0, 4523072.0],
zoom: 5
})
});
},
// The resize handle is necessary to set the map!
resize: function () {
var size = [document.getElementById(this.id + "-body").offsetWidth, document.getElementById(this.id + "-body").offsetHeight];
console.log(size);
this.map.setSize(size);
}
}
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
mappanel
]
});
}
});
@geogeek11
Copy link

many thanks

@IamSkycaptain
Copy link

This is a useful example. Thanks a lot.

@jaguarfi
Copy link

thanks

@prebm
Copy link

prebm commented Jul 17, 2016

Thanks for the example. I updated the code to use it in bl.ocks.org http://bl.ocks.org/prebm/382b4a33217aa335bb64b8a5cfe07c35

@ngjiajunsg
Copy link

i try the example but i keep having error in display .. not sure why as i found in my dev tool these errors.
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment