Skip to content

Instantly share code, notes, and snippets.

@stepankuzmin

stepankuzmin/feature-grid.js

Created November 23, 2011 10:28
Show Gist options
  • Save stepankuzmin/1388354 to your computer and use it in GitHub Desktop.
Save stepankuzmin/1388354 to your computer and use it in GitHub Desktop.
Download ZIP
Mapping with OpenLayers and GeoExt
Raw
feature-grid.js
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 5; // How many times should we try to reload an image before giving up?
OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
var mapPanel, store, gridPanel, mainPanel;
Ext.onReady(function() {
var map = new OpenLayers.Map('', {
controls: [],
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m",
});
osm = new OpenLayers.Layer.OSM("OpenStreetMap");
var points = new OpenLayers.Layer.Vector("points", {
styleMap: new OpenLayers.StyleMap({
externalGraphic: "http://grifoninfo.ru/files/marker.png",
pointRadius: 20,
})
});
map.addLayers([osm, points]);
function createPopup(feature) {
popup = new GeoExt.Popup({
title: feature.data.title,
location: feature,
width:400,
html: feature.data.text,
//maximizable: true,
//collapsible: true
});
// unselect feature when the popup
// is closed
popup.on({
close: function() {
if(OpenLayers.Util.indexOf(points.selectedFeatures, this.feature) > -1) {
selectCtrl.unselect(this.feature);
}
}
});
popup.show();
}
// Zoom to extent on feature select
points.events.on({
featureselected: function(e) {
this.map.zoomToExtent(e.feature.geometry.getBounds());
createPopup(e.feature);
}
});
mapPanel = new GeoExt.MapPanel({
title: "Верхняя Пышма",
region: "center",
height: 400,
width: 600,
map: map,
center: new OpenLayers.LonLat(60.583333, 56.966667).transform(
new OpenLayers.Projection("EPSG:4326"),
map.getProjectionObject()
),
zoom: 11
});
// create feature store, binding it to the vector layer
store = new GeoExt.data.FeatureStore({
layer: points,
fields: [
{name: 'title', type: 'string'},
],
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.HTTP({
url: "points9.json",
format: new OpenLayers.Format.GeoJSON({
internalProjection: map.getProjectionObject(),
externalProjection: new OpenLayers.Projection("EPSG:4326")
})
})
}),
autoLoad: true
});
// create grid panel configured with feature store
gridPanel = new Ext.grid.GridPanel({
title: "Места",
region: "east",
store: store,
width: 320,
columns: [{
header: "Название",
width: 310,
dataIndex: "title"
}],
sm: new GeoExt.grid.FeatureSelectionModel()
});
// create a panel and add the map panel and grid panel
// inside it
mainPanel = new Ext.Panel({
renderTo: "mainpanel",
layout: "border",
height: 400,
width: 920,
items: [mapPanel, gridPanel]
});
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.Navigation());
});
Raw
index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GeoExt FeatureStore in an Ext Grid</title>
</head>
<body>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" />
<script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
<script type="text/javascript" src="http://api.geoext.org/1.0/script/GeoExt.js"></script>
<script type="text/javascript" src="feature-grid.js"></script>
<div id="mainpanel"></div>
</body>
</html>
Raw
points.txt
{"type": "FeatureCollection", "features": [
{"geometry": {"type": "Point", "coordinates": [60.473333, 56.942222]}, "type": "Feature", "properties": {"title": "Ганина Яма", "text": "<p><img src=\"http://grifoninfo.ru/sites/pyshma.kyku.tv/files/imagecache/image_small/image/amatei/ganina_yama_7.jpg\" align=\"left\"> Недалеко от Верхней Пышмы расположено историческое место «Ганина Яма». Согласно историческим фактам в 1918 году большевики расстреляли императорскую семью Романовых, и чтобы скрыть свое преступление совершили захоронение на Ганиной Яме – до 1979 года это место было последним пристанищем императорской семьи. В октябре 2000 года началось строительство силами Уральской горно-металлургической компании в честь Святых Царственных Страстотерпцев, и за три года было построено 7 храмов по числу членов царской семьи. Сегодня Ганина Яма считается главным паломническим местом России.</p> <p><a href=\"http://grifoninfo.ru/kultplace/ganina-yama\">Подробнее</a>.</p>"}, "id": 1},
{"geometry": {"type": "Point", "coordinates": [60.59391, 56.97469]}, "type": "Feature", "properties": {"title": "Медная мечеть", "text": "<p><img src=\"http://grifoninfo.ru/sites/pyshma.kyku.tv/files/imagecache/image_text/image/amatei/mednaya_mechet_2.jpg\" align=\"left\"> Еще несколько лет назад здесь стояла небольшая деревянная мечеть, возведенная при содействии ОАО «Уралэлектромедь». Татаро-башкирское национальное общество обратилось лично к тогда еще генеральному директору «Уралэлектромеди» Андрею Козицыну с просьбой поддержать идею строительства новой каменной мечети. Отклик последовал незамедлительно: 14 июля 2001 года в основание мечети был заложен первый камень.</p> <p><a href=\"http://grifoninfo.ru/kultplace/mednaya-mechet\">Подробнее</a>.</p>"}, "id": 2},
{"geometry": {"type": "Point", "coordinates": [60.60607, 57.00149]}, "type": "Feature", "properties": {"title": "Храм Александра Невского", "text": "<p><img src=\"http://grifoninfo.ru/sites/pyshma.kyku.tv/files/imagecache/image_text/image/amatei/hram_al._nevskogo_4.jpg\" align=\"left\"> Одним из интересных и красивых мест на территории городского округа, является Храм во имя святого Благоверного Князя Александра Невского. В 2005 году, благодаря руководству ОАО «Уралэлектромедь» храм был возведен в с. Балтым и освящен 22 октября Викентием архиепископом Екатеринбургским и Верхотурским.</p> <p><a href=\"http://grifoninfo.ru/kultplace/khram-aleksandra-nevskogo\">Подробнее</a>.</p>"}, "id": 3}
]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment