Wednesday, February 27, 2013

mcMapper

mcMapper (Michael Cornetto mapper) is a client side GIS application I created to allow a user to mash-up maps from disparate sources.  It’s still in it’s early stages but it’s a great example of what can be done with Ext JS and OpenLayers.

I went for a very stark interface.  To pan around the map, click the map and drag.  To zoom in and out of the map, use the mouse wheel.   In the illustration below, I’m zoomed in around Mesquite, Texas.

 

You can change the background map by clicking an unselected radio button in the Base category of the Layers sidebar.

As a note, the sidebar is split from the map and may be resized  by adjusting the splitter bar or collapsed by clicking on the arrow mid-way down the splitter bar.

If you want to add additional layers to the drawing, check the checkbox for that layer.  In the example below I am adding Mesquite Texas Parks.   This data is served directly from the Mesquite Texas web site,  http://www.cityofmesquite.com/.

Features from any vector layer added may be selected.  Click the map over a park.  A menu will be presented containing the names of the parks near the mouse cursor.  In the Mesquite Texas Park layer, these names are actually numbers.

Select the park of interest and the supplied attributes for that park will be displayed.  In the example below, I’ve selected park # 49.

The properties dialogue is pinned to the position.  Move the map around and the dialogue moves with it.  Either click the close button on the top right or select another feature to close the properties dialogue. 

When you leave the site and then return, the map you’ve created will be remembered. 

That’s it for now.  In the future additional functionality, such as drawing and adding and removing layers, will be added.

Friday, February 1, 2013

mclib–my personal javascript library

Though there are plenty of libraries that do many things for the average javascript programmer, there’s always things they don’t seem to do.  Or maybe they do the function but not quite the way you want.  Either way, there’s always going to be need for you to write some functions that you use time and again. This is my library of those functions, Michael Cornetto’s library, mclib.  You can find the documentation for it here.

Download mclib.zip

It’s a bit small at the moment because I threw it together specifically to support Process Lists and Pouches but it will be added to in the future.  Currently it contains four namespaces and classes.

  • object: Contains object related functions like merge.
  • Event: A simple generic Event object.
  • pouch: A contained piece of passable storage that can be destroyed once used.
  • ProcessList: A list of processes that will be executed asynchronously but in order . 

mclib.pouch

Pouches are pieces of storage (an object) that is destroyable once used.  This isn’t strictly necessary when using javascript but when writing a large application in javascript every piece of information you don’t need, that you can clear from memory, is helpful. 

I find pouches useful when using ExtJS windows. Here’s one example of how I would use them.  In this example both the window and the pouch are destroyed when the close button is clicked.

        var pouch = mclib.pouch.get();
pouch.pop =
new Ext.Window({
buttons: [{
text:
"Close",
handler:
function (button, event) {
pouch.destroy({ close: pop });
}
}],
listeners: {
close:
function (panel) {
if (!pouch.destroying) {
pouch.destroy();
}
}
}
});

mclib.ProcessList


A Process List is a list of processes that will be executed asynchronously but in order.  This is useful if performing involved calculations on each item in an array of objects.   I find pouches useful when using OpenLayers.  Here’s an example that iterates through all the features on a layer and performs calculations on each feature.

        var list = new mclib.ProcessList();

list.progress.addHandler(
function (argsObj) {
//use argsObj.processed (number processed)
//to update your progress bar.
});

for (var i = 0, l = layer.features.length; i < l; i++) {
list.add(calculate, { feature: layer.features[i] });
}

function calculate(argsObj) {
//use argsObj.feature to access the feature
//then calculate away...
}

Because of IE’s design, Process Lists work better in Chrome than in IE. 


If you do decide to use this library please remember this is a first release.  If you have any problems, let me know.