openstreetmap-website/app/views/browse/start.js.erb at bad28a6478fb5c96b438c18de1b1d90a456c7e6c · openstreetmap/openstreetmap-website

Newer

Older

Raw Normal view History

100644 545 lines (425 sloc) 16 KB

Switch from Prototype to jQuery

November 21, 2011 09:15

var browseBoxControl;

var browseMode = "auto";

var browseBounds;

var browseFeatureList;

var browseActiveFeature;

var browseDataLayer;

var browseSelectControl;

var browseObjectList;

var areasHidden = false;

OpenLayers.Feature.Vector.style['default'].strokeWidth = 3;

OpenLayers.Feature.Vector.style['default'].cursor = "pointer";

function startBrowse() {

map.dataLayer.active = true;

$("#sidebar_title").html("<%=j t 'browse.start_rjs.data_frame_title' %>");

$("#sidebar_content").html("<%=j render :partial => "sidebar" %>");

openSidebar({ onclose: stopBrowse });

var vectors = new OpenLayers.Layer.Vector();

  browseBoxControl = new OpenLayers.Control.DrawFeature(vectors, OpenLayers.Handler.RegularPolygon, { 

handlerOptions: {

sides: 4,

snapAngle: 90,

irregular: true,

persist: true

}

});

browseBoxControl.handler.callbacks.done = endDrag;

map.addControl(browseBoxControl);

Rename showData to updateData in start.js.erb to resolve name clash

March 30, 2012 23:15

map.events.register("moveend", map, updateData);

Switch from Prototype to jQuery

November 21, 2011 09:15

map.events.triggerEvent("moveend");

$("#browse_select_box").click(startDrag);

$("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");

$("#browse_hide_areas_box").show();

$("#browse_hide_areas_box").click(hideAreas);

}

Rename showData to updateData in start.js.erb to resolve name clash

March 30, 2012 23:15

