Ryan Clark rclark

## index.html
<!doctype html>
<html>
    <head>
        <title>grid-interaction</title>
        <script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script>
        <link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css' rel='stylesheet' />
        <style>
            html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
        </style>
    </head>

## Issues.md

      
              3 files
            
          
              35 forks
            
          
              62 comments
            
          
              91 stars
            
          
                rclark
                / Issues.md
            
            
              Last active
              January 28, 2024 01:18
            
              
                Leaflet WMS + GetFeatureInfo
              
          
    There are a bunch of reasons why this is convoluted, mostly in building the URL to make the request:

You have to rely on an AJAX request, this example uses jQuery
To make a GetFeatureInfo request, you must provide a BBOX for a image, and the pixel coordinates for the part of the image that you want info from. A couple of squirrely lines of Leaflet code can give you that.
Output formats. The info_format parameter in the request. We don't know a priori which will be supported by a WMS that we might make a request to. See Geoserver's docs for what formats are available from Geoserver. That won't be the same from WMS to WMS, however.
WMS services return XML docs when there's a mistake in the request or in processing. This sends an HTTP 200, which jQuery doesn't think is an error.


## L.Composite.js
L.Composite = L.Class.extend({
  includes: L.Mixin.Events,

  initialize: function (options) {
    // options should include:
    //  - tileUrl: A URL template for this layer's visible representation
    //  - tileOptions (optional): Any [config options for the L.TileLayer](http://leafletjs.com/reference.html#tilelayer-options)
    //  - geojsonUrl: A URL that retrieves GeoJSON data for this layer as a FeatureCollection,
    //      or a [Github blob API call](http://developer.github.com/v3/git/blobs/#get-a-blob)
    //  - geojsonOptions (optional): [Config options for the L.GeoJSON layer](http://leafletjs.com/reference.html#geojson-options)

## demo.js
// [Official documentation](https://github.com/mbostock/d3/wiki/Selections)

// Some "data". These might be "models" in your app.
// D3 always wants an array of data, since no one likes
//   to say "datum".
var data = [
  {
    id: "first",
    name: "This is the First",
    description: "This is a description of the first.",

## schema.js
var _ = require('underscore');

module.exports = function (additionals, overrides) {
  additionals = _.isArray(additionals) ? additionals : [];
  overrides = _.isObject(overrides) ? overrides : {};

  function conditional (field) {
    return _.contains(additionals, field);
  }


## metadata.json
{
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
        }
    },
    "geometry": {
        "type": "polygon",
        "coordinates": [

## email-that-isnt-spam
You've got 1M points in your system. Here are the places where that's going to bottleneck you:

- Asking Geoserver for WMS or WFS results is going to mean pulling those 1M points from the database and then running them through a pipeline that results in either a) a large XML document (WFS) or b) an image (WMS). In both cases, query results will be held in memory on the server until the processing is complete.

- There is probably much less processing involved in building the XML doc than there is to render the image. However, the next step in the process is sending the result to the client. The XML doc will be huge (either in the "shortened" content model form, or the enormous flat form you mention). It will take forever to get across the wire, and you'll probably start timing out in various parts of the pipeline.

- The data arrives at the client's web browser. In the case of the WMS request, you're fine, because its a little file and a minimal amount of processing required to draw that image on the map. In

## make-the-connection.js
function mblConnect() {
    var $cont = $('#connect'),
        $site = $('#site'),
        isOpen = false,
        $overlay = $('<div id="mbl-overlay" class="mbl-overlay js-connect-btn" />'),

        dropdown = {
            enable: function () {
                var $btns = getBtns();
                $btns.off().on('click', clicked);

## option1.js
function MyThing() {
    var theThing = new Thing();
    theThing.privateMethod();
    return theThing;
}

// Somewhere else...

var whatIWant = MyThing();

## segment-page.js
trailguide.models.segment('segment-2').fetch({
  success: function(segment, response, xhr) {
    var butt = new trailguide.views.details({
      model: segment,
      el: '#details'
    });
    butt.render();
  }
});
	<!doctype html>
	<html>
	<head>
	<title>grid-interaction</title>
	<script src='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.js'></script>
	<link href='http://api.tiles.mapbox.com/mapbox.js/v1.6.0/mapbox.css' rel='stylesheet' />
	<style>
	html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; }
	</style>
	</head>
	L.Composite = L.Class.extend({
	includes: L.Mixin.Events,

	initialize: function (options) {
	// options should include:
	// - tileUrl: A URL template for this layer's visible representation
	// - tileOptions (optional): Any [config options for the L.TileLayer](http://leafletjs.com/reference.html#tilelayer-options)
	// - geojsonUrl: A URL that retrieves GeoJSON data for this layer as a FeatureCollection,
	// or a [Github blob API call](http://developer.github.com/v3/git/blobs/#get-a-blob)
	// - geojsonOptions (optional): [Config options for the L.GeoJSON layer](http://leafletjs.com/reference.html#geojson-options)
	// [Official documentation](https://github.com/mbostock/d3/wiki/Selections)

	// Some "data". These might be "models" in your app.
	// D3 always wants an array of data, since no one likes
	// to say "datum".
	var data = [
	{
	id: "first",
	name: "This is the First",
	description: "This is a description of the first.",
	var _ = require('underscore');

	module.exports = function (additionals, overrides) {
	additionals = _.isArray(additionals) ? additionals : [];
	overrides = _.isObject(overrides) ? overrides : {};

	function conditional (field) {
	return _.contains(additionals, field);
	}
	{
	"crs": {
	"type": "name",
	"properties": {
	"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
	}
	},
	"geometry": {
	"type": "polygon",
	"coordinates": [
	You've got 1M points in your system. Here are the places where that's going to bottleneck you:

	- Asking Geoserver for WMS or WFS results is going to mean pulling those 1M points from the database and then running them through a pipeline that results in either a) a large XML document (WFS) or b) an image (WMS). In both cases, query results will be held in memory on the server until the processing is complete.

	- There is probably much less processing involved in building the XML doc than there is to render the image. However, the next step in the process is sending the result to the client. The XML doc will be huge (either in the "shortened" content model form, or the enormous flat form you mention). It will take forever to get across the wire, and you'll probably start timing out in various parts of the pipeline.

	- The data arrives at the client's web browser. In the case of the WMS request, you're fine, because its a little file and a minimal amount of processing required to draw that image on the map. In
	function mblConnect() {
	var $cont = $('#connect'),
	$site = $('#site'),
	isOpen = false,
	$overlay = $('<div id="mbl-overlay" class="mbl-overlay js-connect-btn" />'),

	dropdown = {
	enable: function () {
	var $btns = getBtns();
	$btns.off().on('click', clicked);
	function MyThing() {
	var theThing = new Thing();
	theThing.privateMethod();
	return theThing;
	}

	// Somewhere else...

	var whatIWant = MyThing();
	trailguide.models.segment('segment-2').fetch({
	success: function(segment, response, xhr) {
	var butt = new trailguide.views.details({
	model: segment,
	el: '#details'
	});
	butt.render();
	}
	});