function updateData() {

Switch from Prototype to jQuery

November 21, 2011 09:15

if (browseMode == "auto") {

if (map.getZoom() >= 15) {

useMap(false);

} else {

setStatus("<%=j t 'browse.start_rjs.zoom_or_select' %>");

}

function stopBrowse() {

if (map.dataLayer.active) {

map.dataLayer.active = false;

if (browseSelectControl) {

browseSelectControl.destroy();

browseSelectControl = null;

}

if (browseBoxControl) {

browseBoxControl.destroy();

browseBoxControl = null;

}

if (browseActiveFeature) {

browseActiveFeature.destroy();

browseActiveFeature = null;

}

if (browseDataLayer) {

browseDataLayer.destroy();

browseDataLayer = null;

}

map.dataLayer.setVisibility(false);

Rename showData to updateData in start.js.erb to resolve name clash

March 30, 2012 23:15

map.events.unregister("moveend", map, updateData);

Switch from Prototype to jQuery

November 21, 2011 09:15

}

function startDrag() {

$("#browse_select_box").html("<%=j t 'browse.start_rjs.drag_a_box' %>");

browseBoxControl.activate();

return false;

}

function useMap(reload) {

var bounds = map.getExtent();

var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);

if (!browseBounds || !browseBounds.containsBounds(projected)) {

var center = bounds.getCenterLonLat();

var tileWidth = bounds.getWidth() * 1.2;

var tileHeight = bounds.getHeight() * 1.2;

100

var tileBounds = new OpenLayers.Bounds(center.lon - (tileWidth / 2),

101

center.lat - (tileHeight / 2),

102

center.lon + (tileWidth / 2),

103

center.lat + (tileHeight / 2));

104

105

browseBounds = tileBounds;

106

getData(tileBounds, reload);

107

108

browseMode = "auto";

109

110

$("#browse_select_view").hide();

111

}

112

113

return false;

114

}

115

116

function hideAreas() {

117

$("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.show_areas' %>");

118

$("#browse_hide_areas_box").show();

119

$("#browse_hide_areas_box").click(showAreas);

120

121

areasHidden = true;

122

123

useMap(true);

124

}

125

126

function showAreas() {

127

$("#browse_hide_areas_box").html("<%=j t 'browse.start_rjs.hide_areas' %>");

128

$("#browse_hide_areas_box").show();

129

$("#browse_hide_areas_box").click(hideAreas);

130

131

areasHidden = false;

132

133

useMap(true);

134

}

135

136

$("#browse_select_view").click(useMap);

137

138

function endDrag(bbox) {

139

var bounds = bbox.getBounds();

140

var projected = bounds.clone().transform(map.getProjectionObject(), epsg4326);

141

142

browseBoxControl.deactivate();

143

browseBounds = projected;

144

getData(bounds);

145

146

browseMode = "manual";

147

148

$("#browse_select_box").html("<%=j t 'browse.start_rjs.manually_select' %>");

149

$("#browse_select_view").show();

150

}

151

152

function displayFeatureWarning() {

153

clearStatus();

154

155

var div = document.createElement("div");

156

157

var p = document.createElement("p");

158

  p.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.loaded_an_area_with_num_features' %>", { num_features: browseFeatureList.length })));

159

div.appendChild(p);

160

161

var input = document.createElement("input");

162

input.type = "submit";

163

input.value = "<%=j t 'browse.start_rjs.load_data' %>";

164

input.onclick = loadFeatureList;

165

div.appendChild(input);

166

167

$("#browse_content").html("");

168

$("#browse_content").append(div);

169

}

170

171

function loadFeatureList() {

172

browseDataLayer.addFeatures(browseFeatureList);

173

browseDataLayer.events.triggerEvent("loadend");

174

175

browseFeatureList = [];

176

177

return false;

178

}

179

180

function customDataLoader(request) {

181

if (this.map.dataLayer.active) {

182

var doc = request.responseXML;

183

184

if (!doc || !doc.documentElement) {

185

doc = request.responseText;

186

}

187

188

var options = {};

189

190

OpenLayers.Util.extend(options, this.formatOptions);

191

192

if (this.map && !this.projection.equals(this.map.getProjectionObject())) {

193

options.externalProjection = this.projection;

194

options.internalProjection = this.map.getProjectionObject();

195

}

196

197

    var gml = this.format ? new this.format(options) : new OpenLayers.Format.GML(options);

198

199

browseFeatureList = gml.read(doc);

200

201

if (!this.maxFeatures || browseFeatureList.length <= this.maxFeatures) {

202

loadFeatureList();

203

} else {

204

displayFeatureWarning();

205

}

206

}

207

}

208

209

function getData(bounds, reload) {

210

  var projected = bounds.clone().transform(new OpenLayers.Projection("EPSG:900913"), new OpenLayers.Projection("EPSG:4326"));

211

var size = projected.getWidth() * projected.getHeight();

212

213

if (size > <%= MAX_REQUEST_AREA %>) {

214

    setStatus(i18n("<%=j t 'browse.start_rjs.unable_to_load_size', :max_bbox_size => MAX_REQUEST_AREA %>", { bbox_size: size }));

215

} else {

216

loadGML("/api/<%= API_VERSION %>/map?bbox=" + projected.toBBOX(), reload);

217

}

218

}

219

220

function loadGML(url, reload) {

221

setStatus("<%=j t 'browse.start_rjs.loading' %>");

222

223

$("#browse_content").empty();

224

225

var formatOptions = {

226

checkTags: true,

227

    interestingTagsExclude: ['source','source_ref','source:ref','history','attribution','created_by','tiger:county','tiger:tlid','tiger:upload_uuid']

228

};

229

230

if (areasHidden) formatOptions.areaTags = [];

231

232

if (!browseDataLayer || reload) {

233

var style = new OpenLayers.Style();

234

235

style.addRules([new OpenLayers.Rule({

236

symbolizer: {

237

Polygon: { fillColor: '#ff0000', strokeColor: '#ff0000' },

238

Line: { fillColor: '#ffff00', strokeColor: '#000000', strokeOpacity: '0.4' },

239

Point: { fillColor: '#00ff00', strokeColor: '#00ff00' }

240

}

241

})]);

242

243

if (browseDataLayer) browseDataLayer.destroyFeatures();

244

245

browseDataLayer = new OpenLayers.Layer.GML("Data", url, {

246

format: OpenLayers.Format.OSM,

247

formatOptions: formatOptions,

Use browser detection to decide how many features to show

June 5, 2012 12:59

248

maxFeatures: <%= @max_features %>,

Switch from Prototype to jQuery

November 21, 2011 09:15

249

requestSuccess: customDataLoader,

250

displayInLayerSwitcher: false,

251

styleMap: new OpenLayers.StyleMap({

252

'default': style,

253

'select': { strokeColor: '#0000ff', strokeWidth: 8 }

254

})

255

});

256

browseDataLayer.events.register("loadend", browseDataLayer, dataLoaded );

257

map.addLayer(browseDataLayer);

258

259

    browseSelectControl = new OpenLayers.Control.SelectFeature(browseDataLayer, { onSelect: onFeatureSelect });

260

browseSelectControl.handlers.feature.stopDown = false;

261

browseSelectControl.handlers.feature.stopUp = false;

262

map.addControl(browseSelectControl);

263

browseSelectControl.activate();

264

} else {

265

browseDataLayer.destroyFeatures();

266

browseDataLayer.format(formatOptions);

267

browseDataLayer.setUrl(url);

268

}

269

270

browseActiveFeature = null;

271

}

272

273

function dataLoaded() {

274

if (this.map.dataLayer.active) {

275

clearStatus();

276

277

browseObjectList = document.createElement("div");

278

279

var heading = document.createElement("p");

280

heading.className = "browse_heading";

281

    heading.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.heading' %>"));

282

browseObjectList.appendChild(heading);

283

284

var list = document.createElement("ul");

285

286

for (var i = 0; i < this.features.length; i++) {

287

var feature = this.features[i];

288

289

// Type, for linking

290

var type = featureType(feature);

291

var typeName = featureTypeName(feature);

292

var li = document.createElement("li");

293

li.appendChild(document.createTextNode(typeName + " "));

294

295

// Link, for viewing in the tab

296

var link = document.createElement("a");

297

link.href = "/browse/" + type + "/" + feature.osm_id;

298

var name = featureName(feature);

299

link.appendChild(document.createTextNode(name));

300

link.feature = feature;

301

link.onclick = OpenLayers.Function.bind(viewFeatureLink, link);

302

li.appendChild(link);

303

304

list.appendChild(li);

305

}

306

307

browseObjectList.appendChild(list);

308

309

var link = document.createElement("a");

310

link.href = this.url;

311

    link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.api' %>"));

312

browseObjectList.appendChild(link);

313

314

$("#browse_content").html(browseObjectList);

315

}

316

}

317

318

function viewFeatureLink() {

319

var layer = this.feature.layer;

320

321

for (var i = 0; i < layer.selectedFeatures.length; i++) {

322

var f = layer.selectedFeatures[i];

323

layer.drawFeature(f, layer.styleMap.createSymbolizer(f, "default"));

324

}

325

326

onFeatureSelect(this.feature);

327

328

if (browseMode != "auto") {

329

map.setCenter(this.feature.geometry.getBounds().getCenterLonLat());

330

}

331

332

return false;

333

}

334

335

function loadObjectList() {

336

$("#browse_content").empty();

337

$("#browse_content").append(browseObjectList);

338

339

return false;

340

}

341

342

function onFeatureSelect(feature) {

343

// Unselect previously selected feature

344

if (browseActiveFeature) {

345

browseActiveFeature.layer.drawFeature(

346

browseActiveFeature,

347

      browseActiveFeature.layer.styleMap.createSymbolizer(browseActiveFeature, "default")

348

);

349

}

350

351

// Redraw in selected style

352

feature.layer.drawFeature(

353

feature, feature.layer.styleMap.createSymbolizer(feature, "select")

354

);

355

356

  // If the current object is the list, don't innerHTML="", since that could clear it.

357

if ($("#browse_content").firstChild == browseObjectList) {

358

$("#browse_content").removeChild(browseObjectList);

359

} else {

360

$("#browse_content").empty();

361

}

362

363

// Create a link back to the object list

364

var div = document.createElement("div");

365

div.style.textAlign = "center";

366

div.style.marginBottom = "20px";

367

$("#browse_content").append(div);

368

var link = document.createElement("a");

369

link.href = "#";

370

link.onclick = loadObjectList;

371

  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.back' %>"));

372

div.appendChild(link);

373

374

var table = document.createElement("table");

375

table.width = "100%";

376

table.className = "browse_heading";

377

$("#browse_content").append(table);

378

379

var tr = document.createElement("tr");

380

table.appendChild(tr);

381

382

var heading = document.createElement("td");

383

heading.appendChild(document.createTextNode(featureNameSelect(feature)));

384

tr.appendChild(heading);

385

386

var td = document.createElement("td");

387

td.align = "right";

388

tr.appendChild(td);

389

390

var type = featureType(feature);

391

var link = document.createElement("a");

392

link.href = "/browse/" + type + "/" + feature.osm_id;

393

  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.object_list.details' %>"));

394

td.appendChild(link);

395

396

var div = document.createElement("div");

397

div.className = "browse_details";

398

399

$("#browse_content").append(div);

400

401

// Now the list of attributes

402

var ul = document.createElement("ul");

403

for (var key in feature.attributes) {

404

var li = document.createElement("li");

405

var b = document.createElement("b");

406

b.appendChild(document.createTextNode(key));

407

li.appendChild(b);

408

li.appendChild(document.createTextNode(": " + feature.attributes[key]));

409

ul.appendChild(li);

410

}

411

412

div.appendChild(ul);

413

414

var link = document.createElement("a");

415

link.href = "/browse/" + type + "/" + feature.osm_id + "/history";

416

  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.show_history' %>"));

417

link.onclick = OpenLayers.Function.bind(loadHistory, {

418

type: type, feature: feature, link: link

419

});

420

421

div.appendChild(link);

422

423

// Stash the currently drawn feature

424

browseActiveFeature = feature;

425

}

426

427

function loadHistory() {

428

this.link.href = "";

429

this.link.innerHTML = "<%=j t 'browse.start_rjs.wait' %>";

430

Use jQuery syntax for the history request

December 2, 2011 11:03

431

  $.ajax("/api/<%= API_VERSION %>/" + this.type + "/" + this.feature.osm_id + "/history", {

432

complete: OpenLayers.Function.bind(displayHistory, this)

Switch from Prototype to jQuery

November 21, 2011 09:15

433

});

434

435

return false;

436

}

437

438

function displayHistory(request) {

439

  if (browseActiveFeature.osm_id != this.feature.osm_id || $("#browse_content").firstChild == browseObjectList)  { 

440

return false;

441

}

442

443

this.link.parentNode.removeChild(this.link);

444

445

var doc = request.responseXML;

446

447

var table = document.createElement("table");

448

table.width = "100%";

449

table.className = "browse_heading";

450

$("#browse_content").append(table);

451

452

var tr = document.createElement("tr");

453

table.appendChild(tr);

454

455

var heading = document.createElement("td");

456

  heading.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.history_for_feature' %>", { feature: featureNameHistory(this.feature) })));

457

tr.appendChild(heading);

458

459

var td = document.createElement("td");

460

td.align = "right";

461

tr.appendChild(td);

462

463

var link = document.createElement("a");

464

link.href = "/browse/" + this.type + "/" + this.feature.osm_id + "/history";

465

  link.appendChild(document.createTextNode("<%=j t 'browse.start_rjs.details' %>"));

466

td.appendChild(link);

467

468

var div = document.createElement("div");

469

div.className = "browse_details";

470

471

var nodes = doc.getElementsByTagName(this.type);

472

var history = document.createElement("ul");

473

for (var i = nodes.length - 1; i >= 0; i--) {

474

    var user = nodes[i].getAttribute("user") || "<%=j t 'browse.start_rjs.private_user' %>";

475

var timestamp = nodes[i].getAttribute("timestamp");

476

var item = document.createElement("li");

477

    item.appendChild(document.createTextNode(i18n("<%=j t 'browse.start_rjs.edited_by_user_at_timestamp' %>", { user: user, timestamp: timestamp })));

478

history.appendChild(item);

479

}

480

div.appendChild(history);

481

482

$("#browse_content").append(div);

483

}

484

485

function featureType(feature) {

486

if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point") {

487

return "node";

488

} else {

489

return "way";

490

}

491

}

492

493

function featureTypeName(feature) {

494

if (featureType(feature) == "node") {

495

return "<%=j t 'browse.start_rjs.object_list.type.node' %>";

496

} else if (featureType(feature) == "way") {

497

return "<%=j t 'browse.start_rjs.object_list.type.way' %>";

498

}

499

}

500

501

function featureName(feature) {

502

if (feature.attributes['name:<%= I18n.locale %>']) {

503

return feature.attributes['name:<%= I18n.locale %>'];

504

} else if (feature.attributes.name) {

505

return feature.attributes.name;

506

} else {

507

return feature.osm_id;

508

}

509

}

510

511

function featureNameSelect(feature) {

512

if (feature.attributes['name:<%= I18n.locale %>']) {

513

return feature.attributes['name:<%= I18n.locale %>'];

514

} else if (feature.attributes.name) {

515

return feature.attributes.name;

516

} else if (featureType(feature) == "node") {

517

    return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.node' %>", { id: feature.osm_id });

518

} else if (featureType(feature) == "way") {

519

    return i18n("<%=j t 'browse.start_rjs.object_list.selected.type.way' %>", { id: feature.osm_id });

520

}

521

}

522

523

function featureNameHistory(feature) {

524

if (feature.attributes['name:<%= I18n.locale %>']) {

525

return feature.attributes['name:<%= I18n.locale %>'];

526

} else if (feature.attributes.name) {

527

return feature.attributes.name;

528

} else if (featureType(feature) == "node") {

529

    return i18n("<%=j t 'browse.start_rjs.object_list.history.type.node' %>", { id: feature.osm_id });

530

} else if (featureType(feature) == "way") {

531

    return i18n("<%=j t 'browse.start_rjs.object_list.history.type.way' %>", { id: feature.osm_id });

532

}

533

}

534

535

function setStatus(status) {

536

$("#browse_status").html(status);

537

$("#browse_status").show();

538

}

539

540

function clearStatus() {

541

$("#browse_status").html("");

542

$("#browse_status").hide();

543

}

544

545

startBrowse();